团队HTML规范

HTML规范

版本号 作者 时间 版本 内容摘要
v1.0 eleven 2018-05-16 1.0.0 文档初始化

目录

1.DOCTYPE声明

HTML文件必须加上 DOCTYPE 声明,并统一使用 HTML5 的文档声明:

    <!DOCTYPE html>

2.页面语言LANG

推荐使用属性值 cmn-Hans-CN(简体, 中国大陆),但是考虑浏览器和操作系统的兼容性,目前仍然使用 zh-CN 属性值

    <html lang="zh-CN">

3.CHARSET字符编码

因为 ISO-8859 中字符集大小是有限的,且在多语言环境中不兼容,所以 Unicode 联盟开发了 Unicode 标准。

  • Unicode 标准覆盖了(几乎)所有的字符、标点符号和符号。

  • Unicode 使文本的处理、存储和运输,独立于平台和语言。

  • HTML-5 中默认的字符编码是 UTF-8

    <meta charset="UTF-8">

4.元素及标签闭合

HTML元素共有以下5种:

  • 空元素:area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
  • 原始文本元素:script、style
  • RCDATA元素:textarea、title
  • 外来元素:来自MathML命名空间和SVG命名空间的元素。
  • 常规元素:其他HTML允许的元素都称为常规元素。

推荐:

<div>
    <h1>我是h1标题</h1>
    <p>我是一段文字,我有始有终,浏览器能正确解析</p>
</div>
<br>

不推荐:

<div>
    <h1>我是h1标题</h1>
    <p>我是一段文字,我有始无终,浏览器亦能正确解析
</div>

<br/>

5.书写风格

HTML标签名、类名、标签属性和大部分属性值统一用小写

推荐:

    <div class="demo"></div>

不推荐:

<div class="DEMO"></div>

<DIV CLASS="DEMO"></DIV>

6.类型的属性

不需要为 CSS、JS 指定类型属性,HTML5 中默认已包含

推荐:

<link rel="stylesheet" href="" >
<script src=""></script>

不推荐:

<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>

7.元素属性

  • 元素属性值使用双引号语法
  • 元素属性值可以写上的都写上

推荐:

<input type="text">

<input type="radio" name="name" checked="checked" >

不推荐:

<input type=text>
<input type='text'>

<input type="radio" name="name" checked >

8.代码缩进

统一使用四个空格进行代码缩进,使得各编辑器表现一致(各编辑器有相关配置)

推荐:

<div class="fs">
    <a href="#"></a>
</div>

9.纯数字输入框

使用 type="tel" 而不是 type="number"

推荐:

<input type="tel">

10.代码嵌套

元素嵌套规范,每个块状元素独立一行,内联元素可选

推荐:

<div>
    <h1></h1>
    <p></p>
</div>
<p>
    <span></span>
    <span></span>
</p>

不推荐:

<div>
    <h1></h1><p></p>
</div>
<p>
    <span></span>
    <span></span>
</p>

段落元素与标题元素只能嵌套内联元素

推荐:

<h1>
    <span></span>
</h1>
<p>
    <span></span>
    <span></span>
</p>

不推荐:

<h1>
    <div></div>
</h1>
<p>
    <div></div>
    <div></div>
</p>

11.单行注释

一般用于简单的描述,如某些状态描述、属性描述等

注释内容前后各一个空格字符,注释位于要注释代码的上面,单独占一行

推荐:

<!-- Comment Text -->
<div>...</div>

不推荐:

<div>...</div><!-- Comment Text --> 
    
<div><!-- Comment Text -->
    ...
</div>

12.模块注释

一般用于描述模块的名称以及模块开始与结束的位置

注释内容前后各一个空格字符, 表示模块开始, 表示模块结束,模块与模块之间相隔一行

推荐:

<!-- S Comment Text A -->   
<div class="mod-a">
    ...
</div>
<!-- E Comment Text A -->
    
<!-- S Comment Text B -->   
<div class="mod-b">
    ...
</div>
<!-- E Comment Text B -->

不推荐:

<!-- S Comment Text A -->
<div class="mod-a">
    ...
</div>
<!-- E Comment Text A -->
<!-- S Comment Text B -->   
<div class="mod-b">
    ...
</div>
<!-- E Comment Text B -->

13.嵌套模块注释

当模块注释内再出现模块注释的时候,为了突出主要模块,嵌套模块不再使用

推荐:

<!-- S Comment Text A -->
<div class="mod-a">
        
    <div class="mod-b">
        ...
    </div>
    <!-- /mod-b -->
        
    <div class="mod-c">
        ...
    </div>
    <!-- /mod-c -->
        
</div>
<!-- E Comment Text A -->

14.移动端HTML模版

推荐:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" >
<!-- viewport 后面加上 minimal-ui 在safri 体现效果 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 隐藏状态栏/设置状态栏颜色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<meta name="format-detection" content="telephone=no">
<title>移动端HTML模版</title>

<!-- S DNS预解析 -->
<link rel="dns-prefetch" href="">
<!-- E DNS预解析 --> 
<!-- S 线上样式页面片,开发请直接取消注释引用 -->
<!-- #include virtual="" -->
<!-- E 线上样式页面片 -->
<!-- S 本地调试,根据开发模式选择调试方式,请开发删除 --> 
<link rel="stylesheet" href="css/index.css" >
<!-- /本地调试方式 -->
<link rel="stylesheet" href="http://srcPath/index.css" >
<!-- /开发机调试方式 -->
<!-- E 本地调试 -->
</head>
<body>
</body>
</html>

15.PC端HTML模版

推荐:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
<meta name="robots" content="index,follow">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="renderer" content="ie-stand">
<title>PC端HTML模版</title>
<!-- S DNS预解析 --> 
<link rel="dns-prefetch" href="">
<!-- E DNS预解析 --> 
<!-- S 线上样式页面片,开发请直接取消注释引用 -->
<!-- #include virtual="" -->
<!-- E 线上样式页面片 -->
<!-- S 本地调试,根据开发模式选择调试方式,请开发删除 --> 
<link rel="stylesheet" href="css/index.css" >
<!-- /本地调试方式 -->
<link rel="stylesheet" href="http://srcPath/index.css" >
<!-- /开发机调试方式 -->
<!-- E 本地调试 -->
</head>
<body>
</body>
</html>

16.script引用统一放在body结束标签的前面

因为浏览器生成Dom树的时候是一行一行读HTML代码的,script标签放在最后面就不会影响前面的页面的渲染;

推荐:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>PC端HTML模版</title>

</head>
<body>
<script src="http://www.test.com/test.js"></script>
</body>
</html>

不推荐:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>PC端HTML模版</title>
<script src="http://www.test.com/test.js"></script>
</head>
<body>
</body>
</html>

17.defer和async的区别

<script src="script.js"></script>

没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。

<script async src="script.js"></script>

有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。

<script defer src="myscript.js"></script>

有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 2,364评论 0 2
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 16,442评论 1 39
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 912评论 0 0
  • 三月的的风啊, 静悄悄地溜来, 像俏皮的少女。 春风轻轻吹拂, 吹过树梢、枝头, 吹进人们的心中, 仿若那少女的回...
    广电1701B夏珊珊阅读 28评论 0 1
  • 辛弃疾(1140年5月28日-1207年10月3日),原字坦夫,后改字幼安,号稼轩[1],山东东路济南府历城县(今...
    诗之源阅读 201评论 0 0