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 回圈播放（有兼容性問題）

**區別：**可以設定寬高，并且顯示視頻

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/177638.html

標籤：java

上一篇：前端三劍客（入門）

下一篇：0基礎童鞋快速開始學習前端開發

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