HTML標(biāo)簽規(guī)范

TML標(biāo)簽規(guī)范

盡管目前瀏覽器都兼容HTML，但是，使網(wǎng)頁能夠符合標(biāo)準(zhǔn)，應(yīng)該盡量使用XHTML規(guī)范來編寫代碼，需要注意以下事項(xiàng)：

（1）在XHTML中，標(biāo)簽名必須小寫。在HTML中，標(biāo)簽名稱可以大寫，也可以小寫。

（2）在XHTML中，屬性名稱必須小寫。在HTML中，屬性名稱也必須是小寫的。

（3）在XHTML中，標(biāo)簽必須嚴(yán)格嵌套；HTML對標(biāo)簽的嵌套沒有嚴(yán)格的規(guī)定。

（4）在XHTML中，標(biāo)簽必須封閉；在HTML規(guī)范中，標(biāo)簽不閉合也是正確的，即標(biāo)簽可以不成對出現(xiàn)。例如，“<p>我沒有結(jié)束標(biāo)簽”和“<p>我有開始標(biāo)簽和結(jié)束標(biāo)簽</p >”，這兩條代碼的顯示效果，在HTML規(guī)范中是完全相同的，但是，在XHTML中，第一條語句是不允許的(不能正常顯示)，必須像第二條語句那樣，嚴(yán)格地使標(biāo)簽閉合。

（5）在XHTML中，即使是空元素的標(biāo)簽也必須封閉，這里說的空標(biāo)簽，就是指那些<img>、<br>、<hr>等不對稱的標(biāo)簽，它們也必須閉合，即寫作<img>、<br>、<hr/>；而在HTML.規(guī)范中，這類標(biāo)簽可以不封閉。例如，在HTML中書寫為<img>或<img/>均是正確的，但在XHTML規(guī)范中，必須寫為<img/>才正確。

（6）在XHTML中，屬性值必須用雙引號括起來；在HTML中，屬性可以不必使用雙引號。

（7）在XHTML中，屬性值必須使用完整形式；在HTML中，一些屬性經(jīng)常使用簡寫方式設(shè)定屬性值。例如：

而在XHTML中，必須完整地寫做：

(8)在XHTML中，應(yīng)該區(qū)分“內(nèi)容標(biāo)簽”與“結(jié)構(gòu)標(biāo)簽”。例如，<p>標(biāo)簽是一個內(nèi)容標(biāo)簽，而<table>標(biāo)簽是結(jié)構(gòu)標(biāo)簽，因此，不允許將<table>標(biāo)簽置于<p>標(biāo)簽內(nèi)部。反之，如果將<p>標(biāo)簽置于<td>…</td>之間，則是完全正確的。

（9)在XHTML中，必須添加文檔類型聲明<！DOCTYPE>。該標(biāo)簽用于描述HTML的版本和文檔類型聲明，進(jìn)行了相應(yīng)的版本和文檔類型聲明之后，才能保證這是一個XHTML網(wǎng)頁，從而讓瀏覽器以相應(yīng)的規(guī)范來解析網(wǎng)頁，使網(wǎng)頁正常顯示。

果想開發(fā)一個網(wǎng)站，除了要精通后端開發(fā)語言（如：php）外，還要精通HTML代碼。那么，什么是HTML呢？HTML是一種超文本標(biāo)記語言，它包含有眾多的標(biāo)簽，我們可以通過這些標(biāo)簽，把不同的internet資源（如：文字、圖片、視頻、音頻、表單等等）整合在一個統(tǒng)一的文檔中，這就形成了我們可以看得見的網(wǎng)頁。那么，HTML都有哪些常用的標(biāo)簽?zāi)兀?/p>

一、文檔類型聲明。

html5文檔類型聲明：<!doctype html>

html4文檔類型聲明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、html主標(biāo)簽。

這個標(biāo)簽是html最外層的標(biāo)簽，所有其它的HTML標(biāo)簽都要放在這個標(biāo)簽的內(nèi)部。

<html>

</html>

三、雙標(biāo)簽和單標(biāo)簽。

在HTML標(biāo)簽中，有的標(biāo)簽是成雙成對的，如：<html></html>（如下圖）；而有的標(biāo)簽是單個的，如：<hr>橫線標(biāo)簽。

四、head頭部標(biāo)簽。

head頭部有以下幾種常用標(biāo)簽：

meta：主要提供有關(guān)頁面的元信息。

link：用來定義文檔與外部資源的關(guān)系，最常用的是調(diào)用CSS樣式文件。

title：頁面標(biāo)題的標(biāo)簽。

script：用來調(diào)用JS文件或JS代碼。當(dāng)然，script標(biāo)簽也可以在body主體中使用。

五、body主體標(biāo)簽。

1、塊級標(biāo)簽。

塊級標(biāo)簽的特性是：獨(dú)自占有一行；標(biāo)簽的高與寬、邊距可以修改；沒有設(shè)置寬與高時，默認(rèn)繼承父標(biāo)簽。例如：

<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>

前端頁面顯示的效果如下圖：

常用的塊級標(biāo)簽有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

2、內(nèi)聯(lián)標(biāo)簽。

內(nèi)聯(lián)標(biāo)簽與塊級標(biāo)簽不同，它不能獨(dú)自占有一行，會與其它內(nèi)聯(lián)標(biāo)簽在同一樣展示；內(nèi)聯(lián)標(biāo)簽的高與寬、上下邊距是不能修改的，它里面的文字或圖片有多高，它就是多高。例如如下代碼：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>

CSS樣式代碼跟塊級標(biāo)簽的例子是一樣的，而顯示的效果就不一樣了，寬與高、上下邊距沒有效果。如下圖：

常用的內(nèi)聯(lián)標(biāo)簽有：span、a、b、strong、i、em 。

3、內(nèi)聯(lián)塊級標(biāo)簽。

內(nèi)聯(lián)塊級標(biāo)簽，既有一些內(nèi)聯(lián)標(biāo)簽的特性，也有一些塊級標(biāo)簽的特點(diǎn)：它不能獨(dú)自占有一行，但是可以修改它的寬度和高度。例如下面這段代碼：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">

CSS樣式代碼跟塊級標(biāo)簽的那個例子仍然是一樣的，圖片的寬和高、上下邊距修改成功，而2個圖片不能獨(dú)自占有一行，而是在同一行。如下圖：

常用的內(nèi)聯(lián)塊級標(biāo)簽有：img、input、textarea。

4、區(qū)域標(biāo)簽。

所謂區(qū)域標(biāo)簽，就是主要用來劃分布局頁面區(qū)域的。如：頭部、主體內(nèi)容、側(cè)邊欄、底部。這樣劃分的好處是：讓頁面布局更加清晰明了。

常用的區(qū)域標(biāo)簽有：header（頭部）、footer（底部）、nav（導(dǎo)航）、aside（側(cè)邊欄）、section（主體）、article（獨(dú)立內(nèi)容）。

5、表單標(biāo)簽。

這個表單標(biāo)簽我們也是會經(jīng)常用到的，如：登錄網(wǎng)站的時候、提交數(shù)據(jù)的時候。如下圖的評論表單：

?表單常用的標(biāo)簽有：form、input、select、option、textarea 。

以上就是我們開發(fā)網(wǎng)頁時，會常用到的HTML標(biāo)簽。當(dāng)然，HTML標(biāo)簽遠(yuǎn)不止這些，尤其是html5出來后，新增了許多的新標(biāo)簽。但是，有些標(biāo)簽在我們開發(fā)中很少用到，所以，這里就沒有做相應(yīng)的介紹。

法

縮進(jìn)使用soft tab（4個空格）；
嵌套的節(jié)點(diǎn)應(yīng)該縮進(jìn)；
在屬性上，使用雙引號，不要使用單引號；
屬性名全小寫，用中劃線做分隔符；
不要在自動閉合標(biāo)簽結(jié)尾處使用斜線（HTML5 規(guī)范指出他們是可選的）；
不要忽略可選的關(guān)閉標(biāo)簽，例:

<!DOCTYPE html>
 <html>
 	<head>
 		<title>Page title</title>
 	</head>
 	<body> <img src="images/company_logo.png" alt="Company">
 		<h1 class="hello-world">Hello, world!</h1>
 	</body>
 </html>

HTML5 doctype在頁面開頭使用這個簡單地doctype來啟用標(biāo)準(zhǔn)模式，使其在每個瀏覽器中盡可能一致的展現(xiàn)；雖然doctype不區(qū)分大小寫，但是按照慣例，doctype大寫（關(guān)于html屬性，大寫還是小寫）。<!DOCTYPE html> <html> ... </html> lang屬性根據(jù)HTML5規(guī)范：應(yīng)在html標(biāo)簽上加上lang屬性。這會給語音工具和翻譯工具幫助，告訴它們應(yīng)當(dāng)怎么去發(fā)音和翻譯。
更多關(guān)于 lang 屬性的說明在這里；在sitepoint上可以查到語言列表；
但sitepoint只是給出了語言的大類，例如中文只給出了zh，但是沒有區(qū)分香港，臺灣，大陸。而微軟給出了一份更加詳細(xì)的語言列表.aspx)，其中細(xì)分了zh-cn, zh-hk, zh-tw。<!DOCTYPE html> <html lang="en-us"> ... </html> 字符編碼通過聲明一個明確的字符編碼，讓瀏覽器輕松、快速的確定適合網(wǎng)頁內(nèi)容的渲染方式，通常指定為’UTF-8’。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> ... </html> IE兼容模式用 <meta> 標(biāo)簽可以指定頁面應(yīng)該用什么版本的IE來渲染；<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> </head> ... </html> 引入CSS, JS根據(jù)HTML5規(guī)范, 通常在引入CSS和JS時不需要指明 type，因?yàn)?text/css 和 text/javascript 分別是他們的默認(rèn)值。HTML5 規(guī)范鏈接使用link
使用style
使用script <link rel="stylesheet" href="code_guide.css">  <style> ... </style>  <script src="code_guide.js"></script>  <script> ... </script> 屬性順序屬性應(yīng)該按照特定的順序出現(xiàn)以保證易讀性；

class
id
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled

class是為高可復(fù)用組件設(shè)計的，所以應(yīng)處在第一位；
id更加具體且應(yīng)該盡量少使用，所以將它放在第二位。

<a class="..." id="..." data-modal="toggle" href="#">Example link</a>

<input class="form-control" type="text">

<img src="..." alt="...">

boolean屬性

boolean屬性指不需要聲明取值的屬性，XHTML需要每個屬性聲明取值，但是HTML5并不需要；
更多內(nèi)容可以參考 WhatWG section on boolean attributes：
boolean屬性的存在表示取值為true，不存在則表示取值為false。

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
    <option value="1" selected>1</option>
</select>

JS生成標(biāo)簽

在JS文件中生成標(biāo)簽讓內(nèi)容變得更難查找，更難編輯，性能更差。應(yīng)該盡量避免這種情況的出現(xiàn)。

減少標(biāo)簽數(shù)量

在編寫HTML代碼時，需要盡量避免多余的父節(jié)點(diǎn)；很多時候，需要通過迭代和重構(gòu)來使HTML變得更少。

<!-- Not well -->
<span class="avatar">
    <img src="...">
</span>

<!-- Better -->
<img class="avatar" src="...">

實(shí)用高于完美

盡量遵循HTML標(biāo)準(zhǔn)和語義，但是不應(yīng)該以浪費(fèi)實(shí)用性作為代價；任何時候都要用盡量小的復(fù)雜度和盡量少的標(biāo)簽來解決問題。

在線咨詢

上一篇：VUE前端編程：用Html2Canvas實(shí)現(xiàn)html頁面轉(zhuǎn)圖片
下一篇：JavaScript 獲取 input 輸入框內(nèi)容的幾種方法

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商