任务四-HTML知识点
1、HTML、XML、XHTML 有什么区别
HTML是超文本标记语言（Hyper Text Markup Language），是语法较为松散的、不严格的Web语言。比如大小写混写，编码不规范。
XML是可扩展标识语言（The Extensible Markup Language），主要用于存储数据和结构，重点是什么是数据，如何存放数据。XML 没有预定义的标签，是一种允许用户对自己的标记语言进行定义的源语言。
XHTML是可扩展超文本标记语言（Extensible Hyper Text Markup Language），基于XML，作用与HTML类似，但语法更严格。
最主要的不同：
- XHTML 元素必须被正确地嵌套；
- XHTML 元素必须被关闭；
- XHTML 标签名必须用小写字母；
- XHTML 文档必须拥有根元素；
2、怎样理解 HTML 语义化
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。简单来讲是让代码更方便理解，更简洁，脱离了CSS还能看懂页面。
随着互联网的发展，WEB承载越来越多的信息（图片，声音，视频等），人们开始用机器来处理网络信息，就此诞生了搜索引擎。如此庞大及复杂的信息如何让搜索引擎处理和挖掘，所以让机器能够更好地读懂WEB上内容就变得越来越重要。
语义化可以带来的好处：
-. 清晰的页面结构：去掉或样式丢失的时候，也能让页面呈现清晰的结构，增强页面的可读性。
-. 支持更多的设备：屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。 如果你使用的含语义的标记，屏幕阅读器会根据你的标签来判断网页的内容，而不是一个字母一个字母的拼写出来。
-. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。
-. 便于团队开发和维护：在团队中大家都遵循同一个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。
3、怎样理解内容与样式分离的原则
Html指的是结构；CSS指的是样式；JavaScript指的是行为。
- 写 HTML 的时候先不管样式, 重点放在HTML的结构和语义化上，让 HTML 能体现页面结构或者内容。之后再去写样式。
- HTML 内不允许出现属性样式，尽量不要出现行内样式。
- 写 JS 的时候，尽量不要用 JS 去直接操作样式，而是通过给元素添加删除class来控制样式变化。
4、有哪些常见的meta标签
| 标签 | 含义 |
|---|---|
| <meta charset="utf-8"> | 声明文档使用的字符编码 |
| <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/> | 声明文档兼容模式，指示IE以目前可用的最高模式显示内容 |
| <meta name="keywords" content="your tags"> | 定义针对搜索引擎的关键词 |
| <meta name="description" content="不超过850个字符"> | 页面描述，告诉搜索引擎你的站点的主要内容 |
| <meta name="author" content="你的姓名"> | 定义网页作者 |
| <meta name="revised" content="David, 2008/8/8/" /> | 定义页面的最新版本 |
| <meta http-equiv="refresh" content="5"/> | 5秒刷新一次页面 |
| <meta http-equiv="expires" content="Mon,12 May 2001 00:20:00 GMT"> | 用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式 |
| <meta http-equiv="pragma" content="no-cache"> | 禁用缓存 |
| <meta http-equiv="set-cookie" content="Mon, 12 May 2001 00:20:00 GMT"> | cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也必须使用GMT时间格式。 |
| <meta name="robots" content="index,follow" /> | 搜索引擎索引方式 |
<meta name="robots" content="index,follow" />
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索；
nofollow：页面上的链接不可以被查询。
5、文档声明的作用，严格模式和混杂模式指什么?<!doctype html>的作用?
网页的DOCTYPE声明的作用
DOCTYPE是document type(文档类型)的简写，在Ｗeb设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。
在HTML中 doctype 有两个主要目的：
- 对文档进行有效性验证
- 决定浏览器的呈现模式
Doctype可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式: 标准模式和混杂模式
- 严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行；
- 在混杂模式中，页面以一种比较宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止老站点无法工作。
模式触发
- 浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML、HTML 4.01文 档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。
- 包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。
- DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
html5既然没有DTD，也就没有严格模式与宽松模式的区别，html5有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。
6、浏览器乱码的原因是什么？如何解决
乱码产生的根本原因
- 保存的编码格式和浏览器解析时的解码格式不匹配导致
- 乱码一般是英文以外的字符才会出现
解决办法 - 设置<meta charset>标签声明文档使用的字符编码
- 设置正确的字符编码
- 设置浏览器显示正确的编码
如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单调整。
IE9浏览器：在需要转码的网页空白出右键鼠标，选择“编码”。
傲游浏览器：在需要转码的网页时，菜单“查看”-->“编码”即可选择转换编码。
谷歌浏览器：在需要转码的网页时，点击右上角“三横”图标选择“工具”-->“编码”即可选择切换网页编码。
7、常见的浏览器有哪些？什么内核？
浏览器内核指的是（参考）
浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。
浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS 引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。
最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有 10 多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Webkit、Blink。
一、Trident内核代表产品Internet Explorer，又称其为IE内核。
Trident(IE内核)是微软在 Mosaic代码的基础之上修改而来的，Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用 IE 内核而非 IE 的浏览器(壳浏览器)涌现。
Trident内核常见的浏览器有：
- IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；
- 猎豹安全浏览器：1.0-4.2版本为Trident+Webkit，4.3版本为Trident+Blink；
- 360安全浏览器 ：1.0-5.0为Trident，6.0为Trident+Webkit，7.0为Trident+Blink；
- 360极速浏览器：7.5之前为Trident+Webkit,7.5为Trident+Blink；
- 傲游浏览器 ：傲游1.x、2.x为IE内核，3.x为IE与Webkit双核；
- 搜狗高速浏览器：1.x为Trident，2.0及以后版本为Trident+Webkit；
由于市场占有率高，微软很长时间都并没有更新 Trident 内核，导致 - 一是 Trident 内核曾经几乎与 W3C 标准脱节（2005年）
- 二是 Trident 内核的大量 Bug 等安全性问题没有得到及时解决。
二、Gecko内核Gecko(Firefox内核)
Gecko：Netscape6开始采用的内核，后来的Mozilla FireFox(火狐浏览器) 也采用了该内核，Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。因为这是个开源内核，因此受到许多人的青睐，Gecko内核的浏览器也很多，这也是Gecko内核虽然年轻但市场占有率能够迅速提高的重要原因。
不过事实上，Gecko 内核的浏览器仍然还是Firefox (火狐) 用户最多，所以有时也会被称为Firefox内核。此外Gecko也是一个跨平台内核，可以在Windows、 BSD、Linux和Mac OS X中使用。
三、WebKit内核代表作品Safari、Chromewebkit
Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。所以Webkit也是自由软件，同时开放源代码。
特点在于源码结构清晰、渲染速度极快。
缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。
WebKit内核常见的浏览器：
- Apple Safari (Win/Mac/iPhone/iPad)
- Android 默认浏览器
- Google Chrome
四、Bink
Blink 是一个由Google和Opera Software开发的浏览器排版引擎，这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支。
Google 决定从 WebKit 衍生出自己的 Blink 引擎，将在 WebKit 代码的基础上研发更加快速和简约的渲染引擎，并逐步脱离 WebKit 的影响，创造一个完全独立的 Blink 引擎。
8、列出常见的标签，并简单介绍这些标签用在什么场景
| 标签 | 场景 |
|---|---|
| head标签 | head标签是页面的“头部”， 一般来说，只有6个标签能放在<head>标签内：<title>、<meta>、<link>、<style>、<script>、<base> |
| body标签 | body标签是页面的“身体” |
| h1~h6标签 | 设置不同的标题 |
| p标签 | 使用p标签来标记一段文字 |
|
标签 |
换行 |
| <div>标签 | 主要用来为HTML文档内大块的内容提供结构和背景 |
| <ul>标签 | 无序列表 |
| <ol>标签 | 有序列表 |
| <form>标签 | 设置一个表单 |
| <img>标签 | 设置一个图像 |
