HTML5相关

1.HTML、XML、XHTML有什么区别？

• HTML，超文本标记语言（HyperText Markup Language），是语法较为松散的、不严格的Web语言。
• XML，可扩展标记语言（Extensible Markup Language），主要用于存储数据和结构，一种类似HTML的标记语言，标签多为自定义，多用于传输/存储数据，而不是显示数据。
• XHTML 可扩展的超文本标记语言（Extensible Hyper Text Markup Language）,语法更严格，更纯净的HTML版本。

我们来详细了解一下它们具体区别在哪。

HTML

• HTML 是用来描述和定义网页内容的标记语言，是构成网页的最基本的东西。
• 所谓超文本，就是说它除了能标记文本，还能标记其他的内容，比如：图片，链接，音频，视频等。
• 它的作用就是一个规范，告诉所有浏览器都统一标准，比如我给这段文字加个

  标签，那就是告诉浏览器：这是一个段落。我加个 标签：这是一个链接。

• 浏览器看到后，就会正确解析，产生相应的行为。

XML

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

XHTML

• XHTML 就是以 XML 的语法形式来写 HTML.
• XHTML 为什么会出现：HTML 是一种语法形式比较松散的标记语言，语法要求也不严格。比如大小可以混用，属性值单引号还是双引号也混用，标签也可以不闭合。W3C 认为这样不够严谨，所以就把 XML 的语法形式加到了 HTML 上，就出现了 XHTML，所以可以把 XHTML 理解为 HTML 的严格语法形式，除此之外，其它方面基本一样。
  但是 XHTML 有一些强制的要求，例如：
  1.必须包含一个文件头声明
  2.所有元素名必须小写
  3.所有空元素必须关闭
  4.所有属性名必须小写
  5.所有属性值必须加引号
  6.所有布尔值属性必须加上属性值
  ……

2.怎样理解 HTML 语义化

HTML 语义化是在 HTML5 里加入的一个概念。在之前的HTML版本中，文档的结构不够清晰、明确。例如，为了要表示“标题”，“正文”，“页脚”，之前一般都使用

元素。但是，严格来说，

元素不是一个能把文档结构表达得很清楚的元素,当你使用了过多的

元素的文章，阅读是不仔细研究，是很难看出文档结构的。所以这时候语义化就显得十分重要了。

我们来看一下H5中新增的 结构元素 与对应的旧版本元素

新增元素	表示	旧版本
	内容区块
	与上下文不相关的独立内容
	内容之外的、与 相关的辅助信息
	一个内容区或整个页面的标题
	脚注
	导航链接部分
	独立的流内容
	主要内容

那这样的改动有什么好处呢？

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

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

• HTML（内容），CSS（样式），JS（行为）
• 正确做法是写HTML的时候先不管样式，重点放在HTML的结构和语义化上，让HTML能提现页面结构或者内容,，然后进行 css 样式设置，减少 HTML 与 CSS 契合度（即内容与样式分离） ，写JS的时候，尽量不要用JS去直接操作样式，而是通过-
• 给元素添加删除class来控制样式变化（即行为分离）。
• 为什么要这样做，优势在哪里
   1.浏览器加载网页页面速度变快。分离原则下，大部分页面代码写在了CSS当中，页面体积容量变得更小。
   2.网页修改设计时，效率、省时。根据html标签内ID或class的标记，到CSS里找到相应的ID或class，可以快速替换指定位置的样式，不会破坏页面架构和其他部分的样式。典型的应用就是网页换肤，使用相同的 html 结构，不同的 css 样式。
   3.更好地被搜索引擎收录。基于内容与样式分离的原则，网页中语义化的标签代码就会更加适合搜索引擎。
   4.css样式的分离，它可以根据不同的浏览器，达到显示效果的统一。保证网页架构不变形的前提下，放心在不同浏览器渲染显示样式。

简而言之，HTML就是骨骼，而CSS是皮肉，JS则是大脑。这样以来分工更为 明确，效率更高，更新维护更加方便。

4.有哪些常见的meta标签

编码	含义
	声明文件的编码
	优先使用IE的最新版本和Chrome
	浏览器的内核控制
	页面的关键词
	页面的描述

5.文档声明的作用?严格模式和混杂模式指什么? 的作用?

• 标签用来声明文档对象模型，用来告诉浏览器应该使用哪种方式来解析渲染页面。严格模式就是使用标签来显式声明该用哪种方式来渲染页面，混杂模式即不加标签，允许浏览器使用自己的方式来渲染页面。
  即就是声明使用HTML5来解析渲染页面。

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

• 浏览器出现乱码一般是由于在制作页面时使用非英文字符时，保存的编码格式与浏览器解析时的解码格式不匹配。
• 为了解决这个问题，就要在页面保存时就在HTML的里添加来声明编码格式，来告诉浏览器应该用什么解码格式来解码，例如使用UTF-8来编码的页面，添加来告诉浏览器使用UTF-8格式来解码，就不会出现乱码了。

7.常见的浏览器有哪些，常见的内核有哪些？

• 常见浏览器有IE、Google Chrome、Safari、opera、Firefox等，还有世界之窗、傲游、360、搜狗、QQ、猎豹浏览器等。
• Trident(IE内核)：IE浏览器，很多国内浏览器，以及很多双核浏览器的其中“一核”都是Trident。
• Gecko：FireFox浏览器等。
• Webkit：Chrome浏览器，Safari浏览器等。
• Chromium/Blink：Chromium fork 自开源引擎 WebKit，却把 WebKit 的代码梳理得可读性提高很多，Chrome浏览器就使用Chromium内核，搜狗、360、QQ浏览器等等双核浏览器的一核都是Chromium。2013年谷歌宣布 Chromium 项目中研发 Blink 渲染引擎，内置于 Chrome 浏览器之中。

8.常见的HTML标签有哪些，并简单介绍这些标签用在什么场景

标签	使用场景
...	将所有HTML内容都包含在这个标签内
...	用于定义文档的头部，它是所有头部元素的容器。
	文档的标题
...	提供有关页面的元信息
...	文档的内容
...	一级标题，h1h6分别对应六级标题，从16标题一次减小
...	整段文字
...	定义锚，即在页面插入链接
	图片
...	无序列表
...	有序列表
...	列表项
	换行
...	定义文档中的节，默认表现为块元素
...	定义定义文档中的节，默认表现为行内元素
...	定义强调文本
...	定义斜体字
...	定义强调文本