HTML常见知识点

HTML发展史

HTML1 HTML2 HTML3 -----------1991-1997-------IETF（HTML规范组维护）
HTML3------1997.1-1997.12 -----------HTML4 + XHTML1.0/2.0-----1997-2000 -------HMTL5(w3cHTML规范组维护从2014-今)

HTML XHTML HTML5的关系

HTML4.0（SGML）
HTML4.0之前的版本没什么说的，他们都是可扩展的标记语言。在原来的版本上扩展而已。到第四版的时候发展成了SGML，超级通用的扩展语言，它的写法是非常松散的，（标签没有闭合 属性没有值等等浏览器会做很多的容错）

XHTML（XML）
后来越来越多的开发者和web指定者觉得这样是不标准的，不严格不规范的，一说到严格规范就想到了XML，于是后来基于XML就出现了XHTML，他的要求非常严格（标签必须小写，也必须闭合，属性都要有值），h5出现之前是非常流行的，他严格约束了开发者的编码规范，后来这个标准发展到XHTML2.0的版本，越来越严格对开发者很不友好，就没有继续走下去了

html5（基于HTML4）
之后就是h5的时代了，又回到了没有那么严格的时候了，但是功能又更加强大。在加上有了规范的概念了，大家写代码的时候不会在像HTML4.0之前的时候那么随意，所以说这是一个从HTML4.0编码不那么规范----XHTML编码很规范----H5表面很随意但是每个开发者心中自有规范的变迁

总结：
HTML属于SGML
XHTML属于XML，是XHTML进行XML严格化的结果
HTML5不属于SGML或XML，比XHTML更宽松、因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为

Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

• 声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
• 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
• 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
• DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

meta常用标签

字符集

<meta charset="utf-8">

移动端适配

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
scale=1.0, mixmum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

设置页面不缓存

<meta http-equiv="pragam" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

页面关键字查询

<meta name="keywords" content="">
<meta name="description" content="">

页面重新刷新(常用404页面)

<meta http-equiv="Refresh" content="10;url=http://www.damonstore.cn/">

行内元素有哪些？块级元素有哪些？ 行内块级元素有哪些？自闭合元素有哪些？

CSS规范规定，每个元素都有display属性以确定该元素的类型，每个元素都有默认的display值， 比如div默认display属性值为“block”，成为“块级”元素； span默认display属性值为“inline”，是“行内”元素；input 默认display:inline-block是行内块级元素。当然除了这些属性值之外display还有其他的属性值用来默认修饰当前元素。

• 常见自闭合元素： meta link input img hr br
• 常见行内元素：a span strong em i img label br
• 常见块级元素：div p h1-h6 ul ol dl dt dd form hr option 语义化标签
• 常见的行内块级元素：input button textarea select
• 默认display其他属性值的元素常见的有：

1. head及head里面包裹的meta link tittle… display属性值为none
2. li的默认display属性值为list-item
3. table默认display属性值为table，tr默认为table-row，td默认为table-cell

HTML和DOM关系

HTML本质是一个字符串,他是页面的骨架结构,需要搭配浏览器的内核机制,进行字符串的解析和渲染,最终绘制在屏幕上。
DOM是要对HTML字符串进行解析的，最终跑在浏览器里面的。
HTML字符串到DOM树的过程：浏览器从服务端接收到资源后首先进行解压拿到网页内容。然后输入到HTML解析器里面生成DOM树，这一过程首先会由计算机存储的二进制文件，通过网页的编码格式进行转换，从而得到一个字符串。然后对标签打上一个标记，最后根据浏览器对标签的默认样式进行解析生成一个节点。最后所有节点就会形成一棵树也就是DOM树。

对语义化如何理解

• 开发者容易理解（代码是需要维护的，语义化比一连串的div要好很多）
• 机器更容易理解页面的结构（对于搜索，读屏更有帮助）
• 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，有利于SEO（合理的title 语义化 图片的alt）

HTML5有哪些变化，如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

HTML5变化

1. 新增的语义化标签（header footer nav section article…）
2. 新增表单元素和表单属性（datalist keygen output …）（pattern email date …）
3. JSwebAPI（离线 存储 音频 图形 通信 拖放 ）
4. 分类和嵌套变更(例如：a元素的子元素可以是块级元素)
   html5出现之前，经常把元素按照block、inline、inline-block来区分。在html5中，元素不再按照display属性来区分，而是按照内容模型来区分,例如：区块型元素,标题型元素,嵌入型元素等等

新标签兼容低版本

• 通过createElement创建元素标签
• 引入html5shiv文件进行兼容

区分 HTML 和 HTML5：文档声明的头部，语义化标签

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

浏览器内核一般分为两部分，即渲染引擎部分和JS引擎部分。渲染引擎主要是针对静态资源做一些语法的解释和渲染。它决定了浏览器如何显示网页的内容以及页面的格式信息。JS引擎部分主要做一些页面的动态交互，解释和执行JS代码，完成分布的任务。后来JS引擎越来越强大了被分离了出去，现在一般说起浏览器内核就直接指渲染引擎了。
常见的浏览器内核有：

• IE--------------Trident
• Firefox--------Gecko
• opera---------Presto(现在是blink)
• chrome-------Blink(webkit的一个分支)
• safari---------Webkit

property和attribute的关系

attribute修改和获取的是标签的自有属性，内置属性
property修改和获取的是HTML文档的标签属性
例如修改input的value属性，首先用property方式用字面量点value的形式修改内容时，页面上的输入框会马上改变，但是他在namedNodeMap类数组里的属性value值是不会改变，还是原来的值。但是如果用setAttribute进行属性修改的时候，nameNodeMap类数组里面的value会改变，但另一方面页面上的值不会改变。总之这两个不会相互影响，根据场景进行选择。

form的作用

1. 直接提交表单
2. 可以更方便的使用submit和reset
3. 方便浏览器保存表单
4. 方便第三方库整体提取表单（$(‘form’).serialize() )

HTML全局属性，新增表单元素和新增属性

HTML全局属性：
id class style title lang hidden dir contenteditable…
新增表单元素：
datalist ：一般和input连用规定输入域的选项列表，input的list要和datalist的id关联
keygen ：生成密钥对，兼容性不好
output ：用于不同类型的输出，比如计算或脚本输出
新增的 form 属性:
autocomplete novalidate
新增的 input 属性：
form autofocus autocomplete placeholder required width height list …