HTML规范

## 基础结构

### 1. 使用 HTML5 DOCTYPE

```html
<!DOCTYPE html>
```

### 2. 必须设置文档的编辑`charset`，推荐使用 utf-8

```html
<meta charset="utf-8"/>
```

### 3. 必须填写页面的`title`，命名规则为

```bash
主题标题 - 产品全称
```

### 4. 关于`meta` 如果为了 SEO，可以适当填写的 keywords 和 description

整体基础结构如下

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>标题</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="css/index.css" />
<link rel="icon" href="favicon.ico?v=5" >
</head>
<body>
hello world
</body>
</html> 
```

## 标签语义化

| 标签                  | 语义                         | 嵌套常见错误                     | 常用属性（加粗的为不可缺少的或建议属性）                     |
| --------------------- | ---------------------------- | -------------------------------- | ------------------------------------------------------------ |
| `<a></a> `              | 超链接/锚                    | a不可嵌套a                       | href,name,title,rel,target                                   |
| `<br /> `               | 换行                         |                                  |                                                              |
| `<button></button>`     | 按钮                         | 不可嵌套表单元素                 | type,disabled                                                |
| `<dd></dd> `            | 定义列表中的定义（描述内容） | 只能以dl为父容器，对应一个dt     |                                                              |
| `<del></del>`           | 文本删除                     |                                  |                                                              |
| `<div></div>`           | 块级容器                     |                                  |                                                              |
| `<dl></dl>`            | 定义列表                     | 只能嵌套dt和dd                   |                                                              |
| `<dt></dt>`             | 定义列表中的定义术语         | 只能以dl为父容器，对应多个dd     |                                                              |
| `<em></em>`             | 强调文本                     |                                  |                                                              |
| `<form></form>`         | 表单                         |                                  | *action*,target,method,name                                  |
| `<h1></h1>`             | 标题                         | 从h1到h6，不可嵌套块级元素       |                                                              |
| `<iframe></iframe>`     | 内嵌一个网页                 |                                  | frameborder,width,height,src,scrolling,name                  |
| `<img />`               | 图像                         |                                  | *alt*,src,width,height                                       |
| `<input />`             | 各种表单控件                 |                                  | *type*,name,value,checked,disabled,maxlength,readonly,accesskey |
| `<label></label>`       | 标签为input元素定义标注      |                                  | for                                                          |
| `<li></li>  `           | 列表项                       | 只能以ul或ol为父容器             |                                                              |
|` <link />`              | 引用样式或icon               | 不可嵌套任何元素                 | *type,rel*,href                                              |
| `<meta />   `           | 文档信息                     | 只用于head                       | content,http-equiv,name                                      |
|` <ol></ol> `            | 有序列表                     | 只能嵌套li                       |                                                              |
| <option></option>     | select中的一个选项           | 仅用于select                     | *value*,selected,disabled                                    |
| `<p></p>  `             | 段落                         | 不能嵌套块级元素                 |                                                              |
| `<script></script>`     | 引用脚本                     | 不可嵌套任何元素                 | *type*,src                                                   |
|` <select></select>`     | 列表框或下拉框               | 只能嵌套option或optgroup         | name,disabled,multiple                                       |
| `<span></span> `        | 内联容器                     |                                  |                                                              |
| `<strong></strong> `    | 强调文本                     |                                  |                                                              |
| `<style></style> `      | 引用样式                     | 不可嵌套任何元素                 | *type*,media                                                 |
| `<sub></sub>`           | 下标                         |                                  |                                                              |
|` <sup></sup> `          | 上标                         |                                  |                                                              |
| `<table></table>`       | 表格                         | 只可嵌套表格元素                 | width,align,background,cellpadding,cellspacing,summary,border |
|` <tbody></tbody> `      | 表格主体                     | 只用于table                      |                                                            |
|` <td></td> `            | 表格中的单元格               | 只用于tr                         | colspan,rowspan                                              |
| `<textarea></textarea>` | 多行文本输入控件             |                                  | name,accesskey,disabled,readonly,rows,cols                   |
|` <tfoot></tfoot>`      | 表格表尾                     | 只用于table                      |                                                              |
|` <th></th>   `          | 表格中的标题单元格           | 只用于tr                         | colspan,rowspan                                              |
| `<thead></thead> `      | 表格表头                     | 只用于table                      |                                                              |
| `<title></title>`       | 文档标题                     | 只用于head                       |                                                              |
| `<tr></tr>  `           | 表格行                       | 嵌套于table或thead、tbody、tfoot |                                                              |
| `<ul></ul>`             | 无序列表                     | 只能嵌套li                       |                                                              |

## 注释规范

### 1. 单行注释

感叹号后面 2 个横线，结束时 2 个横线，建议横线和注释内容之间保留空格

```html

```

### 2. 建议加上开始注释和结束注释，方便查看标签闭合

```html

<div class="container">
    ...
    
    <div id="user_name">
    ...
    </div>
    
    ...
</div>

```

## 编码建议

### 1. HTML 标签的右括号之前必须有相同的间距

```html
<template>
  
  <div>
  <div foo>
  <div foo="bar">
  </div>
  <div />
  <div foo />
  <div foo="bar" />

<div >
  <div foo >
  <div foo="bar" >
  </div >
  <div/>
  <div foo/>
  <div foo="bar"/>
</template>
```

### 2. HTML 标签必须要有结束标签

```html
<template>
  
  <div></div>
  <p></p>
  <p></p>
  <input>
  <br>

<div>
  <p>
</template>
```

### 3. 在`<template>`中强制执行一致的缩进

```html
<template>
   
  <div id=""
     class=""
     some-attr=""
  />

<div  id=""
        class=""
        some-attr=""
  />
</template>
```

### 4. HTML 属性的引号使用双引号

```html
<template>
   
  <IMG SRC="./logo.png">

<IMG SRC=' ./logo.png'>
  <img src=.logo.png >
</template>
```

### 5. 删除 html 标签中连续多个不用于缩进的空格

- ✗ 不推荐

```html
<div     class="foo"
    :style =  "bar"         />
  <i
    :class="{
      'fa-angle-up'   : isExpanded,
      'fa-angle-down' : !isExpanded,
    }"
  />
```

- ✓ 推荐

```html
  <div
    class="foo"
    :style="bar" />
  <i
    :class="{
      'fa-angle-up': isExpanded,
      'fa-angle-down': !isExpanded,
    }"
  />
```

### 6. 属性之间空一格

```html

<div id="demo"  class="demo"data-title="demo"></div>

<div id="demo" class="demo" data-title="demo"></div>
```