前端录网站,记录前端点点滴滴,帮助程序猿快速成长!

前端规范之HTML

html/css
一、基本语法: 

1.用两个空格来代替制表符(tab),这是唯一能保证在所有环境下获得一致展现的方法,一般的编辑器都可以调整

2.嵌套元素应当缩进一次(即两个空格)。

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

4.不要在自闭和(self-closing)元素的尾部添加斜线 — HTML5 规范 中明确说明这是可选的。 
如<input type=”text”>

5.不要省略可选的结束标签(closing tag)(例如, </li> 或 </body> )。

二、HTML5基本格式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>前端规范之HTML</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- css -->
    <link rel="stylesheet" href="xxx" />

    <!-- css in document -->
    <style>

    </style>
  </head>
  <body>

    <!-- content -->

    <!-- javascript -->
    <script src="xxx"></script>
  </body>
</html>

1.使用统一的HTML5文档声明。

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

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

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

三、属性顺序 
1.class 标识通用性可复用组件 
2.id    标识具体唯一性组件 
3.name  标识同名组件 
4.data-* 
5.src,for,type,href 
6.title,alt 
7.aria-*,role 
8.其它属性

四、布尔型属性 
XHTML规范要求为其赋值,HTML5规范不需要。一般写法:

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

五、标签嵌套 
在保持扩展性和语义性的情况下,尽量减少标签的嵌套。

<span class="img_01"><img src="xxx"></span>
改写为:
<img class="img_01" src="xxx">


转载请注明:前端录»前端规范之HTML