html5代码书写规范

时间 2019-11-21

标签 html5 html 代码书写规范栏目 HTML5 繁體版

原文原文链接

DOCTYPE 页面文档类型统一使用HTML5 DOCTYPE.

<!DOCTYPE html>

Meta字符集设置声明方法遵循HTML5的规范, Meta文件使用 "UTF-8" 浏览器显示编码指定.

<meta charset="utf-8">

手机端页面添加viewport，让网页的宽度自动适应手机屏幕的宽度css

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0,width=device-width">
     width:可视区域的宽度，值可为数字或关键词device-width
     height:同width
     intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
     maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
              maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
     user-scalable:是否可对页面进行缩放，no 禁止缩放

试用xhtml的编写格式。元素的标签和属性名必须小写, 属性值必须加双引号;

<a href="/">Home</a>

使用html5新标签，使页面更语义化。

<time></time>   //	定义日期/时间。
<header></header>//  定义 section 或 page 的页眉。
<footer></footer> // 定义 section 或 page 的页脚。
<article></article> //	定义文章。
  .....

-图标使用css3字体图标实现html

//html
<i class="icon-bianji"></i>

//css 
 @font-face{font-family: "weiquan";src:url(http://static.kaiba315.com/iconfont-weiquan.ttf);}
[class^="icon-"], [class*=" icon-"]{font-family:'weiquan' !important;font-style:normal;}
.icon-bianji:before { content: "\e600"; }

缩进

使用tab来表示缩进，不要使用空格; 在块状元素，列表，表格元素后面使用新行，而且对它的子元素进行缩进.html5

<ul>
    <li><a href="someCategory/" title="someTitle" >someTitle</a></li>
</ul>

空格去除没必要要的空格

# Bad    
<p>test                  </p>    
# Good
<p>test</p>

-减小标签的数量编写 HTML 代码时，尽可能避免多余的父元素。不少时候，这须要迭代和重构来实现。css3

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

<!-- Better -->
<img class="avatar" src="...">

嵌套和闭合

元素嵌套遵循 (X)HTML Strict 嵌套规则, 推荐使用Firefox插件 HTML Validator 进行检查; 正确区分自闭合元素和非自闭合元素. 非法闭合包括：<br>..</br>、<script />、<iframe />, 非法闭合会致使页面嵌套错误问题自闭和标签: 如下元素不要求闭合, 缘由见: HTML(5) 不要求标签自闭合非闭合标签:浏览器

Table的写法

</td> 结束标记应该与 <td> 处于同一行，不要换行, 若是换行,浏览器将会解析内容为内容+半角空格.字体

不容许任何没有内容的空单元格存在,空单元格中必须存在

表格高度和宽度的控制, 不出现多于一个的控制同一个单元格大小的height 和width, 保证任何一个width 和height 都是有效的，也就是你改动代码中任何一个width 和height 的数值，都应该在浏览器中看到变化

通常状况下只有一列的表格，width 写在 <table> 的标签内

只有一行的表格，height 写在 <table> 的标签内

多行多列的表格，width 和height 写在第一行或者第一列的 <td> 标签内

尽可能避免 colspan, rowspan 两个属性

优化技巧

a 元素加 title="" ，img元素加 alt = "" 大于号>小于号<版权@copy;优化