HTML 代码规范
DOCTYPE 声明
HTML 文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明：
<!DOCTYPE html>
页面语言 LANG
历史原因标准一直在变 zh-CN -> zh-cmn-Hans -> cmn-Hans-CN
但是考虑浏览器和操作系统的兼容性，目前仍然使用 zh-CN 属性值
<html lang="zh-CN"></html>
CHARSET
一般情况下统一使用 “UTF-8” 编码
<meta charset="UTF-8" />
有些老代码可能会使用 “GBK” 编码
<meta charset="GBK" />
元素及标签闭合
- 所有具有开始标签和结束标签的元素都要写上起止标签，某些允许省略开始标签或和束标签的元素亦都要写上。
- 单闭合标签都加 “/” 字符 (格式化工具会帮忙添加)
<div>
<h1>我是h1标题</h1>
<p>我是一段文字，我有始有终，浏览器能正确解析</p>
</div>
<img />
<br />
书写风格
HTML 代码大小写
HTML 标签名、类名、标签属性和大部分属性值统一用小写
<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>
类型属性
需要为 CSS、JS 指定类型属性
<link rel="stylesheet" href="" />
<script type="text/javascript" src=""></script>
元素属性
- 元素属性值使用双引号语法
- 元素属性值，如 checked 可简写
<div>
<input type="text" />
</div>
<input type="radio" name="name" checked />
特殊字符
在 HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体
<p><a href="#">more>></a></p>
<p><a href="#">©xxxx公司</a></p>
代码缩进
统一使用两个空格进行代码缩进
<div>
<a href="#"></a>
</div>
语义化标签
HTML5 中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是 div 或者 p 标签
<header></header>
<main>
<nav></nav>
<section></section>
</main>
<footer></footer>
Img 标签加入 alt 信息
Img 标签 alt 信息对 seo 友好也可以在显示不出图片时有一定的提示
<img src="./logo.png" alt="企业图标" />
纯数字输入框
使用 type=“tel” 而不是 type=“number”
<input type="tel" />
代码嵌套
元素嵌套规范，每个块状元素独立一行，内联元素可选
<div>
<h1></h1>
<p></p>
</div>
<p><span></span><span></span></p>
注释
单行注释
一般用于简单的描述，如某些状态描述、属性描述等
注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行
<!-- Comment Text -->
<div></div>
模块注释
一般用于描述模块的名称以及模块开始与结束的位置
注释内容前后各一个空格字符，
表示模块开始，
表示模块结束，模块与模块之间相隔一行
<!-- 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 -->
嵌套模块注释
当模块注释内再出现模块注释的时候，为了突出主要模块，嵌套模块不再使用,改用
<!-- /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 -->
HTML 模版
移动端和 PC 端主要是 viewport 和 meta 标签的区别
移动端
<!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"
/>
<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>
PC 端
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<!-- 如果是响应式页面也需要设置viewport -->
<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>