HTML, XML, XHTML 有什么区别

先说一下三者的定义。 

HTML：HyperText Markup Language / 超文本标记语言

XML: Extensible Markup Language / 可扩展标记语言

XHTML: Extensible Hypertext Markup Language / 可扩展超文本标记语

HTML

作为一个前端，最熟悉是就是 HTML 了，所以我们先从 HTML 说起。

HTML 是用来描述和定义网页内容的标记语言，是构成网页的最基本的东西。

所谓超文本，就是说它除了能标记文本，还能标记其他的内容，比如：图片，链接，音频，视频等。

XML

它的表现形式就是给一个文档加一堆标签，说明每段文字是干什么的，有什么意义。这样做的目的是方便存储、传输、分享数据，人和机器都可以很方便的阅读。XML 和 HTML 有一个明显的区别就是：HTML 的标签都是预定义的，你不可以自己随便增加，比如你不能自造一个标签, 但是 XML 可以，你可以自己“发明”标签————这也是“可扩展的”一个含义。

XHTML

HTML 和 XML 一结合，就产生了 XHTML

XHTML 就是以 XML 的语法形式来写 HTML.

XHTML 出现的原因是：HTML 是一种语法形式比较松散的标记语言，语法要求也不严格。比如大小可以混用，属性值随便你加不加引号，单引号还是双引号也随便你，标签也可以不闭合。HTML 标准的制定者 W3C 一看这样下去不行，所谓无规矩不成方圆，所以就把 XML 的语法形式往 HTML 上一套，出现了 XHTML，所以你也可以把 XHTML 理解为 HTML 的严格语法形式，除此之外，其它方面基本一样。

比如 XHTML 有一些强制的要求，如下：

必须包含一个文件头声明

所有元素名必须小写

所有空元素必须关闭

所有属性名必须小写

所有属性值必须加引号

所有布尔值属性必须加上属性值

HTML语义化是什么？

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优秀的代码的同时，让浏览器的爬虫和机器很好的解析。

语义化的目的就是尽量减少使用无语义的div和span，用其他语义化的标签来代替，以方便机器和人的阅读、理解。

为什么要语义化？

在没有 CSS 的情况下，页面也能呈现出很好的内容结构、代码结构，祼奔时好看

用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用

有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重

方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备），以有意义的方式来渲染网页

便于团队开发和维护。语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化

怎样理解内容与样式分离的原则

1）网页分离

一个网页分为三个部分：Html——结构，css——表现，javascrip——行为。内容也就是html，样式也就是css。所以内容和样式的分离，就是指在网页编码的过程中，要将html和css两大部分分开。

2）如何实现

内容与样式分离的原则的实现，一个是要依靠意识，另一个是依靠经验。

举例而言，面对一个分块明显的网页设计图时：

初级的开发人员思路及制作方法：div 层层嵌套；

中级的开发人员思路及制造方法：去掉多余的 div ,进行简化；

高级的开发人员思路及制造方法：最大化的简化 html 的结构，然后用 css 进行设置，减少 html 与 css 的契合度。

正确做法是写HTML的时候先不管样式，重点放在HTML的结构和语义化上，让HTML能提现页面结构或者内容,，然后进行 css 样式设置，减少 HTML 与 CSS 契合度（即内容与样式分离） ，写JS的时候，尽量不要用JS去直接操作样式，而是通过给元素添加删除class来控制样式变化（即行为分离）。

3）分离原则的优点

浏览器加载网页页面速度变快。分离原则下，大部分页面代码写在了CSS当中，页面体积容量变得更小。

网页修改设计时，效率、省时。根据html标签内ID或class的标记，到CSS里找到相应的ID或class，可以快速替换指定位置的样式，不会破坏页面架构和其他部分的样式。

典型的应用就是网页换肤，使用相同的 html 结构，不同的 css 样式。

更好地被搜索引擎收录。基于内容与样式分离的原则，html的语义化就是首要考虑的,网页中语义化的标签代码就会更加适合搜索引擎。

css样式的分离，它可以根据不同的浏览器，达到显示效果的统一。保证网页架构不变形的前提下，放心在不同浏览器渲染显示样式。

meta标签

标签永远位于 head 元素内部；标签有两个属性name和http-equiv。

主要属性就是Keywords和descripion

name属性

1、name=”viewport”

说明：在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

用法：<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

2、name=”description”

说明：这里是网页的描述，是给搜索引擎看的，搜索引擎根据这个描述进行收录排名，一般是网页内的关键字。

用法：<meta name=”description” content=””>

3、name=”keywords”

说明：keywords用来告诉搜索引擎你网页的关键字是什么，换句话说就是你的网站主题，从一定意义上来说keywords与description其实它们的作用是一样的（突出网站主题），但他们又有所不同（在搜索结果页的展示）。

用法：<meta name=”keywords” content=””>

4、name=”author”

说明：标注网站作者是谁

用法：<meta name=”author” content=”ez”>

5、name=”copyright”

说明：标注网站的版权信息

用法：<meta name="copyright" content="ez">

6、 name=”robots”

说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。

用法：<meta name="robots" content="all">

http-equiv属性

http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

meta标签的http-equiv属性语法格式是：<meta http-equiv=”参数” content=”参数变量值”>

1、Refresh（刷新）

说明：自动刷新并转到新页面。

用法：<meta http-equiv=”Refresh” content=”2;URL”> （注意后面的引号，分别在秒数的前面和网址的后面，URL可为空）

注意：其中的2是指停留2秒钟后自动刷新到URL网址。

2、content-Type（显示字符集的设定）

说明：设定页面使用的字符集。

用法：<meta http-equiv=”content-Type” content=”text/html; charset=utf-8">

注意：在HTML5中已经简写成<meta charset=”utf-8>

3、Window-target（显示窗口的设定）

说明：强制页面在当前窗口以独立页面显示。

用法：<meta http-equiv=”Window-target” content=”_top”>

注意：用来防止别人在iframe(框架)里调用自己的页面，这也算是一个非常实用的属性。

4、Set-Cookie(cookie设定）

说明：如果网页过期，那么存盘的cookie将被删除。

用法：<meta http-equiv=”Set-Cookie” content=”cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/>

注意：必须使用GMT的时间格式。

5、Pragma(cache模式）

说明：禁止浏览器从本地计算机的缓存中访问页面内容。

用法：<meta http-equiv=”Pragma” content=”no-cache”>

注意：这样设定，访问者将无法脱机浏览。

6、Expires（期限）

说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。

用法：<meta http-equiv=Expires Content=0>

用法：<meta http-equiv=”expires” content=”Fri,12 Jan 2001 18:18:18 GMT”>

注意：必须使用GMT的时间格式，或直接设为0(数字表示多少时间后过期)。

对于如何设置mate标签才能让搜索引擎更喜欢，更利于SEO优化，我个人觉得与网站优化有关的属性主要是keywords和descripion，其它的属性对于优化基本没多大帮助，所以keywords和descripion的设置就极其重要了！而对于这两个属性的设置也是因网站而异的，也不能一概而论，keywords和descripion的设置需要作全面的分析才能得出的。

Doctype作用是什么？

声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。

严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。

混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。

如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。

1、如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式）

2、包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）

3、DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式）

4、HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）

意义：严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

<!doctype html>的作用?

<!doctype html>的作用就是让浏览器进入标准模式，使用最新的 HTML5标准来解析渲染页面；如果不写，浏览器就会进入混杂模式，而这是我们要避免的

浏览器乱码的原因是什么？如何解决

出现乱码的原因是保存文档时用的字符集跟文档中meta标签设置的字符集不符合

下面这个流程是我们写入文件到展示文件的简单描述：

我们使用编辑器编写 HTML 文件

保存编写的 HTML 文件

使用浏览器打开 HTML 文件

HTML文件在浏览器展示

我们编写 HTML 文件时，如果在meta中设定字符集为gbk

然后保存 HTML 文件时，编辑器用 utf-8 字符集保存

接着浏览器打开 HTML 文件时，它看到，这时候它就会用gbk字符集来解码你的 HTML 文档

由于utf-8和gbk对中文的编码方式不一样，那么HTML文件在浏览器中显示示出来肯定是乱码。

所以这里关于编码涉及到3个方面：

HTML 文档中的 指定的字符集

编辑器保存文档使用的字符集

浏览器解析 HTML 文档使用的字符集

这里的关键在于2和3步，如果这两步的字符集不一样，那么英文以外的文字就会出现乱码。英文不会出现乱码是因为一般主流的字符集对英文使用的编码方式都是一样的，可以互相兼容。

而第3步浏览器解析 HTML 文档使用的字符集依赖于第1步 HTML 文档中的 指定的字符

那如果 HTML 文档没指定呢？那浏览器就会用自己的方式去猜要用哪个字符集来解析 HTML 文档，这里就可能会发生错误。

所以总结下如何解决浏览器乱码：

HTML 文档一定要指定字符集为utf-8，因为这个字符集包括了世界上几乎所有的文字，没有理由不用它。

编辑器保存文档使用的字符集一定要跟 HTML 文档指定的字符集匹配，也就是 utf-8

浏览器内核

Trident内核的常见浏览器有：E6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；360安全浏览器（1.0-5.0为Trident，6.0为Trident+Webkit，7.0为Trident+Blink）猎豹极轻浏览器，360极速浏览器（7.5之前为Trident+Webkit，7.5为Trident+Blink）等。

其中部分浏览器的新版本是“双核”甚至是“多核”，其中一个内核是Trident，然后再增加一个其他内核。国内的厂商一般把其他内核叫做“高速浏览模式”，而Trident则是“兼容浏览模式”，用户可以来回切换。

Gecko内核常见的浏览器：Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位开源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）、K-Meleon

WebKit内核常见的浏览器：Apple Safari(Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器

Blink是一个由Google和Opera Software开发的浏览器排版引擎，Google计划将这个渲染引擎作为Chromium计划的一部分，并且在2013年4月的时候公布了这一消息。这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用。

列出常见的标签，并简单介绍这些标签用在什么场景

h1、h2、h3、h4、h5、h6标签用于标题

p 标签用于段落，大段文字

div标签用于给页面划分区块，让结构更清晰

a标签用于添加链接，链接到某个地址，或者页面上的某个元素。

img标签用于给页面添加一张图片

ul和li合用，给页面添加并列的内容

ol和li合用，给页面添加有步骤和编号的有序内容

dl dt dd标签，用于展示一系列标题和内容的场景

button 用于添加按钮

em 强调页面中的某些内容

strong 比em标签的强调性更强，表示很重要

iframe 用于嵌入一个页面，注意跨域操作的问题

table 用于展示表格，不要用来做布局，thead，tbody和tfoot可以省略，浏览器会自动添加border-collapse:collapse,用于合并边框。