• 【规范】前端编码规范——html 规范


    文档类型

    推荐使用 html5 的文档类型申明:

    <!DOCTYPE html>

    语言属性

    根据 html5 规范:

    强烈建议为 html 根元素指定 lang 属性,从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音,有助于翻译工具确定其翻译时所应遵守的规则等等。

    这里列出了语言代码表

    <html lang="en"></html>

    字符编码

    通过明确声明字符编码,能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是,可以避免在 html 中使用字符实体标记(character entity),从而全部与文档编码一致(一般采用 UTF-8 编码)。

    <meta charset="UTF-8">

    IE 兼容模式

    IE 支持通过特定的 meta 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的模式。

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

    省略自闭合元素的斜线

    不要在自闭合(self-closing)元素的尾部添加斜线 – html5 规范中明确说明这是可选的。

    不推荐

    <input type="text"/>

    推荐

    <input type="text">

    不要省略结束标签

    不要省略可选的结束标签(closing tag)。

    不推荐

    <ul>
        <li>
    </ul>

    推荐

    <ul>
        <li></li>
    </ul>

    省略 type 属性

    省略 css 与 js 的 type 属性。鉴于 html5 中以上两者默认的 type 值就是 text/css 和 text/javascript,所以 type 属性一般是可以忽略掉的,甚至在老旧版本的浏览器中这么做也是安全可靠的。

    语义化

    使用具有语义的标签,比如 h1p 等等。

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="renderer" content="webkit">
        <title>Document</title>
    </head>
    <body>
        <h1>标题</h1>
        <h2>子标题</h2>
        <p>文本段落</p>
        <p><strong>加粗文本</strong></p>
    </body>
    </html>
    <script src="main.js"></script>
    复制代码

    实用为王

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

    不推荐

    <span class="avatar">
        <img src="avatar.jpg">
    </span>

    推荐

    <img class="avatar" src="avatar.jpg">

    结构,表现与行为分离

    一个完整的页面分为三个部分:结构(html)、表现(css)和行为(js)。为了使它们成为可维护的干净整洁的代码,我们要尽可能的将它们分离开来。

    严格地保证结构、表现、行为三者分离,并尽量使三者之间没有太多的交互和联系。就是说,尽量在文档和模板中只包含结构性的 html;而将所有表现代码,移入样式表中;将所有动作行为,移入脚本之中。在此之外,为使得它们之间的联系尽可能的小,在文档和模板中也尽量少地引入样式和脚本文件。

    清晰的分层意味着:

    • 不使用超过一到两张样式表
    • 尽量合并脚本
    • 不使用内嵌样式(<style>.no-good {}</style>
    • 不使用行内样式(<hr style="border-top: 5px solid black">
    • 不使用内嵌脚本(<script>alert('no good')</script>
    • 不使用表现元素(<b><u><center><font>

    小写

    html 标签及属性(包括自定义属性)都是小写字母,不要使用大写字母。

    绑定数据

    如果需要为标签绑定一些数据的话,请使用 html5 的自定义属性 data-* 来绑定相关数据。

    <h1 data-age="20">张三</h1>

    布尔型属性

    布尔型属性可以在声明时不赋值。xhtml 规范要求为其赋值,但是 html5 规范不需要。

    复制代码
    <input type="text" disabled>
    <input type="checkbox" value="1" checked>
    <select>
        <option value="1" selected>1</option>
        <option value="2"></option>
    </select>
    复制代码

    html 引号

    html 属性的引号请使用双引号而不是单引号。

    参考文献

  • 相关阅读:
    打破国外垄断,开发中国人自己的编程语言(2):使用监听器实现计算器
    寒假arcpy arcgis python培训通知
    分户图制作工具
    分户图制作工具
    Python3操作AutoCAD
    arcgis更新注记要素类
    arcgis field for cad
    为什么中小学培训这么火,怎么打击也收效甚微?
    arcgis arcmap使用 Python 加载 CAD 数据
    神仙渡劫
  • 原文地址:https://www.cnblogs.com/shenzikun1314/p/6398075.html
Copyright © 2020-2023  润新知