溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章展示了標簽規則，標簽語義化，屬性規則，屬性順序和布爾屬性五個方面，帶大家梳理一下Web前端知識點的HTML編寫規則。
1.標簽規則
很多人覺得HTML太簡單，但她恰恰是前端開發中最基礎最重要的部分。
標簽名統一使用小寫，不要使用大寫；
不要在自閉（self-closing）元素的尾部添加斜線；
不要省略可選的結束標簽（closing tag）
不要輕易使用實體字符；
<body>
<ul>
<li>
<img src="images/image.jpg">
</li>
</ul>
</body>
2.標簽語義化
根據各個標簽的用途去使用它們很重要，它涉及到文檔的可訪問性、重用和代碼效率等方面。
去掉樣式或者樣式丟失時頁面結構依然清晰；
移動設備能夠更加完美的展示網頁（移動設備對css的支持較弱）；
閱讀器會根據標簽的語義自動解析，呈現更容易閱讀的內容形式（無障礙閱讀）；
便于后期的開發和維護，提高團隊合作效率；
便于搜索引擎根據標簽的語義確定上下文的權重問題；
<body>
<header>
<a href="recomment">
</header>
<section>
<article>文章</article>
</section>
<footer>
<address>地址</address>
</footer>
</body>
3.屬性規則
使用標簽時盡量符合語義
屬性名統一使用小寫，不要用大寫；
務必用雙引號包含屬性值；
自定義屬性請加data- 前綴；
屬性過長時請分行；
盡量避免style屬性和javascript事件；
4.屬性順序
HTML屬性應當按照以下給出的順序依次排列，確保代碼的易讀性。
class
id，name
data-*
src，for，type，href
title，alt
aria-*，role
class用于標識高度可復用組件，因此應該排在首位。id用于標識具體組件，應當謹慎使用（例如：頁面內的標簽），因此排在第二位。
<a class="..." id="..." data-model="..." href="#"></a>
<input class="form-control" type="text">
<img src="..." alt="...">
5.布爾屬性
布爾型屬性可以在聲明時不賦值。
<input type="text" disabled>
<inut type="checkbox" value="1" checked>
<option value="1" selected>1</option>
關于HTML編寫規則就分享到這里了，希望以上內容可以對大家有一定的參考價值，可以學以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
