HTML书写规范

HTML书写规范

一. 文档

1. 使用 HTML5 文档类型

| <!DOCTYPE html>
<html lang="zh-CN">
...

</html>

2. HTML 文件使用无 BOM 的 UTF-8 编码。

3. 启用 IE Edge 模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

4. 页面必须使用精简形式,明确指定字符编码。指定字符编码的 meta 必须是 head 的第一个直接子元素。

| <html>

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

二. 命名

1. 大小写规范

除id、name为驼峰命名法外,标签名及属性名全部字母小写。属性值使用双引号包裹。
id、name属性为驼峰命名;class为短横分隔命名
id、name同一页面必须唯一

| <div id="todayNews" class="container-fluid">
<input name="username">

</div>

2. 同一页面,不同元素,应避免使用相同的 name 与 id

IE 浏览器会混淆元素的 id 和 name 属性, document.getElementById 可能获得不期望的元素。所以在对不同元素的 id 与 name 属性的命名需要非常小心。

| <input name="foo">
<div id="foo"></div>

<script> // IE6 将显示 INPUT alert(document.getElementById('foo').tagName); </script>

3. 代码缩进和换行

使用 4 个空格做为一个缩进层级,不建议使用 2 个空格 或 tab 字符。
建议每行不得超过 120 个字符。

4. 禁止为了 hook 脚本,创建无样式信息的 class

不允许 class 只用于让 JavaScript 选择某些元素,class 应该具有明确的语义和样式。否则容易导致 css class 泛滥。
使用 id、属性选择作为 hook 是更好的方式。

三. 标签

1. HTML 标签的使用应该遵循标签的语义

下面是常见标签语义

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

2. 在 CSS 可以实现相同需求的情况下不得使用表格进行布局。

3. 对 HTML5 中规定允许省略的闭合标签,不允许省略闭合标签。

| <!-- good -->
<ul>

<li>first</li>
<li>second</li>

</ul>

<!-- bad -->
<ul>

<li>first
<li>second
</ul>

4. 标签使用必须符合标签嵌套规则。

块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素
比如 div 不得置于 p 中,tbody 必须置于 table 中。

  1. 块级元素
    一般用来搭建网站架构、布局、承载内容……它包括以下这些标签:
    address、blockquote、center、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul
  2. 内嵌元素
    一般用在网站内容之中的某些细节或部位,用以“强调、区分样式、上标、下标、锚点”等等,下面这些标签都属于内嵌元素:
    a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、u、var

有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素,这几个特殊的标签是:
h1、h2、h3、h4、h5、h6、p、dt

5. 自定义属性建议以 xxx- 为前缀,推荐使用 data-
<div data-x-time="1000m">

6. 布尔类型的属性,建议不添加属性值。

7. JavaScript 应当放在页面末尾

将 script 放在页面中间将阻断页面的渲染。

8. title 必须作为 head 的直接子元素,并紧随 charset 声明之后。

title 中如果包含 ascii 之外的字符,浏览器需要知道字符编码类型才能进行解码,否则可能导致乱码。

| <head>

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

四. 图片

1. 禁止 img 的 src 取值为空。延迟加载的图片也要增加默认的 src。

2. 为重要图片添加 alt 属性。

3. 添加 width 和 height 属性,以避免页面抖动。

五. 表单

1. 有文本标题的控件必须使用 label 标签将其与其标题相关联。
<label for="username">用户名:</label> <input type="textbox" name="username" id="username">

2. 使用 button 元素时必须指明 type 属性值。

button 元素的默认 type 为 submit,如果被置于 form 元素中,点击后将导致表单提交。为显示区分其作用方便理解,必须给出 type 属性。

3. 当表单提交时,回车也可提交。

4. 模板代码应以保证 HTML 单个标签语法的正确性为基本原则。

| <!-- good -->
<li class="{if $item.type_id == $current_type}focus{/if}">{ $item.type_name }</li>

<!-- bad -->

<li {if $item.type_id == $current_type} class="focus"{/if}>{ $item.type_name }</li>
阅读 302

推荐阅读
镜心的小树屋
用户专栏

方寸湛然GitHub组织地址:[链接]

46 人关注
122 篇文章
专栏主页