---
# System prepended metadata

title: HTML第一章
tags: [第一章, HTML]

---

---
tags: HTML,第一章
---
# HTML第一章
絕對路徑
```
1.從磁碟機開頭寫出檔案路徑
2.完整的網址
```
相對路徑
```
./當前位置
../返回到上一層位置
```
# HTML正課
W3C 建議在 HTML 中使用小寫，並且對於更嚴格的文檔類型（如 XHTML ）要求使用小寫
## 骨架
```
<html>開始標籤
</html>結束標籤
```
```
<html>
    <head>
        <title></title>
    </head>
    <body>
        內容
    </body>
</html>
```
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
```
## 嵌套關係禁忌
如果觸碰嵌套禁忌不會報錯，瀏覽器會自動幫你改程式碼
p標籤不要嵌套div、p、h
a標籤不能嵌套a(除此之外a可以套任何標籤)
## head標籤內
title    設定瀏覽器頁籤上的名字
...
### 語言屬性
https://www.w3schools.com/tags/ref_language_codes.asp
```
<html lang="en">
```
## body標籤內
### 基本標籤
h1、h2、h3、h4、h5、h6    標題標籤h1最大h6最小
p    段落標籤
br    空行(單標籤不寫/也能運行)
hr    水平線(單標籤不寫/也能運行)
b    加粗    strong    加粗
u    下劃線    ins    下劃線
i    傾斜    em    傾斜
s    刪除線    del    刪除線
small    字體大小變小
### mark標籤
```
<p>Do not forget to buy <mark>milk</mark> today.</p>
```
文字上會有黃色螢光筆的效果
### sub標籤
```
<p>H<sub>2</sub>O</p>
```
寫化學式會用到
### sup標籤
```
<p>2<sup>10</sup></p>
```
數學上表示次方會用到
### p標籤
```
<p title="第一段">你好這是作文</p>
```
title    滑鼠懸停時顯示的文字
### pre標籤
```
<pre>
    My Bonnie lies over the ocean.
              
    My Bonnie lies over the sea.
      
    My Bonnie lies over the ocean.
      
    Oh, bring back my Bonnie to me.
</pre>
```
不須使用br空行來做換行
預設字體與其他標籤不同，通常是Courier固定寬度的字體
### img標籤
```
<img src="./" alt="" title="" width="" height=""/>
```
img    圖片標籤
src    路徑屬性
./    當前位置(相對路徑語法)
alt    替換文本屬性(屬性值寫一段文字)
title    提示文本屬性(滑鼠懸停圖片上時顯示的文字)
width    寬度屬性
height    高度屬性
### audio標籤
```
<audio src="./" controls/>
```
audio    音訊標籤
src    路徑屬性
./    當前位置(相對路徑語法)
controls    控制按鈕
autoplay    自動撥放(很多瀏覽器不支援了)
loop    循環播放
音訊標籤只支援三種格式:mp3、wav、ogg
### video標籤
```
<video src="./" controls autoplay muted width="" height=""/>
```
```
<video controls>
    <source src="./video.mp4">
</video>
```
video    影片標籤
src    路徑屬性
./    當前位置(相對路徑語法)
controls    控制按鈕
autoplay    自動撥放(chrome只支援靜音撥放)
muted    靜音
loop    循環播放
width    寬度屬性
height    高度屬性
影片標籤只支援三種格式:mp4、webM、ogg
### a標籤(超連結)
```
<a href="https://www.google.com/">超連結顯示的字</a>
<a href="https://www.google.com/" target="_blank">超連結顯示的字</a>
<a href="#">空連結</a>
```
a    a標籤
href    引用及跳轉地址
target="_blank"    在新分頁開啟
href：定义链接的目标地址。
target：定义链接打开的窗口或框架。常用值包括_self，_blank，_parent和_top。
download：定义链接是否下载而不是在浏览器中打开。
rel：定义链接与当前页面之间的关系，如rel="nofollow"可以告诉搜索引擎不要跟踪这个链接。
title：定义链接的标题，当用户将鼠标悬停在链接上时会显示。
type：定义链接的媒体类型，常用于指定链接是一个音频、视频、PDF等等。
### 無序列表
```
無序列表
<ul>
    <li>蘋果</li>
    <li>芭樂</li>
    <li>香蕉</li>
</ul>
```
ul標籤只能包含li標籤
li標籤可以包含任何東西
### 有序列表
```
有序列表
<ol>
    <li>第一名</li>
    <li>第二名</li>
    <li>第三名</li>
</ol>
```
ol標籤只能包含li標籤
li標籤可以包含任何東西
### 自定義列表
```
自定義列表
<dl>
    <dt>幫助中心</dt>
    <dd>帳戶管理</dd>
    <dd>購物指南</dd>
    <dd>訂單操作</dd>
</dl>
```
dl標籤只能包含dt dd標籤
dt dd標籤可以包含任何東西
dt    列表主題
dd    列表每一項
### 表格
```
表格
<table border="1" width="600" height="400">
    <caption><b>實況主成績單</b></caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>成績</th>
            <th>評語</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>張嘉航</td>
            <td>87分</td>
            <td>亞洲統神</td>
        </tr>
        <tr>
            <td>張葦航</td>
            <td>66分</td>
            <td>鼻地大師</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>總結</td>
            <td>給我重修</td>
            <td>兄弟齊心</td>
        </tr>
    </tfoot>
</table>
```
table    表格整體，包裹多個tr
caption    表格大標題
tr    表格每行，包裹td
th    表頭單元格
td    表格單元格
border    邊框粗細
width    寬度屬性
height    高度屬性
(通常寬度高度是用CSS來改)
表格結構標籤
thead    表格頭部
tbody    表格整體
tfoot    表格底部
### 表格之合併單元格
```
表格之合併單元格
<table border="1" width="600" height="400">
    <caption><b>實況主成績單</b></caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>成績</th>
            <th>評語</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>張嘉航</td>
            <td rowspan="2">87分</td>
            <td>亞洲統神</td>
        </tr>
        <tr>
            <td>003</td>
<!--             <td>87分</td> -->
            <td>統神老婆</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>總結</td>
            <td colspan="2">兩個87</td>
<!--             <td>兩個87</td> -->
        </tr>
    </tfoot>
</table>
```
上下合併    保留最上的，刪除其他
左右合併    保留最左的，刪除其他
rowspan    上下合併
colspan    左右合併
不能跨結構合併(不能跨thead、tbody、tfoot)
### 表單
```
表單
<input type="text"/>文本框，輸入單行文字
<br/>
<input type="text" placeholder="請輸入帳號"/>
<br/>
<input type="password"/>密碼框，輸入單行文字(密碼)
<br/>
<input type="password" placeholder="請輸入密碼"/>
<br/>
<input type="radio"/>單選框，用在多選一
<br/>
性別:<input type="radio" name="sex" checked/>男<input type="radio" name="sex"/>女
<br/>
<input type="checkbox"/>多選框，用在多選多
<br/>
<input type="file"/>文件選擇，用在上傳文件
<br/>
<input type="file" multiple/>
<br/>
<input type="submit"/>提交按鈕
<br/>
<input type="reset"/>重置按鈕
<br/>
<input type="button"/>普通按鈕，須配合JavaScript才有功能
```
input標籤可以透過type屬性值的不同，展示不同效果
checked    默認選中
multiple    多文件上傳
### form標籤
```
<form action="">
    <input type="text" placeholder="請輸入帳號"/>
    <br/>
    <input type="password" placeholder="請輸入密碼"/>
    <br/>
    <input type="submit" value="免費註冊"/>
    <br/>
    <input type="reset"/>
    <br/>
    <input type="button" value="普通按鈕"/>
</form>
```
form    表單容器，框好一坨內容為一整個表單
action=""    告訴瀏覽器要將表單內容送去哪裡
### button標籤
```
<button>我是按鈕</button>
<button type="submit">提交按鈕</button>
<button type="reset">重置按鈕</button>
<button type="button">普通按鈕</button>
```
### 下拉菜單
```
下拉菜單
<select>
    <option>陳水扁</option>
    <option>馬英九</option>
    <option selected>蔡英文</option>
</select>
```
selected    默認選中
### 文本域
```
文本域
<textarea></textarea>
<textarea cols="60" rows="30">預設文字</textarea>
```
cols    設定寬度
rows    設定高度
(通常不用以上兩個設定寬高，長度都會失真)
### label標籤
```
寫法一
<input type="radio" name="sex" id="male"/><label for="male">男</label>
<input type="radio" name="sex" id="female"/><label for="female">女</label>
寫法二
<label><input type="radio" name="sex"/>男</label>
<label><input type="radio" name="sex"/>女</label>
```
label標籤的功能為讓用戶在點單選框時，不用精準點中框框，點到文字也能點選成功
### 容器標籤
```
<div></div>    屬於塊(Block)元素
<span></span>    屬於行列(Inline)元素
```
### 布局標籤
```
<header>網頁頭部</header>
<nav>網頁導航</nav>
<footer>網頁底部</footer>
<aside>側邊欄</aside>
<section>網頁區塊</section>
<article>文章</article>
```
布局標籤只有在設計手機版網站會用到
### 字符實體
```
&nbsp;    空格
工三小&nbsp;&nbsp;&nbsp;&nbsp;朋友
```
html本身不認識多個空格，若要打多個空格需使用字符實體
