整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML標簽規范
盡管目前瀏覽器都兼容HTML，但是，使網頁能夠符合標準，應該盡量使用XHTML規范來編寫代碼，需要注意以下事項：
（1）在XHTML中，標簽名必須小寫。在HTML中，標簽名稱可以大寫，也可以小寫。
（2）在XHTML中，屬性名稱必須小寫。在HTML中，屬性名稱也必須是小寫的。
（3）在XHTML中，標簽必須嚴格嵌套；HTML對標簽的嵌套沒有嚴格的規定。
（4）在XHTML中，標簽必須封閉；在HTML規范中，標簽不閉合也是正確的，即標簽可以不成對出現。例如，“<p>我沒有結束標簽”和“<p>我有開始標簽和結束標簽</p >”，這兩條代碼的顯示效果，在HTML規范中是完全相同的，但是，在XHTML中，第一條語句是不允許的(不能正常顯示)，必須像第二條語句那樣，嚴格地使標簽閉合。
（5）在XHTML中，即使是空元素的標簽也必須封閉，這里說的空標簽，就是指那些<img>、<br>、<hr>等不對稱的標簽，它們也必須閉合，即寫作<img>、<br>、<hr/>；而在HTML.規范中，這類標簽可以不封閉。例如，在HTML中書寫為<img>或<img/>均是正確的，但在XHTML規范中，必須寫為<img/>才正確。
（6）在XHTML中，屬性值必須用雙引號括起來；在HTML中，屬性可以不必使用雙引號。
（7）在XHTML中，屬性值必須使用完整形式；在HTML中，一些屬性經常使用簡寫方式設定屬性值。例如：
<input disabled>
而在XHTML中，必須完整地寫做：
<input disabled="true">
(8)在XHTML中，應該區分“內容標簽”與“結構標簽”。例如，<p>標簽是一個內容標簽，而<table>標簽是結構標簽，因此，不允許將<table>標簽置于<p>標簽內部。反之，如果將<p>標簽置于<td>…</td>之間，則是完全正確的。
（9)在XHTML中，必須添加文檔類型聲明<！DOCTYPE>。該標簽用于描述HTML的版本和文檔類型聲明，進行了相應的版本和文檔類型聲明之后，才能保證這是一個XHTML網頁，從而讓瀏覽器以相應的規范來解析網頁，使網頁正常顯示。
果想開發一個網站，除了要精通后端開發語言（如：php）外，還要精通HTML代碼。那么，什么是HTML呢？HTML是一種超文本標記語言，它包含有眾多的標簽，我們可以通過這些標簽，把不同的internet資源（如：文字、圖片、視頻、音頻、表單等等）整合在一個統一的文檔中，這就形成了我們可以看得見的網頁。那么，HTML都有哪些常用的標簽呢？
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最外層的標簽，所有其它的HTML標簽都要放在這個標簽的內部。
<html>
<head></head>
<body></body>
</html>
在HTML標簽中，有的標簽是成雙成對的，如：<html></html>（如下圖）；而有的標簽是單個的，如：<hr>橫線標簽。
head頭部有以下幾種常用標簽：
meta：主要提供有關頁面的元信息。
link：用來定義文檔與外部資源的關系，最常用的是調用CSS樣式文件。
title：頁面標題的標簽。
script：用來調用JS文件或JS代碼。當然，script標簽也可以在body主體中使用。
1、塊級標簽。
塊級標簽的特性是：獨自占有一行；標簽的高與寬、邊距可以修改；沒有設置寬與高時，默認繼承父標簽。例如：
<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>
前端頁面顯示的效果如下圖：
常用的塊級標簽有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。
2、內聯標簽。
內聯標簽與塊級標簽不同，它不能獨自占有一行，會與其它內聯標簽在同一樣展示；內聯標簽的高與寬、上下邊距是不能修改的，它里面的文字或圖片有多高，它就是多高。例如如下代碼：
<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樣式代碼跟塊級標簽的例子是一樣的，而顯示的效果就不一樣了，寬與高、上下邊距沒有效果。如下圖：
常用的內聯標簽有：span、a、b、strong、i、em 。
3、內聯塊級標簽。
內聯塊級標簽，既有一些內聯標簽的特性，也有一些塊級標簽的特點：它不能獨自占有一行，但是可以修改它的寬度和高度。例如下面這段代碼：
<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樣式代碼跟塊級標簽的那個例子仍然是一樣的，圖片的寬和高、上下邊距修改成功，而2個圖片不能獨自占有一行，而是在同一行。如下圖：
常用的內聯塊級標簽有：img、input、textarea。
4、區域標簽。
所謂區域標簽，就是主要用來劃分布局頁面區域的。如：頭部、主體內容、側邊欄、底部。這樣劃分的好處是：讓頁面布局更加清晰明了。
常用的區域標簽有：header（頭部）、footer（底部）、nav（導航）、aside（側邊欄）、section（主體）、article（獨立內容）。
5、表單標簽。
這個表單標簽我們也是會經常用到的，如：登錄網站的時候、提交數據的時候。如下圖的評論表單：
?表單常用的標簽有：form、input、select、option、textarea 。
以上就是我們開發網頁時，會常用到的HTML標簽。當然，HTML標簽遠不止這些，尤其是html5出來后，新增了許多的新標簽。但是，有些標簽在我們開發中很少用到，所以，這里就沒有做相應的介紹。
<!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來啟用標準模式，使其在每個瀏覽器中盡可能一致的展現；雖然doctype不區分大小寫，但是按照慣例，doctype大寫 （關于html屬性，大寫還是小寫）。<!DOCTYPE html> <html> ... </html> lang屬性根據HTML5規范：應在html標簽上加上lang屬性。這會給語音工具和翻譯工具幫助，告訴它們應當怎么去發音和翻譯。
更多關于 lang 屬性的說明在這里；在sitepoint上可以查到語言列表；
但sitepoint只是給出了語言的大類，例如中文只給出了zh，但是沒有區分香港，臺灣，大陸。而微軟給出了一份更加詳細的語言列表.aspx)，其中細分了zh-cn, zh-hk, zh-tw。<!DOCTYPE html> <html lang="en-us"> ... </html> 字符編碼通過聲明一個明確的字符編碼，讓瀏覽器輕松、快速的確定適合網頁內容的渲染方式，通常指定為’UTF-8’。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> ... </html> IE兼容模式用 <meta> 標簽可以指定頁面應該用什么版本的IE來渲染；<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> </head> ... </html> 引入CSS, JS根據HTML5規范, 通常在引入CSS和JS時不需要指明 type，因為 text/css 和 text/javascript 分別是他們的默認值。HTML5 規范鏈接使用link
使用style
使用script<!-- External CSS --> <link rel="stylesheet" href="code_guide.css"> <!-- In-document CSS --> <style> ... </style> <!-- External JS --> <script src="code_guide.js"></script> <!-- In-document JS --> <script> ... </script> 屬性順序屬性應該按照特定的順序出現以保證易讀性；
class是為高可復用組件設計的，所以應處在第一位；
id更加具體且應該盡量少使用，所以將它放在第二位。
<a class="..." id="..." data-modal="toggle" href="#">Example link</a>
<input class="form-control" type="text">
<img src="..." alt="...">
boolean屬性指不需要聲明取值的屬性，XHTML需要每個屬性聲明取值，但是HTML5并不需要；
更多內容可以參考 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文件中生成標簽讓內容變得更難查找，更難編輯，性能更差。應該盡量避免這種情況的出現。
在編寫HTML代碼時，需要盡量避免多余的父節點；很多時候，需要通過迭代和重構來使HTML變得更少。
<!-- Not well -->
<span class="avatar">
<img src="...">
</span>
<!-- Better -->
<img class="avatar" src="...">
盡量遵循HTML標準和語義，但是不應該以浪費實用性作為代價；任何時候都要用盡量小的復雜度和盡量少的標簽來解決問題。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
