HTML、XML、XHTML 有什么区别
HTML（Hyper Text Markup Language）：超文本标记语言或超文本链接标示语言，是目前网络上应用最
为广泛的语言，也是构成网页文档的主要语言。HTML文件是由HTML命令组成的描述性文本，HTML命令可
以说明文字、图形、动画、声音、表格、链接等。其语法结构松散，规范不是很好，是不严格的web语言。XML（eXtensible Markup Language）：可扩展标记语言（始于1998年），它与HTML一样，都是基于SGML（标准通用语言），主要用于传输和存储数据。
XHTML(eXtensible HyperText Markup Language)： HTML 与 XML（扩展标记语言）的结合物。 包含了所有与 XML 语法结合的 HTML 4.01 元素。XHTML 可以被所有的支持 XML 的设备读取，同时在其余的浏览器升级至支持 XML 之前，XHTML 使我们有能力编写出拥有良好结构的文档，这些文档可以很好地工作于所有的浏览器，并且可以向后兼容。
怎样理解 HTML 语义化
什么是HTML语义化？
HTML的很多标签都是有语义的，比如p代表段落，h1代表大标题等等，语义化的HTML就是根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
为什么要语义化？
为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构；
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
怎样理解内容与样式分离的原则
在前端中，网页分成三个层次：HTML结构层(内容)、CSS表示层(样式)、Javascript行为层(行为)。
在写HTML时应把重点放在结构和语义化上，体现页面结构或者内容。样式由css负责实现，由此减少 HTML 与 CSS 契合度，即内容与样式分离。写JS的时候，尽量不要用JS去直接操作样式，而是通过给元素添加删除class来控制样式变化。
优点：
浏览器加载网页页面速度变快。分离原则下，大部分页面代码写在了CSS当中，页面体积容量变得更小。
修改设计时更有效率。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。
更好地被搜索引擎收录。由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录。
对浏览者和浏览器更具亲和力。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。
有哪些常见的meta标签
| 标签 | 作用 |
|---|---|
| <meta charset="utf-8"> | 声明文档使用的编码方式 |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | 指定IE和Chrome使用最新版本渲染当前页面 |
| <meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" /> | 网页到期时间 |
| <meta http-equiv="refresh" content="2；URL=/"> | 网页将在设定的时间内，自动刷新并调向设定的网址 |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | 移动端展示合理，常用于设计移动端网页 |
| <meta name="keywords" content="前端 饥人谷"> | 优化搜索引擎 |
| <meta name="description" content="最有爱的前端学习社区"> | 网站内容的描述 |
| <meta name="author" content="xxx"> | 标注网页作者 |
| <meta name="generator" content="Sublime Text3"> | 网页制作软件 |
| <meta name="copyright" content="xxx"> | 标注版权信息 |
| <meta name="revisit-after" content="7 days" > | 搜索引擎爬虫重访时间 |
| <meta name="renderer" content="webkit（ie-comp）（ie-stand）"> | 默认webkit内核（IE兼容模式）（IE标准模式）双核浏览器渲染方式 |
| <meta name="robots" content="none"> | 定义搜索引擎爬虫的索引方式 |
具体参数如下：
1.none : 搜索引擎将忽略此网页，等价于noindex，nofollow。
2.noindex : 搜索引擎不索引此网页。
3.nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
4.all : 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。
5.index : 搜索引擎索引此网页。
6.follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。
文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?
<!doctype> 声明位于HTML文档的第一行，<html> 标签之前，用于告知浏览器用何种方式去解析和渲染页面。
严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
<!doctype html>则是告知浏览器以html5的方式去解析、渲染当前页面。
浏览器乱码的原因是什么？如何解决
乱码原因：
- 保存的编码格式与浏览器解析时的解码格式不匹配。
- 乱码一般是英文以外的字符才会出现。
解决方式：
如果文件保存为utf-8格式，那么一定要在html的<head>里添加<meta charset="utf-8">，这句话的意思是告诉浏览器在打开这个页面的时候不要去猜了，直接用utf-8去解码。 同理，如果文件保存为gbk格式，一定在文件里添加<meta charset="gbk">`。
常见的浏览器有哪些，什么内核
| 浏览器 | 内核 |
|---|---|
| IE | Trident内核 |
| Firefox | Gecko内核 |
| Chrome | WebKit内核 |
| Safari | WebKit内核 |
| Opera | Presto内核 |
列出常见的标签，并简单介绍这些标签用在什么场景
| 标签 | 场景 |
|---|---|
| h1-h6 | 标题 |
| p | 段落 |
| a | 链接到一个地址 |
| img | 展示图片，只闭合标签，不需要加/ |
| div | 用于给页面划分区块，让结构更清晰 |
| ul | 无序列表，表示并列的内容，其子元素是li，可以嵌套 |
| ol | 有序列表，表示带步骤或编号的并列内容，子元素是li，可以嵌套 |
| dl dt dd | 用于展示一系列“标题：内容....”的场景 |
| button | 按钮 |
| strong em span | 强调 |
| iframe | 用于嵌入一个页面，需要注意跨域操作问题 |
| table | 用于展示表格 |
