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其他属性值的元素常见的有:
- head及head里面包裹的meta link tittle… display属性值为none
- li的默认display属性值为list-item
- 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变化
- 新增的语义化标签(header footer nav section article…)
- 新增表单元素和表单属性(datalist keygen output …)(pattern email date …)
- JSwebAPI(离线 存储 音频 图形 通信 拖放 )
- 分类和嵌套变更(例如: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的作用
- 直接提交表单
- 可以更方便的使用submit和reset
- 方便浏览器保存表单
- 方便第三方库整体提取表单($(‘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 …