---
# System prepended metadata

title: 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)


