结构层（HTML）规范

# 基本语法

缩进使用soft tab（推荐4个空格），总之缩进统一即可
在属性上，使用" "，不要使用' '
属性名全小写，用中划线做分隔符
自闭合标签结尾处要加斜杠，例：<input/> <img/>

# 基本属性

根据HTML5规范：应在html标签上加上lang属性。这会给语音工具和翻译工具帮助，告诉它们应当怎么去发音和翻译。

字符编码：通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式，通常指定为'UTF-8'。

seo优化：<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

IE兼容模式：用 <meta> 标签可以指定页面应该用什么版本的IE来渲染。

viewport：一般用来定义浏览器窗口内容区的大小，不包含工具条、选项卡等内容；特别是最H5移动端适配建议加上。

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
</html>

# 引入CSS, JS

根据HTML5规范，通常在引入CSS和JS时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值。

将css放头部，js放底部，有助于浏览器更快地解析HTML文档，减少页面空白时间。

<header>
    <!-- External CSS -->
    <link rel="stylesheet" href="code_guide.css">

    <!-- In-document CSS -->
    <style>

    </style>
</header>
<body>
    <!-- External JS -->
    <script src="code_guide.js"></script>

    <!-- In-document JS -->
    <script>

    </script>
</body>

# 属性顺序

为保证易读性，数据为空的属性应删除

v-if, v-show
id, ref, name
class
src, href, type, value, for, max-length, max, min, pattern
placeholder, title, alt
data-*, aria-*, role
required, readonly, disabled
click, tap

# 布尔值属性

boolean属性指不需要声明取值的属性
XHTML需要每个属性声明取值，但是HTML5并不需要
boolean属性的存在表示取值为true，不存在则表示取值为false。

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
    <option value="1" selected>1</option>
</select>

# 标签操作

# JS生成标签

避免js动态生成标签，这会让内容变得更难查找，更难编辑，性能更差。

# 减少标签数量

在编写HTML代码时，需要尽量避免多余的父节点；很多时候，需要通过迭代和重构来使HTML变得更少。

<!-- not good -->
<span class="avatar">
    <img src="...">
</span>

<!-- good -->
<img class="avatar" src="...">

# 标签语义化

没有 CSS 的 HTML 是一个语义系统而不是 UI 系统。

通常情况下，每个标签都是有语义的，所谓语义就是你的衣服分为外套，裤子，裙子，内裤等，各自有对应的功能和含义。所以你总不能把内裤套在脖子上吧。此外语义化的 HTML 结构，有助于机器（搜索引擎）理解，另一方面多人协作时，能迅速了解开发者意图。不要页面上只有 div 和 span。

页面模块划分用<section>
无序列表用<ul> <li>
图标用<i>
更多的语义化标签：<header> <footer> <time>等

# 写在最后

# 结构、样式、行为分离

尽量确保文档和模板只包含 HTML 结构，样式都放到样式表里，行为都放到脚本里。

# 实用高于完美

尽量遵循HTML标准和语义，但是不应该以浪费实用性作为代价；任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。

# html代码格式化

html的代码格式化，能解决部分html代码规范，如缩进、空格、标签对称等。所以能解决的这些规范仅供参考。

表示层（css）规范 →