整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
法
用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。
嵌套元素应当缩进一次（即两个空格）。
对于属性的定义，确保全部使用双引号，绝不要使用单引号。
不要在自闭合（self-closing）元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。
不要省略可选的结束标签（closing tag）（例如，</li> 或 </body>）。
实例：
<!DOCTYPE html><html>
HTML5 doctype
为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。
实例：
<!DOCTYPE html><html>
语言属性
根据 HTML5 规范：
强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。
lang 属性的知识可以从 此规范 中了解。
这里列出了语言代码表。
<html lang="zh-CN">
IE 兼容模式
IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
字符编码
通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。
<head>
引入 CSS 和 JavaScript 文件
根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。
HTML5 spec links
Using link
Using style
Using script
<!-- External CSS --><link rel="stylesheet" href="code-guide.css"><!-- In-document CSS --><style>
实用为王
尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。
属性顺序
HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
class
id, name
data-*
src, for, type, href
title, alt
aria-*, role
class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。
<a class="..." id="..." data-modal="toggle" href="#">
布尔（boolean）型属性
布尔型属性可以在声明时不赋值。XHTML 规范要求为其赋值，但是 HTML5 规范不需要。
更多信息请参考 WhatWG section on boolean attributes：
元素的布尔型属性如果有值，就是 true，如果没有值，就是 false。
如果一定要为其赋值的话，请参考 WhatWG 规范：
如果属性存在，其值必须是空字符串或 [...] 属性的规范名称，并且不要在首尾添加空白符。
简单来说，就是不用赋值。
<input type="text" disabled><input type="checkbox" value="1" checked><select>
减少标签的数量
编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。请看下面的案例：
<!-- Not so great --><span class="avatar">
JavaScript 生成的标签
通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
1. HTML的代码文件
（1）打开Hbuilder开发工具，新建项目，点击右键新建一个HTML文档。
（2）在文档中写HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>产品列表</title>
</head>
<body>
这是产品页面
<b>好好学习，天天向上</b>
<h1>好好学习，天天向上</h1>
</body>
</html>
温馨提示：
常用的快捷键：
Ctrl+s:保存
ctrl+c:复制
ctrl+x：剪切
ctrl+v：粘贴
2. HTML的基本结构
对于HTML文件的后缀名一般为“html”或“htm”
2.1HTML的标签格式
（1）什么是HTML标签？
HTML标签是有开始标签和结束标签组成
开始标签：是被尖括号包围的元素名。
结束标签：是被尖括号包围的斜杠和元素名
<元素>内容 </元素>
例如：<b>好好学习天天向上</b>
注意：有些HTML标签是没有结束标签的, <hr/>
(2)单标签和双标签
双标签：例如：<b></b>
单标签：<hr/> <br/>
(3) 标签的属性
<font size="1">好好学习</font>
<font size="7">好好学习</font>
<h1 title="h1" style="color: red;">
我是一个标题标签
</h1>
3. HTML基本结构的认识
<!--<!DOCTYPE html>:文档声明，告知浏览器文档使用哪种HTML或XHTML规范，让浏览器通过正确的方式解析我们的网页，让网页能够正确的显示。-->
<!DOCTYPE html>
<!-- <html>标签：是网页的跟标签-->
<html>
<!--head是网页头，一般表示网页中描述信息-->
<head>
<!--
meta：提供网页的相关信息，有利于搜索引擎收录
charset="UTF-8"： 设置网页编码方式为utf-8
name="Keywords" ：设置网页关键字
name="viewport": 设置网页视窗大小
-->
<meta name="Keywords" content="HTML5前端开发工程师入门到精通课程"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- <title></title>：表示网页的标题 -->
<title></title>
</head>
<body>
<!--
<body></body>：网页的主体内容，用户呈现的内容，比如文字，图片，链接，视频……
-->
</body>
</html>
4. HTML的注释
<!--这里是注释的内容-->
5. HTML的编码问题
常见编码个格式：
UTF-8:国际通用的编码格式
GBK/GB2312:中文编码字符
HTML的编码：<meta charset="UTF-8">
6. HTML规范
（1）html标签都是有尖括号包围的标签，比如<b>
（2）标签通常是成对存在，<b></b>,<h1></h1>
（3）HTML不区分大小写，我们建议小写。
（4）HTML可以嵌套，但是允许交叉嵌套
正确写法：<b> <h1>我很粗</h1> </b>
错误写法：
<b> <h1>我很粗 </b></h1>
TML 字符集
如需正确地显示 HTML 页面，浏览器必须知道使用何种字符集。
万维网早期使用的字符集是 ASCII。ASCII 支持 0-9 的数字，大写和小写英文字母表，以及一些特殊字符。
由于很多国家使用的字符并不属于 ASCII，现代浏览器的默认字符集是 ISO-8859-1。
如果网页使用不同于 ISO-8859-1 的字符集，就应该在 <meta> 标签进行指定。
ISO 字符集
ISO 字符集是国际标准组织 (ISO) 针对不同的字母表/语言定义的标准字符集。
下面列出了世界各地使用的不同字符集：
| 字符集 | 描述 | 使用范围 |
|---|---|---|
| ISO-8859-1 | Latin alphabet part 1 | 北美、西欧、拉丁美洲、加勒比海、加拿大、非洲 |
| ISO-8859-2 | Latin alphabet part 2 | 东欧 |
| ISO-8859-3 | Latin alphabet part 3 | SE Europe、世界语、其他杂项 |
| ISO-8859-4 | Latin alphabet part 4 | 斯堪的纳维亚/波罗的海（以及其他没有包括在 ISO-8859-1 中的部分） |
| ISO-8859-5 | Latin/Cyrillic part 5 | 使用古代斯拉夫语字母表的语言，比如保加利亚语、白俄罗斯文、俄罗斯语、马其顿语 |
| ISO-8859-6 | Latin/Arabic part 6 | 使用阿拉伯字母的语言 |
| ISO-8859-7 | Latin/Greek part 7 | 现代希腊语，以及由希腊语衍生的数学符号 |
| ISO-8859-8 | Latin/Hebrew part 8 | 使用希伯来语的语言 |
| ISO-8859-9 | Latin 5 part 9 | 土耳其语。除了土耳其字符取代了冰岛文字，其它与 ISO-8859-1 相同。 |
| ISO-8859-10 | Latin 6 | 拉普兰语、日耳曼语、爱斯基摩北欧语 |
| ISO-8859-15 | Latin 9 (aka Latin 0) | 与 ISO 8859-1 类似，欧元符号和其他一些字符取代了一些较少使用的符号 |
| ISO-2022-JP | Latin/Japanese part 1 | 日本语 |
| ISO-2022-JP-2 | Latin/Japanese part 2 | 日本语 |
| ISO-2022-KR | Latin/Korean part 1 | 韩语 |
Unicode 标准
由于上面列出的字符集都有容量限制，而且不兼容多语言环境，Unicode 联盟开发了 Unicode 标准。
Unicode 标准涵盖了世界上的所有字符、标点和符号。
不论是何种平台、程序或语言，Unicode 都能够进行文本数据的处理、存储和交换。
Unicode 联盟
Unicode 联盟开发了 Unicode 标准。他们的目标是用标准的 Unicode 转换格式 (UTF) 来取代现有的字符集。
Unicode 标准已经获得了成功，在 XML、Java、ECMAScript (JavaScript)、LDAP、CORBA 3.0、WML 中，Unicode 已经得到了实现。在许多操作系统以及所有的现代浏览器中，Unicode 同样得到了支持。
Unicode 联盟与领导性的标准发展组织进行合作，比如 ISO、W3C 以及 ECMA。
Unicode 可以被不同的字符集兼容。最常用的编码方式是 UTF-8 和 UTF-16：
| 字符集 | 描述 |
|---|---|
| UTF-8 | UTF8 中的字符可以是 1-4 个字节长。UTF-8 可以表示 Unicode 标准中的任意字符。UTF-8 向后兼容 ASCII。UTF-8 是网页和电子邮件的首选编码。 |
| UTF-16 | 16 比特的 Unicode 转换格式是一种 Unicode 可变字符编码，能够对全部 Unicode 指令表进行编码。UTF-16 主要被用于操作系统和环境中，比如微软的 Windows 2000/XP/2003/Vista/CE 以及 Java 和 .NET 字节代码环境。 |
提示： 最前面的 256 个 Unicode 字符集字符对应于 256 个 ISO-8859-1 字符。
提示： 所有 HTML 4 处理器均已支持 UTF-8，而所有 XHTML 和 XML 处理器支持 UTF-8 和 UTF-16！
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
*请认真填写需求信息，我们会在24小时内与您取得联系。
