编码规范-html.md

写在前面

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

本文大部分内容来自网上，仅供个人参考学习！

网络上的知识浩如烟海，而学到了才是自己的！！
然后，老规矩，带上我们可爱的小伙伴...

语法

用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。
嵌套元素应当缩进一次（即两个空格）。
对于属性的定义，确保全部使用双引号，绝不要使用单引号。
不要在自闭合（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 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等
Gecko内核
开源,以C++编写的网页排版引擎。
浏览器产品:Firefox、Netscape6至9
WebKit内核
开源,目前流行的浏览器内核,常见于Google和Mac的产品中.
浏览器产品:Safari、Chrome、傲游3、国内各种浏览器
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>
```

posted @ 2020-01-19 23:42 10年码农阅读(369) 评论(0) 编辑收藏举报

刷新页面返回顶部

10年码农