HTML是描述网页结构的超文本标记语言，HTML规范能够使HTML代码风格保持一致，使得HTML更容易理解和维护。
整体结构
用编辑器快捷键一键搞定 <!DOCTYPE html>------------------------------------------------------------------------------>1.开头定义，方便浏览器认识和解析 <html lang="en">----------------------------------------------------------------------------->2.这里的lang="en"可以删除，如果不删除的，用谷歌之类打开，
它会认为是英文的，会自动给翻译（如果设置了自动翻译的话）
可以输出中文,只是会让你的浏览器提示你要不要翻译此页,如果改成
zh-cn就没有翻译的选项了
<head>------------------------------------------------------------------------------------>3.网页头部的意思，这个位置用于存放<title>头部内容，和CSS样式，
以及需要提前加载的JavaScript脚本等。 <meta charset="UTF-8">----------------------------------------------------------------->4.告知浏览器此页面属于什么字符编码格式，下一步浏览器做好“翻译”工作。
常见的字符编码有：gb2312、gbk、unicode、utf-8。
<meta name="viewport" content="width=device-width, initial-scale=1.0">----------------->5.在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上
的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport
有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分
辨率的移动设备。
<meta http-equiv="X-UA-Compatible" content="ie=edge">---------------------------------->6.X-UA-Compatible是自从IE8新加的一个设置，对于IE8以下的浏览器是
不识别的。 通过在meta中设置X-UA-Compatible的值，可以指定网页
的兼容性模式设置。
<title>Document</title>---------------------------------------------------------------->7.标题 </head> <body>------------------------------------------------------------------------------------->8.主体内容 </body> </html>
【页面头部】
1、文件应以“<!DOCTYPE ......>”首行顶格开始，推荐使用“<!DOCTYPE html>”
<!DOCTYPE html>
2、必须声明文档的编码charset，且与文件本身编码保持一致，指定字符编码的 meta 必须是 head 的第一个直接子元素。推荐使用UTF-8编码<meta charset="utf-8">
<meta charset="utf-8">
（1）网页显示字符集
<!--html5格式--> <meta charset="UTF-8"> <!--简体中文--> <meta http-equiv="content-type" content="text/css;charset=gb2312"> <!--繁体中文--> <meta http-equiv="content-type" content="text/css;charset=gbk"> <!--英文--> <meta http-equiv="content-type" content="text/css;charset=utf-8">
（2）可选标签
- 公司的版权注释
<!--the site is designed by Bob at 2016.9.24-->- 网页制作者信息
<meta name="author" content="123456@qq.com">
- 网站简介
<meta name="description" content="麦子学院创立于xxx年，学院开设了xxx课程,老师拥有x年的教学经历">
- 设定网页的到期时间，一旦网页过期，必须到服务器上重新调阅
<meta http-equiv="expires" content="Wed,26 Feb 2017 08:24:00 GMT">
- 禁止浏览器从本地机缓存中调阅内容
<meta http-equiv="pragma" content="no-cache">
- 用来防止别人在框架中调用你的页面
<meta http-equiv="Window-target" content="_top">
- 自动跳转
<meta http-equiv="refresh" content="5;url=http://www.baidu.com">
- 网页搜索机器人向导，用来告诉机器人哪些页面需要搜索，哪些页 面不需要搜索
<meta name="robots" content="none">
- 收藏夹图标
<link rel="Shortcut Icon" href="favicon.icon">
3、根据页面内容和需求填写适当的keywords和description
<meta name="description" content="不超过150个字符"> <meta name="keywords" content="">
4、页面title是不可缺少的一项，title 必须作为 head 的直接子元素，并紧随 charset 声明之后
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
【资源引入】
1、保证 favicon 可访问
<link rel="shortcut icon" href="path/to/favicon.ico">//用于显示网页导航栏上的logo
2、引入 CSS 和 JavaScript 时无须指明 type 属性
3、引入 CSS 时必须指明 rel="stylesheet"
<link rel="stylesheet" href="page.css">
4、使用link将css文件引入，并置于head中；使用script将js文件引入，并置于body底部
5、移动环境或只针对现代浏览器设计的 Web 应用，如果引用外部资源的 URL 协议部分与页面相同，建议省略协议前缀。这是因为使用 protocol-relative URL 引入 CSS，在 IE7/8 下，会发两次请求。是否使用 protocol-relative URL 应充分考虑页面针对的环境
<script src="//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js"></script>
【结构优化】
1、尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度
2、结构顺序和视觉顺序基本保持一致，按照从上至下、从左到右的视觉顺序书写HTML结构。有时为了便于搜索引擎抓取，也会将重要内容在HTML结构顺序上提前
3、结构、表现、行为三者分离，避免内联
4、每一个块级元素都另起一行，每一行都使用Tab缩进对齐（head和body的子元素不需要缩进）。删除冗余的行尾空格
5、对于内容较为简单的表格，建议将tr写成单行
6、可以在大的模块之间用空行隔开，使模块更清晰
【语义化】
浏览器会根据标签的语义给定一个默认的样式。判断网页标签语义化是否良好的一个简单方法：去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性
1、尽可能少地使用无语义标签span和div
2、在语义不明显，既可以使用p也可以使用div的地方，尽量用p
3、在既可以使用div也可以使用section的地方，尽量用section
4、不要使用纯样式标签，如b、u等，而改用CSS设置
代码格式
【命名】
1、class 必须单词全字母小写，单词间以 - 分隔
2、class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名
<!-- good --> <div class="sidebar"></div> <!-- bad --> <div class="left"></div>
3、同一页面，应避免使用相同的 name 与 id。因为IE7-浏览器会混淆元素的 id 和 name 属性， document.getElementById 可能获得不期望的元素。所以在对元素的 id 与 name 属性的命名需要非常小心
【标签】
1、标签名必须使用小写字母
2、对于无需自闭合的标签，不需要自闭合
3、对 HTML5 中规定允许省略的闭合标签，不允许省略闭合标签
4、HTML 标签的使用应该遵循标签的语义，且要符合标签嵌套规则
<!-- good --> <p>Hello StyleGuide!</p> <!-- bad --> <P>Hello StyleGuide!</P> <!-- good --> <input type="text" name="title"> <!-- bad --> <input type="text" name="title"
【注释】
采用类似标签闭合的写法，与HTML统一格式；注释文案两头空格，与CSS注释统一格式
开始注释：<!-- 注释文案 -->（文案两头空格）
结束注释：<!-- /注释文案 -->（文案前加“/”符号，类似标签的闭合）
允许只有开始注释
<!-- 头部 -->
<div class="g-hd">
<!-- LOGO -->
<h1 class="m-logo"><a href="#">LOGO</a></h1>
<!-- /LOGO -->
<!-- 导航 -->
<ul class="m-nav">
<li><a href="#">NAV1</a></li>
<li><a href="#">NAV2</a></li>
<!-- 更多导航项 -->
</ul>
<!-- /导航 -->
</div>
<!-- /头部 -->
【属性】
1、属性和值全部小写
2、属性值必须用双引号包围
3、布尔类型的属性，建议不添加属性值
4、自定义属性建议以 xxx- 为前缀，推荐使用 data-
5、可以省略style标签和script标签的type属性
<!-- good --> <table cellspacing="0">...</table> <!-- bad --> <table cellSpacing="0">...</table> <!-- good --> <script src="esl.js"></script> <!-- bad --> <script src='esl.js'></script> <script src=esl.js></script>
【属性顺序】
HTML 属性应该按照特定的顺序出现以保证易读性
id class name data-xxx src, for, type, href title, alt aria-xxx, role
特殊元素
【图片】
1、禁止 img 的 src 取值为空，否则会导致部分浏览器重新加载一次当前页面
2、为图片添加 alt 属性，提高图片加载失败时的用户体验
3、避免为 img 添加不必要的 title 属性，多余的 title 影响看图体验，并且增加了页面尺寸
4、为图片添加 width 和 height 属性，以避免页面抖动
<img src="#" alt="#" width="#" height="#">
5、有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现
产品 logo、用户头像、用户产生的图片等有潜在下载需求的图片，以 img 形式实现，能方便用户下载
无下载需求的图片，比如：icon、背景、代码使用的图片等，尽可能采用 css 背景图实现
【表单】
1、有文本标题的控件使用 label 标签将其与其标题相关联。最好将控件置于 label 内，以减少不必要的 id
<label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>
2、使用 button 元素时必须指明 type 属性值。因为button 元素的默认 type 为 submit，如果被置于 form 元素中，点击后将导致表单提交
<button type="submit">提交</button> <button type="button">取消</button>
--------------------- 本文来自 wujingj 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/sinat_19803127/article/details/80524165?utm_source=copy