课程表

前端开发规范课程

工具箱
速查手册

HTML 规范

当前位置:免费教程 » HTML/CSS » 前端开发规范

HTML

尽量遵循 HTML 标准和语义,但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。


通用约定

标签

  • 自闭合(self-closing)标签,无需闭合 ( 例如: img input br hr 等 );
  • 可选的闭合标签(closing tag),需闭合 ( 例如:</li></body> );
  • 尽量减少标签数量;
  1. <img src="//img.w3cschool.cn/attachments/image/cimg/google.png" alt="Google">
  2. <input type="text" name="title">
  3. <ul>
  4. <li>Style</li>
  5. <li>Guide</li>
  6. </ul>
  7. <!-- Not recommended -->
  8. <span class="avatar">
  9. <img src="...">
  10. </span>
  11. <!-- Recommended -->
  12. <img class="avatar" src="...">

Class 与 ID

  • class 应以功能或内容命名,不以表现形式命名;
  • class 与 id 单词字母小写,多个单词组成时,采用中划线-分隔;
  • 使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class;
  1. <!-- Not recommended -->
  2. <div class="j-hook left contentWrapper"></div>
  3. <!-- Recommended -->
  4. <div id="j-hook" class="sidebar content-wrapper"></div>

属性顺序

HTML 属性应该按照特定的顺序出现以保证易读性。

  • id
  • class
  • name
  • data-xxx
  • src, for, type, href
  • title, alt
  • aria-xxx, role
  1. <a id="..." class="..." data-modal="toggle" href="###"></a>
  2. <input class="form-control" type="text">
  3. <img src="..." alt="...">

引号

属性的定义,统一使用双引号。

  1. <!-- Not recommended -->
  2. <span id='j-hook' class=text>Google</span>
  3. <!-- Recommended -->
  4. <span id="j-hook" class="text">Google</span>

嵌套

a 不允许嵌套 div这种约束属于语义嵌套约束,与之区别的约束还有严格嵌套约束,比如a 不允许嵌套 a

严格嵌套约束在所有的浏览器下都不被允许;而语义嵌套约束,浏览器大多会容错处理,生成的文档树可能相互不太一样。

语义嵌套约束

  • <li> 用于 <ul><ol> 下;
  • <dd>, <dt> 用于 <dl> 下;
  • <thead>, <tbody>, <tfoot>, <tr>, <td> 用于 <table> 下;

严格嵌套约束

  • inline-Level 元素,仅可以包含文本或其它 inline-Level 元素;
  • <a>里不可以嵌套交互式元素<a><button><select>等;
  • <p>里不可以嵌套块级元素<div><h1>~<h6><p><ul>/<ol>/<li><dl>/<dt>/<dd><form>等。

更多详情,参考WEB标准系列-HTML元素嵌套

布尔值属性

HTML5 规范中 disabledcheckedselected 等属性不用设置值。

  1. <input type="text" disabled>
  2. <input type="checkbox" value="1" checked>
  3. <select>
  4. <option value="1" selected>1</option>
  5. </select>

语义化

通常情况下,每个标签都是有语义的,所谓语义就是你的衣服分为外套, 裤子,裙子,内裤等,各自有对应的功能和含义。所以你总不能把内裤套在脖子上吧。-- 一丝

此外语义化的 HTML 结构,有助于机器(搜索引擎)理解,另一方面多人协作时,能迅速了解开发者意图。

常见标签语义

标签 语义
<p> 段落
<h1> <h2> <h3> ... 标题
<ul> 无序列表
<ol> 有序列表
<blockquote> 大段引用
<cite> 一般引用
<b> 为样式加粗而加粗
<storng> 为强调内容而加粗
<i> 为样式倾斜而倾斜
<em> 为强调内容而倾斜
code 代码标识
abbr 缩写

示例

将你构建的页面当作一本书,将标签的语义对应的其功能和含义;

  • 书的名称:<h1>
  • 书的每个章节标题: <h2>
  • 章节内的文章标题: <h3>
  • 小标题/副标题: <h4> <h5> <h6>
  • 章节的段落: <p>

更多语义化的内容,参考 sofish 写的文章 这样去写你的 HTML


HEAD

文档类型

为每个 HTML 页面的第一行添加标准模式(standard mode)的声明, 这样能够确保在每个浏览器中拥有一致的表现。

  1. <!DOCTYPE html>

语言属性

为什么使用 lang="zh-cmn-Hans" 而不是我们通常写的 lang="zh-CN" 呢? 请参考知乎上的讨论: 网页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"?

  1. <!-- 中文 -->
  2. <html lang="zh-Hans">
  3. <!-- 简体中文 -->
  4. <html lang="zh-cmn-Hans">
  5. <!-- 繁体中文 -->
  6. <html lang="zh-cmn-Hant">
  7. <!-- English -->
  8. <html lang="en">

字符编码

  • 以无 BOM 的 utf-8 编码作为文件格式;
  • 指定字符编码的 meta 必须是 head 的第一个直接子元素;
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. ......
  5. </head>
  6. <body>
  7. ......
  8. </body>
  9. </html>

IE 兼容模式

优先使用最新版本的IE 和 Chrome 内核

  1. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

SEO 优化

  1. <head>
  2. <meta charset="utf-8">
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  4. <!-- SEO -->
  5. <title>Style Guide</title>
  6. <meta name="keywords" content="your keywords">
  7. <meta name="description" content="your description">
  8. <meta name="author" content="author,email address">
  9. </head>

viewport

  • viewport: 一般指的是浏览器窗口内容区的大小,不包含工具条、选项卡等内容;
  • width: 浏览器宽度,输出设备中的页面可见区域宽度;
  • device-width: 设备分辨率宽度,输出设备的屏幕可见宽度;
  • initial-scale: 初始缩放比例;
  • maximum-scale: 最大缩放比例;

为移动端设备优化,设置可见区域的宽度和初始缩放比例。

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">

iOS 图标

  • apple-touch-icon 图片自动处理成圆角和高光等效果;
  • apple-touch-icon-precomposed 禁止系统自动添加效果,直接显示设计原图;
  1. <!-- iPhone 和 iTouch,默认 57x57 像素,必须有 -->
  2. <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">
  3. <!-- iPad,72x72 像素,可以没有,但推荐有 -->
  4. <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-72x72-precomposed.png" sizes="72x72">
  5. <!-- Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有 -->
  6. <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" sizes="114x114">
  7. <!-- Retina iPad,144x144 像素,可以没有,但推荐有 -->
  8. <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" sizes="144x144">

favicon

在未指定 favicon 时,大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问,避免404,必须遵循以下两种方法之一:

  • 在 Web Server 根目录放置 favicon.ico 文件;
  • 使用 link 指定 favicon;
  1. <link rel="shortcut icon" href="path/to/favicon.ico">

HEAD 模板

  1. <!DOCTYPE html>
  2. <html lang="zh-cmn-Hans">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title>Style Guide</title>
  7. <meta name="description" content="不超过150个字符">
  8. <meta name="keywords" content="">
  9. <meta name="author" content="name, email@gmail.com">
  10. <!-- 为移动设备添加 viewport -->
  11. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  12. <!-- iOS 图标 -->
  13. <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">
  14. <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
  15. <link rel="shortcut icon" href="path/to/favicon.ico">
  16. </head>
转载本站内容时,请务必注明来自W3xue,违者必究。
 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号