HTML5總結整理

時間 2020-09-12

標籤 html5 html 總結整理欄目 HTML5 简体版

原文原文鏈接

（僅供你們學習分享交流）javascript

1、簡介

一、前端開發最核心技術

咱們知道，用所謂的網頁三劍客已經不能知足需求了，那前端開發究竟要學習什麼技術呢？網頁最主要由3部分組成：結構、表現和行爲。網頁如今新的標準是W3C，目前模式是HTML、CSS和 JavaScript。css

前端開發最核心的3個技術html

（1）HTML是什麼？

HTML，全稱「Hyper Text Markup Language（超文本標記語言）」，簡單來講，網頁就是用 HTML語言製做的。HTML是一門描述性語言，是一門很是容易入門的語言。前端

（2）CSS

CSS，全稱「（層疊樣式表）」。之後咱們在別的地方看到「層疊樣式表」、「CSS樣式」，指的就是CSS。java

（3）JavaScript

JavaScript是一門腳本語言。web

二、前端開發其餘技術

前端技術最核心的是HTML、CSS和JavaScript，可是對於一個真正的前端工程師來講，哪怕你精通這三個，你也不能稱爲一個真正的「前端工程師」。由於前端技術除了HTML、CSS和JavaScript這三種，還須要學習Ajax、SEO等。chrome

（1）Ajax編程

Ajax，即「Asynchronous Javascript And XML（異步JavaScript和XML）」，是指一種建立交互式網頁應用的網頁開發技術。canvas

經過在後臺與服務器進行少許數據交換，Ajax可使網頁實現異步更新。這意味着能夠在不從新加後端

載整個網頁的狀況下，對網頁的某部分進行更新。傳統的網頁（不使用Ajax）若是須要更新內容，必須重載整個頁面。

Ajax是先後端交互的技術，主要實如今前端。（不懂？！不要緊，咱們在Ajax教程中會講解到）

（2）SEO

SEO，即「Search Engine Optimization（搜索引擎優化）」。SEO優化是專門利用搜索引擎的搜索規則來提升目前網站在有關搜索引擎內的天然排名的方式（國內常見的搜索引擎有百度、360、搜狗等）。

簡單來講，你建好了網站並不表明你網站就能被搜索引擎搜索到，咱們通常使用百度搜索資料時，搜索出來的網頁有不少，可是咱們通常看了搜索結果的第1、二頁就再也不往下看了。SEO，就是爲了咱們的網站能排在搜索結果的前面，這樣你的網站纔會有流量。你作網站，相信你也是想讓你網站有更多人瀏覽的吧。

2、基礎內容

1.基礎總結

一、從web1.0到web2.0，網頁製做已經變爲前端開發了。如今對於前端開發，你要學的不是什麼「網頁三劍客」，而是「HTML+CSS+JavaScript」；

二、前端技術核心元素的是HTML、CSS和JavaScript，可是咱們還要學習一些Ajax、SEO知識；

三、前端技術只能開發靜態網頁，而進一步學習了後端技術，你能開發一個用戶交互性更好、功能更增強大的網站；

四、後端技術有ASP.NET（或PHP）、SQL Server等；

五、學習路線：HTML入門→CSS入門→HTML進階→CSS進階→JavaScript入門→jQuery入門

→ASP.NET入門（或PHP入門）→Ajax→ASP.NET進階（或PHP進階）；六、學習HTML就是學習各類標籤，而後針對你想要的內容來使用相應的標籤；

七、HTML標籤即「HTML元素」；

八、HTML基本結構：

2.HTML的基本標籤

(1)HTML標籤

整個網頁是從<html>這裏開始的，而後到</html>結束。

(2)head標籤

head標籤表明頁面的「頭」，定義一些特殊內容，這些內容每每都是「不可見內容」（在瀏覽器不可見）。

表1 <head>內部標籤

<head>內部標籤		說明
<title>		定義網頁的標題
<meta>		定義網頁的基本信息（供搜索引擎）
<style>		定義CSS樣式
<link>		連接外部CSS文件或腳本文件
<script>		定義腳本語言
<base>		定義頁面全部連接的基礎定位（用得不多）

<head>的內部標籤也很是重要，在前期你們只須要感性認知就能夠。

(3)body標籤

body標籤表明頁面的「身」，定義網頁展現內容，這些內容每每都是「可見內容」（在瀏覽器可見）。

後續課程講解的標籤都是在<body>標籤內部的各類標籤。

三、段落與文字

(一)、段落標籤

(1)、段落與文字標籤

表1 段落與文字標籤

標籤	語義	說明
<h1>~<h6>	header	標題
<p>	paragraph	段落
<br>	break	換行
<hr>	horizontal rule	水平線
<div>	division	分割（
<span>	span	區域（

(2)、文本格式化標籤

表2 文本格式化標籤

標籤		語義
<strong>		strong（增強）
<em>		emphasized（強調）
<cite>		cite（引用）
<sup>		superscripted（上標）
<sub>		subscripted（下標）

(二)、網頁特殊符號

網頁特殊符號只須要記憶一個就好了，就是HTML空格「」，其餘的特殊符號咱們不須要記憶，當咱們須要的時候再回來查找一下特殊符號表就OK了。

(三)、自閉合標籤

HTML標籤分爲2種，一種是「通常標籤」，另一種是「自閉合標籤」。通常標籤有開始符號和結

束符號，自閉合標籤只有開始符號沒有結束符號。通常標籤能夠在開始符號和結束符號之間插入其餘標籤或文字。自閉合標籤因爲沒有結束符號，不能插入其餘標籤或文字，只能定義自身的屬性。 (1)、通常標籤

舉例：<body></body> (2)、自閉合標籤 舉例：<br/>、<hr/>

(四)、塊元素和行內元素

(1)、HTML元素根據瀏覽器表現形式分爲兩類：①塊元素；②行內元素； (2)、塊元素特色：

（1）獨佔一行，排斥其餘元素跟其位於同一行，包括塊元素和行內元素；

（2）塊元素內部能夠容納其餘塊元素或行元素；常見塊元素有：h1~h六、p、hr、div等。 (3)、行內元素特色：

（1）能夠與其餘行內元素位於同一行；

（2）行內內部能夠容納其餘行內元素，但不能夠容納塊元素，否則會出現沒法預知的效果；常見行內元素有：strong、em、span等。

(五)、練習題

(1)、下面是一個網頁在瀏覽器上的效果，請製做一張如出一轍的網頁。

HTML段落與文字訓練題

(6)標籤的語意

標籤語義對照表

h1~h6 header1 ~header6 標題1~標題


標籤名 hr	英文全稱 horizontal rule	中文解釋水平線

a	anchor	錨點，超鏈
strong	strong	強調（粗體
em	emphasized	強調（斜體
sup	superscripted	上標
sub	subscripted	下標
br	break	換行
fieldset	fieldset	域集
legend	legend	圖例
caption	caption	（表格、圖

thead	table head	表頭
tbody	table body	表身
tfoot	table foot	表腳
th	table header	表頭單元格
td	td	表身單元格

四、列表

3種列表的語義記憶：

表1 3種列表記憶

標籤		語義
ol		ordered list
ul		unordered list
dl		definition list

(一)、HTML3種列表

列表有3種：有序列表、無序列表和定義列表。

有序列表和無序列表都比較經常使用，而定義列表比較少用。在實際應用中，最經常使用的是無序列表，請你們重點掌握。

目錄列表和菜單列表已經被廢除，你們能夠直接忽略這兩種列表。

(1)、有序列表

1		<ol>
2		<li>有序列表項</li>
3		<li>有序列表項</li>
4		<li>有序列表項</li>
5		</ol>

表1 有序列表type屬性

type屬性值	列表項的序號類型
1	數字一、二、3……
a	小寫英文字母a、b、c……
A	大寫英文字母A、B、C……
i	小寫羅馬數字i、ii、iii……

大寫羅馬數字I、II、III……

學習了CSS入門教程以後，有序列表列表項符號由list-style-type屬性定義，到時候應該摒棄type屬

性。

(2)、無序列表 無序列表是三個列表中最爲重要的列表。語法：

表1 無序列表type屬性

type屬性值		列表項的序號類型
disc		默認值，實心圓「●」
circle		空心圓「○」
square		實心正方形「■」

學習了CSS以後，無序列表列表項符號由list-style-type定義，到時候應該摒棄type屬性。

(3)、定義列表

語法：

1		<dl>
2		<dt>定義名詞</dt>
3		<dd>定義描述</dd>
4		……
5		</dl>

說明：

<dl>即「definition list（定義列表）」，<dt>即「definition term（定義名詞）」，而<dd>即「definition description（定義描述）」。

在該語法中，<dl>標記和</dl>標記分別定義了定義列表的開始和結束，<dt>後面添加要解釋的名詞，而在<dd>後面則添加該名詞的具體解釋。

(二)、HTML學習中的誤區

學習HTML的目的就是在你須要的地方用到符合語義的標籤，把標籤用「對」這纔是HTML學習的目的。例如一段文字，應該使用p標籤，而不是使用div標籤或者其餘標籤。

網頁語義結構良好，對於搜索引擎來講也是極爲重要的一點。

(三)、練習題

一、問卷調查：下面是一個網頁在瀏覽器上的效果，請製做一張如出一轍的問卷調查網頁。要求：

（1）大標題使用<h3>標籤；

（2）問卷調查題目使用<h4>標籤

（3）前2個問題選項使用有序列表；

（4）最後一個問題選項使用無序列表

五、表格

(一)、表格語義記憶

經過語義化記憶表格標籤：

表1 表格基本標籤

標籤		語義
table		table（表格）
tr		table row（表格行）
td		table data cell（表格單元格）

表2 表格結構標籤

(二)、表格基本結構

<table>、<tr>和<td>是HTML表格最基本的3個標籤，其餘標題標籤<caption>、表頭單元格

<th>能夠沒有，可是這3者必需要有。

語法：

<table>

<tr>

</tr>

<tr>

</tr>

</table>

說明：

<table>和</table>標記着表格的開始和結束，<tr>和</tr>標記着行的開始和結束，在表格中包含幾組<tr></tr>就表示該表格爲幾行。<td>和</td>標記着單元格的開始和結束。

(三)、表格完整結構

表格完整結構應該包括表格標題（caption）、表頭（thead）、表身（tbody）和表腳（tfoot）4 部分。

表格語義化以後，使得代碼更清晰和更利於後期維護。

語法：

<table>

<thead>

<tr>

<th>表頭單元格1</th>

<th>表頭單元格2</th>

</tr>

</thead>

<tbody>

<tr>

<td>標準單元格1</td>

<td>標準單元格2</td>

</tr>

<tr>

<td>標準單元格1</td>

<td>標準單元格2</td>

</tr>

</tbody>

<tfoot>

<tr>

<td>標準單元格1</td>

<td>標準單元格2</td>

</tr>

</tfoot>

</table>

說明：

<thead>、<tbody>和<tfoot>這三個標籤分別表示表頭、表身、表腳。th表示表頭單元格，th表示表身單元格。每一對「<tr></tr>」表示一行。

(四)、合併行和合並列

合併行使用td標籤的rowspan屬性，而合併列則用到td標籤的colspan屬性。

(1)、合併行

語法：

<td rowspan="跨度的行數"> 舉例：

<!DOCTYPE html>

<head>

<title>合併行rowspan</title>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

在瀏覽器預覽效果以下：

(2)、合併列

語法：

<td colspan="跨度的列數"> 舉例：

<!DOCTYPE html>

<head>

<title>合併列colspan</title>

</head>

<body>

<table>

<tr>

<td colspan="2">綠葉學習網精品教程</td>

</tr>

<tr>

<td>HTML教程</td>

<td>CSS教程</td>

</tr>

<tr>

<td>jQuery教程</td>

<td>SEO教程</td>

</tr>

</table>

</body>

</html>

在瀏覽器預覽效果以下：

六、圖像

(一)、圖像標籤

在HTML中，圖像標籤爲<img>。<img>是一個自閉合標籤。img標籤只須要掌握3個屬性就能夠了：src、alt、title。

語法：

表1 img標籤經常使用屬性

屬性		說明
src		圖像的文件地址
alt		圖片顯示不出來時的提示文字
title		鼠標移到圖片上的提示文字

src和alt這兩個屬性是img標籤必不可少的屬性。其餘屬性咱們通常用不到，因此只須要掌握這兩個

屬性便可，你們要是在別的書籍上看到<img>還有別的屬性，你不用去記憶它們。

(二)、相對路徑和絕對路徑

相對路徑，指的是同一個網站下，不一樣文件之間的的位置定位。引用的文件位置是相對當前文件的位置而言，從而獲得相對路徑。

絕對路徑，指的是文件的完整路徑。詳細複習內容，請查看相對路徑和絕對路徑。

(三)、圖片格式

雖然圖片格式這一節知識比較多，大部分咱們只須要了解就能夠了，咱們只須要掌握.jpg、.png 和.gif三種圖片格式的區別便可。

一、JPG能夠很好處理大面積色調的圖像，如相片、網頁通常的圖片。

二、PNG格式圖片體積小，並且無損壓縮，能保證網頁的打開速度。最重要的是PNG格式圖片支持透明信息。PNG格式圖片能夠稱爲「網頁設計專用格式」。

三、GIF格式圖片圖像效果不好，可是能夠製做動畫。

七、連接

超連接使用a標籤，語法以下：

表1 <a>標籤target屬性

blank 在一個全新的空白窗口中打開連接


target屬性值 _top		說明在頂層框架中打開連接

_parent		在當前框架的上一層裏打開連接

咱們只須要掌握「_self」和「_blank」這兩個屬性值就能夠了，其餘兩個用不到。

超連接根據連接對象的不一樣分爲：

（1）外部連接

（2）內部連接：①內部頁面連接；②錨點連接；舉例：

……<br />

<ul>

<li>蜘蛛俠系列</li>

<li>鋼鐵俠系統</li>

<li>復仇者聯盟</li>

</ul>

</div>

……<br />

<ul>

</ul>

</div>

</body>

</html>

錨點連接，就是點擊某一個超連接，它就會跳到當前頁面的某一部分。以下圖：

只要咱們點擊「推薦音樂」、「推薦電影」和「推薦文章」這三個超連接，滾動條就會滾動到相應

的版塊。

八、表單

表單標籤共有4個：<input>、<textarea>、<select>和<option>。其中<select>和<option>是配合使用的。

咱們經過一張表單來把全部input標籤囊括：

(一)、input標籤表單

大部分表單都是用input標籤完成的。語法：

<input type="表單類型"/> 說明：

表1中的表單都是使用input標籤，所不一樣的就是type屬性值不一樣。

(二)、textarea標籤表單

(1)、多行文本框

語法：

<textarea rows="行數" cols="列數">多行文本框內容</textarea> 表現形式以下：

(2)、3種文本框對比

單行文本框和密碼文本框使用<input>標籤，而多行文本框使用<textarea>標籤。

①單行文本框語法：

①密碼文本框語法：

①多行文本框語法：

<textarea rows="行數" cols="列數">多行文本框內容</textarea>

(三)、select和option

下拉列表由<select>標籤和<option>標籤配合使用。語法：

……

<option value="選項值">選項顯示的內容</option>

</select>

表現形式以下：

(四)、訓練題

一、使用你在這一章學習到的表單標籤製做下面的一個表單：

九、多媒體

(一)、插入音頻、視頻和flash

在網頁中插入音頻、視頻和flash都是使用embed標籤。

語法：

</embed> 說明：

多媒體文件地址能夠是相對地址，也能夠是絕對地址。 width和height使用px做爲單位。

(二)、插入背景音樂

爲某個網頁設置背景音樂，使用的是bgsound標籤。不過bgsound標籤只適用於IE瀏覽器，在 Firefox等瀏覽器中未必適用。

設置網頁背景音樂時經常使用的方法除了使用bgsound標籤，還有使用embed標籤和object標籤。語法：

<bgsound src="背景音樂的地址"/> 說明：

loop="2"表示重複2次，loop="infinite"表示無限次循環播放，也可使用loop="-1"表示無限次循環播放。

十、浮動框架iframe

(一)、浮動框架iframe簡介

因爲HTML5已經捨棄了frameset標籤（框架集標籤），因此在這一章，咱們不講解框架集 frameset，只講解一個標籤：iframe標籤（浮動框架標籤）。

浮動框架是一種較爲特殊的框架，它是在瀏覽器窗口中嵌套的子窗口，整個頁面並不必定是框架頁面，但要包含一個框架窗口。<iframe>框架能夠徹底由設計者定義寬度和高度，而且能夠放置在一個網頁的任何位置，這極大地擴展了框架頁面的應用範圍。

<frameset>生成的框架結構是依賴上級空間尺寸的，它的寬度或者高度必須有一個和上級框架相同。而<iframe>浮動框架能夠徹底由指定寬度和高度決定。

語法：

說明：

src屬性是iframe的必須屬性，它定義浮動框架頁面的源文件地址。

在普通框架結構中，因爲框架就是整個瀏覽器的窗口，所以不須要設置其大小。可是在浮動框架中，框架是插入到普通HTML頁面中，因此能夠調整框架的大小。浮動框架的寬度和高度都是以像素爲單位。width和height這2個都是可選屬性。

舉例：

<!DOCTYPE html>

<head>

</head>

<body>

<h3>綠葉學習網</h3>

</div>

</body>

</html>

在瀏覽器預覽效果以下；

iframe標籤

分析：

在這段代碼中，設置了iframe的src屬性值爲「http://www.baidu.com」（百度首頁地址），寬 width爲400px，高height爲300px。

你們在瀏覽器查看到該頁面嵌入了一個子頁面，而這個子頁面就是百度的首頁。

(二)、設置浮動框架是否顯示滾動條scrolling

對於浮動框架iframe的的滾動條，咱們可使用scrolling屬性來控制。scrolling屬性有3種狀況：根據須要顯示、老是顯示和不顯示。

語法：

說明： scrolling屬性取值以下：

scrolling屬性值

scrolling屬性值	說明
auto	默認值，整個表格在瀏覽器頁面中左對齊

yes

老是顯示滾動條，即便頁面內容不足以撐滿框架範圍，滾動條的位置也預留

在任何狀況下都不顯示滾動條

舉例：

在瀏覽器預覽效果以下；

iframe標籤分析：

你們能夠看到，浮動框架iframe的滾動條都消失了。你們能夠在「在線測試工具」中修改一下 scrolling屬性值，看看不一樣屬性值下有什麼不一樣的效果。

浮動框架，說白了就是在一個頁面嵌入一個或多個子頁面，這樣你們好理解了吧。

3、進階內容

一、HTML、XHTML和HTML5

不少新手每每分不清HTML、XHTML和HTML5,這一節給你們詳細講解一下這三者的關係和區別。

（一）HTML 和 XHTML

HTML,全稱HyperText Mark-up Language (超文本標記語言)，是構成網頁文檔的主要語言。咱們常說的HTML指的是HTML 4.01。

XHTML,全稱 Extensible HyperText Mark-up Language (擴展的超文本標記語言), 它是XML風格

的HTML 4.01,咱們能夠稱之爲更嚴格、更純淨的HTML 4.01。

HTML語法書寫比較鬆散，利於開發者編寫。可是對於機器，如電腦、手機等來講，語法越鬆散，處理起來越困難。所以爲了讓機器更好地處理HTML,咱們纔在HTML基礎上引入了 XHTML

XHTML相對於HTML來講，在語法上更加嚴格。XHTML和HTML主要區別以下。

一、XHTML標籤必須閉合。

在XHTML中，全部標籤必須閉合，例如「<p></p>" 「<div></div>」等。此外，空標籤也須要閉合，例如<br>要寫成<br/>。

錯誤寫法：<p>歡迎來到綠葉學習網正確寫法：<p>歡迎來到綠葉學習網</p> 二、XHTML標籤以及屬性必須小寫。

在XHTML中，全部標籤以及標籤屬性必須小寫，不能大小寫混合，也不能所有都是大寫。不過標籤的屬性值能夠大寫。

錯誤寫法：<Body><DIV></DlV></Body> 正確寫法：<body><div></div></body> 三、XHTML標籤屬性必須用引號。 在XHTML中，標籤屬性值必須用引號括起來，單引號、雙引號均可以。錯誤寫法：<input id=txt type=text/>

正確寫法：<input id="txt" type="text"/> 四、XHTML標籤用jd屬性代替name屬性。 在XHTML中，除了表單元素以外的全部元素，都應該用id而不是name。錯誤寫法：<div name="wrapper"></div>

正確寫法：<div id="wrapper"></div> 下面是一個完整的XHTML文檔。

<!DOCTYPE html>

<head>

<body>

</head>

<p>「<span style="font-weight:bold;color:Red;">視覺化思考</span>」能以獨特而有

</body>

</html>

（二）HTML5

HTML指的是HTML 4.01, XHTML是HTML的過渡版本，XHTML是XML風格的HTML 4.01。而

HTML 5指的是下一代的HTML,也就是HTML 4.01的升級版。

不過HTML 5已經再也不是單純意義上的標籤了，它已經遠遠超越了標籤的範疇。HTML 5 除了新增部分標籤以外，還增長了一組技術，包括canvas、SVG、WebSocket.本地存儲等。這些新增的技術都是使用JavaScript來操做。也就是說，HTML 5使得HTML從一門「標記語言」轉變爲一門「編程語言」。

對於HTML 5中的新技術，在此不作詳細介紹。單純重新增的標籤上來看，HTML 5有如下幾個特點。

一、文檔類型說明

基於HTML 5設計準則中的「化繁爲簡」原則，頁面的文檔類型<!DOCTYPE>被極大地簡化了。 XHTML文檔聲明以下：

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

HTML5文檔聲明以下：

<!DOCTYPE html>

二、標籤再也不區分大小寫

<div>綠葉學習網</DIV>

上面這種寫法也是徹底符合HTML5規範的。可是在實際開發中，建議全部標籤以及屬性都採用小寫方式。

三、容許屬性值不加引號

<div id=wrapper style=co1or: red> 綠葉學習網 </div>

上面這種寫法也是徹底符合HTML5規範的。可是在實際開發中，建議標籤全部屬性值都加引號，單引號或雙引號均可以。

四、容許部分屬性的屬性值省略

在HTML5中，部分具備特殊性屬性的屬性值是能夠省略的。例如，下面代碼是徹底符合HTML 5規範的：

上面兩句代碼等價於：

在HTML 5中，能夠省略屬性值的屬性如表所示。

表1 -1 HTML5中能夠省略屬性值的屬性
省略形式	等價於
checked	checked=nchecked"
readonly	readonly="readonly"
defer	defer="defer"
ismap	ismap="ismap"
nohref	nohref="nohref"
noshade	noshade="noshade"
nowrap	nowrap="nowrap"
selected	selected="selected"
disabled	ciisabled="disableci"
multiple	multiple="multiple"
noresize	noresize="disabled"

一句話歸納 HTML、XHTML 和 HTML 5 就是：HTML 指的是 HTML 4.01, XHTML 是HTML的過

渡版，HTML5是HTML的升級版。

二、div和span

對於div和span這兩個元素，很多新手也不知道它們之間有什麼區別，使用起來也很隨便。所以，這裏有必要簡單介紹一下。

div和span沒有任何語義,正是由於沒有語義，這兩個標籤通常都是配合CSS來定義元素樣式的。 div和span區別以下：

(1 ) div是塊元素，能夠包含任何塊元素和行內元素，不會與其餘元素位於同一行；span 是行內元素，能夠與其餘行內元素位於同一行。

(2 ) div經常使用於頁面中較大塊的結構劃分，而後配合CSS來操做；span 通常用來包含文字等, 它沒有結構的意義，純粹是應用樣式。當其餘行內元素都不適合的時候，能夠用span來配合CSS 操做。

其實，除了 div和span外，還有一個label標籤。div和span是無語義標籤，但label 是有語義標籤。 label 只適用於表單中，用於顯示在輸入控件旁邊的說明性文字。

<!DOCTYPE html>

<head>

</head>

<body>

<p>「<span style="font-weight:bold;color:Red;">視覺化思考</span>」能以獨特而有

</body>

</html>

在這個例子中，咱們想要對「視覺化思考」這幾個文字加粗或者改變顏色，此時能夠使用span包含

文字，而後再進行樣式修改。事實上，span標籤每每都是用來配合CSS來修飾元素的。

三、id和class

id和class是HTML元素中兩個最基本的公共屬性。通常狀況下，id和class都用來選擇元素，以便進

行CSS操做或者JavaScript操做。可是不少新手對id和class這兩個屬性感到很迷茫，不知道什麼時候用id,何時用class,甚至隨便使用。1

（一）id 屬性

id屬性具備惟一性，也就是說在一個頁面中相同的id只容許出現一次。W3C建議，對於頁面關鍵的結構或者大結構，咱們才使用id。所謂的關鍵結構，指的是諸如LOGO、導航、主體內容、底部信息欄等結構。對於一些小地方，仍是建議使用class屬性。

咱們知道搜索引擎識別一個頁面結構，是根據標籤的語義以及id屬性來識別的。所以 id屬性不要輕易使用。此外，id的命名也十分關鍵，特別是對搜索引擎優化而言。對於id和 class的命名，咱們在 CSS進階部分會詳細介紹。

（二）class屬性

class,顧名思義，就是「類」。它釆用的思想跟C、Java等編程語言中的「類」類似。咱們能夠爲同一個頁面的相同元素或者不一樣元素設置相同的class,而後使得相同class的元素具備相同的CSS樣式。

若是你要爲兩個或者兩個以上元素定義相同的樣式，建議使用class屬性。由於這樣能夠減小大量的重複代碼。

注意，對於一個元素而言，咱們能夠定義多個classo 通常來講，定義多個class的目的在於：通常用一個class抽取公共樣式，而後用另一個class定義單獨樣式。

對於id和class,咱們總結一下：對於頁面關鍵結構，建議使用id；對於小地方，建議使用class。就算咱們不須要對關鍵結構進行CSS操做或者JavaScript操做，也建議加上id.以便搜索引擎識別頁面結構。

四、瀏覽器標題欄小圖標

在瀏覽網頁的時候，咱們會發現幾乎全部網站的頁面在瀏覽器標題欄前面都會有一個小圖標想要實現這個效果，咱們只須要在head標籤添加一個link標籤便可。

語法：

說明：

rel和type這兩個屬性的取值是固定形式，無需多講。href屬性取值爲小圖標的地址, 這個地址是根據小圖標在站點文件夾路徑而定的，跟圖片引用路徑是同樣的道理。

這裏注意一下，小圖標格式是.ico,而不是.jpeg、.png、.gif等格式。對於.ico格式的圖標製做，咱們

能夠搜索一下「在線icon",會發現不少不錯的在線工具，你們能夠收藏一下。

<!DOCTYPE html>

<head>

<title>HTML進階學習</title>

</head>

<body>

</body>

</html>

五、語義化

（一）簡介

因爲HTML簡單，不少初學者對它存在一種偏見，以爲它沒多少東西，所以在學習的過程中隨便對待。其實，學習HTML的重點不在於掌握了多少標籤，而是在於掌握標籤的語義以及如何編寫一個語義結構良好的頁面。

在實際開發過程當中，不少人因爲對標籤語義不熟悉，經常用某一個標籤代替另一個標籤來實現某些效果。

舉例：

<!DOCTYPE html>

<head>

.body {

font-family: "微軟雅黑"; font-size: 14px;

}

.content {

width: 300px; padding: 10px;

border: 1px dashed gray;

}

</style>

</head>

.content div { font-size: 16px; font-weight: bold; height: 24px;

line-height: 24px;

<body>

<p>web前端開發最核心3個技術：HTML、CSS和JavaScript HTML控制網頁的結構，CSS

</div>

</body>

</html>

在瀏覽器預覽效果如圖所示。

對於上面的標題效果，正確的作法應該是

使用h1 ~ h6標籤來實現，但這裏卻使用div 來代替了。雖然頁面效果同樣，可是這種「用某一個標籤代替另一個標籤來實現相同效果」的作法是徹底不可取的，由於它違背了 HTML這門語言的初衷。

HTML的精髓就在於標籤的語義。在HTML中，大部分標籤都有它自身的語義，例如p標籤，表示的是"paragraph",標記的是一個段落；hl標籤，表示「headerl」,標記的是一個最高級標題……而div 和span是無語義的標籤，咱們應該儘量少用。

HTML很簡單，所以不少初學者每每忽略了它的目的和重要性。咱們學習HTML並不是看本身學了多少標籤，更重要的是在你須要的地方可否用到正確的語義化標籤。把標籤用在對的地方，這纔是 HTML學習的目的所在。

咱們都知道前端最核心的技術是HTML、CSS和JavaScript這三種。.其中HTML是網頁的結構，CSS

是網頁的外觀，JavaScript是網頁的行爲。在這三大元素中，HTML纔是最重要的，而CSS 和.JavaScript只是用來修飾結構的。就像你蓋房子，房子裝飾得再漂亮，若是結構不穩也容易塌。

整站開發時，編寫的代碼每每都是成千上萬行，若是咱們所有使用div和span來代替語義化標籤，後期維護會很是困難。此外對於一個頁面來講，咱們能夠根據一個頁面的外觀來判斷哪些是標題，哪些是圖片。可是搜索引擎跟人不同，它可「看不懂」一個頁面長什麼樣的。它只會根據HTML 代碼來識別。搜索引擎通常都是根據HTML標籤來識別這裏是一個img標籤，那裏是一個p標籤等。若是整個頁面都是div和span,捜索引擎小蜘蛛肯定會迷路，可能之後都不想來光顧你這個站點。要是這樣的話，你崩潰了，你的老闆也跟着崩潰了。

從上面咱們知道，編寫一個語義結構良好的頁面在實際開發中極其重要。主要有兩個最大的優勢：

①利於開發調試和後期維護；②利於搜索引擎優化。

（二）標題語義化

h1 - h6是標題標籤，h表示「header」。h1~ h6在HTML語義化中佔有極其重要的地位。 h1 ~ h6 按照標題的重要性依次遞減，其中h1重要性最高，h6重要性最低。

相對於其餘語義化標籤，h1~ h6在搜索引擎優化(即SEO)中佔有至關重要的地位。在一個頁面中， h1 ~ h6這6個標籤，咱們不須要所有都用上，都是根據須要才用的。對於 h1~ h6,—般狀況下咱們只會用到h一、h二、h3和h4，不多再會去用h5和h6,由於一個頁面不可能用到那麼多級的標題。而且從搜索引擎優化的角度來講，h一、h二、h3和h4這4個標籤會被賦予必定的權重，而h5和h6的權重跟普通標籤差很少，在SEO優化上意義不大。

對於標題h1 ~ h6的語義化，咱們須要注意如下四個方面。

（1）一個頁面只能有一個h1標籤。

（2）hl ~ h6之間不要斷層。

（3）不要用h1 ~ h6來定義樣式。

（4）不要用div來代替h1 ~ h6.

1.一個頁面只能有一個h1標籤

hl標籤表示每一個頁面中最高層級的標題，捜索引擎會賦予hl標籤最高權重。雖然W3C 沒有明確規定一個頁面不能有多個hl標籤，可是咱們仍是推薦「一個頁面一個hl標籤」的作法。若是一個頁面出現多個hl,對搜索引擎可能很差，也可能會被判以做弊。就像你寫文章同樣，一個頁面就等於一篇文章，你見過一篇文章有多個主標題的麼？

2.h1~h6之間不要出現斷層

搜索引擎對hl ~ h6標籤比較敏感，尤爲是hl和h2。一個語義良好的頁面，hl ~ h6 應該是完整有序

而沒有出現斷層的。也就是說，要按照「hl、h二、h三、h4」這樣的順序依次排列下來，不要出現「hl、h三、h4」而漏掉h2的狀況。

3.不要用h1~h6來定義樣式

咱們都知道h1 ~ h6是有默認樣式的，如圖所示。在實際開發中，不少時候咱們需要爲文本定義字體加粗或者字體大小。有些人喜歡用h1 ~ h6來代替CSS,使用標籤來控制樣式，這是一種很是很差的作法。咱們必定要記住，HTML關注的是結構(語義)，CSS關注的是樣式，結構跟樣式應該分離。

4.不要用div來代替h1~h6 從語義上來講，一個頁面的標題應該使用h1〜h6標籤，不要使用div來代替。分析：

div是無語義的標籤，若是使用div來代替h1〜h6,後期維護比較困難，並且對SEO 影響也很是大。因爲這種作法會讓一個頁面丟失大量的權重。

（三）圖片語義化

在HTML中，咱們使用img標籤來表示圖片。對於圖片的語義化，咱們從如下兩個方面來深刻探討一下。

（1） alt屬性和title屬性。

（2） figure 元素和 figcaption 元素。

一、alt屬性和title屬性

img標籤有兩個重要屬性：alt和title。

alt屬性用於圖片描述，這個描述文字是給捜索引擎看的。而且當圖片沒法顯示時，頁面會顯示alt中的文字。

title屬性也用於圖片描述，不過這個描述文字是給用戶看的。而且當鼠標指針移到圖片上時，會顯示title中的內容。

語法：

說明：

搜索引擎跟人不同，它看不出一張圖片描繪的是什麼東西，它只會査看HTML代碼，經過img標籤的alt屬性或者頁面上下文來判斷圖片的內容。所以，對於img標籤，咱們必定要添加alt屬性，以便搜索引擎識別圖片的內容。alt屬性在搜索引擎優化中也很重要，而且會被賦予必定的權重。

請必定要注意；alt屬性是img標籤必需屬性，必定要添加；title屬性是img標籤可選屬性，可加可不加。建議你們在實際開發中，對於img標籤，要記得在alt屬性中添加必要的描述信息。

二、figure 元素和 figcaption 元素

對於如圖所示的這種「圖片+圖注」的效果，咱們可使用以下代碼來實現。

<span>HTML入門教程 </span>

<div>

可是這種實現方式的語義並很差。在HTML 5中，引入了 figure和figcaption兩個元素來加強圖片

的語義化。語法：

</figure>

說明：

figure元素用於包含圖片和圖注，figcaption元素用於表示圖註文字。在實際開發中，對於「圖片

+圖注」效果，咱們都建議使用figure和figcaption這兩個元素來實現，從而使得頁面的語義更加良好。

（四）表格語義化

在實際開發中，咱們不建議使用表格佈局，應該使用浮動佈局或者定位佈局。雖然表格拿來作佈局的方式被拋棄了，可是這並無說明表格就一無可取了。

問你們一個問題：如圖所示的這種表格數據的展現，應該怎麼實現呢？很多得了「table恐懼症」的小夥伴可能會想到使用div來模擬表格。事實上，對於這種表格數據形式, 最好的選擇仍是table。

font-weight屬性值		說明
normal		默認值,正常體
lighter		較細
bold		較粗
bolder		很粗（效果跟bold差很少）

在表格中，咱們比較經常使用的標籤是table, tr和td這3個。不過爲了增強表格的語義化，W3C還增長了 5個標籤：th、caption、thead、tbody和tfoot。th表示「表頭單元格」； caption表示「表格標題」。thead、tbody和tfoot這3個標籤把表格從語義上分爲三部分: 表頭、表身和表腳。有了這幾

個標籤，表格語義更加良好，結構更加清晰。對於這5個標籤, 咱們在本書的姊妹篇中已經作了詳細

的介紹，這裏就再也不贅述。表格標籤如表2-1所示。

表2-1		表格標籤
標籤
table
caption
thead
tbody
tfoot
tr
th
td

舉例：

<!DOCTYPE html>

<head>

.body {

font-family: "微軟雅黑"; font-size: 14px;

}

</style>

</head>

<body>

<table>

<!--

-->

表頭

<thead>

<tr>

<th>表頭單元格l</th>

<th>表頭單元格2</th> </tr>

</thead>

<!--

-->

表身

<tbody>

<tr>

<td>標準單元格l</td>

<td>標準單元格2</td> </tr>

<tr>

<td>標準單元格l</td>

<td>標準單元格2</td> </tr>

</tbody>

<!--

-->

</div>

</body>

表腳

<tfoot>

<tr>

<td>標準單元格l</td>

<td>標準單元格2</td> </tr>

</tfoot>

</table>

</html>

說明：

thead, tbody和tfoot這三個標籤也是表格中很是重要的標籤，它從語義上區分了表頭、表身和表腳。不少人容易忽略這三個標籤。

舉例：

<!DOCTYPE html>

<head>

table, thead, tbody, tfoot, th, td

{

</style>

</head>

<body>

<table>

border: 1px dashed gray; }

<caption>考試成績表</caption>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

</body>

</html>

分析：

對於theadx tbody和tfoot這3個標籤，不必定可以所有都用得上，例如tfoot就不多用。通常狀況下，咱們都是根據實際須要來使用這3個標籤的。

（五）表單語義化

表單跟表格，這是兩個徹底不同的概念，不過仍是有很多初學者傻傻分不清。對於表單語義化，咱們從2個方面來探究一下。

（1）label 標籤。

（2）fieldset 標籤和 legend 標籤。

一、label 標籤

W3C規範定義，label標籤用於顯示在輸入控件旁邊的說明性文字。也就是將某個表單元素和某段說明文字關聯起來。

語法：

<label for=""> 說明性文字 </label> 說明：

label標籤for屬性值爲所關聯的表單元素的id,例如<input id="name" type="text"/>, 則其所關聯的label標籤應該爲<label for="name"></lable>

label標籤的for屬性有兩個做用。

①語義上綁定了 label元素和表單元素。

②加強了鼠標可用性。也就是說咱們點擊label中的文本時，其所關聯的表單元素也會得到焦點。舉例：

<!DOCTYPE html>

<head>

</head>

<body>

<div>

<input id="Radio1" type="radio"/>單選框

<input id="Checkbox1" type="checkbox" />複選框

</div>

<hr />

<div>

<input id="rdo" name="rdo" type="radio"/><label for="rdo">單選框</labe

<input id="cbk" name="cbk" type="checkbox" /><label for="cbk">複選框</

</div>

</body>

</html>

分析；

從這個例子能夠看到，在第一組表單中，咱們只能點擊單選框才能選中單選框，點擊它旁邊的說明文字是不能選中的。在第二組表單中，咱們能夠點擊單選框來選中單選框，而且點擊它旁邊的說明文字一樣也能夠選中單選框。而對於複選框來講，也是同樣的效果。

其實，這就是label標籤for屬性的做用。for屬性使得鼠標單擊的範圍擴大到label元素上，極大地提高了用戶單擊的可操做性。事實上，label標籤有兩種關聯方式，咱們拿複選框來講，下面兩行代碼是等價的。

對於圖中的效果，咱們使用label標籤來加強語義化，修改後的代碼以下

<!DOCTYPE html>

<head>

</head>

<body>

<div>登陸綠葉學習網</div>

<p>

</p>

<label for="name"> 帳號：</1abel><input type="text" id="name" name

<label for="pwd"> 密碼：</label><input type="password" id="pwd" name="

</p>

<input type="checkbox" id= "remember-me" name="remember-me"/> <label

</form>

</body>

</html>

2.fieldset 標籤和 legend 標籤。

語法：

<legend> 表單組標題 </legend>

</fieldset>

說明：使用fieldset和legend標籤有兩個做用。

（1）加強表單的語義。

（2）能夠定義fieldset元素的disabled屬性來禁用整個組中的表單元素。對於圖中的效果，咱們使用fieldset和legend這兩個標籤來加強語義化，修改後的代碼以下。

<!DOCTYPE html>

<head>

</head>

<body>

<legend>登陸綠葉學習網</legend>

<p>

</p>

<label for="name"> 帳號：</1abel><input type="text" id="name"

<label for="pwd"> 密碼：</label><input type="password" id="pwd" na

</p>

<input type="checkbox" id="remember-me" name="remember-me" /> <la

</fieldset>

</form>

</body>

</html>

分析：

咱們能夠看到，使用了 fieldset和legend這兩個標籤以後，表單造成了很是美觀的「書籤」效果

（六）其餘語義化

一、 換行符 <br/> 不少新手會使用＜br/＞標籤來換行，或者使用多個＜br/＞標籤來實現元素之間的上下間距。 舉例：

<div>

</div>

上面兩個例子使用＜br/＞標籤的方式是錯誤的，這也是＜br/＞標籤很常見的錯誤用法。事實上，

＜br/＞標籤有本身特定的語義，不能隨便用來實現換行效果。W3C標準規定，＜br/＞標籤僅僅用於段落中的換行，不能用於其餘狀況。也就是說，＜br/＞標籤只適合用於p標籤內部的換行，不能用於其餘標籤。

二、無序列表ul

在實際開發中，對於列表型的數據，爲了實現良好的語義，咱們仍是建議使用無序列表或者有序列表，不建議使用div等來實現。

對於如圖所示效果，很多新手極可能會寫出以下代碼來實現。

<div>

<div><span>3</span>JavaScript 教程 </div>

</div>

這種實現方式缺少語義化，而且也不利於維護。正確的作法是:

<ul>

<li><Sp^n>3</span>JavaScript 教程 </li>

</ul>

有人問，每個列表項前都有數字，不該該使用有序列表來實現嗎？爲何這裏使用無序列表來實現呢？假如使用有序列表，咱們是作不到這種外觀效果的。由於有序列表前的數字外觀是固定的。在實際開發中，大多數狀況下都是使用無序列表，極少狀況下會使用有序列表。

三、strong標籤和em標籤

strong用於實現加粗文本，em用於實現斜體文本。基於結構和樣式分離的原則，標籤僅僅是爲了

實現簡單的加粗或者斜體效果，咱們通常不會用這兩個。實際上，W3C對這兩個標籤賦予「強調」的語義，在strong或者em標籤內部的文本被強調爲重要文本。而且搜索引擎對這兩個標籤也賦予必定的權重。若是在一個頁面中，爲了 SEO而想要突出某些關鍵字，可使用strong和em這兩個標籤。通常狀況下，咱們都是去掉strong和em的默認樣式，而後使用CSS從新定義新的樣式, 但這並不影響這兩個標籤的語義。也就是說，樣式只會改變標籤的外觀，但不會改變標籤的語義。

四、del標籤和ins標籤

在HTM L中，del和ins這兩個標籤是配合使用的。del表示「delete」，用於定義被刪除的文本。 ins表示「insert」，用於定義被更新的文本。通常狀況下，咱們會使用CSS來重新定義del和ins標籤的樣式。

舉例：

<!DOCTYPE html>

<head>

</head>

<body>

<p>新鮮的新西蘭奇異果</p>

</body>

</html>

五、img標籤

想要在頁面顯示一張圖片，咱們有兩種方式：一是使用img標籤；二是使用背景圖片。這兩種實現方式最明顯的區別在於：使用img標籤添加圖片，是經過HTML來實現；使用背景圖片，是經過CSS

來實現。

在實際開發中，不少人添加圖片的方式很隨意。對於何時使用img標籤，何時使用背景圖片，並非很清楚咱們應該根據HTML的語義來判斷。若是圖片做爲HTML的一部分，而且想要被捜索引擎識別，則應該使用img標籤，例如常見的各類圖片列表。若是圖片僅僅是起到修飾做用，而且不想被搜索引擎識別，則應該使用背景圖片。

舉個例子，圖左這個頁面中的圖標圖片就應該使用背景圖片實現，由於這些圖標並不須要被搜索引擎識別，也不做爲HTML的一部分。而圖右頁面中應該使用img標籤來實現，由於這是頁面HTML結構的一部分，而且但願被搜索引擎識別。

【總結】

以上只是列舉了在實際開發中比較常見的語義標籤，其實HTML5新增了不少結構語義標籤，例如 header、nav、aside、footer、article、section等。若是想要實現語義更爲良好的頁面，咱們也應該去關注這些新增的標籤。不過結構語義標籤是HTML5的內容，所以這裏不展開介紹。

（七）語義化驗證

前面這幾節，咱們介紹了頁面語義化須要注意的各個地方。那麼日常有什麼好的辦法來判斷一個頁面是否語義良好呢？一個很簡單的辦法就是：去掉CSS樣式，而後看頁面是否還具備很好的可讀性。

咱們都知道，不少HTML標籤都有必定的默認樣式，例如p標籤有上下邊距、strong標籤對字體加粗、ul標籤有縮進效果，等等。

在前面咱們接觸過，咱們可使用一個標籤來代替另一個標籤，而且使用CSS修飾來實現相同的效果。也就是說，不一樣的HTML標籤能夠經過不一樣的CSS來實現相同的效果。但是「一個語義良好的頁面」跟「一個語義很差的頁面」在去除樣式以後的表現倒是大相徑庭的。

語義很差的頁面和語義好的頁面

從上面兩張圖咱們能夠看出：一個語義良好的頁面在「CSS裸奔」以後，可讀性也是非常高的。想要查看一個頁面在「CSS裸奔」下的效果，咱們可使用Firefox瀏覽器的一款網頁調試插件"Web Developer"來測試。

在 Web Developer ZL具欄找到「CSS」 —► "Disable Styles" —'"Disable All Styles" 而且選中，就能夠查看頁面去掉樣式後的效果，如圖2-21所示。Web Developer插件的安裝和使用，請自行搜索，很簡單。

六、HTML5捨棄的標籤

在HTML5中，除了新增標籤以外，也有很多標籤被捨棄了，如表1和表2所示。

爲了實現頁面的語義化，咱們在實際開發中不該該再去使用這些標籤。所以瞭解哪些標籤已經被舍棄是很是有必要的。

對於這些被捨棄的標籤，整體能夠分爲兩大類。

（1）僅僅爲了定義樣式，沒有任何語義，所以被捨棄。

（2）不多使用或者已經被新標籤代替，所以被捨棄。

表1 HTML5捨棄的標籤(僅爲了定義樣式)
標籤		說明
basefont		定義頁面文本的默認字體、顏色或尺寸
big		定義大字號文本
center		定義文本居中
font		定義文本的字體樣式
strike		定義刪除線文本
s		定義刪除線文本
u		定義下劃線文本
表2 HTML5捨棄的標籤(不多使用或者已被新標籤代替)
標籤		說明
dir		定義目錄列表，應該用ul代替
acronym		定義首字母縮寫，應該用abbr代替
applet		定義嵌入的applet,應該用object代替
isindex		定義與文檔相關的可搜索索引
frame		定義frameset中的一個特定的框架
frameset		定義一個框架集
noframes		爲那些不支持框架的瀏覽器顯示文本