HTML的標籤分類

雙標籤：如<strong>標籤的內容</strong>  
	   語法：<開始標籤> 標籤內容 </結束標籤>
	   <strong>我要變粗</strong> <head></head>......
單標籤：<br/>單標籤都是功能性的標籤，例如換行等功能裡面不需要新增內容 
	   語法：<標籤名 />
	   <br> <hr>  ......

HTML中的標籤（熟練）

用<>包裹的英文單詞

h 系列的標籤 : 標題標籤

h1，h2，h3，h4，h5，h6

作用 : 給頁面上的文字加上標題的語意

程式碼 : <h1>我就是h1標籤</h1>

效果 : h1，h2，h3，h4，h5，h6 將文字放大、加粗、並且逐漸變小（h1標籤是最大的）

特點 : 獨佔一行

注意 : h1 標籤儘量少用，太多不利於SEO(搜尋引擎優化) 。一般h1 都是給文章的標題或者 logo使用。

p 標籤 : 段落標籤

作用: 給頁面上的一段文字加上段落的語意

程式碼: <p>這是段落</p>

特點：頁面上的一個段落，單獨佔一行，並且與上下內容之間存在距離。

hr 標籤：水平線標籤

作用: 在頁面上顯示一條橫線

程式碼: <hr />

br 標籤：換行標籤

作用：強制換行（程式碼中換行無效）

程式碼：<br />

(4組)文字格式化標籤

作用:

b: 加粗
u: 下劃線
i: 傾斜
s: 刪除線

建議不要使用, 因為這些標籤沒有語意

作用:

strong: 加粗
ins: 下劃線
em: 傾斜
del: 刪除線

可以使用

語意: 起強調加強語氣作用

圖片標籤（重點）

img 標籤：圖片標籤

作用： 在頁面中顯示一張圖片

程式碼： <img src="影象URL" />

特點： 就是顯示圖片

屬性：

src：圖片顯示的路徑（必須）
alt：如果圖片載入不出來，會顯示這個屬性中的文字
title：介紹這張圖片
width：圖片的寬度
height：圖片的高度

圖片寬高只設一個, 另一個會等比例縮放

兩個都設可能會變形，所以一般我們只設一個。

路徑問題（難點）

當前檔案找目標檔案的過程

[外連圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-1Teq5brB-1602818986804)(mdImg/%E5%9C%B0%E5%9B%BE.PNG)]

[外連圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-CdDuoqgx-1602818986807)(mdImg/%E6%96%87%E4%BB%B6%E8%B7%AF%E5%BE%84-1535340133797.PNG)]

絕對路徑

用的較少，可移植性差

帶有碟符的路徑: C:\Users\ziyue\Desktop\程式碼\01.jpg

相對路徑

用的很多，可移植性很好

同級目錄

如果頁面與圖片同一級目錄，直接寫目標檔案的名字（類比如我們倆都在大廳）

[外連圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-xaeTs5fK-1602818986809)(mdImg/path-01.png)]

<img src="2.jpg">
或者
<img src="./2.jpg">

下級目錄

下級目錄：如果圖片在同級目錄image資料夾下

[外連圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-InS5x9hj-1602818986810)(mdImg/path-02.png)]

<img src="image/1.jpg">

步驟：

找到圖片所在的目錄（先寫資料夾的名字）
去圖片所在資料夾裡面（資料夾名字/）
然後直接寫目標檔案的名字即可（資料夾名字/目標檔案的檔名）

上級目錄

上級目錄：如果圖片在頁面的上一級目錄

[外連圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-KeDVDDXK-1602818986811)(mdImg/path-03.png)]

<img src=」../2.jpg」 >

步驟：

首先去目標檔案所在的目錄。去上一級目錄（…/）
直接在路徑後面寫目標檔案的名字（…/目標檔案的名字）

總結：

通過資料夾名 / 可以來到下一級目錄，通過../ 可以來到上一級目錄
一般開發中用的最多的是相對路徑，因為相對路徑的可移植性要強。（我發給你，你能看~）

連結標籤（重點）

a 標籤 (Anchor ) : 超連結（錨）

超連結在頁面中起到跳轉或定位的作用（超連結、錨連結、a連結、a標籤）

a標籤的跳轉功能

作用: 可以從一個頁面跳轉到另一個頁面

程式碼: <a href="跳轉目標" target="目標視窗的彈出方式">文字或影象</a>

效果：

連結未點選的時候，預設顯示藍色
連結點選過以後，顯示為紫色（因為瀏覽器有預設的快取機制，只要存取過一次的連結，預設都會展示成紫色，只有清除瀏覽器的快取，才會變藍）

注意：

在 a 標籤之內必須寫上內容, 如果沒有內容, 頁面上會看不到
a 標籤不能巢狀（如果有兩個a標籤巢狀，那麼點選的時候去哪裡呢？）

a 標籤的屬性

**href：**a 標籤跳轉的目標地址（路徑）
- 外部連結（網際網路上）需要新增 http:// www.baidu.com
- 內部連結（資料夾中）直接連結頁面的路徑即可比如 < a href="index.html"> 首頁 </a >
**target：**用於指定連結頁面的開啟方式
- _self ：在當前頁面，進行跳轉
- _blank : 保留原始頁面，再進行跳轉
相關標籤 ：

base 標籤：

**作用：**可以為頁面上所有的a標籤設定跳轉的方式（書寫位置：base標籤一般放在titile標籤下面）

統一設定頁面中所有a標籤的跳轉方式

a 標籤的其他用法

可以不跳轉 (不寫路徑其實會重新整理頁面！重新整理也不要哦~)
- href="#"
- 專案中沒有確定連結目標時，通常將連結標籤的href屬性值定義為「#」，表示該連結暫時為一個空連結
- 在專案中起到站位的作用
可以進行下載（一般不用，看不到進度條，配合Js才能看到進度條）
- 當路徑指向的目標檔案是瀏覽器打不開的檔案時，瀏覽器會預設下載下來。
- 當路徑指向的目標檔案是瀏覽器可以開啟的檔案時，瀏覽器會開啟。

a標籤的定位功能（快速定位）

a標籤可以快速定位到當前頁面或者其他頁面的目標內容（百度百科）

在當前頁面進行定位

步驟：

給目標標籤加上id屬性
```
<p id="mao">我是一隻貓</p>
```
給連結的href屬性中寫上#目標標籤的id屬性值
```
<a href="#mao">吸貓大法</a>
```

在跳轉的頁面進行定位

步驟：

給目標檔案中的目標標籤加上id屬性
```
<p id="mao">我是一隻貓</p>
```
給當前檔案的連結的href屬性中寫上 目標檔案路徑#目標標籤的id屬性值
```
<a href="目標檔案路徑#mao">吸貓大法</a>
```

[外連圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-hsamkacC-1602818986812)(mdImg/搖頭貓.gif)]

結構中每個標籤的含義（瞭解）

DOCTYPE : 檔案型別

作用： 用來定義檔案型別（告訴瀏覽器，使用哪種規範去解析html頁面）

**位置：**檔案的最前面的位置

**規範：**HTML 或 XHTML 規範

**html:xt ：**XHTML規範，已經淘汰了，一些特別老的網站會有，知道即可

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html:5 ： HTML5規範，非常的簡潔

<!DOCTYPE html>

html 標籤

**作用：**所有html中標籤的一個根節點（老祖宗）

**lang：**用來設定當前頁面的語言（標籤的語言、對比易語言）

<html lang="en">
</html>

en-英文 zh-中文
英文的意思並不是告訴瀏覽器，我們這就是純英文的，而且告訴瀏覽器我們的內容以英文為主，提高瀏覽器的渲染效能

head 標籤

作用：用於存放網頁的設定標籤和引入檔案的標籤

title、meta、base、style、script、link

注：在head標籤中我們必須要設定的標籤是title, 其他可有可無

body 標籤

**作用：**頁面在的主體部分，用於存放頁面中的html標籤

p、h、a、b、u、i、s、em、del、ins、strong、img

meta 標籤

**作用：**設定網頁的元資訊

**注意：**meta中設定的所有的內容在頁面都不會顯示, 在其中可以設定編碼格式、樣式、關鍵字等等

設定字元集（編碼格式）：

<meta charset="UTF-8">

Charset（字元集的格式）：UTF-8

最常見的3種字元集（字典）：

UTF-8：國際化的字典，字型庫，收錄是全世界所有的語言中的文字

1漢字 = 3個位元組
GBK：收錄了大陸漢字，還加了港澳臺的文字-》ANSI（中國）

1個漢字= 2個位元組
GB2312：收錄了大陸漢字

**約定：**將來我們在整個學習過程中都用utf-8（與國際接軌）

title 標籤

**作用：**讓頁面擁有一個屬於自己的標題。

**注意：**title中的文字在 seo 中佔有很大的權重，不能亂寫

SEO與標籤語意化（瞭解）

SEO : 搜尋引擎優化

Search Engine Optimization

寫網頁的目的-》使用者的習慣-》使用者的結果-》怎樣排名靠前-》seo

作用：用來優化網站，使用網站在搜尋引擎上的排名靠前

百度是如何收錄一個網站的資訊的呢？

百度自己寫的一個程式來收錄每個網站的資訊。

怎樣提升網站的SEO（記憶）

花錢買排名

缺點：燒錢。

優點：效果槓槓的
將頁面做成靜態頁面（html字尾）
發外連（類似於廣告）
標籤語意化（語意化規範）

在合適的地方使用合適的標籤

標籤語意化的應用：每個html標籤都有屬於自己的語意，有使用標籤時候要一定要了解每個標籤的語意，合理使用。

標籤語意化的好處

在合適的地方使用合適的標籤（比如title和h1）

對搜尋引擎的友好，提高網頁的SEO（將來網路爬蟲進入頁面之後可以很方便的得到頁面的重要資訊）
提升使用者體驗（css載入不出來也能看出重要性）
利於程式碼的可讀、維護、提高開發效率 (網頁原始碼方便查詢)

列表（熟練）

無序列表 ul （Unordered List）

一列沒有順序的列表（用的最多）

**作用：**顯示一列沒有排列順序的資料

**語意：**一組沒有順序的資料

程式碼：

<ul>
  <li>列表項1</li>
  <li>列表項2</li>
  <li>列表項3</li>
  ......
</ul>

注意：

無序列表中的資料沒有先後順序之分
<ul></ul> 中只能巢狀<li></li> ，不能放其他標籤或者文字
<li></li> 標籤中可以巢狀任意標籤（巢狀ul都可以）

有序列表 ol（瞭解）

一列有順序的列表（用的很少）

作用：顯示一列有順序的資料

語意：一組有順序的資料

<ol>
  <li>列表項1</li>
  <li>列表項2</li>
  <li>列表項3</li>
  ......
</ol>

注意：

有序列表中的資料有先後順序之分
<ol></ol> 中只能巢狀<li></li> ，不能放其他標籤或者文字
<li></li> 標籤中可以巢狀任意標籤（ul都可以）

現在一般情況下ul標籤用的比較多，ol標籤用的比較少（關鍵看語意，和樣式無關）。

自定義列表 dl（瞭解）

一列格式自定義的列表（幾乎不用）

[外連圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-um7pcoZK-1602818986812)(mdImg/mi.fw.png)]

作用：顯示一列資料，格式自己定義

dt : 標題

dd : 列表正文

程式碼：

<dl>
  <dt>小標題</dt>
  <dd>小標題的解釋1</dd>
  <dd>小標題的解釋2</dd>
</dl>

注意：

1.dl裡面只能放dt或者dd

2.dt/dd裡面可以放任意的標籤

HTML中的特殊字元（記憶）

有時候需要在頁面中顯示空格、<、>等特殊字元

HTML的空格合併現象

在HTML程式碼中同時出現多少個空格、縮排、換行。最後瀏覽器只會解析出一個空格顯示

合併現象案例

女孩：寶貝，靠近點~男孩：darling，我離不開你~
拆了他們！

**總結：**html程式碼中對空格、縮排、換行不敏感，如果同時出現多個空格、縮排、換行, 頁面只會把它們當做一個空格來解析

html 中特殊字元有對應的 轉譯符 :

[外連圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-UuO6pxOx-1602818986813)(mdImg/zifu.png)]

表格table（難點）

將資料以表格的形式在網頁中展示

感知表格相關標籤：
<table></table> : 代表 表格
<tr></tr> : 代表一行 (row : 行 )
<td></td> : 代表一個標準單元格

建立表格

[外連圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-OqWDpq3H-1602818986814)(mdImg/%E8%A1%A8%E6%A0%BC.png)]

程式碼：

<table>
	<tr>
		<td>單元格</td>
		<td>單元格</td>
	</tr>
	<tr>
		<td>單元格</td>
		<td>單元格</td>
	</tr>
</table>

表格的屬性

屬性	作用
border	邊框
width	給表格設定寬
height	給表格設定高
cellspacing	規定單元格與單元格之間的空白
cellpadding	單元格內部邊框與內容的空白
align	對齊方式（table、tr、td分別設定有不同效果）

雖然我們可以使用table中的標籤來設定標籤的一些樣式，但是最好不要用，因為將來凡是與樣式相關內容都是由css來設定的

表格中的其他標籤

[外連圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-mQSl4axA-1602818986815)(mdImg/%E5%90%88%E5%B9%B6.PNG)]

總結：

標籤	作用	特點
`<th></th>`	起到表頭單元格、標題的作用（代替td）	文字加粗居中
`<caption></caption>`	給表格設定標題	在表格的最上面顯示標題
`<thead></thead>`	（結構）存放當前表的表頭	高度自適應（由內容撐開）
`<tbody></tbody>`	（結構）存放表格主體資料
`<tfoot></tfoot>`	（結構）一般不用、有相容性問題	高度自適應（由內容撐開）

注意：

<tr></tr>中只能巢狀<td></td>或者<th></th>
<td></td>標籤像一個容器，可以容納所有的元素

合併單元格 (左上原則)

上下合併------》跨行合併：屬性: rowspan=「合併的個數」------》留住最上，刪除其他

左右合併------》跨列合併：屬性: colspan=「合併的個數」-------》留住最左，刪除其他

1.確定合併哪幾個單元格

2.利用左上原則，確定保大保小

3.確定跨行（rowspan）還是跨列合併（colspan）

步驟：

通過左上原色，確定保留的單元格，給他新增屬性（rowspan/colspan），屬性值就是合併單元格的個數
找到要刪除的單元格，刪除掉就行了~

合併單元格練習:

[外連圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-F7Ex4lKA-1602818986815)(mdImg/%E5%90%88%E5%B9%B6%E5%8D%95%E5%85%83%E6%A0%BC%E7%BB%83%E4%B9%A0.PNG)]

**其實：**在早期的網站開發中，表格的使用非常的泛濫

表單系列標籤（重點）

表單的目的是收集使用者資訊

註冊頁面

有一種生物叫做後端

input (輸入框系列) 基本表單控制元件

先簡單的過一遍~

<input type="text">

單標籤、type：用於指定不同的控制元件型別

文字方塊 text 、密碼框 password

暱稱：<input type="text" value="小姐姐" name="nicheng" maxlength="6"> 
密碼：<input type="password" name="password" maxlength="6">

注意：

value ：使用者輸入的值（提前在標籤設定好就是預設值）
name：告訴後端對應的值的含義。後端接收到的格式：name的屬性值=value的屬性值

拓展：頁面中的資訊需要傳給後臺伺服器，但是直接發一個值（value）過去，後端不知道是什麼，所以需要加上一個屬性name 代表資料的含義。

後端接收的資料結構為： name屬性值=value屬性值這樣後端就知道傳過去的是什麼（前後端互動在就業班會重點說明，基礎班不會使用）
maxlength：設定表單的最大輸入值

小bug ：如果是密碼輸入框，type="password" 的password不能拼錯且後面不能有空格，否則瀏覽器會認為type屬性設定無效，會以預設的text方式顯示，此時不會密文，相當於是文字方塊。

單選框 radio 、多選框 checkbox

單選框 radio

性別 : <input name="sex" type="radio" value="nan"> 男 
      <input name="sex" type="radio" value="nv" checked> 女

注意：

通過name進行分組（有相同name屬性值的單選框是一組的，一組中同時只能有一個選中），並且告訴後臺傳的是什麼
在實際工作中，需要寫value值
checked 屬性設定預設選中，屬性值省略。

多選框 checkbox

愛好：<input type="checkbox" name="hobby" value="code" checked>敲程式碼
     <input type="checkbox"  name="hobby" value="nosleep" checked>熬夜
     <input type="checkbox"  name="hobby" value="game">玩遊戲

通過name進行分組，並且告訴後臺傳的是什麼
需要寫value值
checked屬性設定預設選中，屬性值省略

檔案選擇框 file

<input type="file">   單檔案上傳
<input type="file" multiple>   多檔案上傳

注意：

multiple設定一次同時可以選中多個檔案（ctrl+選中/滑鼠框選）屬性值可以省略
現在html只負責結構，之後真正的上傳相關功能通過js來實現

表單按鈕

需要配合form表單一起使用

說白了就是用form標籤把表單標籤都包起來~

提交按鈕submit

將表單的內容提交給後端

<input type="submit">

重置按鈕reset

將表單的內容重置為預設值

<input type="reset">

普通按鈕button

之後配合js使用

<input type="button">    // 配合後面的js使用

圖片按鈕image

功能相當於提交按鈕，樣式為一張圖片

<input type="image" src="a.jpg">

select 下拉式選單

出生年月：<select name="year">
            <option value="1996">1996</option>
            <option value="1997">1997</option>
            <option value="1998">1998</option>
            <option value="1999" selected>1999</option>
		</select>

注意：

name屬性設定在select標籤上（告訴後臺傳過去的是什麼）
value屬性設定在option上，表示選中的值
selected屬性設定預設選中，屬性值省略

textarea文字域

用於輸入大段文字

<textarea cols="規定文字區內的可見寬度" rows="規定文字區內的可見行數">
  文字內容
</textarea>

**注意：**不能通過設定value使文字域有預設值，無效！

Form 表單域

form標籤用於定義表單域，將各種表單包裹起來，用於表單提交

<form action="url地址">
  各種表單控制元件
</form>

**屬性：**action 用於指定處理請求的伺服器URL地址（就業班的內容）

label 標籤（記憶）

範例 : 新浪網頁註冊

作用：讓文字和表單元素繫結到一起（結拜兄弟）

[外連圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-CBARlNXR-1602818986816)(F:/前端/筆記/mdImg/label.jpg)]

[外連圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-LLjixZIi-1602818986816)(F:/前端/筆記/mdImg/貓哥.jpg)]

用法：

寫 for ，值為 id，規定 label 與哪個表單元素繫結

性別 : 
<input  id="nan" name="sex" type="radio">  <label for="nan">男</label>
<input  id="nv" name="sex" type="radio"> <label for="id名">女</label>   

步驟：
1.在表單元素上新增id屬性
2.給label新增for屬性，for的屬性值與對應表單元素的id值相同即可

不寫 for，預設繫結 label 內的表單控制元件

<label><input type="radio" name="sex"> 男</label>

步驟：用label把表單元素和文字包在一起即可

沒有語意的佈局標籤（記憶）

div和span是沒有語意的標籤，一般用於頁面佈局使用（專案中會經常使用到）

div：div盒子

<div>長亭外</div><div>古道邊</div>

特點：

width由螢幕寬度決定（獨佔一行）height自適應（由內容撐開）
預設佔一整行（一行只能顯示一個）

頁面佈局中用的最多~

span

<span>芳草碧連天</span>

特點：

width、height由內容來決定（都由內容撐開）
一行裡面可以顯示多個

除了沒有語意的標籤可以用於佈局，還有一些有語意的標籤可以用於佈局

HTML5新標籤與特性（瞭解）

就業班會有專門的H5C3的課，來學習html5的一些新標籤和屬性

HTML5新增語意標籤（記憶）

頭部：header標籤

header：定義網頁的頭部---》頭部語意 + div

導航：nav標籤

nav：定義網頁的導航---》導航語意 + div

底部：footer標籤

footer：定義網頁的底部---》底部語意 + div

側邊欄：aside標籤

aside：定義網頁的側邊---》側邊語意 + div

區塊：section標籤

section：定義網頁的區塊---》區塊語意 + div

文章：article標籤

article：定義網頁的文章---》文章語意 + div

[外連圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-R7dXEVgc-1602818986817)(F:/前端/筆記/mdImg/h5新標籤.png)]

**注意：**html5標籤有相容性問題（老瀏覽器沒效果），所以為了客戶群多，會少用。

其他表單新屬性(記憶)

用法	屬性	含義
`<input type="text" placeholder="請輸入使用者名稱">`	placeholder	提示使用者輸入對應的資訊
`<input type="text" autofocus>`	autofocus	自動獲得焦點
`<input type="file" multiple>`	multiple	多檔案上傳，可選多檔案

多媒體標籤—audio 音訊

在網頁中播放音訊（聲音）

屬性：

controls 是否顯示播放控制元件
autoplay 自動播放（有相容性問題）
loop 迴圈播放（有相容性問題）

相容性處理：

<audio controls autoplay loop>
  <source src="1.mp3">
  您的版本過低,請升級高階版本 <a href="http://www.itcast.cn/">點選下載</a>
</audio>

多媒體標籤—video 視訊

在網頁中播放視訊

屬性（和audio類似）：

controls 是否顯示播放控制元件
autoplay 自動播放（有相容性問題）（muted）
loop 迴圈播放（有相容性問題）

**區別：**可以設定寬高，並且顯示視訊

**注意：**寬度和高度只需要設定一個，另一個會根據等比例縮放，如果同時指定兩個，視訊的實際寬高會以小的為基準（類似圖片）

HTML筆記（詳細）

HTML的標籤分類

HTML中的標籤（熟練）

h 系列的標籤 : 標題標籤

p 標籤 : 段落標籤

hr 標籤：水平線標籤

br 標籤：換行標籤

(4組)文字格式化標籤

圖片標籤（重點）

img 標籤 ：圖片標籤

路徑問題（難點）

絕對路徑

相對路徑

同級目錄

下級目錄

上級目錄

連結標籤（重點）

a 標籤 (Anchor ) : 超連結（錨）

a標籤的跳轉功能

a 標籤的屬性

a 標籤的其他用法

a標籤的定位功能（快速定位）

在當前頁面進行定位

在跳轉的頁面進行定位

結構中每個標籤的含義（瞭解）

DOCTYPE : 檔案型別

html 標籤

head 標籤

body 標籤

meta 標籤

title 標籤

SEO與標籤語意化（瞭解）

SEO : 搜尋引擎優化

怎樣提升網站的SEO（記憶）

標籤語意化的好處

列表（熟練）

無序列表 ul （Unordered List）

有序列表 ol（瞭解）

自定義列表 dl（瞭解）

HTML中的特殊字元（記憶）

HTML的空格合併現象

合併現象案例

表格table（難點）

建立表格

表格的屬性

表格中的其他標籤

合併單元格 (左上原則)

合併單元格練習:

表單系列標籤（重點）

input (輸入框系列) 基本表單控制元件

文字方塊 text 、 密碼框 password

單選框 radio 、多選框 checkbox

單選框 radio

多選框 checkbox

檔案選擇框 file

表單按鈕

提交按鈕submit

重置按鈕reset

普通按鈕button

圖片按鈕image

select 下拉式選單

textarea文字域

Form 表單域

label 標籤（記憶）

沒有語意的佈局標籤（記憶）

div：div盒子

span

HTML5新標籤與特性（瞭解）

HTML5新增語意標籤（記憶）

其他表單新屬性(記憶)

多媒體標籤—audio 音訊

多媒體標籤—video 視訊

img 標籤：圖片標籤

文字方塊 text 、密碼框 password