HTML开发规范（强制、推荐、参考）

本文链接：https://blog.csdn.net/glorydx/article/details/119253290

参考 ⭐
推荐 ⭐⭐
强制 ⭐⭐⭐

在每个html页面开头使用这个简单的doctype来启用标准模式，使其在每个浏览器中尽可能展现一致 ⭐⭐⭐

统一使用UTF-8字符集 ⭐⭐⭐

internet export 支持使用兼容性meta 标签来指定使用什么版本的ie渲染页面，通常通过edge mode来通知IE使用最新的兼容模式 ⭐⭐

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

在引入css和js时不需要指明type，因为text/css和text/javascript 分别是它们的默认值 ⭐⭐⭐
css必须在head标签内引入，js基础库或基础性的脚本文件在head内引入，其它都在body标签结束前引入⭐⭐⭐

缩进使用两个空格 ⭐⭐

避免在HTML标记中使用style属性来定义样式，而是使用外部CSS样式表来管理样式。⭐⭐⭐

标签名称和标签属性都使用小写 ⭐⭐⭐

属性使用双引号 ⭐⭐⭐

boolean属性不赋值 ⭐⭐

自定义属性用data-为前缀，便于阅读 ⭐⭐

标签的属性顺序 ⭐⭐
class
id,name
data-*,
其它

不要在自闭合标签的结尾处使用斜线，如<br>,<hr>，<input>，<source>,<meta>等 ⭐

class命名与css规范保持一致
id命名，如果id被js使用，J_为前缀，后接大驼峰命名，其它情况全部小写 ⭐
自定义属性使用data-前缀，后接小写 ⭐⭐

img标签必须添加alt属性，以声明替代文本 ⭐⭐⭐
在多媒体标签内部提供浏览器不支持该标签的说明，如<audio> <video> <object>

html代码不会经过预处理，出于安全考虑，html代码中不能出现任何关于业务相关的敏感信息注释。⭐⭐⭐
使用注释来解释代码的目的，特别是在复杂的或不明显的部分。⭐⭐⭐
避免在生产环境中包含大量注释。⭐⭐

使用语义化标记和ARIA（可访问性富互联网应用程序）属性来提高网站的可访问性。⭐⭐⭐

语义化标记：

使用适当的HTML元素：确保使用正确的HTML元素来表示内容的含义。例如，使用<header>元素来定义页面标题和页眉，使用<nav>元素来表示导航菜单，使用<main>元素来包含主要内容区域，使用<footer>元素来表示页脚等。
使用标题标签：使用<h1>到<h6>标签来定义标题的层次结构，确保每个页面只有一个<h1>标签，然后根据内容的层次结构使用适当的标题标签。
列表元素：使用<ul>和<ol>元素来创建无序和有序列表，使用<li>元素来表示列表项。
表格：对于表格布局，使用<table>、<thead>、<tbody>、<tfoot>、<tr>、<th>和<td>元素来创建表格，而不是仅仅使用<div>来模拟表格。

ARIA属性：

ARIA角色：使用ARIA role 属性来为HTML元素分配适当的角色。例如，使用role="button"来定义一个按钮，使用role="navigation"来定义导航区域等。
ARIA状态和属性：使用ARIA aria-* 属性来表示元素的状态和属性。例如，使用aria-hidden="true"来表示元素是隐藏的，使用aria-checked="true"来表示一个已选择的复选框等。
ARIA标签：使用ARIA aria-label 属性来提供元素的自定义描述。这在图标按钮等情况下很有用，可以为这些元素提供文本描述。
ARIA提示：使用ARIA aria-describedby 和 aria-labelledby 属性来关联元素与描述性文本，以帮助用户更好地理解元素的含义。
ARIA焦点管理：使用ARIA tabindex 属性来自定义元素的焦点顺序，以确保用户可以通过键盘访问和交互。

总之，通过结合语义化标记和ARIA属性，你可以改进你的网站，使其对于视觉障碍用户、键盘导航用户和其他使用不同辅助技术和设备的用户更加友好。确保遵守Web内容无障碍指南（WCAG）和ARIA规范，以确保你的网站在可访问性方面达到最佳水平。

确保图像、链接和表单元素都具有适当的描述性文本。⭐⭐

确保图像、链接和表单元素具有适当的描述性文本是网站可访问性的重要部分。以下是一些关于如何为这些元素提供描述性文本的指导：

图像（img元素）：

使用alt属性：对于<img>元素，使用alt属性来提供图像的文本描述。alt属性是图像的替代文本，对于视觉障碍用户，这将是他们了解图像内容的关键。
```
<img src="example.jpg" alt="一只可爱的小猫咪">
```
空白图像： 如果某个图像是装饰性的或无关紧要的，可以将alt属性设置为空字符串或使用alt=""。
```
<img src="decorative.jpg" alt="">
```

链接（a元素）：

使用有意义的链接文本：确保链接文本反映链接的目的，而不仅仅是"点击这里"或"了解更多"等通用短语。
```
<a href="https://www.example.com">访问示例网站</a>
```
描述链接目标：如果链接打开新窗口，使用target属性并提供描述性文本，以便用户知道链接会打开新窗口。
```
<a href="https://www.example.com" target="_blank">访问示例网站（新窗口）</a>
```

表单元素：

表单标签（label元素）：为表单元素使用<label>元素，以提供与输入字段相关的标签文本。这有助于用户理解每个输入字段的目的。
```
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
```
字段描述（title属性）：对于输入字段，你可以使用title属性来提供附加描述性信息。这对于提供有关字段要求的信息很有帮助。
```
<input type="text" id="username" name="username" title="请输入您的用户名">
```