代码规范

HTML 标签名、类名、标签属性和大部分属性值统一用小写

<div class="demo"></div>

代码嵌套

元素嵌套规范，每个块状元素独立一行，内联元素可选

推荐：

<!-- good -->
<div>
  <h1></h1>
  <p></p>
</div>
<p>
  <span></span>
  <span></span>
</p>

<!-- bad -->
<div>
  <h1></h1>
  <span></span>
</div>

语义化标签

结构性标签：

• <header>：页面或文章的头部区域，通常包含导航、标题等。
• <nav>：页面的导航部分，包含导航链接。
• <section>：文档中主题相关的内容块，表示页面的不同部分。
• <article>：独立的内容部分，可以是博客文章、新闻等独立内容。
• <aside>：页面主要内容之外的附属信息，通常用于侧边栏。
• <footer>：页面或文章的尾部，通常包含版权声明、联系信息等。
• <main>：页面的主要内容部分，一个页面中只能有一个 <main> 标签。

文本内容标签：

• <h1> - <h6>：标题标签，<h1> 为最高级别标题，<h6> 为最低级别。
• <p>：段落标签，用于表示普通文本段落。
• <blockquote>：引用块，用于表示长引用内容。
• <ol>：有序列表。
• <ul>：无序列表。
• <li>：列表项。
• <pre>：预格式化文本，保持内容的空格和换行。
• <code>：代码块，表示代码片段。
• <em>：强调文本，通常表示斜体。
• <strong>：加重文本，通常表示加粗。

媒体标签：

• <img>：图片标签，用于插入图片。
• <audio>：音频标签，用于嵌入音频文件。
• <video>：视频标签，用于嵌入视频文件。
• <figure>：用于包含图片、图表、插图等，并且与 <figcaption> 配合使用以提供标题。
• <figcaption>：为 <figure> 提供说明或标题。

表单标签：

• <form>：表单元素，包含用户提交的数据。
• <input>：输入框，用户可以输入数据的字段。
• <textarea>：多行文本输入框。
• <button>：按钮。
• <select>：下拉选择框。
• <option>：下拉选择框中的选项。
• <label>：为表单元素定义标签。

表格标签：

• <table>：表格标签，包含表格内容。
• <caption>：为表格提供标题。
• <thead>：表头部分。
• <tbody>：表格主体部分。
• <tr>：表格行。
• <th>：表头单元格。
• <td>：表格单元格。

链接与互动标签：

• <a>：超链接标签，用于创建链接。

• <button>：按钮，用于提交表单或执行操作。

• <details>：创建可展开的内容区域，用户可以点击展开或隐藏。

• <summary>：与 <details> 配合使用，作为可展开区域的标题。

• <dialog>：表示对话框或模式窗口。

• demo