老田講座 講師 : 田甜甜 RITA TEACHING 基礎 HTML-CSS v.5 Email: rita.design@gmail.com ENTER http://tutorial.jumpdesign.tw/
WEB STRUCTURE\ 網頁基本概念 HTML 基本架構 : ( 分層逐步提升 ) HTML 超文件標示語言 ( 文件內容架構 ) 內容優先設計 ( 逐步提升的第一分層 ) CSS 層疊樣式表 ( 外觀呈現 ) JavaScript 行為腳本 ( 動態效果 ) 網頁執行結構 : 請求網頁 HTML: 瀏覽器 回應 html 網頁 伺服器 請求網頁 JavaScript: 瀏覽器 回應 html 網頁 伺服器 請求網頁 PHP ASP: 瀏覽器 回應 html 網頁 伺服器
HTML TAG\ web 建站基本觀念 1 網站根目錄( 資料夾 ) 中, 不論是網頁名稱或是圖片名稱, 所有檔名均不可有中文 2 一般伺服器會自動搜尋以下檔案名稱, 將其預設為首頁 一般預設首頁檔名如下 : ( 首頁可設定為以下之一檔名 ) default.htm index.html index.htm index.php default.php index.php3 目前最常使用之檔案名稱為 index 而網站其他內頁檔名, 可依照頁面內容命名, 如 : 關於我們:about.html 另外提醒, 若網頁名稱需要用到編號或二個單字組合, 如 : page_1.html about_us.html... 盡量不要用 - 符號, 而是使用 _ 底線符號, _ 底線符號是公認的命名接受符號( 較安全 ) - 符號則可能被認為是特殊符號或減號而不小心產生錯誤 3 網站根目錄中, 建議建立 影像存放目錄 收集網站影像檔案, 一般命名為 images WEB STRUCTURE\ 網站資料夾結構 網站專案名稱 images logo.png banner.jpg button.gif index.html about.html service.html
WEB STRUCTURE\ 網頁基本結構 document 它提供了一個文件 ( 樹 ) 的結構化表示法, 並定義讓程式可以存取並改變文件架構 風格和內容的方法 html head body title script form ul input input li HTML 基本架構 : <!DOCTYPE> 文件類型宣告, 告訴瀏覽器使用的 HTML 版本 <html> 網頁 html 根元素 <head> 網頁檔頭區 <meta> 網頁資訊定義 <title>...</title> 網頁標題 <style>...</style> css 樣式 <script>...</script> javascript 語法 </head> <body> 網頁主體內容 </body> </html>
HTML NOTES\ html 注意事項 1 建議使用英文小寫字 2 需要結尾標籤來封閉標籤元素 3 注意巢狀標籤結尾標籤位置 4 均有預設樣式以呈現在網頁上 5 不同標籤均有特定的屬性 6 定義網頁使用的 DOCTYPE 版本 7 定義使用的網頁編碼( 如 :UTF-8) 8 使用雙引號 設定標籤屬性值 HTML META\ meta 常用屬性 html5:<meta charset="utf-8"> 舊版 :<meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="description" content=" 網頁簡述 "> <meta name="keywords" content=" 網頁關鍵字 "> <meta name="author" content=" 作者名稱 "> <meta name="company" content=" 公司名稱 "> <meta name="generator" content=" 開發工具 "> <meta name="copyright" content=" 版權宣告 "> <meta name="distribution" content="taiwan"> // 網站發佈地 <meta name="creation-date" content="01-jan-2020 20:40:01"> // 網頁完成時間 Open Graph Protocol 開放圖形協議 <meta property="og:title" content=" 文章標題 "> <meta property="og:site_name" content=" 網站名稱 "> <meta property="og:type" content="article"> og:type 可設定的完整列表 :http://developers.facebook.com/docs/opengraph#extra-data <meta property="og:url" content="http://example.com/example-title-of-article"> <meta property="og:image" content="http://example.com/article_thumbnail.jpg"> <meta property="og:image" content="http://example.com/website_logo.png"> <meta property="og:description" content=" 分享文章描述 ">
行內元素塊狀元素網頁常用單位 表格元素HTML TAG\ html 常用標籤元素 <!- - 註解 - -> 網頁檔案 <html></html> 網頁檔頭 <head></head> 網頁定義 <meta /> 網頁標題 <title> </title> CSS 樣式 <style> </style> 腳本程式碼 <script></script> 文字參數 <font></font> 表格 <table> </table> 表格標題 <th> </th> 列 <tr> </tr> 欄 <td> </td> 超連結 <a> </a> 區塊 <span></span> 區塊 <div> </div> 標題 1~6 <h1> </h1> <h6> </h6> 項目清單 <ul> </ul> 清單列表 <li> </li> 段落 <p> </p> (enter) 換行 <br />(shift + enter) 分隔線 <hr/> 影像 <img: xxxxxxxx /> 網頁段落文字應該落在 15~20 點之間, 大部分的瀏覽器預設值是 16 點 絕對單位 px pt pixels( 像素 ), 固定尺寸大小 point( 點 ), 會根據螢幕解析度來決定 point 大小 相對單位 em % dp/dip sp 以 body 比例換算, 預設 body 文字尺寸為 16px, 即 16px=1em 以百分比做為比例尺寸, 預設 body 文字尺寸為 16px, 即 16px=100% 對應到在 160 dpi 的螢幕上的幾個像素 1 dp = 1/160 in dp = px * dpi / 160 px = dp* dpi / 160 對應在 160 dpi 的螢幕上的幾個 pt 在 android 中, 文字大小應使用 sp 而非 pt sp = pt * dpi / 160 pt = sp* dpi / 160
HTML&CSS\ HTML 與 CSS HTML <!-- 註解內容 --> CSS /* 註解內容 */ 全標籤 : * { margin:0; padding:0; <boby></boby> <div id="logo"></div> <p class="style_1"></p> <span class="abc"></span> #box.photo.title <div id="box"> <div class="photo"></div> <div class="title"></div> </div> 標籤 ( 元素 ) 選擇器 : div { background:#000000; /* 選擇所有 html 文件裡的所有 div 元素 */ id 選擇器 :// 以 # 井號做為開頭 #banner{ width:333px; height:100px; class 類別選擇器 :// 以. 點號做為開頭.style_1{ font-size=1em; css 偽類別 ( 虛擬類別 ): a:link{ color:blue; a:visited{ color:blue; a:hover{ color:yellow; a:active{ color:orange; 群組選擇器 : h1,h2,h3{ color: red; /* 同時設定多個元素 */ 複合條件選擇器 : span.abc{ color:#cccccc; /* 設定所有套用.abc 類別的 span 元素 */ 階層選擇器 : #box.photo{ width:350px; height:300px; /* 設定 #box 裡面的.photo 類別 */
CSS BOX MODEL\ CSS 盒子模型 Box Model 尺寸為以下三項屬性的總合 Box Model 尺寸, 包含有三項特定屬性組合 1 margin : 外距 ( 間距 ) - 框與框之間的距離 2 border: 邊框 3 padding: 內距 - 框與內容 ( 圖文 ) 之間的距離 margin border padding content margin-top: 10px; margin-right: 5px; margin-bottom: 15px; margin-left: 20px; margin: 10px 5px 15px 20px; ( 上, 右, 下, 左 - 順時針方向 ) margin: 10px 15px 20px; ( 上, 左右, 下 ) margin: 10px 20px; ( 上下, 左右 ) padding-top: 10px; padding-right: 5px; padding-bottom: 15px; paddingleft: 20px; padding: 10px 5px 15px 20px; ( 上, 右, 下, 左 - 順時針方向 ) padding: 10px 15px 20px; ( 上, 左右, 下 ) padding: 10px 20px; ( 上下, 左右 ) border-width: 5px; border-style: solid; border-color: #0000FF; border: #0000FF 5px solid;
CSS TYPESETTING\ CSS 排版 float:left; display:inline-block; 文檔流 脫離文檔流 周圍元素環繞 在文檔流內, 並保留塊狀特性 周圍元素不會環繞 水平位置 父元素設定 text-align:center, 無法使子元素水平居中 父元素設定 text-align:center, 可使子元素水平居中 垂直位置 默認值 : 緊貼頂部 vertical-align 無效 默認值 : 基線對齊 vertical-align 有效 float:left; display:inline-block;
CSS POSITION\ CSS 定位元素 HTML 語法 : <div id="box1"> #box1 <div id="box2">#box2</div> </div> <div id="box3">#box3</div> static #box1 { background-color: #74bbc9; position: static; left: 100px; top: 100px; #box2 { background-color: #ed7a63; position: static; left: 50px; top: 50px; #box3 { background-color: #9dd0a2; position: static; left: 80px; top: 80px; static ( 預設值 ) #box1 #box2 #box3 position: static; 不特別定位, 會依 HTML 排版配置呈現, 就算指定座標位置也不會有作用 畫面在捲動時, 元素還是會隨著頁面捲動 relative #box1 { background-color: #74bbc9; position: relative; left: 100px; top: 100px; #box2 { background-color: #ed7a63; position: relative; left: 50px; top: 50px; #box3 { background-color: #9dd0a2; position: relative; left: 80px; top: 80px; relative ( 相對定位 ) #box1 #box3 #box2 沒有設定屬性時呈現方式和 static 一樣 設定座標位置後, 會依照指定座標定位 畫面在捲動時, 元素還是會隨著頁面捲動 #box1 沒有放在任何元素裡面, 因此其定位會以 <body> 元素為座標起點來定位 #box2 放在 #box1 裡面, 即 #box1 為父元素, #box2 為子元素,#box2 會以 #box1 作為定位目標來呈現位置 #box3 為獨立元素, 因 relative 不能排列, 因此會 #box1 向下推壓, 且並不會依照設定的定位去排列, 而產生錯誤排版
CSS POSITION\ CSS 定位元素 absolute fixed #box1 { background-color: #74bbc9; position: absolute; left: 100px; top: 100px; #box2 { background-color: #ed7a63; position: absolute; left: 50px; top: 50px; #box3 { background-color: #9dd0a2; position: absolute; left: 80px; top: 80px; #box3 #box1 #box2 #box1 { background-color: #74bbc9; position: fixed; left: 100px; top: 100px; #box2 { background-color: #ed7a63; position: fixed; left: 50px; top: 50px; #box3 { background-color: #9dd0a2; position: fixed; left: 80px; top: 80px; #box2 #box3 #box1 absolute ( 絕對定位 ) absolute 為浮動元素, 可重疊排版, 類似 photoshop 的圖層 畫面在捲動時, 元素還是會隨著頁面捲動 #box1 沒有放在任何元素裡面, 因此其定位會以 <body> 元素為座標起點來定位 fixed( 固定定位 ) fixed 元素其定位會以瀏灠器 (DOM) 為座標起點來定位 其不會跟著頁面捲動, 而會固定指定的位置 固定定位元素不會保留它原本在頁面應有的空間, 不會跟其他元素的配置互相干擾 #box2 放在 #box1 裡面, 即 #box1 為父元素, #box2 為子元素, 但因 absolute 並非可定位元素, 因此該元素的定位則會以 <body> 元素為座標起點來定位 #box3 為獨立元素, 該元素的定位也是以 <body> 元素為座標起點來定位 子元素 指定為依據 父元素 位置中的絕對位置, 則 子元素 可設定 position:absolute ( 絕對位置 ), 但 父元素 必須設定為 position:relative;
HTML LANG\ 網頁語系 <html> 可加入 lang= 標註網頁語系, 讓瀏覽器能更正確的解析與編碼網頁內容 依照 IETF(Internet Engineering Task Force 國際網路工程研究團隊 ) 的 RFC 4646 的 Tags for Identifying Languages 所定義 舊式的繁體中文為 :zh-tw 常用語言的標示法 ( 照字母排序 ): zh-hans 簡體中文 zh-hans-cn 大陸地區使用的簡體中文 zh-hans-hk 香港地區使用的簡體中文 zh-hans-mo 澳門使用的簡體中文 zh-hans-sg 新加坡使用的簡體中文 zh-hans-tw 臺灣使用的簡體中文 zh-hant 繁體中文 zh-hant-cn 大陸地區使用的繁體中文 zh-hant-hk 香港地區使用的繁體中文 zh-hant-mo 澳門使用的繁體中文 zh-hant-sg 新加坡使用的繁體中文 zh-hant-tw 臺灣使用的繁體中文其他舊式用法,PS: 不符合 RFC 4646 規範 END.