HTML標(biāo)簽語(yǔ)義和HTML標(biāo)簽語(yǔ)義化的設(shè)計(jì)

當(dāng)前位置：首頁(yè) > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)頁(yè)制作

來源：易賢網(wǎng) 閱讀：1476 次日期：2016-07-13 16:55:55

溫馨提示：易賢網(wǎng)小編為您整理了“HTML標(biāo)簽語(yǔ)義和HTML標(biāo)簽語(yǔ)義化的設(shè)計(jì)”,方便廣大網(wǎng)友查閱！

一個(gè)網(wǎng)頁(yè)就好像是一棟房子，HTML結(jié)構(gòu)就是一面面的墻，而標(biāo)簽則是一塊塊的磚，磚要擺放有序，整整齊齊，墻才會(huì)牢固。最后css則是裝飾材料，美不美就靠她了。因此，我們要有一個(gè)優(yōu)秀的網(wǎng)頁(yè)，既要提供一個(gè)干凈而又有清晰結(jié)構(gòu)的HTML，更加離不開css的極致美化。

前段時(shí)間，在網(wǎng)上瀏覽時(shí)，發(fā)現(xiàn)國(guó)內(nèi)幾家互聯(lián)網(wǎng)巨頭公司的前端開發(fā)招聘題目，依然都提到一個(gè)標(biāo)簽語(yǔ)義化的問題，這個(gè)話題在已經(jīng)是老生常談了，但依舊問題多多，歸結(jié)于一個(gè)習(xí)慣吧，有時(shí)間我也太懶，沒有多加考慮就直接寫代碼，我知道我錯(cuò)了！童鞋們，我們得讓標(biāo)簽語(yǔ)義化成為一種習(xí)慣！今天就再普及一下標(biāo)簽語(yǔ)義化，也鞭策下自己，別整天迷迷糊糊的！

在網(wǎng)頁(yè)設(shè)計(jì)中，我們時(shí)常都會(huì)聽到標(biāo)簽語(yǔ)義化這個(gè)名詞，HTML標(biāo)簽語(yǔ)義化的設(shè)計(jì)思維其實(shí)就是給某塊內(nèi)容用上一個(gè)最恰當(dāng)最合適的標(biāo)簽，這樣一來，不管是誰(shuí)都能看懂這塊內(nèi)容是什么。

從上面也說明標(biāo)簽語(yǔ)義化極其重要，HTML每個(gè)標(biāo)簽都有自己的語(yǔ)義，都有自己適用的范圍。但往往會(huì)被我們忽略或者被我們?yōu)E用，舉個(gè)例子：在一個(gè)頁(yè)面中<div>用了幾十個(gè)甚至上百個(gè)，這是個(gè)無(wú)意義的標(biāo)簽，只是表示一個(gè)層而已，非常不利于后期的維護(hù)；而<table>標(biāo)簽則是一個(gè)數(shù)據(jù)標(biāo)簽，該用的時(shí)候，我們就要大膽使用。

標(biāo)簽語(yǔ)義化的好處

讓你使用標(biāo)簽語(yǔ)義化的理由可以有無(wú)數(shù)條：

去掉樣式或者樣式丟失時(shí)頁(yè)面結(jié)構(gòu)依然清晰分明

移動(dòng)設(shè)備能夠更加完美的展示你的網(wǎng)頁(yè)（移動(dòng)設(shè)備對(duì)css的支持較弱）

閱讀器會(huì)根據(jù)標(biāo)簽的語(yǔ)義自動(dòng)解析，呈現(xiàn)更容易閱讀的內(nèi)容形式（無(wú)障礙閱讀）

搜索引擎會(huì)根據(jù)標(biāo)簽的語(yǔ)義確定上下文和權(quán)重問題

便于后期的開發(fā)以及維護(hù)，團(tuán)隊(duì)合作效率提高

……

HTML標(biāo)簽語(yǔ)義匯總

為了更快更好的運(yùn)用標(biāo)簽語(yǔ)義化，下面的表單列出了所有的HTML標(biāo)簽以及標(biāo)簽的描述。以下列表按字母順序排列，其中 new :為 HTML5 中的新標(biāo)簽。

標(biāo)簽	描述
<!–…–>	定義注釋。
<!DOCTYPE>	定義文檔類型。
<a>	定義超鏈接。
<abbr>	定義縮寫。
<acronym>	HTML 5 中不支持。定義首字母縮寫。
<address>	定義地址元素。
<applet>	HTML 5 中不支持。定義 applet。
<area>	定義圖像映射中的區(qū)域。
<article>	定義 article。
<aside>	定義頁(yè)面內(nèi)容之外的內(nèi)容。
<audio>	定義聲音內(nèi)容。
<b>	定義粗體文本。
<base>	定義頁(yè)面中所有鏈接的基準(zhǔn) URL。
<basefont>	HTML 5 中不支持。請(qǐng)使用 CSS 代替。
<bdi>	定義文本的文本方向，使其脫離其周圍文本的方向設(shè)置。
<bdo>	定義文本顯示的方向。
<big>	HTML 5 中不支持。定義大號(hào)文本。
<blockquote>	定義長(zhǎng)的引用。
<body>	定義 body 元素。
<br>	插入換行符。
<button>	定義按鈕。
<canvas>	定義圖形。
<caption>	定義表格標(biāo)題。
<center>	HTML 5 中不支持。定義居中的文本。
<cite>	定義引用。
<code>	定義計(jì)算機(jī)代碼文本。
<col>	定義表格列的屬性。
<colgroup>	定義表格列的分組。
<command>	定義命令按鈕。
<datalist>	定義下拉列表。
<dd>	定義定義的描述。
<del>	定義刪除文本。
<details>	定義元素的細(xì)節(jié)。
<dfn>	定義定義項(xiàng)目。
<dir>	HTML 5 中不支持。定義目錄列表。
<div>	定義文檔中的一個(gè)部分。
<dl>	定義定義列表。
<dt>	定義定義的項(xiàng)目。
<em>	定義強(qiáng)調(diào)文本。
<embed>	定義外部交互內(nèi)容或插件。
<fieldset>	定義 fieldset。
<figcaption>	定義 figure 元素的標(biāo)題。
<figure>	定義媒介內(nèi)容的分組，以及它們的標(biāo)題。
<font>	HTML 5 中不支持。
<footer>	定義 section 或 page 的頁(yè)腳。
<form>	定義表單。
<frame>	HTML 5 中不支持。定義子窗口（框架）。
<frameset>	HTML 5 中不支持。定義框架的集。
<h1> to <h6>	定義標(biāo)題 1 到標(biāo)題 6。
<head>	定義關(guān)于文檔的信息。
<header>	定義 section 或 page 的頁(yè)眉。
<hgroup>	定義有關(guān)文檔中的 section 的信息。
<hr>	定義水平線。
<html>	定義 html 文檔。
<i>	定義斜體文本。
<iframe>	定義行內(nèi)的子窗口（框架）。
<img>	定義圖像。
<input>	定義輸入域。
<ins>	定義插入文本。
<keygen>	定義生成密鑰。
<isindex>	HTML 5 中不支持。定義單行的輸入域。
<kbd>	定義鍵盤文本。
<label>	定義表單控件的標(biāo)注。
<legend>	定義 fieldset 中的標(biāo)題。
<li>	定義列表的項(xiàng)目。
<link>	定義資源引用。
<map>	定義圖像映射。
<mark>	定義有記號(hào)的文本。
<menu>	定義菜單列表。
<meta>	定義元信息。
<meter>	定義預(yù)定義范圍內(nèi)的度量。
<nav>	定義導(dǎo)航鏈接。
<noframes>	HTML 5 中不支持。定義 noframe 部分。
<noscript>	定義 noscript 部分。
<object>	定義嵌入對(duì)象。
<ol>	定義有序列表。
<optgroup>	定義選項(xiàng)組。
<option>	定義下拉列表中的選項(xiàng)。
<output>	定義輸出的一些類型。
<p>	定義段落。
<param>	為對(duì)象定義參數(shù)。
<pre>	定義預(yù)格式化文本。
<progress>	定義任何類型的任務(wù)的進(jìn)度。
<q>	定義短的引用。
<rp>	定義若瀏覽器不支持 ruby 元素顯示的內(nèi)容。
<rt>	定義 ruby 注釋的解釋。
<ruby>	定義 ruby 注釋。
<s>	HTML 5 中不支持。定義加刪除線的文本。
<samp>	定義樣本計(jì)算機(jī)代碼。
<script>	定義腳本。
<section>	定義 section。
<select>	定義可選列表。
<small>	將旁注 (side comments) 呈現(xiàn)為小型文本。
<source>	定義媒介源。
<span>	定義文檔中的 section。
<strike>	HTML 5 中不支持。定義加刪除線的文本。
<strong>	定義強(qiáng)調(diào)文本。
<style>	定義樣式定義。
<sub>	定義下標(biāo)文本。
<summary>	定義 details 元素的標(biāo)題。
<sup>	定義上標(biāo)文本。
<table>	定義表格。
<tbody>	定義表格的主體。
<td>	定義表格單元。
<textarea>	定義 textarea。
<tfoot>	定義表格的腳注。
<th>	定義表頭。
<thead>	定義表頭。
<time>	定義日期/時(shí)間。
<title>	定義文檔的標(biāo)題。
<tr>	定義表格行。
<track>	定義用在媒體播放器中的文本軌道。
<tt>	HTML 5 中不支持。定義打字機(jī)文本。
<u>	HTML 5 中不支持。定義下劃線文本。
<ul>	定義無(wú)序列表。
<var>	定義變量。
<video>	定義視頻。
<xmp>	HTML 5 中不支持。定義預(yù)格式文本。