一、HTML、XML、XHTML 有什么区别

（一）定义：

• html即是超文本标记语言，是最早写网页的语言，但是由于时间早，规范不是很好，大小写混写且编码不规范；
• xhtml即是升级版的html，对html进行了规范，编码更加严谨纯洁，也是一种过渡语言，html向xml过渡的语言；
• xml即是可扩展标记语言，是一种跨平台语言，编码更自由，可以自由创建标签。
• 网页编码从html>>xhtml>>xml这个过程发展。

（二）区别：
1. XML 与 HTML 的主要差异：

• XML 不是 HTML 的替代。
• XML 和 HTML 为不同的目的而设计：
• XML 被设计为传输和存储数据，其焦点是数据的内容。
• HTML 被设计用来显示数据，其焦点是数据的外观。
• HTML 旨在显示信息，而 XML 旨在传输信息。
• html最终会发展到xml，xhtml是html想xml发展的一个过渡，xhtml的特性也适合xml；

2.html：

• 对大小写不敏感；
• 标签不必成对出现；

3.xhtml：

• 对大小写敏感，必须是小写的；
• 标签必须成对出现，有开始标签就必须有结束标签；
• 属性值必须在引号之内；
• 不支持属性最小化：
  eg：

正确：<input checked='checked'>

  错误：<input checked>

• name属性不赞成使用，以后会被淘汰；
• 空元素也要结束标签：如：
  ,

  ---

  (水平分割线)

二、怎样理解 HTML 语义化（貌似是一个面试题）

1、什么是HTML语义化？
<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

这里有一个很好的解释，让我们能够清楚的知道语义化扮演了什么么样的角色：

语义化的HTML结构首先要强调HTML结构
　　HTML结构是页面的骨架，一个页面就好像一幢房子，HTML结构就是钢精钢筋混泥土的墙，一幢房子如果没有钢精钢筋混泥土的墙那就是一堆费砖头，不能住人，不能办公。css是装饰材料，是原木地板，是大理石，是油漆，是用来装饰房子的，CSS的强大就不用多说了，css如果没有html结构那就是一堆木板，一同油漆，没有了实际使用价值。

2、为什么要语义化？

• 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
• 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
• 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
• 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
• 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

3、写HTML代码时应注意什么？

• 尽可能少的使用无语义的标签div和span；
• 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
• 不要使用纯样式标签，如：b、font、u等，改用css设置。
• 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
• 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
• 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
• 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

4、HTML5新增了哪些语义标签
在HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。（即使我们用css样式的id和class形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没“意义”的标签因为因为html5的出现消失了，这就是我们平时说的“语义”。
如下图的一个布局，没有使用到div：

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

在 Web 开发中，所谓内容与样式分离，就是让内容的归 HTML, 样式归 CSS, 不要混着用。
这样做的意义即优缺点

CSS与HTML分离的优点:

• 使页面载入得更快
  由于将大部分页面代码写在了css当中，使得页面体积容量变得更小。相对于表格嵌套的方式的逐层加载速度快。
• 修改设计时更有效率
  在修改页面的时候更加容易省时。根据区域内容标记，到css里找到相应的id，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。而表格布局则更不省事。
• 保持视觉的一致性
  DIV+CSS最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。
• 更好地被搜索引擎收录
  由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中代码更加适合搜索引擎。
• 对浏览者和浏览器更具亲和力
  对浏览者和浏览器更具亲和力，由于CSS富含丰富的样式，使页面更加灵活性，更加的美观，它可以根据不同的浏览器，而达到显示效果的统一和不变形。

CSS与HTML分离的缺点:

• CSS网站制作的设计元素通常放在1个外部文件中，或几个文件，有可能相当复杂，甚至比较庞大。
• 虽然说DIV+CSS解决了大部分浏览器兼容问题，但是也有在部分浏览器中使用出现异常，比如火狐浏览器，在IE中显示正常的页面，到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题，但是可以说在目前来看，DIV+CSS还没有实现所有浏览器的统一兼容。
• DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。

四、有哪些常见的meta标签

1、什么是meta标签：
通常所说的META标签，是在HTML网页源代码中一个重要的html标签。META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。
具体的参考<meta>标签

2.常见meta标签及作用：

• 声明文档使用的字符编码
  ' <mata charset="utf-8"> '

• 页面关键词
  ' <meta name="keywords" content="your tags" /> '
• 页面描述
  ' <meta name="description" content="150 words" /> '
• 搜索引擎索引方式
  '<meta name="robots" content="index,follow" />

• 页面重定向和刷新
  <meta http-equiv="refresh" content="0;url=" />
• 其他
  <meta name="author" content="author name" />
  <meta name="google" content="index,follow" />
  <meta name="googlebot" content="index,follow" />
  <meta name="verify" content="index,follow" />
• 移动设备
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
  
• WebApp全屏模式
  <meta name="apple-mobile-web-app-capable" content="yes" />
• 隐藏状态栏/设置状态栏颜色
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
• 添加到主屏后的标题
  <meta name="apple-mobile-web-app-title" content="标题">
• 忽略数字自动识别为电话号码
  <meta content="telephone=no" name="format-detection" />
• 忽略识别邮箱
  <meta content="email=no" name="format-detection" />
• 优先使用 IE 最新版本和 Chrome
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  
  <meta http-equiv="X-UA-Compatible" content="IE=6" >
  <meta http-equiv="X-UA-Compatible" content="IE=7" >
  <meta http-equiv="X-UA-Compatible" content="IE=8" >
• 禁止浏览器从本地计算机的缓存中访问页面内容
  <meta http-equiv="Pragma" content="no-cache">

五、文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?

1.Doctype作用是什么？
<!DOCTYPE>声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。
2.严格模式与混杂模式如何区分？它们有何意义？
严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。具体如何区分
3.<!DOCTYPE html>作用：
声明文档的解析类型，避免浏览器的怪异模式。

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

1、比如网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码。反之网页是编码utf-8，内容是gbk也会出现乱码。
2、html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码。
3、浏览器不能自动检测网页编码，造成网页乱码。

总结：

1. 乱码产生的根本原因是你保存的编码格式和浏览器解析时的解码格式不匹配导致的。
2. 乱码一般是英文以外的字符才会出现。(来源)

解决方法：

• 设置<meta charset>标签声明文档使用的字符编码
• 设置正确的字符编码
• 设置浏览器显示正确的编码
  具体方法

七、常见的浏览器有哪些，什么内核

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