关于HTML

HTML、XML、XHTML 有什么区别：

HTML：
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
XML：
- XML 指可扩展标记语言（EXtensible Markup Language）
- XML 是一种标记语言，很类似 HTML
- XML 的设计宗旨是传输数据，而非显示数据
- XML 标签没有被预定义。您需要自行定义标签。
- XML 被设计为具有自我描述性。
- XML 是 W3C 的推荐标准
XHTML：
- XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）。
- XHTML 的目标是取代 HTML。
- XHTML 与 HTML 4.01 几乎是相同的。
- XHTML 是更严格更纯净的 HTML 版本。
- XHTML 是作为一种 XML 应用被重新定义的 HTML。
- XHTML 是一个 W3C 标准。

语义化就是让标签和其所包裹的内容相吻合。
为什么要是语义化？
1. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
2. 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
3. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

将样式和结构写在一起，也就是直接将样式写在html标签中，会使整个html文档很乱，可读性变差，不利于维护。
将样式与结构分离的好处：
1. 利用CSS中的重用、组合、继承等特性减少样式的代码量，样式结构上非常清晰；
2. 页面视觉有变动只需要修改相应的CSS文件，不用或者基本上不用改动html文档中的标签结构；
3. 方便JavaScript脚本编写，比如用js控制标签的className来方便的、动态的改变元素的样式，而不是直接修改其具体样式；
4. 适合产品级、模块化的开发

<meta charset="UTF-8">：设定网页字符编码，常用的有utf-8和gb2312；
<meta name="keywords" content="your tags" />: 设定页面关键词，以逗号区分开；
<meta content="description" name="description">：页面描述；
<meta name="renderer" content="webkit">：优先使用chrome内核渲染页面；
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">：优先使用最新版ie和chrome浏览器；
<meta name="author" content="author,email address">：定义页面作者；
<meta name="viewport" content="width=device-width, initial-scale=1.0">：为移动设备设定，viewport也可作为宽度单位，一些参数设定，width viewport 宽度(数值/device-width)，height viewport 高度(数值/device-height)，init ial-scale 初始缩放比例，user-scalable 是否允许用户缩放(yes/no)，一般移动网页上都是设定设备宽度，默认不可缩放的；

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档，Doctype还会对浏览器的渲染模式产生影响，不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析，所以Doctype是非常关键的，尤其是在 IE 系列浏览器中，由DOCTYPE 所决定的 HTML 页面的渲染模式至关重要。
当浏览器厂商开始创建与W3C标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式（standards mode）和混杂模式（quirks mode）。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器（比如Microsoft IE 4和Netscape Navigator 4）的行为以防止老站点无法工作。
<!doctype html> ：
- HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。
- <!DOCTYPE html>告诉浏览器当前页面使用HTML5标准。

乱码产生的根源在于，保存文件的编码方式与浏览器解析文件的编码方式不一致，导致编码和解码不匹配。
解决方法：首页，在文件保存的时候你自己要清楚是用哪种编码方式保存的。如果你的文件是保存为utf-8格式，那么设置<meta charset="UTF-8">，这句话的意思是告诉浏览器在打开这个页面的时候不要去猜了，直接用utf-8去解码。同理，如果你的文件保存为gbk格式，那么设置<meta charset="GBK">。