HTML编码规范

文章目录

  • 原则
  • 文档规范
    • 引入CSS、JS
    • 优化层级,减少标签的数量
    • 启用 IE Edge 模式
    • 在 html 标签上设置正确的 lang 属性。
    • 若页面要适用于移动设备,需指定页面的 viewport。
    • 页面必须要有titile标签。且必须作为 head 的直接子元素,并紧随 charset 声明之后
  • 属性规范
    • 属性书写顺序
    • 布尔类型的属性
  • 元素标签规范
    • 图片标签
    • 表单
    • 多媒体
    • 常见标签语义
  • 命名
  • 注释

原则

  1. 尽量使用语义化标签,少用div
  2. 标签不要大写,即便是doctype 标签
  3. 用两个空格来代替制表符(tab) – 这是唯一能保证在所有环境下获得一致展现的方法。
  4. 嵌套元素应当缩进一次(即两个空格)。
  5. 对于属性的定义,永远全部使用双引号,绝不要使用单引号。
  6. 不要在自闭合(self-closing)元素的尾部添加斜线 — HTML5 规范 中明确说明斜线是可忽略的。
  7. 不要省略可选的结束标签(closing tag)。
  8. 每行不得超过 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 定义列表

命名

  1. id、name属性为驼峰命名;且id、name同一页面必须唯一
  2. class为短横分隔命名;单词最好采用小写
<div id="todayNews" class="container-fluid">
  <input name="userName" />
</div>

注释

注释可以如下写:

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

你可能感兴趣的:(前端)