开发规范：HTML规范

时间：2020-12-16 20:06:21

一. 文件规范

  • DTD(doctype)统一用HTML5 文档声明, 语言属性设定为zh（有助于语音合成工具确定其所应采取的发音，有助于翻译工具确定翻译遵循的规则）

    <!DOCTYPE
    html>    <html lang="zh-cn">    <!--...–> </html>

  • 文件字符集格式统一为utf-8编码，并且不带BOM头。

    <meta charset="utf-8" />

  • 必须添加注释，注释用来解释代码：它包括什么，目的是什么，能做什么。

    页面级别

    <!------------------------------------------------------------||  
    @name       :   文件或组件名字    |  
    @desc       :   文件描述该页面 or 模板的功能    |  
    @product    :   产品线    |  
    @author     :   作者    |  
    @require    :   依赖样式    |  
    @date       :   修改时间    |-------------------------------------------------------------->

    模块级

    <!--
    模块名字 -->

    待办事项

    //
    todo : 需要增加xxx模块 or 功能

  • 不写type属性 在脚本和样式的引用中忽略type属性。 

    <!--
    Bad -->    <link rel="stylesheet" href="//www.xxx.com/css/maia.css" type="text/css" /><script src="//www.xxx.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script> <!--
    Good -->    <link rel="stylesheet" href="//www.xxx.com/css/maia.css" /><script src="//www.xxx.com/js/gweb/analytics/autotrack.js"></script>

  • 引入CSS和JavaScript文件规则（HTML5移动开发中可不指定type属性）

    <!--
    External CSS -->    <link rel="stylesheet" href="cake.css"> <!--
    In-document CSS -->    <style type="text/css">     /* ... */</style> <!--
    JavaScript -->    <script type="text/javascript" src="cake.js"></script>

  • IE兼容模式，设置为edge mode，从而通知IE采用其所支持的最新模式

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

  • html扩展名为.html
  • viewport

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

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

     

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

二. 书写规范

  • HTML语义化（但不要以牺牲实用性为代价，任何时候都要尽量使用最少的标签保持最小的复杂度）,尽量减少标签数量
  • 表签名、属性名、必须用小写字母且不能简写 禁止用拼音命名（id除外,id可采用驼峰写法 i.e. toolBarItem）

  • 属性书写顺序
    1. class
    2. id, name
    3. src, for, type, href
    4. title, alt
    5. role, aria-*
    6. data-*

    <a class="..." id="..." href="#" role="button" data-modal="toggle">Example link</a> <input class="form-control" type="text"> <img src="..." alt="...">

  • 代码排版用tab or 2个空格 模块间隔要用一空行间隔。 行尾空格必须删除。

  • 必须使用小些字母书写 元素名、属性、属性值(除文本和 CDATA)

    <!--
    Bad -->    <A HREF="/">Home</A>  <!--
    Good -->    <img src="xxx.png" alt="XXX">

  • 避免将样式写入标签

    <div style="background:red;width:100px;height:50px;"></div>

  • 元素必须正确嵌套并在结束处标明注释

    <div class="content">  <div class="carousel">  </div><!-- carousel --></div><!-- content -->

 

  • 元素必须关闭标签 包括自闭合标签 i.e. <hr /> as <hr>, <br /> as <br> and <img /> as <img>,<meta /> as <meta>.

  • 给所有属性赋值, 布尔(boolean)型属性也需要赋值

    <input disabled="disabled" checked="checked" />

  • 给所有<img />标签增加title和alt属性赋值, 并增加具体宽高数值 

    <img width="100%" height="100%" src="" alt="标题标题" title="标题标题" />

  • 减少标签数量

    <!--
    Bad -->    <span class="avatar">    <img src="..."></span> <!--
    Good -->    <img class="avatar" src="...">

  • 可省略url地址中的http: 或者 https:部份。(减少文件体积, 避免想对url中混乱)  url() 里面的 ( "" , '' ) 可省略。

    <!--
    Bad -->    <script src="http//www.xxx.com/js/gweb/analytics/autotrack.js"></script>.example
    {      background: url(http://www.xxx.com/images/example);} <!--
    Good -->    <script src="//www.xxx.com/js/gweb/analytics/autotrack.js"></script>.example
    {      background: url(//www.xxx.com/images/example);}

  • 合理使用标签嵌套(内联元素不允许嵌套块级元素)

  • table表格只承载数据不能应用于布局
  • JavaScript生成的标签。通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。
标签：

相关文章