HTML、XML、XHTML 有什么区别

HTML ：超文本标记语言，语义较为松散,不是严格的web语言。
XML：可扩展的标记语言，主要用于存储和传输数据结构，标签需要被预定义。
XHTML:基于XML，语法更严格的HTML，作用与 HTML 相似。

怎样理解 HTML 语义化

写页面的时候选择合适的标签，合理的代码结构，方便阅读和优化，便于浏览器爬虫和seo的解析。

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

写内容（HTML）的时候，先不要管样式，重点放在HTML的结构和语义化上，让HTML能体现界面结构或者内容。HTML里不允许出现属性样式，尽量不要出现行为样式。写完HTML，再考加入样式。这样做的好处是方便理解，更容易后期维护。

有哪些常见的meta标签

<meta> 元素
凡是在 <head> 元素中，不能用这几个元素 (<base>, <link>, <script>, <style>, <title>) 来表示的元数据，都要用 <meta> 元素来表示。
常见 <meta> 元素
<meta charset="utf-8"> // 指定字符集
<meta name="keywords" content=""> // 向搜索引擎说明你的网页的关键词
<meta name="description" content=""> // 告诉搜索引擎你的站点的主要内容
<meta name="author" content="你的姓名"> // 告诉搜索引擎你的站点的制作的作者
<meta name="viewport" content="width=device-width, initial-scale=1.0"> // 响应式页面
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org"> //定时让网页在3秒内跳转到mozilla首页
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> // 如果安装了GCF (Google Chrome Frame)，则使用GCF来渲染页面 ("chrome=1"), 如果没有安装GCF，则使用最高版本的IE内核进行渲染 ("IE=edge")。

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

DOCTYPE，简称为DTDs，是英文Document type的缩写，中文“文档类型”,在Web设计中用来说明你用的XHTML或者HTML是什么版本。<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。
文档声明的作用?
对文档进行有效性验证.它告诉用户代理和校验器这个文档是按照什么DTD 写的。这个动作是被动的，每次页面加载时，浏览器并不会下载DTD 并检查合法性，只有当手动校验页面时才启用。
决定浏览器的呈现模式.对于实际操作，通知浏览器读取文档时用哪种解析算法。如果没有写，则浏览器则根据自身的规则对代码进行解析，可能会严重影响html 排版布局。

严格模式和混杂模式指什么?

当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：严格模式和混杂模式
在严格模式中，浏览器以其支持的最高标准呈现页面;在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。严格模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。
<!doctype html> 的作用?
为html特有的声明方式.
申明了文档的根元素是 html，浏览器将明白根据html标准进行排版布局.

参考:
https://www.biaodianfu.com/doctype.html

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

根本原因:
保存的编码格式和浏览器解析时的解码格式不匹配导致的。
如何解决:
1.在文件保存的时候要清楚是用哪种编码方式保存的。如果你的文件是保存为utf-8格式，那么一定要在html 的 <head>里添加<meta charset="utf-8">.
2.如果阅读网页出现乱码,尝试修改浏览器的解码方式.

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

浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS 引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有 10 多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。

Trident

通常所说的IE内核.是第一个开放的内核,国内许多浏览器都采用IE内核.但由于IE的垄断地位,导致更新缓慢,引起两个后果:1.曾经与w3c标准脱节,2.大量bug没有得到及时解决,导致一段时间里大量用户转向其他浏览器.
win10发布后,Ie新浏览器为Edge,采用的内核为EdgeHTML.

Gecko

firefox浏览器采用的内核.
特点是代码完全公开,任何程序员都可以为其编写代码,所以拓展性很高,有大量插件可以使用.
另外也是一个跨平台内核,Windows、 BSD、Linux 和 Mac OS X 中都可以使用.

Webkit

safari和早期chrome使用的内核.
WebKit 前身是 KDE 小组的 KHTML 引擎，可以说 WebKit 是 KHTML 的一个开源的分支。当年苹果在比较了 Gecko 和 KHTML 后，选择了后者来做引擎开发，是因为 KHTML 拥有清晰的源码结构和极快的渲染速度。
国内许多浏览器,如搜狗,360,qq等,大多采用ie和webkit双内核

Bink/Chromium

2013年开始chrome采用的新内核.实质也是webkit分支.
国内的的chrome系浏览器也纷纷转到Blink旗下.

总结:

常见的主流浏览器有:
IE: Ie内核
safari:Webkit内核
chrome:Blink内核
firefox:Gecko内核
opera:Blink内核
国内大部分浏览器:Ie和Blink双内核

参考:

http://web.jobbole.com/84826/

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

a、href（配url）、target(打开方式)、ttitle（鼠标停留显示）：链接
<a href="http://jirengu.com" target= "_blank" title="饥人谷">饥人谷</a>

<a href="www.jirengu.com" target= "_blank" title="饥人谷">饥人谷</a>

p、course、id：点击跳转
<a href="#course" title="点击去第一章">自习</a>
<p>1</p><p>1</p><p id="course">第一章</p>

<a href="#course" title="点击去第一章">自习</a>
<p>1</p>
<p>1</p>
<p id="course">第一章</p>

img（自闭合标签）、src、alt(图片不正常-_-貌似markdown不支持这个，alt三个作用)：图片

![](http://upload-images.jianshu.io/upload_images/4642623-c5493efa2e7b76c5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

div(结构化页面)、header 、content、 footer(页脚):分区用

<div id="header">12345</div>
<div id="content">12345</div>
<div id=" footerr">12345</div>

ul(无序列表、直接子元素li、并列、可嵌套)、li、nav、class:并列嵌套、分级菜单、定义class
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">导航</a></li>
<li><a href="#">关于</a>
<ul><li><a href="#">关于a</a></li>
<li><a href="#">关于b</a></li></ul></li></ul>

<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">导航</a></li>
<li><a href="#">关于</a>
<ul>
<li><a href="#">关于a</a></li>
<li><a href="#">关于b</a></li>
</ul></li></ul>

ol、li:有序列表、按步骤走
<ol><li>打开手机
</li><li>打开微信
</li><li>发朋友圈
</li></ol>

<ol>
<li>打开手机</li>
<li>打开微信</li>
<li>发朋友圈</li>
</ol>

dl、dt、dd：**展示标题内容类场景
<dl><dt>商品名称</dt>
<dd>爽肤水</dd>
<dt>特点</dt>
<dd>无添加剂</dd></dl>

<dl>
<dt>商品名称</dt>
<dd>爽肤水</dd>
<dt>特点</dt>
<dd>无添加剂</dd>
</dl>~~~
* button、strong/em/span:**按钮和强调程度**
* iframe:**嵌入网页和跨域操作进入嵌入页面**

* table/tr/th:表格

html知识点