1.HTML规范
1.1 代码规范
1.DOCTYPE 声明
HTML文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明：
<!DOCTYPE html>
2.页面语言LANG
推荐使用属性值 cmn-Hans-CN（简体, 中国大陆），但是考虑浏览器和操作系统的兼容性，目前仍然使用 zh-CN 属性值
<html lang="zh-CN">
更多地区语言参考：
zh-SG 中文 (简体, 新加坡) 对应 cmn-Hans-SG 普通话 (简体, 新加坡)
zh-HK 中文 (繁体, 香港) 对应 cmn-Hant-HK 普通话 (繁体, 香港)
zh-MO 中文 (繁体, 澳门) 对应 cmn-Hant-MO 普通话 (繁体, 澳门)
zh-TW 中文 (繁体, 台湾) 对应 cmn-Hant-TW 普通话 (繁体, 台湾)
3.charset
一般情况下统一使用 “UTF-8” 编码
<meta charset="UTF-8">
由于历史原因，有些业务可能会使用 “GBK” 编码
<meta charset="GBK">
请尽量统一写成标准的 “UTF-8”，不要写成 “utf-8” 或 “utf8” 或 “UTF8”。根据 IETF对UTF-8的定义，其编码标准的写法是 “UTF-8”；而 UTF8 或 utf8 的写法只是出
4.元素及标签闭合
为了能让浏览器更好的解析代码以及能让代码具有更好的可读性，有如下约定：
- 所有具有开始标签和结束标签的元素都要写上起止标签，某些允许省略开始标签或和束标签的元素亦都要写上。
- 空元素标签都不加 “/” 字符
推荐：
<div>
<h1>我是h1标题</h1>
<p>我是一段文字，我有始有终，浏览器能正确解析</p>
</div>
<br>
不推荐：
<div>
<h1>我是h1标题</h1>
<p>我是一段文字，我有始无终，浏览器亦能正确解析
</div>
<br/>
5.HTML代码大小写
HTML标签名、类名、标签属性和大部分属性值统一用小写
推荐：
<div class="demo"></div>
不推荐：
<div class="DEMO"></div>
<DIV CLASS="DEMO"></DIV>
HTML文本、CDATA、JavaScript、meta标签某些属性等内容可大小写混合
<!-- 优先使用 IE 最新版本和 Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- HTML文本内容 -->
<h1>I AM WHAT I AM </h1>
<!-- JavaScript 内容 -->
<script type="text/javascript">
var demoName = 'demoName';
...
</script>
<!-- CDATA 内容 -->
<script type="text/javascript"><![CDATA[
...
]]></script>
6.类型属性
推荐：
<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.特殊字符引用
文本可以和字符引用混合出现。这种方法可以用来转义在文本中不能合法出现的字符。
在 HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体
推荐：
<a href="#">more>></a>
不推荐：
<a href="#">more>></a>
9.代码缩进
统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）
<div class="jdc">
<a href="#"></a>
</div>
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.语义化标签
HTML5 中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是 div 或者 p 标签
正例
<header></header>
<footer></footer>
反例
<div>
<p></p>
</div>
1.2 注释规范
1.单行注释
一般用于简单的描述，如某些状态描述、属性描述等
注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行
推荐：
<!-- Comment Text -->
<div>...</div>
不推荐：
<div>...</div><!-- Comment Text -->
<div><!-- Comment Text -->
...
</div>
2.模块注释
一般用于描述模块的名称以及模块开始与结束的位置
注释内容前后各一个空格字符，<!-- S Comment Text --> 表示模块开始，<!-- E Comment Text --> 表示模块结束，模块与模块之间相隔一行
推荐写法：
<!-- 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 -->
3.嵌套模块注释
当模块注释内再出现模块注释的时候，为了突出主要模块，嵌套模块不再使用
<!-- S Comment Text -->
<!-- E Comment Text -->
而改用
<!-- /Comment Text -->
注释写在模块结尾标签底部，单独一行。
<!-- 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 -->
1.3 文件模板
HTML模版指的是团队使用的初始化HTML文件，里面会根据不同平台而采用不一样的设置，一般主要不同的设置就是 mata 标签的设置，
以下是 PC 和移动端的 HTML 模版。
1.PC端
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="页面关键字">
<meta name="description" content="页面的描述内容">
<meta name="author" content="author,email address">
<meta name="Copyright" content="Tencent" />
<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>
1.页面标题(title)
页面名称-产品中文全称-官方网站-腾讯游戏-产品slogan，28个汉字以内
<title>抓金角银角大王每周末放送装备 - 地下城与勇士官方网站 - 腾讯游戏</title>
2.页面关键字(keywords)
Keywords为产品名、专题名、专题相关名词，之间用英文半角逗号隔开
<meta name="keywords" content="英雄联盟,lol,lol新手礼包,lol攻略,lol视频,lol视频攻略,英雄资料,英雄联盟战争学院,明星解说视频,101战争学院,英雄,攻略,WCG,点亮图标,赛事" />
3.页面描述(description)
不超过150个字符，描述内容要和页面内容相关。
<meta name="description" content="英雄联盟官方网站，海量风格各异的英雄，丰富、便捷的物品合成系统，游戏内置的匹配、排行和竞技系统，独创的“召唤师”系统及技能、符文、天赋等系统组合，必将带你进入一个崭新而又丰富多彩的游戏世界。" />
1.4 WebApp Meta
1.Viewport Meta Tag
通用类设置
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
- width – viewport的宽度
- height – viewport的高度
- initial-scale – 初始的缩放比例
- minimum-scale – 允许用户缩放到的最小比例
- maximum-scale – 允许用户缩放到的最大比例
- user-scalable – 是否允许用户缩放
482
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
