Web前端之HTML规范

来源：互联网发布：经典c语言程序小游戏编辑：程序博客网时间：2024/05/16 08:40

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事件；

<html lang="zh-CN"><body>    <section data-role="dialog">        <h1 class="hello-world">hello world</h1>    </section>      </body></html>

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>

阅读全文

0 0