html学习笔记（浏览器+选择器+字体+标签分类）

**

1.主流浏览器

**
主流的浏览器主要根据是否有自主研发的内核定义的，主要的主流浏览器有Internet Explorer(IE)，Google Chrome(谷歌)，Mozilla Firefox（火狐）Safari,Opera。

Trident是IE的内核，也就是国内双核浏览器的内核之一。Trident内核一直延续到IE11,IE11的后继者Edge采用了新内核EdgeHTML。

Gecko是Netscape6Z开始采用的内核，是一个开源内核,后来被FF（FireFox）采用。

Webkeit的鼻祖是Safari, 其前身是KDE(Linux的桌面系统)的KHTML（开源的）。Webkit也是开源的。
注意：Webkit其实包括是渲染引擎Webcore(前身是KHTML),以及JS引擎JSCore,

chromium fork自webkit，代码可读性和编译速度得到提升。值得一提是谷歌专门研发了自己的JS引擎——V8，极大地提高了JS的运算速度。由于chromium也是开源的，所以搜狗、QQ、360都用chromium内核。
自13年4月后，谷歌开始在Chromium项目中研发Blink渲染引擎，之前一直用的是Webkit的渲染引擎。之所以研发独立的渲染引擎，是因为苹果推出的Webkit2与chromium的设计存在冲突，影响了chromium的架构移植工作

IE:Trident（IE8->IE8:Jscript->Chakra)

Edge:EdgeHTML

FF：Gecko

Safari:KHTML->Webkit(WebCore+JSCore)->Webkit2

Chrome:Webkit->Chromium(V8)->Chromium(Blink+V8)

Opera:Presto->Chromium(V8)->Chromium(Blink+V8)

2.选择器

选择器的类型（主要四种）： 标记，id, 类，伪类

样式类型： 内联样式（直接在标签内style），内部样式（在头部的style），链接外部样式(link)，导入外部样式(@import url()?

css继承冲突的优先级：行内样式>id样式>class样式>标记样式

属性选择器 如[id]{}表示选择属性含有id 的全部标签，与class样式同级

在样式内加入!import则优先级最高
css样式权重：
！import infinity(正无穷)
行内样式 10000
id样式 100
class样式|属性|伪类 10
标签|伪元素 1
通配符（*） 0

父子选择器如 div span{}表示div下的span

直接子元素选择器如 div>em{} 表示div下的直接em 标签

并列选择器如div.demo{},与父子选择器的区别是两个元素之间没有空格，一般并列选择器与标签结合使用的时候，标签放在前面

同一排的选择器可以将权重加起来比较，权重高的会覆盖低的，一样的权重则后来居上

3.字体，单位

颜色字体：纯文字（英文），颜色代码（#ffffff）,颜色函数（rgb(,)）

border：大小，边框样式，颜色；可以使用border绘画三角形

默认文字大小为16px,

单行文本所占的高度等于容器的高度，则可以单行文本居中垂直，

text-indent：首行缩进

1em=1*font-size=16px

字体一般高=宽

cursor:光标的提示符

4、标签元素分类

标签分类：行级元素，块级元素，行级块级元素

行级元素：内容决定元素所占的位置，不可以通过css改变宽高（span，strong，em,a,del）
块级元素：内容独占一行，可以通过css改变宽高（div,p,ul,li,form,address）

行级块级元素：内容决定大小，css可以改变宽高（img）