武林網(www.49028c.com)文章簡介:一個網頁就好像是一棟房子,HTML結構就是一面面的墻,而標簽則是一塊塊的磚,磚要擺放有序,整整齊齊,墻才會牢固。最后css則是裝飾材料,美不美就靠她了。因此,我們要有一個優秀的網頁,既要提供一個干凈而又有清晰結構的HTML,更加離不開css的極致美化。
前段時間,在網上瀏覽時,發現國內幾家互聯網巨頭公司的前端開發招聘題目,依然都提到一個標簽語義化的問題,這個話題在已經是老生常談了,但依舊問題多多,歸結于一個習慣吧,有時間我也太懶,沒有多加考慮就直接寫代碼,我知道我錯了!童鞋們,我們得讓標簽語義化成為一種習慣!今天就再普及一下標簽語義化,也鞭策下自己,別整天迷迷糊糊的!
在網頁設計中,我們時常都會聽到標簽語義化這個名詞,HTML標簽語義化的設計思維其實就是給某塊內容用上一個最恰當最合適的標簽,這樣一來,不管是誰都能看懂這塊內容是什么。
一個網頁就好像是一棟房子,HTML結構就是一面面的墻,而標簽則是一塊塊的磚,磚要擺放有序,整整齊齊,墻才會牢固。最后css則是裝飾材料,美不美就靠她了。因此,我們要有一個優秀的網頁,既要提供一個干凈而又有清晰結構的HTML,更加離不開css的極致美化。
從上面也說明標簽語義化極其重要,HTML每個標簽都有自己的語義,都有自己適用的范圍。但往往會被我們忽略或者被我們濫用,舉個例子:在一個頁面中<div>用了幾十個甚至上百個,這是個無意義的標簽,只是表示一個層而已,非常不利于后期的維護;而<table>標簽則是一個數據標簽,該用的時候,我們就要大膽使用。
標簽語義化的好處讓你使用標簽語義化的理由可以有無數條:
HTML標簽語義匯總為了更快更好的運用標簽語義化,下面的表單列出了所有的HTML標簽以及標簽的描述。以下列表按字母順序排列,其中 new :為 HTML5 中的新標簽。
標簽描述
<!–…–>定義注釋。
<!DOCTYPE>定義文檔類型。
<a>定義超鏈接。
<abbr>定義縮寫。
<acronym>HTML 5 中不支持。定義首字母縮寫。
<address>定義地址元素。
<applet>HTML 5 中不支持。定義 applet。
<area>定義圖像映射中的區域。
<article>定義 article。
<aside>定義頁面內容之外的內容。
<audio>定義聲音內容。
<b>定義粗體文本。
<base>定義頁面中所有鏈接的基準 URL。
<basefont>HTML 5 中不支持。請使用 CSS 代替。
<bdi>定義文本的文本方向,使其脫離其周圍文本的方向設置。
<bdo>定義文本顯示的方向。
<big>HTML 5 中不支持。定義大號文本。
<blockquote>定義長的引用。
<body>定義 body 元素。
<br>插入換行符。
<button>定義按鈕。
<canvas>定義圖形。
<caption>定義表格標題。
<center>HTML 5 中不支持。定義居中的文本。
<cite>定義引用。
<code>定義計算機代碼文本。
<col>定義表格列的屬性。
<colgroup>定義表格列的分組。
<command>定義命令按鈕。
<datalist>定義下拉列表。
<dd>定義定義的描述。
<del>定義刪除文本。
<details>定義元素的細節。
<dfn>定義定義項目。
<dir>HTML 5 中不支持。定義目錄列表。
<div>定義文檔中的一個部分。
<dl>定義定義列表。
<dt>定義定義的項目。
<em>定義強調文本。
<embed>定義外部交互內容或插件。
<fieldset>定義 fieldset。
<figcaption>定義 figure 元素的標題。
<figure>定義媒介內容的分組,以及它們的標題。
<font>HTML 5 中不支持。
<footer>定義 section 或 page 的頁腳。
<form>定義表單。
<frame>HTML 5 中不支持。定義子窗口(框架)。
<frameset>HTML 5 中不支持。定義框架的集。
<h1> to <h6>定義標題 1 到標題 6。
<head>定義關于文檔的信息。
<header>定義 section 或 page 的頁眉。
<hgroup>定義有關文檔中的 section 的信息。
<hr>定義水平線。
<html>定義 html 文檔。
<i>定義斜體文本。
<iframe>定義行內的子窗口(框架)。
<img>定義圖像。
<input>定義輸入域。
<ins>定義插入文本。
<keygen>定義生成密鑰。
<isindex>HTML 5 中不支持。定義單行的輸入域。
<kbd>定義鍵盤文本。
<label>定義表單控件的標注。
<legend>定義 fieldset 中的標題。
<li>定義列表的項目。
<link>定義資源引用。
<map>定義圖像映射。
<mark>定義有記號的文本。
<menu>定義菜單列表。
<meta>定義元信息。
<meter>定義預定義范圍內的度量。
<nav>定義導航鏈接。
<noframes>HTML 5 中不支持。定義 noframe 部分。
<noscript>定義 noscript 部分。
<object>定義嵌入對象。
<ol>定義有序列表。
<optgroup>定義選項組。
<option>定義下拉列表中的選項。
<output>定義輸出的一些類型。
<p>定義段落。
<param>為對象定義參數。
<pre>定義預格式化文本。
<progress>定義任何類型的任務的進度。
<q>定義短的引用。
<rp>定義若瀏覽器不支持 ruby 元素顯示的內容。
<rt>定義 ruby 注釋的解釋。
<ruby>定義 ruby 注釋。
<s>HTML 5 中不支持。定義加刪除線的文本。
<samp>定義樣本計算機代碼。
<script>定義腳本。
<section>定義 section。
<select>定義可選列表。
<small>將旁注 (side comments) 呈現為小型文本。
<source>定義媒介源。
<span>定義文檔中的 section。
<strike>HTML 5 中不支持。定義加刪除線的文本。
<strong>定義強調文本。
<style>定義樣式定義。
<sub>定義下標文本。
<summary>定義 details 元素的標題。
<sup>定義上標文本。
<table>定義表格。
<tbody>定義表格的主體。
<td>定義表格單元。
<textarea>定義 textarea。
<tfoot>定義表格的腳注。
<th>定義表頭。
<thead>定義表頭。
<time>定義日期/時間。
<title>定義文檔的標題。
<tr>定義表格行。
<track>定義用在媒體播放器中的文本軌道。
<tt>HTML 5 中不支持。定義打字機文本。
<u>HTML 5 中不支持。定義下劃線文本。
<ul>定義無序列表。
<var>定義變量。
<video>定義視頻。
<xmp>HTML 5 中不支持。定義預格式文本。
新聞熱點
疑難解答