Task 4
HTML、XML、XHTML 有什么区别
谈到区别，即差异性，就要首先想到他们分别是什么（简单了解概括）？再通过对比得出结论。
XML（Extensive Markup Language）
MDN——XML介绍
W3C——XML
Kay Whatley——XML 新手入门基础知识
wiki——XML
XML是一种类似于HTML的标记语言。它代表可扩展标记语言并且是一个W3C推荐的规范作为一种通用标记语言。这意味着，与其他标记语言不同，XML未预定义，因此你必须定义自己的标记。该语言的主要目的是跨不同系统共享数据，如互联网。
有许多基于XML的语言;一些示例是 XHTML, MathML, SVG, XUL, XBL, RSS, 和 RDF。你也可以创建自己的。
为什么HTML会没有用
HTML标记是一种相对固定的语言，同时它也是以呈现数据为唯一目的，与之相反，XML是可以由用户自定义的，同时它是以存储数据为目的的。
HTML 可以归结为以下三个方面：intelligence（智能），maintenance（可维护性），adaptation（适应性）。XML 也有类似的特性：intelligence, adaptation, maintenance, 和simplicity（简洁）。
XML 不同于HTML，HTML 是显示标记，而XML 是通用标记。这两点可以在XSLT中融合在一起。
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>
上面的这条便签具有自我描述性。它拥有标题以及留言，同时包含了发送者和接受者的信息。
但是，这个 XML 文档仍然没有做任何事情。它仅仅是包装在 XML 标签中的纯粹的信息。我们需要编写软件或者程序，才能传送、接收和显示出这个文档。
XML 与 HTML 的主要差异：
- XML 不是 HTML 的替代。
- XML 和 HTML 为不同的目的而设计：
- XML 被设计为传输和存储数据，其焦点是数据的内容。
- HTML 被设计用来显示数据，其焦点是数据的外观。
- HTML 旨在显示信息，而 XML 旨在传输信息。
补充：XML 仅仅是纯文本
XML 没什么特别的。它仅仅是纯文本而已。有能力处理纯文本的软件都可以处理 XML。
不过，能够读懂 XML 的应用程序可以有针对性地处理 XML 的标签。标签的功能性意义依赖于应用程序的特性。
XHTML（Extensible HyperText Markup Language）
可以说是，更严格的HTML，是HTML的规范版。
HTML4，HTML5，XHTML 之间有什么区别？
XHTML 与 HTML 的区别是什么？
W3C——XHTML
W3C截图
W3C截图
我们在使用HTML时，知道HTML的代码规范不是那么的严格，比如<b><i></b></i>，<p>XXXXX，<img >，<BODY>......等等，在HTML上一些无伤大雅的习惯（不好的习惯），放到XHTML上，直接让你解析不了，而无法显示Page，很是严格。
怎样理解 HTML 语义化
什么是HTML语义化
首先、语义化，故名思意，就是你写的HTml结构，是用相对应的有一定语义的英文字母（标签）表示的，标记的，因为HTML本身就是标记语言。不仅对自己来说，容易阅读，书写。别人看你的代码和结构也容易理解，甚至对一些不是做网页开发的人来说，也容易阅读。那么，我们以后再开发的过程中，一定要注意了，尽量使用官方的有语义的标签，不要再使用一堆无意义的标签去堆你的结构。怎么知道，自己的页面结构是否语义化，那就要看你的HTML结构，在去掉CSS样式表之后，是否，依然能很好的呈现内容的结构，代码结构。也就是说，脱掉css的外衣，依然头是头，脚是脚。赤裸裸的完整的一篇文档。这也就是，语义化之后文档的效果。
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
简而言之，使用的标签与文章所对应的结构（语义）是互相匹配的，哪怕在没有CSS的情况下，他依然能呈现很好的结构，就像我们写博客，有标题，段落，有总分总，分总分等等，这就是结构和语义。
HTML语义化有什么用
写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关联起来。
参考文章：
HTML 5的革新——语义化标签(一)
语义化的HTML结构到底有什么好处？
怎样理解内容与样式分离的原则?
这就要提到一个老生常谈的概念：关注点分离
从阮老师那偷的图
关注点分离是日常生活和生产中广泛使用的解决复杂问题的一种系统思维方法。大体思路是,先将复杂问题做合理的分解,再分别仔细研究问题的不同侧面(关注点),最后综合各方面的结果,合成整体的解决方案。在概念上分割整体以使实体个体化的观点可以追溯到柏拉图。柏拉图把探究自然比作在关节处切割自然,窍门在于要找到关节,不要像生疏的屠夫那样把关节切得粉碎。庄子在庖丁解牛寓言中也阐释了类似的真知灼见。 作为最重要的计算思维原则之一,关注点分离是计算科学和软件工程在长期实践中确立的一项方法论原则。此原则在业界更多的时候以分而治之 的面目出现,即将整体看成为部分的组合体并对各部分分别加以处理。模块化是其中最有代表性的具体设计原则之一。—— for 百度
我们知道的前端三剑客：HTML、CSS、Javascript，分管不同的Web网页、程序功能实现，即对应的是结构、样式、行为。如果在开发时，不注意模块化，代码杂揉，到后期维护，改BUG，甚至重构时都会出现很多意想不到的问题。
关注点分离在我看来，和HTML语义化的思想是呈拓展形式的，都是要求结构清晰，语义明确，模块化等思想......甚至到以后的JS OOP（面向对象程序设计）都会有这样一种思想存在。
庖丁解牛，化整为零，这是一个很好的解决问题的思想习惯。
有哪些常见的meta标签
标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 —— W3School
<meta charset="UTF-8">
<meta name="author" />
<meta content="blue"/>
<meta scheme=""/>
<meta http-equiv="content-type"/>
文档声明的作用?严格模式和混杂模式指什么?`<!doctype html>的作用?
DOCTYPE是docunment type（文档定义）的简写，用来说明web设计中所用的html或xhtml的类型，指出浏览器或者其他阅读程序按照什么样的规则（W3C所发布的一个文档类型定义即DTD）集去解释文档中的标记.
由于历史的原因，浏览器对页面的渲染方式是不一样的。在W3C标准出来之前，浏览器对页面的渲染没有同一的标准，产生了差异，quirks mod（混杂模式或者兼容模式），但在W3C标准出台之后，浏览器对页面的渲染有了同一的标准即（严格模式或标准模式）。但是为了保证以前就得页面仍然正常显示，有的浏览器就保存了这两种渲染模式（标准兼容模式）。那么究竟采用哪一种方式进行渲染，就要看DOCTYPE生命中的DTD.
- 浏览器要使老旧的网页正常工作，但这部分网页是没有doctype声明的，所以浏览器对老旧的没有doctype声明的网页采用quirks mode解析。
- 对于那些浏览器不能识别的doctype声明，浏览器采用strict mode解析
- 在doctype声明中，没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析。
- 在现有有doctype声明的网页，绝大多数是采用strict mode进行解析渲染的。
总之，加上doctype声明，让浏览器使用标准模式
注意：为了获得正确的doctype声明，关键就是让DTD与文档所遵循的标准对应。例如，假定页面文档遵循的是XHTML 1.0 Strict标准，文档的doctype声明就应该引用相应的DTD。另一方面，如果doctype声明指定的是XHTML DTD，但文档包含的是旧式风格的HTML标记，就是不恰当的；类似地，如果doctype声明指定的是HTML DTD，但文档包含的是XHTML 1.0 Strict标记，同样是不恰当的。
总之，doctype使浏览器按照dtd指定的渲染方式对页面进行渲染
浏览器乱码的原因是什么？如何解决?
造成html网页乱码原因主要是html源代码内中文字内容与html编码不同造成。但无论是哪种情况造成乱码在网页开始时候都需要设置网页编码。
- 比如网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码。反之网页是编码utf-8，内容是gbk也会出现乱码。
- html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码。
- 浏览器不能自动检测网页编码，造成网页乱码。
浏览器造成乱码
这个可能是你网页没有设置meta charset编码造成。导致浏览器不能识别你网页默认编码类型。
- 如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单。
- 网页加入meta charset编码标签。
常见的浏览器有哪些，什么内核?
- Trident：IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到目前的IE8。Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器涌现（如 Maxthon、The World 、TT、GreenBrowser、AvantBrowser等）。此外，为了方便也有很多人直接简称其为IE内核（当然也不排除有部分人是因为不知道内核名称而只好如此说）。
- Gecko：Netscape6开始采用的内核，后来的Mozilla FireFox也采用了该内核，Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。因为这是个开源内核，因此受到许多人的青睐，Gecko内核的浏览器也很多，这也是Geckos内核虽然年轻但市场占有率能够迅速提高的重要原因。
- Webkit：苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。所以Webkit也是自由软件，同时开放源代码。在安全方面不受IE、Firefox的制约，所以Safari浏览器在国内还是很安全的。
- KHTML，是HTML网页排版引擎之一，由KDE所开发。
KDE系统自KDE2版起，在档案及网页浏览器使用了KHTML引擎。该引擎以C++编程语言所写，并以LGPL授权，支援大多数网页浏览标准。由于微软的Internet Explorer的占有率相当高，不少以FrontPage制作的网页均包含只有IE才能读取的非标准语法，为了使KHTML引擎可呈现的网页达到最多，部分IE专属的语法也一并支援。
KHTML拥有速度快捷的优点，但对错误语法的容忍度则比Mozilla产品所使用的Gecko引擎小。
列出常见的标签，并简单介绍这些标签用在什么场景
<a>超链接
<h1~h6>标题
<button>按钮
<br>换行符
<canvas>使用canvas绘图
<sup>上标
<sub>下标
<div>
没有语义，最合适用来对页面结构进行划分，但也不要滥用。
<header>
页面头部信息介绍，也可用于板块头部
<hgroup>
<h1>主标题</h1>
<h2>副标题</h2>
</hgroup>
页面一个标题组合一个标题和一个子标题，或者标语组合
<nav>导航，包含一个链接列表
<footer>
页面页脚，板块底部，一般包含版权声明，审字等
<section>
页面板块，用于划分页面上不同区域，或者划分文章里不同的节点。
<article>
表示页面中一套结构完整且独立的内容部分。
<aside>
包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分
