W3schools HTML-517

## Home W3schools提供許多功能，幫助使用者學習HTML * editor:可以編輯code並預覽結果（在網頁中點擊"Try it Yourself"） * example：提供200多個範例 * exercise：提供多種練習方式(選擇題、填空題等) * quiz：可以計時測驗學習成果(一次40題，會顯示總作答時間以及對的題數，可查看正確答案 ## Introduction HTML 是建立網頁的標準標記語言，為超文本標記語言，包含著很多元素 `<title>`：指定頁面標題(顯示在 browser 的標題獵獲頁籤上) [其他元素介紹](#basic) ```html <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> ``` ### HTML page structure ![image](https://hackmd.io/_uploads/SyStxUo51e.png) ## Editors 記事本或任何文字編輯器都能編寫HTML，存檔時類別要選所有格式`(*.*)`，檔名後方要加 .htm 或 .html，並設定編碼格式為**UTF-8**，點擊存檔後的檔案會在瀏覽器開啟結果頁面。 ## Basic ### Documents * 所有HTML文件都必須先寫聲明：`<!DOCTYPE html>` * `!DOCTYPE`表示文件類別，幫住瀏覽器正確的顯示頁面 * `<!DOCTYPE html>`只能出現一次，在頁面最上方(任何HTML tags前) * 不區分大小寫 * 文件本身要被`<html></html>`包住 * 可被顯示到網頁的內容會被放在`<body></body>`內 ### Headings 標題被定義成六種`<h1>`到`<h6>`，大小是由大到小，重要程度由高到低 ### Common elements * `<p>`文字段落 * `<a>`超連結 * 基礎寫法：`<a href="https://cs.ntcu.edu.tw/">cs websites</a>` * `href`：連結位置 * `<img>`圖片 * 基礎寫法：`<img src="cs.jpg" alt="cs icon" width="104" height="142">` * `src`圖片來源 * `alt`錯誤替代文字 * `width`、`height`設定長寬 ### View Source * Ctrl+U 或對網頁點右鍵->選檢視頁面來源，可以打開有網頁原始碼的頁面 * 對頁面上的元素點右鍵，選檢查能看元素是怎麼組成的(有HTML和CSS)，也可以即時編輯元素查看結果 ## Elements 大部分的HTML元素寫法為`<tagname>內容...</tagname>`。舉例： * `<h1>Heading</h1>` * `<p>paragraph</p>` 少數的HTML元素沒有內容，所以沒有end tag(格式：`<tagname>`)，這也被稱作**empty elements**。舉例： * `<br>` (換行) * `<img src="img_girl.jpg" alt="Girl in a jacket">` 元素可以用巢狀的方式擺放(元素可以包含其他元素)，一般的網頁就是由巢狀的HTML元素組成。 HTML不會區別大小寫，`<p>`的意思等同於`<P>`，但建議使用小寫，因為有些語法會嚴格要求小寫(如：XHTML)。 :::warning 不可跳過 end tag 有時沒寫 end tag 網頁仍會正常顯示，但可能會出現不預期的錯誤結果，所以不能忘記加 end tag ::: ## Lists 清單主要分為無序清單(Unordered List)、有序清單(Ordered List)，以及描述清單 (Description List)，分別用於列點、排序，以及解釋定義。 ### unordered lists 用於條列式內容，順序不重要。由`<ul></Ul>`包住整個無序清單，每一點用`<li></li>`包住以下是基礎架構： ``` html <ul> <li>coffee</li> <li>tea</li> <li>milk</li> </ul> ``` 列點的樣式為實心圓點(預設樣式)： <ul> <li>coffee</li> <li>tea</li> <li>milk</li> </ul> [如何更改樣式?-無序](#unordered-list) ### ordered lists 用於順序指引，適用於操作指引、排名列表等。由`<ol></ol>`包住整個有序清單，每一點用`<li></li>`包住以下是基礎架構： ``` html <ol> <li>coffee</li> <li>tea</li> <li>milk</li> </ol> ``` 列點的樣式為阿拉伯數字(預設樣式)： <ol> <li>coffee</li> <li>tea</li> <li>milk</li> </ol> [如何更改樣式?-有序](#ordered-list) :::spoiler list架構補充有序與無序清單皆能組成巢狀清單(nested lists)，基本結構如下： ``` html= <ol> <li>coffee <ul> <li>Americano</li> <li>Latte</li> </ul> </li> <li>tea <ul> <li>black tea</li> <li>green tea</li> </ul> </li> <li>milk</li> </ol> ``` 顯示結果： <ol> <li>coffee <ol> <li>Americano</li> <li>Latte</li> </ol> </li> <li>tea <ul> <li>black tea</li> <li>green tea</li> </ul> </li> <li>milk</li> </ol> ::: </span> ### description lists 用於定義詞彙或解釋字句，組成格式為標題+說明，適用於描述產品規格、FAQ等。由`<dl></dl>`包住整個有序清單，標題用`<dt></dt>`包住，說明用`<dd></dd>`包住以下是基礎架構： ``` html <dl> <dt>coffee</dt> <dd>- black hot drink</dd> <dt>milk</dt> <dd>- white cold drink</dd> </dl> ``` 顯示結果： <dl> <dt>coffee</dt> <dd>- black hot drink</dd> <dt>milk</dt> <dd>- white cold drink</dd> </dl> ### Style Modification 列點的樣式可透過`list-style-type` style屬性來變更。 #### unordered list 無序清單有四種形狀類別，分別是：實心圓點(disc)、空心圓點(circle)、實心方形(square)、不顯示(none)。以下是樣式顯示： <ul style="list-style-type:disc"> <li>disc</li> </ul> <ul style="list-style-type:circle"> <li>circle</li> </ul> <ul style="list-style-type:square"> <li>square</li> </ul> <ul style="list-style-type:none"> <li>none</li> </ul> #### ordered list 有序清單有七種排序樣式，分別是：數字(decimal)、零開頭的數字(decimal-leading-zero)、小寫羅馬數字(lower-roman)、大寫羅馬數字(upper-roman)、小寫英文(lower-alpha)、大寫英文(upper-alpha)、無符號(none)。有序清單也能用`type`來定義，數字(1)、小寫羅馬數字(i)、大寫羅馬數字(I)、小寫英文(a)、大寫英文(A) 以下是樣式顯示： <ol type="1"> <li>decimal or 1</li> </ol> <ol style="list-style-type:decimal-leading-zero"> <li>decimal-leading-zero</li> </ol> <ol style="list-style-type:lower-roman"> <li>lower-roman or i</li> </ol> <ol style="list-style-type:upper-roman"> <li>upper-roman or I</li> </ol> <ol style="list-style-type:lower-alpha"> <li>lower-alpha or a</li> </ol> <ol style="list-style-type:upper-alpha"> <li>upper-alpha or A</li> </ol> <ol style="list-style-type:none"> <li>none</li> </ol> :::spoiler 補充-起始位置設定有序清單預設的順序是從1開始，可以用`start`修改順序 ```html <ol start="50"> <li>start1</li> <li>start2</li> <li>start3</li> </ol> ``` 結果顯示： <ol start="50"> <li>start1</li> <li>start2</li> <li>start3</li> </ol> ::: ### Extended Application - navigation menu 清單可以利用CSS設計成不同的樣式，以下介紹如何用清單製作導覽選單： ``` html <!DOCTYPE html> <html> <head> <style> /*設定清單整體*/ ul { list-style-type: none;/*不顯示列點*/ margin: 0;/*將邊界限縮為0*/ padding: 0;/*將邊界限縮為0*/ overflow: hidden;/*隱藏超出容器範圍的內容*/ background-color: #333333;/*設定背景顏色*/ } /*設定清單物件*/ li { float: left;/*讓元素向左對齊*/ } /*設定在清單物件內的超連結*/ li a { display: block;/*以區塊顯示*/ color: white;/*字體顏色設為白色*/ text-align: center;/*文字水平置中*/ padding: 16px;/*設定物件離邊框的大小*/ text-decoration: none;/*文字無裝飾(底線)*/ } </style> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> </html> ``` 以下是顯示結果： ![image](https://hackmd.io/_uploads/By2wtXjckg.png)