编码规范-html.md

时间 2019-11-08

标签编码规范 html.md html 栏目字符编码繁體版

原文原文链接

写在前面

对于不一样的编程语言来讲，具体的编码规范各不相同，可是其宗旨都是一致的，就是保证代码在高质量完成需求的同时具有良好的可读性、可维护性。javascript

本文大部份内容来自网上，仅供我的参考学习！css

网络上的知识浩如烟海，而学到了才是本身的！！
而后，老规矩，带上咱们可爱的小伙伴...
html

语法

用两个空格来代替制表符（tab） -- 这是惟一能保证在全部环境下得到一致展示的方法。java
嵌套元素应当缩进一次（即两个空格）。web
对于属性的定义，确保所有使用双引号，毫不要使用单引号。chrome
不要在自闭合（self-closing）元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。编程
不要省略可选的结束标签（closing tag）（例如，</li> 或 </body>）。浏览器

doctype

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

HTML5 doctype编程语言
```
<!DOCTYPE html>
  <html>
  </html>
```

HTML 4 doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  </html>

Tips:
<!DOCTYPE> 声明不是 HTML 标签
告诉浏览器HTML文档类型

文件兼容性模式

文件兼容性用于定义让浏览器如何编译你的网页。此文件解释文件兼容性，如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式。

IE兼容行
```
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
```
说明:IE=Edge设置通知IE以最高级别模式加载文档;其余的有:11/10/9/8/7/5/EmulateIE11/EmulateIE10
chrome 优先
```
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
```
说明:优先使用最新版本的IE 和 Chrome 内核

360极速模式优先

<meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

说明:优先使用webkit内核,IE兼容内核,IE标准内核

马丹写在最后
```
<meta http-equiv="X-UA-Compatible" content="IE=10;IE=9;IE=8;IE=7;" />
```
浏览器从前日后选择,可是太麻烦了,改用IE=edge,为了兼容chrome使用chrome=1触发Google Chrome Frame;可是马丹,chrome最新版本已经抛弃Google Chrome Frame了,因此最终使用IE=edge搞定.
```
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
```

浏览器内核

Trident内核
又称其为IE内核，是微软开发的一种排版引擎。
浏览器产品: IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 八、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等
Gecko内核
开源,以C++编写的网页排版引擎。
浏览器产品:Firefox、Netscape6至9
WebKit内核
开源,目前流行的浏览器内核,常见于Google和Mac的产品中.
浏览器产品:Safari、Chrome、傲游三、国内各类浏览器
Presto内核
Opera Software开发的浏览器排版引擎
浏览器产品:Opera 7.0以上

Tips : CSS3中各个浏览器内核兼容的设置

- -moz-：表明FireFox浏览器私有属性  
- -ms-：表明IE浏览器私有属性  
- -webkit-：表明safari、chrome浏览器私有属性  
- -o-：表明opera浏览器私有属性

.class{
      border-radius:20px 40px 10px;
      -webkit-border-radius:20px 40px 10px;
      -moz-border-radius:20px 40px 10px;
      -ms-border-radius:20px 40px 10px;
      -o-border-radius:20px 40px 10px;
    }

sublime有插件能够自动生成:Autoprefixer

Tips : JS各个浏览器内核兼性

其余问题

文件编码格式
编写文件时所有使用无BOM UTF-8模式,并指定浏览器文档编码方式.
```
<meta charset="UTF-8">
```
引入 CSS 和 JavaScript 文件
根据HTML5规范,在引入CSS和JavaScript文件时通常不须要指定type属性，由于text/css和text/javascript分别是它们的默认值。非H5的加!
```

  <link rel="stylesheet" href="code-guide.css">
  
  <script src="code-guide.js"></script>
```
说明:js放文件底部,css放文件head
标签语义化
尽可能遵循 HTML 标准和语义，可是不要以牺牲实用性为代价。任什么时候候都要尽可能使用最少的标签并保持最小的复杂度。

减小标签的数量
编写 HTML 代码时，尽可能避免多余的父元素。

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

少用JavaScript 生成的标签
经过 JavaScript 生成的标签让内容变得不易查找、编辑，而且下降性能。能避免时尽可能避免。
```
<span class="avatar"></span>
  <script>
    document.getElementsByClass('avatar')[0].value = "";
  </script>
```