Bootstrap HTML编码规范

语法

  • 用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。

  • 嵌套元素应当缩进一次（即两个空格）。

  • 对于属性的定义，确保全部使用双引号，绝不要使用单引号。

  • 不要在自闭合（self-closing）元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。

    • 不要省略可选的结束标签（closing tag）（例如，</li> 或 </body>）。

      <!DOCTYPE html><html>
      
  <head>
      
    <title>Page title</title>
      
  </head>
      
  <body>
      
    <img src="data:images/company-logo.png" alt="Company">
      
    <h1 class="hello-world">Hello, world!</h1>
      
  </body></html>

      HTML5 doctype

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

      实例：

      <!DOCTYPE html>

<html>
      
  <head>
      
  </head>
      </html>

      语言属性

      根据 HTML5 规范：

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

      更多关于 lang 属性的知识可以从 此规范 中了解。

      这里列出了语言代码表。

      <html lang="zh-CN">
      
  <!-- ... --></html>

      IE 兼容模式

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

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

      字符编码

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

      <head>
      
  <meta charset="UTF-8">
      </head>

      引入 CSS 和 JavaScript 文件

      根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。

      HTML5 spec links

      • Using link

      • Using style

      • Using script

        <!-- External CSS --><link rel="stylesheet" href="code-guide.css"><!-- In-document CSS --><style>
        
  /* ... */</style><!-- JavaScript --><script src="code-guide.js"></script>

        实用为王

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

        属性顺序

        HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。

        • class

        • id, name

        • data-*

        • src, for, type, href

        • title, alt

        • aria-*, role

        class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。

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

        布尔（boolean）型属性

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

        更多信息请参考 WhatWG section on boolean attributes：

        元素的布尔型属性如果有值，就是 true，如果没有值，就是 false。

        如果一定要为其赋值的话，请参考 WhatWG 规范：

        如果属性存在，其值必须是空字符串或 [...] 属性的规范名称，并且不要再收尾添加空白符。

        简单来说，就是不用赋值。

        <input type="text" disabled><input type="checkbox" value="1" checked><select>
        
  <option value="1" selected>1</option></select>

        减少标签的数量

        编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。请看下面的案例：

        <!-- Not so great --><span class="avatar">
        
  <img src="..."></span><!-- Better --><img class="avatar" src="...">

        JavaScript 生成的标签

        通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。

        扩展教程阅读

        前端编码规范

7.bootstrap HTML编码规范的更多相关文章

  1. 8.Bootstrap CSS编码规范

    Bootstrap CSS编码规范 本节的介绍内容为 Bootstrap 中的 CSS 编码规范. 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 为选择 ...

  2. Bootstrap HTML编码规范

    语法 1.用两个空格来代替制表符(Tab)--这是唯一能保证在所有的环境下获得一致展现的方法. 2.嵌套元素应当缩进一次(即两个空格). 3.对于属性的定义,属性值确保全部都用双引(避免使用单引号). ...

  3. Bootstrap-Other：CSS编码规范

    ylbtech-Bootstrap-Other:CSS编码规范 1.返回顶部 1. Bootstrap CSS编码规范 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致 ...

  4. Bootstrap-Other：HTML编码规范

    ylbtech-Bootstrap-Other:HTML编码规范 1.返回顶部 1. Bootstrap HTML编码规范 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得 ...

  5. 前端编码规范，个人感觉bootstrap总结的不错，拿出来给大家分享

    前端编码规范,个人感觉bootstrap总结的不错,拿出来给大家分享 http://codeguide.bootcss.com/#html-doctype HTML 语法 HTML5 doctype ...

  6. Bootstrap编码规范

    黄金定律 永远遵循同一套编码规范 -- 可以是这里列出的,也可以是你自己总结的.如果你发现本规范中有任何错误,敬请指正.通过 open an issue on GitHub为本规范添加或贡献内容. 不 ...

  7. 前端HTML与CSS编码规范

    HTML 语法 HTML5 doctype 语言属性(Language attribute) 字符编码 IE 兼容模式 引入 CSS 和 JavaScript 文件 实用为王 属性顺序 布尔(bool ...

  8. Day7:掌握APICloud应用管理相关服务的配置使用和相关API，包括：应用发布、版本管理、云修复、闪屏广告等。理解APICloud APP优化策略和编码规范；了解APICloud多Widget管理机制和SuperWebview的使用

    主要内容: 1. 应用发布 1.1 云编译 1.2 全包加密 网页全包加密:对网页中全包的html,css,javascript代码进行加密,加密后的网友代码都是不可读的,并且不能通过常用的格式化工具 ...

  9. Android的编码规范

    一.Android编码规范 1.学会使用string.xml文件 在我看来,当一个文本信息出现的次数大于一次的时候就必须要使用string.xml 比如一个保存按钮 , 不规范写法: <Butt ...

随机推荐

  1. 开源.net 混淆器ConfuserEx介绍 [转]

    今天给大家介绍一个开源.net混淆器——ConfuserEx http://yck1509.github.io/ConfuserEx/ 由于项目中要用到.net 混淆器,网上搜寻了很多款,比如Dotf ...

  2. JavaScript中的不可变性(Immutability)

    什么是不可变性(Immutability)? 即某个变量在进行了某个操作之后,其本身没有发生变化,比如对于字符串而言,对字符串的任何操作都会改变字符串本身的值,而是在字符串的基础上复制出来一个然后再改 ...

  3. C#多线程学习一

    一.概述:C#支持多线程并行执行程序,一个线程有他单独的执行路径,能够与其他线程同时执行,一个程序是由一个单线程开始,该单线程由CLR(公共语言运行时)和操作系统创建而成,并具有多线程创建额外线程的功 ...

  4. python-Lock锁线程同步和互斥

    #!/usr/bin/python #coding=utf-8 #线程间通信的同步与互斥操作-锁 import threading a=b=0 lock=threading.Lock() def va ...

  5. python笔记02-----字符串操作

    python中定义变量的字符串 str1 = "www"      #str1就是字符串了 一定用引号 或者直接使用"字符串."来调用内部的方法 1.字符串大小 ...

  6. PHP之string之rtrim()函数使用

    rtrim (PHP 4, PHP 5, PHP 7) rtrim - Strip whitespace (or other characters) from the end of a string ...

  7. javaweb 实现跨域

    现在的一个web应用会涉及到多个地方的restAPi的调用,传统的jsonp虽然支持跨域,但是只是支持get请求. 传统的ajax请求是不支持跨域的,是为了安全考虑. 跨域的思路是跟http机制有关, ...

  8. 话说C语言的关键字volatile

    最近搞NVMe驱动需求分析,对volatile这个单词实在是再熟悉不过了. 而在C语言中,有一个关键字就叫做volatile, 其字面意思是"挥发性的, 不稳定的,可改变的". 那 ...

  9. Nginx教程(6) 负载均衡

    一原理 二例子 在 nginx-1.13.0.tar.gz下测试 upstream test { server 192.168.56.90:8180 weight=1 max_fails=3 fail ...

  10. 图解ARP协议（四）代理ARP原理与实践（“善意的欺骗”）

    一.代理ARP概述 我:当电脑要访问互联网上的服务器,目标MAC是什么? 很多小伙伴在刚学习网络协议的时候,经常这样直接回应:不就是服务器的MAC嘛! 这时我会反问:那电脑怎么拿到这个服务器的MAC地 ...