外观

本页目录

结构层（html）规范 ​

基本语法 ​

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

基本属性 ​

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

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

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

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

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

html
<!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文档，减少页面空白时间。

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。

html
<input type="text" disabled>

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

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

标签操作 ​

JS生成标签 ​

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

减少标签数量 ​

在编写HTML代码时，需要尽量避免多余的父节点；很多时候，需要通过迭代和重构来使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代码规范，如缩进、空格、标签对称等。所以能解决的这些规范仅供参考。

在 GitHub 上编辑此页

上次更新: