Web前端之HTML规范

最新推荐文章于 2024-12-06 11:05:20 发布

原创最新推荐文章于 2024-12-06 11:05:20 发布 · 738 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端开发规范 #html规范

HTML5/HTML 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了HTML规范，包括标签规则（如标签名统一小写，不省略结束标签）、标签语义化（强调其在文档结构、移动设备显示、无障碍阅读等方面的重要性）、属性规则（建议使用小写，双引号包含值，使用data-前缀等）、属性顺序（如class、id等的排列顺序）以及布尔属性的使用方法。遵循这些规范能提升代码质量和可维护性。

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>