关于HTML、XML、XHTML的面试常见题目
问题一：HTML、XML、XHTML 有什么区别？
-
HTML：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。是一种最早发布的语言，因为最早发布因此很多地方不够规范。
-
XHTML：可扩展超文本标记语言（英语：eXtensible HyperText Markup Language，XHTML），是一种标记语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。基于HTML的基础上进行了扩展和规范，让XHTML更加严格，主要目的是促进HTML向XML过渡。
-
XML：可扩展标记语言（英语：Extensible Markup Language，简称：XML），是一种标记语言。XML更加的自由，同时XML现在逐渐变为一种信息的承载者，HTML主要用于信息的展示和表现而XML更倾向与携带和传递数据信息。
HTML、XHTML、XML的发展
HTML的弊端：
- 编码不规范，结构混乱臃肿，需要智能的终端才能很好的显示；
- 表现和结构混乱，不利于开发和维护；
- 不能使用于更多的网络设备中，比如手机；
为了让HTML逐渐过渡到XML阶段，w3c又定制了XHTML标准。
而XML的弊端也不少：
- 在数据中寻找信息非常难
- 大数据量效率低
- 使用XML传输数据时没有数据库系统那样的信息管理功能
因此XML因为自身严苛限制等因素逐渐被HTML5取代。
问题二：怎样理解 HTML 语义化？
HTML语义化是一种编写方式，用正确的标签做正确的事。
1)HTML语义化的优点：
- HTML语义化能提高网页语义的清晰度，方便爬虫工具识别网站内容，爬虫工具在识别网站内容时不会受到网站样式的影响，只会关注网站内容本身
- HTML的语义化能够提高团队对网站的维护和改进效率
- 改善网页的可访问性，遇到视觉障碍用户时屏幕阅读器能够更好的系别网页内容
问题三：怎样理解内容与样式分离的原则？
1）如何将内容与样式分离：
- HTML-结构、CSS-样式 、javascript-执行，用合理的语言去解决合理的问题。
2）如何实现内容与样式分离？
- 在使用HTML时应该关注页面的结构和信息的呈现，在使用CSS时应该注重样式本身，同时减少HTML和CSS的相同化，保证内容与样式分离。在使用javascript时减少对元素的直接改变，即行为分离。
问题四：有哪些常见的meta标签？
编码申明：
<meta charset='utf-8' />：告诉浏览器用什么编码方式
<meta>标签有两个属性name和http-equiv
<meta>标签有两个属性name和http-equiv。下面对这两个属性的常见值进行列举：
http-equiv属性：<meta http-equiv='参数' content='参数变量值'>
- <meta http-equiv=”Set-Cookie” content=”cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/”>:如果网页过期，那么存盘的cookie将被删除。必须使用GMT的时间格式。
- <meta http-equiv='expires' content='时间' >：用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
- <meta http-equiv=”Refresh” content=”5;URL”>：告诉浏览器在【数字】秒后跳转到【一个网址】
- <meta http-equiv=”content-Type” content=”text/html; charset=utf-8″>：设定页面使用的字符集。
- <meta charset=”utf-8″>：在HTML5中设定字符集的简写写法。
- <meta http-equiv=”Pragma” content=”no-cache”>：禁止浏览器从本地计算机的缓存中访问页面内容。访问者将无法脱机浏览。
- <meta http-equiv=”Window-target” content=”_top”>：用来防止别人在iframe(框架)里调用自己的页面，这也算是一个非常实用的属性。
- <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'> :强制浏览器按照特定的版本标准进行渲染。但不支持IE7及以下版本。如果是ie浏览器就用最新的ie渲染，如果是双核浏览器就用chrome内核。
name属性： <meta name='参数' content='具体的参数值'>
- <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>：在移动设备浏览器上，禁用缩放（zooming）功能，用户只能滚动屏幕。
- <meta name=”description” content=””>：告诉搜索引擎，当前页面的主要内容是xxx。
- <meta name=”keywords” content=””>：告诉搜索引擎，当前页面的关键字。
- <meta name=”author” content=””>：告诉搜索引擎，标注网站作者是谁。
- <meta name=”copyright” content=””>：标注网站的版权信息。
问题五：文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?
- <！doctype html>起到声明作用，告诉浏览器使用什么编码方式，这就是严格模式；如果没有写这条代码浏览器就会随机选取一种编码模式，这就是混杂模式
- doctype是一种通用标记语言的文档类型声明。告诉浏览器用什么类型的文档类型定义(DTD)，最早源于XML用来规定文档中可以出现什么元素以及元素的组成和规则。
问题六：浏览器乱码的原因是什么？如何解决
1)通用的编码方式：
ASCII
全称美国标准信息交换代码（American Standard Code for Information Interchange）的缩写, 针对英语设计。
ISOLatin-1
ASCII字符集不包括德、法语中的特殊拉丁字符，因此欧洲人发明了ISO 8859-1Latin 1，简称为ISOLatin-1。它对ASCII做了个扩充，涵盖拉丁字母表中特殊语言字符。
UNICODE
随着计算机发展,需要把地球上绝大多数语言用一种编码方式表示,发明了UNICODE编码，只用2个字节(16位)就可以编码地球上几乎所有地区的文字。简单理解就是，UNICODE是理论上的编码方式，相当于给世界上每个文字打了个编号，编号具体是以多种实现方式在计算机里面存储，比如utf-8和gbk。
UTF-8
utf-8（8-bit Unicode Transformation Format）是一种针对Unicode的可变长度字符编码，又称万国码。可用于显示中文简体繁体及其它语言（如英文，日文，韩文）。
GBK
中国制定的一套汉字编码规则，用2个字节来表示一个汉字，总共可以覆盖2万多个文字。
2）出现乱码的原因
在使用编译器对HTML进行编译时，编译完毕保存后未进行编码方式声明的文件会使用编译器默认的编码方式进行储存，如果编译器使用UTF-8编码方式储存后在chrome使用ISO-8859的方式打开就会出现乱码。
3）如何解决？
在进行保存时，在<head>中添加<meta charset="utf-8">即使用UTF-8编码方式，或者在浏览器中进行编码声明选择文件使用的编码方式解析。
问题七：常见的浏览器有哪些，是什么内核？
- IE浏览器内核：Trident
Trident内核程序在1997年的IE4中首次被采用，简称IE内核。它是微软在Mosaic代码的基础之上修改而来的，并沿用到目前的IE8。Trident实际上是一款开放的内核，其接口内核设计的相当成熟,有许多采用IE内核而非IE的浏览器涌现。 - Netscape6浏览器内核:Gecko
Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。基于开源内核的特性，备受青睐，出现很多以Gecko为内核的浏览器，因此有挺大的市场占有量。 - Opera浏览器内核：Presto
Presto内核在2003年的Opera7中首次被使用，该款引擎的特点就是渲染速度的优化达到了极致，也是目前公认网页浏览速度最快的浏览器内核，但对网页的兼容性差。 - 苹果Safari浏览器内核：Webkit
Webkit是苹果公司自己的内核，也是使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来。且Webkit开放源代码。 - 傲游浏览器3、QQ浏览器和搜狗高速浏览器都是使用Webkit与Trident双核心
Webkit核心让网页打开速度更快，Trident核心则带来更好的兼容性支持。使用高速（webkit）和兼容（Trident）双浏览模式，保证良好兼容性的同时极大提升网页浏览速度。当采用高速模式访问网页出现问题时，可直接切换内核，使用兼容性更佳的兼容模式正常浏览网页。
问题六：列出常见的标签，并简单介绍这些标签用在什么场景？
| 标签 | 使用场景 |
|---|---|
| <html>...</html> | 将所有HTML内容都包含在这个标签内 |
| <head>...</head> | 用于定义文档的头部，它是所有头部元素的容器。 |
| <title>...</title> | 文档的标题 |
| <meta>...</meta> | 提供有关页面的元信息 |
| <body>...</body> | 文档的内容 |
| <h 1 >...< /h1> | 一级标题，h1h6分别对应六级标题，从16标题一次减小 |
| < p >...</p > | 整段文字 |
| < a>...< /a> | 定义锚，即在页面插入链接 |
| < img> | 图片 |
| < ul>...</ ul> | 无序列表 |
| < ol>...< /ol> | 有序列表 |
| < li>...< /li> | 列表项 |
| < br> | 换行 |
| <div>...</div> | 定义文档中的节，默认表现为块元素 |
| <span>...</span> | 定义定义文档中的节，默认表现为行内元素 |
| < em>...< /em> | 定义强调文本 |
| < i>...< /i> | 定义斜体字 |
| < strong>...< /strong> | 定义强调文本 |
| < q>...< /q> | 定义短引用 |
