HTML5编码规范精要-优快云博客

本文阐述了HTML5编码的最佳实践，包括文档结构、CSS与JS引入、标签使用、属性规范及注释标准，旨在提升网页性能与可读性。

文章目录

原则
文档规范
属性规范
- 属性书写顺序
- 布尔类型的属性
元素标签规范
命名
注释

原则

尽量使用语义化标签，少用div
标签不要大写，即便是doctype 标签
用两个空格来代替制表符（tab） – 这是唯一能保证在所有环境下获得一致展现的方法。
嵌套元素应当缩进一次（即两个空格）。
对于属性的定义，永远全部使用双引号，绝不要使用单引号。
不要在自闭合（self-closing）元素的尾部添加斜线 — HTML5 规范中明确说明斜线是可忽略的。
不要省略可选的结束标签（closing tag）。
每行不得超过 120 个字符，过长的字符不利于阅读。

<!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>

文档规范

引入CSS、JS

根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">

<!-- In-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js"></script>

优化层级，减少标签的数量

<!-- 定义一个图片，这里多了一个span标签 -->
<span class="img">
  <img src="...">
</span>

<!-- 更好的写法-->
<img class="img" src="...">

启用 IE Edge 模式

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

在 html 标签上设置正确的 lang 属性。

<html lang="zh-CN">

若页面要适用于移动设备，需指定页面的 viewport。

<meta name ="viewport" content ="initial-scale = 1.0">

页面必须要有titile标签。且必须作为 head 的直接子元素，并紧随 charset 声明之后

<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>

属性规范

属性书写顺序

属性顺序应确保代码的可读性，按照其重要程度依次书写，宁外id作为唯一标识码，尽量少用，如果使用也应尽量不要用于CSS选择器

class
id,name
data-*
src, for, type, href, value
title, alt
role, aria-*

<a class="..." id="..." data-toggle="modal" href="#">
  Example link
</a>

<input class="form-control" type="text">

<img src="..." alt="...">

布尔类型的属性

布尔类型的属性，不建议再添加属性值

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

元素标签规范

图片标签

图片通常使用 alt 属性。在图片不能显示时，它能替代图片显示。
禁止 img 的 src 取值为空。延迟加载的图片也要增加默认的 src。
对有下载需求的图片采用img标签实现，无下载需求的标签（icon、背景、代码使用的图片）采用CSS背景实现。

<img src = " ../../" alt = "图片不能加载时提示">

表单

有文本标题的控件必须使用 label 标签将其与其标题相关联。

<label for="username">用户名：</label> 
<input type="textbox" name="username" id="username">

使用 button 元素时必须指明 type 属性值。
当表单提交时，回车也可提交。

多媒体

当在现代浏览器中使用 audio 以及 video 标签来播放音频（mp3、wav、ogg）、视频（mp4、WebM、ogg）时，应当注意格式。
在支持 HTML5 的浏览器中优先使用 audio 和 video 标签来定义音视频元素。
使用退化到插件的方式来对多浏览器进行支持。
只在必要的时候开启音视频的自动播放。
在 object 标签内部提供指示浏览器不支持该标签的说明。

常见标签语义

标签	语义
p	段落
h1,h2,h3,h4,h5,h6	层级标题
strong，em	强调
ins	插入
del	删除
abbr	缩写
code	代码标识
cite	引述来源作品的标题
q	引用
blockquote	一段或长篇引用
ul	无序列表
ol	有序列表
dl,dt,dd	定义列表

命名

id、name属性为驼峰命名；且id、name同一页面必须唯一
class为短横分隔命名；单词最好采用小写

<div id="todayNews" class="container-fluid">
  <input name="userName" />
</div>

注释

注释可以如下写:

<!-- 这是注释 -->
<div id="todayNews" class="container-fluid"></div>