<h1>提问</h1>
<ol>
<li>HTML、XML、XHTML 有什么区别</li>
<li>怎样理解 HTML 语义化</li>
<li>怎样理解内容与样式分离的原则</li>
<li>有哪些常见的meta标签</li>
<li>文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?</li>
<li>浏览器乱码的原因是什么？如何解决</li>
<li>常见的浏览器有哪些，什么内核</li>
<li>列出常见的标签，并简单介绍这些标签用在什么场景</li>
</ol>
<h1>回答</h1>
<ol>
<li>
HTML，超文本标记语言，是语法较为松散的、不严格的Web语言；
XML，可扩展标记语言，主要用于存储数据和结构；
XHTML，可扩展超文本标记语言，基于XML，作用与HTML类似，但语法更严格。
</li>
<li>
<p>语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫（我就是从自学python爬网页的过程中感觉自己不咋了解网页是怎么回事，因此学习了前端）和机器很好的解析。</p>
<p>有利于SEO，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重。
语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构
方便其他设备的解析
便于团队开发和维护</p>
</li>
<li> 一个符合理想状态下的网页代码，应该分成三部分：.html文件，.css文件，.js文件。html标签只负责承担内容，样式交给css，javascript负责行为。将样式与内容分离这样的好处是在修改样式的基础上不修改其内容，可以提高搜索引擎抓取关键字的效率</li>
<li><meta charset=”utf-8”>：使用utf-8的格式解析
<meta name=”viewport” content=”width=device-width,initial-scale=1”>：在不同的设别、不同分辨率上呈现1:1的显示效果。
<meta name="keywords" content="关键字" >：告诉搜索引擎当前网页的关键词
<meta name="description" content="关键内容">：告诉搜索引擎这个页面的关键内容
<meta name="Robots" content="all">:告诉搜索机器人那些页面需要索引。Content的参数有all,none,index,noindex,follow,nofollow。默认是all。
<meta name="Author" content="张召忠，zzz@weibo.com">:标注网页的作者或制作组</li>
<li><!DOCTYPE html>用于告诉浏览器用什么方式对该文件进行渲染与加载，若是在文件开头不添加，浏览器则以标准模式进行加载，可能会产生预想不到的页面效果。因此一个标准的HTML文档必须包含相应的文档类型声明，它位于文档的最开始处。
严格模式和混杂模式指什么?
这篇内容是在了解了<!DOCTYPE>之后,需要知道的。
Doctype可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式
在标准模式中，浏览器以其支持的最高标准呈现页面，；
在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。
模式触发
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。
如果XHTML、HTML 4.01文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。
包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。
DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
html5既然没有DTD，也就没有严格模式与宽松模式的区别，html5有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。
面试时问道两种模式的定义以及区分时？
简化上面第一部分的内容。当然问道触发时，就答第二部分。
说明
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML，所以不需要引用 DTD。
SGML（标准通用标记语言）
是一种定义电子文档结构和描述其内容的国际标准语言。
XML（可扩展标记语言）
是 SGML 的一个子集，XML 于 1998 年 2 月 10 日成为 W3C 的推荐标准。 XML 是各种应用程序之间进行数据传输的最常用的工具。
html 超文本标记语言
标准通用标记语言下的一个应用，HTML 最初也试图成为 SGML 的一个子集，但 HTML 4 以前并不严格符合 SGML 的标准。后来出现了 HTML4，XHTML （符合 XML 标准的 HTML），这两者都符合 SGML 的要求。
html5
“<!DOCTYPE>声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器， 用什么 文档类型规范来解析这个文档”</li>
<li>浏览器乱码产生的原因是html文档的编码和浏览器编码方式不同，导致浏览器解析出来的是乱码。
解决方法:首先要知道html文件的编码方式，然后在html文件中header部位中的设置<meta charset=“”>,让浏览器用一致的编码方式打开文件。</li>
<li>
一、Trident内核代表产品Internet Explorer，又称其为IE内核。
Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。
二、Gecko内核代表作品Mozilla
FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。
三、WebKit内核代表作品Safari、Chromewebkit
是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。
四、Presto内核代表作品OperaPresto
是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。
</li>
<li>
(1)dl dt dd ...：用于展示一系列标题内容的场景
(2)ul li和ol li： ul li 是无序列表, ol li是有序列表
(3)button：按钮标签
(4)strong,em,span
em：强调
strong：很重要，强调性更强（比em）
span：修饰一段文字，可以对一个元素内的文字的一部分加上 不同的颜色等css样式
(5)h1,h2...h6：不同级别的标签
(6)p：段落，表示一段文字
(7)a：表示链接，链接到一个地址
跳转到一个网页地址：href是地址，target打开方式，title是光标移动到a标签上后的提示文字
<a href="http://www.jirengu.com/app/watch/1340/1?vsum=12"
target="_blank" title="It's title!">饥人谷视频</a>
焦点跳到指定id的标签：'#' 后面就是id
<a href="#id">点这里焦点将跳转到指定Id的标签</a>
(8)img：展示一张图片
src：图片地址
alt：图片加载失败后提示的文字
(9)div：用于给页面划分区块，让结构更清晰
(10)iframe：用于嵌入一个页面</li>
</ol>
你妈的
