Pospal

Appearance

规范 ​

HTML 规范能够使 HTML 代码风格保持一致，使得 HTML 更容易理解和维护。

语法 ​

  • 不要连续使用多个空行
  • 为每个逻辑功能块添加空行，这样更易于阅读
  • 缩进使用 2 个空格（一个 tab）
  • 嵌套的节点应该缩进
  • 在属性上，使用双引号，不要使用单引号
  • 属性名全小写，用中划线做分隔符
  • 不要在自动闭合标签结尾处使用斜线（HTML5 规范 指出他们是可选的）
  • 不要忽略可选的关闭标签，例：</li> 和 </body>
html
<!doctype html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company_logo.png" alt="Company" />

    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>

HTML5 doctype ​

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

虽然 doctype 不区分大小写，但是按照惯例，doctype 大写 （关于 HTML 属性，大写还是小写）。

html
<!doctype html>

lang 属性 ​

根据 HTML5 规范：

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

html
<!doctype html>
<html lang="en-us">
  ...
</html>

语义化标签 ​

HTML5 中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是 div 或者 p 标 签。

引号 ​

使用双引号(" ") 而不是单引号(' ') 。

字符编码 ​

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

html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  ...
</html>

减少标签数量 ​

在编写 HTML 代码时，需要尽量避免多余的父节点；

很多时候，需要通过迭代和重构来使 HTML 变得更少。

html
<!-- Not well -->
<span class="avatar">
  <img src="..." />
</span>

<!-- Better -->
<img class="avatar" src="..." />

语义化标签 ​

HTML5 中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是 div 或者 p 标签，但是不应该以浪费实用性作为代价；

任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。

html
<header></header>
<footer></footer>

代码注释 ​

单行注释内容前后各一个空格字符，注释位于要注释代码的上面。

html
<!-- 注释内容 -->
<p>这是一个段落。</p>

多行注释第一个字符使用空格缩进，更易于阅读。

html
<!--
    这是一段注释，
    注释不会在浏览器中显示。
-->
<p>这是一个段落。</p>

模块注释用于描述模块的名称以及模块开始与结束的位置，模块与模块之间空行。

html
<!-- S 标题注释开始 -->
<h1>这是一个标题。</h1>
<!-- E 标题注释结束 -->

<!-- S 段落注释开始 -->
<p>这是一个段落。</p>
<!-- E 段落注释结束 -->

使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯（这样就不会把脚本显示为纯文本）：

html
<script type="text/javascript">
  <!--
  function displayMsg() {
    alert('Hello World!');
  }
  //-->
</script>

注释行结尾处的两条斜杠 (//) 是 JavaScript 注释符号，这可以避免 JavaScript 执行 --> 标签。

移动端优化 ​

在移动浏览器中使用 viewport 标签控制布局，优化页面显示效果。

html
<meta name="viewport" content="width=device-width,initial-scale=1" />