HTML知识点

一、HTML、XML、XHTML 有什么区别

1. HTML是什么？

• 描述网页的一种语言
• 超文本标记语言 (Hyper Text Markup Language)
• HTML 被设计用来显示数据。
• 不是一种编程语言，而是一种标记语言 (markup language)
• 标记语言是一套标记标签 (markup tag)
• HTML 使用标记标签来描述网页

2. XML是什么?

• 指可扩展标记语言（EXtensible Markup Language）
• XML 被设计用来传输和存储数据，而非显示数据。
• 是一种标记语言，很类似 HTML
• XML 标签没有被预定义，需要自行定义标签。
• XML 被设计为具有自我描述性。
• XML 是 W3C 的推荐标准

3. XHTML 是什么？

• XHTML 指可扩展超文本标记语言（EXtensible HyperText Markup Language）
• XHTML 是 HTML 与 XML（扩展标记语言）的结合物
• XHTML 与 HTML 4.01 几乎是相同的。
• XHTML 的目标是取代 HTML。
• XHTML 是作为一种 XML 应用被重新定义的 HTML。
• XHTML 是一个 W3C 标准。

4. XML 与 HTML 的主要差异

• XML 被设计为传输和存储数据，其焦点是数据的内容。
• HTML 被设计用来显示数据，其焦点是数据的外观。
• HTML 旨在显示信息，而 XML 旨在传输信息。

5. HTML 与 XHTML 的主要差异

• XHTML 对比 HTML， XHTML 文档具有良好完整的排版，体现在两方面：
  a、元素必须要有结束标签；
  b、元素必须嵌套；

梦之都XHTML教程

梦之都XHTML教程

• 对于HTML的元素和属性，XHTML 必须小写， 因为XML是严格区分大小写的，如

• 和
• 是不同的标签

• XHTML 的属性值必须在引号之中

• XHTML 不支持最小化属性

• 在XHTML 中，name属性是不赞成使用的，在以后的版本中将被删除。

关于HTML 和XHTML 和XML 的区别可以参考以下网页：
http://www.cnblogs.com/fredshare/archive/2011/11/10/2244308.html
http://www.dreamdu.com/xhtml/html_xhtml/

二、怎样理解 HTML 语义化

HTML 语义化优点：

1. 语义化的含义就是用正确的标签做正确的事情，HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有CSS样式情况下也能呈现出很好的内容结构、代码结构。
2. 搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重，所以HTML语义化有利于 SEO。
3. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备），以有意义的方式来渲染网页。
4. 便于团队开发和维护。语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

若想要做到HTML 语义化，则网页的开发者应该要做到熟悉所有规范的HTML标签的使用场景，在合适的地方使用合适的标签。如：

1. 尽量少用
   和这两个标签，因为代码中使用的标签

   和是在所有的HTML标签中最没有语义的，在使用这两个标签时尽量能找到更有语义的标签代替；
2. 和标签语义化的重要性一样，某些属性的设置也是HTML语义化重要的环节。例如，在img标签中，alt是必须要设置的属性，因为img是自闭合标签，并没有包含可以解释说明图片的额外信息。alt属性的文字说明是当图片在浏览器中未加载时的显示的代替。
   
   

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

总的来说就是，结构、表现、行为三者分离。

1. 网页分离

一个网页分为三个部分：HTML——结构，CSS——表现，JavaScrip——行为。内容也就是HTML，样式也就是CSS。所以内容和样式的分离，就是指在网页编码的过程中，要将 HTML 和 CSS两大部分分开。

2. 如何实现

内容与样式分离的原则的实现，一个是要依靠意识，另一个是依靠经验。
举例而言，面对一个分块明显的网页设计图时：
初级的开发人员思路及制作方法：div 层层嵌套；
中级的开发人员思路及制造方法：去掉多余的 div ,进行简化；
高级的开发人员思路及制造方法：最大化的简化 HTML 的结构，然后用 CSS 进行设置，减少 HTML 与 CSS 的契合度。
正确做法是写HTML的时候先不管样式，重点放在HTML的结构和语义化上，让HTML能提现页面结构或者内容，然后进行 CSS 样式设置，减少 HTML 与 CSS 契合度（即内容与样式分离），写 JavaScript 的时候，尽量不要用JS去直接操作样式，而是通过给元素添加/删除 class 属性来控制样式变化（即行为分离）。

3. 分离原则的优点

浏览器加载网页页面速度变快。分离原则下，大部分页面代码写在了CSS 当中，页面体积容量变得更小。
网页修改设计时，效率、省时。根据 HTML 标签内的 id 或 class 的标记，到CSS 里找到相应的 id 或class，可以快速替换指定位置的样式，不会破坏页面架构和其他部分的样式。
典型的应用就是网页换肤，使用相同的 HTML 结构，不同的 CSS 样式。
更好地被搜索引擎收录。基于内容与样式分离的原则，HTML 的语义化就是首要考虑的,网页中语义化的标签代码就会更加适合搜索引擎。
CSS 样式的分离，它可以根据不同的浏览器，达到显示效果的统一。保证网页架构不变形的前提下，放心在不同浏览器渲染显示样式。

关于 HTML 语义化 及 内容与样式分离的原则参考：
http://www.jianshu.com/p/55a7e598957f

四、有哪些常见的meta标签

meta常用属性 - 提供HTML文档的元数据, 常用于告知浏览器如何显示内容和搜索引擎优化

1. 网页相关

• 申明编码

• 优先使用 IE 最新版本和 Chrome

• 浏览器内核控制
  国内浏览器很多都是双内核（webkit和Trident）,webkit内核高速浏览，IE内核兼容网页和旧版网站。 而添加meta标签的网站可以控制浏览器选择何种内核渲染。
  国内双核浏览器默认内核模式如下：
  搜狗高速浏览器、QQ浏览器：IE内核（兼容模式）
  360极速浏览器、遨游浏览器：Webkit内核（极速模式）

• 禁止浏览器从本地计算机的缓存中访问页面内容
  这样设定，访问者将无法脱机浏览。

• Windows 8

• 站点适配
  主要用于PC-手机页的对应关系。

• 避免百度转码申明
  用百度打开网页可能会对其进行转码（比如贴广告），避免转码可添加如下meta

2. 用于SEO优化

• 页面关键词
  每个网页应具有描述该网页内容的一组唯一的关键字, 不要太短也不要太长

• 页面描述
  每个网页都应该有一个不超过150个字符的页面描述

• 设置搜索引擎索引方式

3. 移动设备

3.1 viewport

viewport能优化移动浏览器的显示。 如果不是响应式网站，不要使用initial-scale或者禁用缩放。
大部分4.7-5寸设备的viewport宽设为360px；
5.5寸设备设为400px；
iphone6设为375px；ipone6 plus设为414px。

width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边
width 宽度 - 数值 或 device-width, 范围从200 到 10000，默认为 980 像素
height 高度 - 数值 或 device-height, 范围从 223 到 10000
initial-scale 初始的缩放比例,范围从0 到10
minimum-scale 允许用户缩放到的最小比例
maximum-scale 允许用户缩放到的最大比例
user-scalable 用户是否可以手动缩, 参数 no,yes

注意，很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。 如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。

3.2 WebApp全屏模式

• 启用全屏模式, 伪装app，离线应用。

• 隐藏状态栏/设置状态栏颜色
  只有在开启WebApp全屏模式时才生效。 content的值为default | black | black-translucent 。

• 添加到主屏后的标题

3.3 其他

• 忽略数字自动识别为电话号码

• 忽略识别邮箱

• 添加智能 App 广告条 Smart App Banner
  告诉浏览器这个网站对应的app，并在页面上显示下载banner

• 针对不识别Viewport的手持设备进行优化
  主要是针对一些老的不识别viewport的浏览器，比如黑莓

• 适配微软的老式浏览器

• 强制竖屏

• 强制全屏

• windows phone 点击无高光

关于meta常用属性可以参考：
https://tink.gitbooks.io/fe-collections/content/ch02-html/s03-meta.html

五、文档声明的作用?严格模式和混杂模式指什么? 的作用?

1. 文档声明的作用

DTD（document type definition，文档类型定义）是一系列的语法规则， 用来定义XML或(X)HTML的文件类型。浏览器会使用它来判断文档类型， 决定使用何种协议来解析，以及切换浏览器模式。
DOCTYPE是document type(文档类型)的简写，用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。它说明了你用的XHTML或者HTML是什么版本。如果文件代码不合法，那么浏览器解析时便会出一些差错。
声明指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下，“阅读程序”通常是浏览器或者校验器这样的一个程序，“规则”则是W3C所发布的一个文档类型定义（DTD）中包含的规则。
要建立符合标准的网页， 声明是必不可少的关键组成部分。除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。
如果没有DOCTYPE，浏览器会进入一种被称为Quirks模式的怪异状态，在该模式下，浏览器的盒模型、样式解析、布局等都与标准规定的存在差异。
声明必须是 HTML 文档的第一行，位于 标签之前。
声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中， 声明引用 DTD，因为 HTML 4.01 基于 SGML。HTML5 不基于 SGML，所以不需要引用 DTD。
请始终向 HTML 文档添加 声明，这样浏览器才能获知文档类型。

2. 浏览器模式：严格模式和混杂模式

为了能够很好地显示满足标准的页面，又能最大程度兼容不合法的HTML。 浏览器厂商一般会提供两种浏览器模式：

严格模式（standards mode）：浏览器根据标准规约来渲染页面。
混杂模式（quirks mode）：浏览器采用更加宽松的、向后兼容的方式来渲染页面。

严格模式（推荐）现在也称为标准模式，在该模式下，浏览器会严格按照 HTML 和 CSS 标准来解析、渲染你的文档。
混杂模式下，浏览器会模仿旧浏览器的行为，比如IE6，在此基础上兼容新的标准特性。 混杂模式又称兼容模式、怪异模式等。混杂模式（不推荐）的由来是一个历史问题。在互联网早期，网页一般写成两个版本：一个写给网景公司的 Navigator浏览器，一个写给微软公司的IE浏览器。当W3C制定了 Web 标准后，这两个浏览器不能马上开始按标准来解析渲染页面，因为这样会破坏当时大部分页面的显示效果。所以各浏览器就引入了混杂模式，在该模式下，浏览器会模拟Navigator 4和IE5的非标准行为来解析渲染页面，这样做就是为了兼容在W3C标准出现之前就存在的那些“不标准”的页面。

3. 关于

HTML5将DOCTYPE的声明简化了，只需要即可。 的作用就是让浏览器进入标准模式，使用最新的 HTML5标准来解析渲染页面；如果不写，浏览器就会进入混杂模式，而这是我们要避免的。

关于 DOCTYPE 可以参考：
http://harttle.land/2016/01/22/doctype.html
http://blog.csdn.net/jom_ch/article/details/1772165
http://www.w3school.com.cn/tags/tag_doctype.asp
http://www.divcss5.com/html/h22.shtml#no2
http://www.cnblogs.com/GrayZhang/archive/2011/03/31/learning-html5-doctype.html

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

下面这个流程是我们写入文件到展示文件的简单描述：

1. 我们使用编辑器编写 HTML 文件
2. 保存编写的 HTML 文件
3. 使用浏览器打开 HTML 文件
4. HTML文件在浏览器展示

• 我们编写 HTML 文件时，如果在中指定了，设定字符集为gbk。
• 然后在第2步保持文件时会把我们写入的文字使用编辑器默认的编码方式进行保存，而默认的编码方式是utf-8。
• 接着浏览器打开 HTML 文件时，它看到，这时候它就会用gbk字符集来解码你的 HTML 文档
• 由于utf-8和gbk对中文的编码方式不一样，那么HTML文件在浏览器中显示示出来肯定是乱码。

浏览器乱码的原因

1. 乱码产生的根本原因是你保存的编码格式和浏览器解析时的解码格式不匹配导致的。
2. 乱码一般是英文以外的字符才会出现。

关于编码涉及到3个方面：

1. HTML 文档中的 指定的字符集
2. 编辑器保存文档使用的字符集
3. 浏览器解析 HTML 文档使用的字符集
4. 这里的关键在于2和3步，如果这两步的字符集不一样，那么英文以外的文字就会出现乱码。英文不会出现乱码是因为一般主流的字符集对英文使用的编码方式都是一样的，可以互相兼容。
5. 而第3步浏览器解析 HTML 文档使用的字符集依赖于第1步 HTML 文档中的 指定的字符。
6. 那如果 HTML 文档没指定呢？那浏览器就会用自己的方式去猜要用哪个字符集来解析 HTML 文档，这里就可能会发生错误。

所以总结下如何解决浏览器乱码：

1. HTML 文档一定要指定字符集为utf-8，因为这个字符集包括了世界上几乎所有的文字，没有理由不用它。
2. 编辑器保存文档使用的字符集一定要跟 HTML 文档指定的字符集匹配，也就是 utf-8

关于浏览器乱码，可以参考
https://www.jianshu.com/p/c9c76370b2fb
http://blog.csdn.net/sxhlovehmm/article/details/41347715
http://ruoyu.jirengu.com/post/%E5%85%B3%E4%BA%8E%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B9%B1%E7%A0%81

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

浏览器内核主要指的是浏览器的渲染引擎，2013 年以前，代表有 Trident（IE），Gecko（firefox），Webkit（Safari chrome 等）以及 Presto（opera)。2013 年，谷歌开始研发 blink 引擎，chrome 28 以后开始使用，而 opera 则放弃了自主研发的 Presto 引擎，投入谷歌怀抱，和谷歌一起研发 blink 引擎，国内各种 chrome系的浏览器（360、UC、QQ、2345 等等）也纷纷放弃 webkit，投入 blink 的怀抱。
Safari是苹果公司开发的浏览器，使用了KDE（Linux桌面系统）的KHTML作为浏览器的运算核心，Safari所用浏览器内核的名称是大名鼎鼎的WebKit。 Safari在2003年1月7日首度发行测试版，并成为Mac OS X v10.3与之后版本的默认浏览器，也成为苹果其它系列产品的指定浏览器（也已支持Windows平台）。
目前移动设备浏览器上常用的内核有 Webkit，Blink，Trident，Gecko 等，其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit，Android 4.4 之前的 Android 系统浏览器内核是 WebKit，Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink，Windows Phone 8 系统浏览器内核是 Trident。

Read More：
各主流浏览器内核介绍
浏览器内核
移动浏览器的内核WebKit介绍
主流浏览器内核介绍（前端开发值得了解的浏览器内核历史）

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

标签	运用场景
	HTML 页面的根元素
	文档的内容
	用于定义文档的头部
	提供了元数据.元数据也不显示在页面上，被浏览器解析