HTML5和CSS3自我学习认知基础知识
1、网页的组成、对应的语言、标准
结构 表现 行为
html css js
xhtml、xml css DOM、ECMAscript
2、html与xhtml的区别
3、 声明文档类型
根元素 编码格式 网页标题 页面主体html 超文本标记语言
4、html语法
<标签 属性=“属性值”>
<标签 属性=“属性值”/>
5、文本标签
h1-h6、p、br、b、strong、em、i、hr、del、u、sup、sub
相对路径：
1、返回上一级用…/
2、打开文件夹写文件夹名，例:img/
绝对路径：
file:///D:/ZZ-1914/day02/code/html/load.html
链接文本/图片
属性： target 链接打开方式
_blank 新窗口
_self 当前窗口
width=“表格的宽度”
height=“表格的高度”
border=“表格的边框”
bgcolor=“表格的背景色”
cellspacing=“单元格与单元格之间的间距”
cellpadding=“单元格与内容之间的空隙”
水平对齐方式：align=“left/center/right”;
垂直对齐方式：valign=“top/middle/bottom/baseline”
colspan合并列
rowspan 合并行
单元格间距(该属性必须给table添加)
border-spacing:value;
合并相邻单元格边框
border-collapse:separate(边框分开)/collapse(边框合并)；
无内容单元格显示、隐藏
empty-cells:show/hide;
固定单元格宽高(只能固定宽度)
表格布局算法
table-layout：auto/fixed
表格基本组成
table（表格） tr（行） td（列） th:表格列标题（放在tr里）
属性（html）：
rules=“rows/cols/all/none/groups” 添加组分隔线
说明：
rows:位于行之间的线条
cols:位于列之间的线条
all：位于行和列之间的线条
none:没有线条
groups:位于行组和列组之间的线条
BFC的生成
- 根元素
- float的值不为none
- overflow的值不为visible，可用(hidden、auto、scroll)
- display的值为inline-block、table-cell、table-caption
- position的值为absolute或fixed
表单域：包含了处理表单数据所用的程序的URL以及数据提交到服务器的方法。
表单控件（对象、元素）:包含了文本框、密码框、隐藏、多行文本框（文本域）、复选框、单选框、下拉列表、文件上传框、提交按钮、复位按钮、一般按钮。
提示信息：同一个表中还应该添加一些说明性文字，提示用户填写操作。
表单控件
文本框 text 密码框Password 提交submit 重置resrt 跳转button
选择符
类型选择符
ID选择符
class选择符
群组选择符
包含选择符
子选择符
伪类选择符
伪类选择器
a:link{属性：属性值;}超链接的初始状态;
a:visited{属性：属性值;}超链接被访问后的状态;
a:hover{属性：属性值;}鼠标划过超链接时的状态;
a:active{属性：属性值;}即鼠标按下时超链接的状态;
溢出属性（容器的）
overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;
visible:默认值，内容不会被修剪，会呈现在元素框之外；
hidden：内容会被修剪，并且其余内容是不可见的；
scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;
auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
inherit：规定应该从父元素继承 overflow 属性的值(ie浏览器不支持此属性值) 。
空余空间
white-space：normal/pre/nowrap/pre-wrap /pre-line /inherit
该属性用来设置如何处理元素内的空白；
normal：默认值，空白会被浏览器忽略，
pre：空白会被浏览器保留，其行为方式类似HTML中的pre标签；
pre-wrap：保留空白符序列和换行符，但是正常的进行换行(碰到边缘)；
pre-line:合并空隔符，但是保留换行符；
nowrap:文本不会换行，文本会在同一行上继续，直到遇到
标签为止；
文本溢出:text-overflow:clip/ellipsis
取值：
clip：不显示省略号（…），而是简单的裁切;
ellipsis：当对象内文本溢出时，显示省略标记；
单行文本溢出显示省略号
1、容器宽度：width：value；
2、强制文本在一行内显示:white-space：nowrap;
3、溢出内容为隐藏：overflow：hidden；
4、溢出文本显示省略号：text-overflow：ellipsis;
font-size设置文字大小
font-style字体风格属性：设置字体是否倾斜
语法：
font-style：normal/italic/oblique 分别为正常/斜体
font-weight字体加粗属性：设置字体加粗方式
语法：
font-weight：normal/100-900/bold/bolder 分别为正常/加粗
font-family字体名称属性
text-align：文本对齐属性。设定文本对齐方式。
语法：
text-align：left/right/center/justify 两端对齐
vertical-align：垂直对齐方式
语法：
vertical-align:top/bottom/middle;
line-height：行高属性。设定行距。
值为数值或倍数。文字一定会出现行高的（值）最中间
text-decoration：文本修饰属性，设定文本划线的属性。
值有：none/underline/overline/line-through/blink
none:没有修饰
underline:添加下划线
overline:添加上划线
line-through:添加删除线
blink:文字闪烁(高版本浏览器不支持)
text-indent：文本缩进属性，设定文本首行缩进。值为数值，常用单位有px
1）text-indent可以取负值；2）text-indent属性只对第一行起作用。
color : 颜色值 ;
说明：
用十六进制表示颜色值：
0 1 2 3 4 5 6 7 8 9 A B C D E F
颜色模式：光色模式
R G B
ff ff ff
颜色值的缩写：
当表示三原色的三组数字同时相同时，可以缩写为三位;
当用十六进制表示颜色值时，需要在颜色值前加“#”
ist-style-type:disc(实心圆)/circle（空心圆）/square(实心方块 )none(去掉列表符号)；
background-color：为元素设定背景色
background-image:为元素设定背景图
background-repeat:值有：repeat/repeat-x/repeat-y/no-repeat
background-position背景定位属性
background-clip 指定背景的显示范围/裁切位置 border-box/padding-box/content-box
background-origin 指定绘制背景图像时的起点 border-box/padding-box/content-box
background-size 指定背景中图像的尺寸 auto | <长度值> | <百分比> | cover |
border-image:url(url) A B C D 显示方式图像边框
border-image: url(borderimage.png) 25 25 25 25 stretch/repeat/round;
stretch: 拉伸
repeat: 平铺
round：平铺，不会出现断层
浮动float:none/left/right
清除浮动
clear: left/right/both/none
none 默认值。允许浮动元素出现在两侧。
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
属性选择器介绍
E[att] {} : 选择具有att属性的E元素。
E[att=“val”] {} : 选择具有att属性且属性值等于val的E元素。
E[att~=“val”] {}:用于选取属性值中包含指定词汇的元素。
E[att|=“val”] {}:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择
E[att*=“val”] {}:选择具有att属性且属性值为包含val的字符串的E元素。
E[att^=“val”] {}:选择具有att属性且属性值为以val开头的字符串的E元素
E[att$=“val”] {}:选择具有att属性且属性值为以val结尾的字符串的E元素
结构性伪类选择器
:root 将样式绑定到页面的根元素中
:not 排除某个选择器样式
:empty 使用该选择器来制定当元素内容为空白时使用的样式
:target 使用该选择器来对页面中的某个target元素（锚记链接）指定样式
:first-child 单独指定第一个子元素的样式
:last-child 单独指定最后一个子元素的样式
target
使用该选择器来对页面中的某个target元素（锚记链接）指定样式
UI元素状态伪类选择器
1）E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素
2）E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素
3）E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E
4 ) E::selection 匹配E元素中被用户选中或处于高亮状态的部分
动态伪类选择器
1）E:link 选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。
2）E:visited 选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。
3）E:active 选择匹配的E元素，且匹配元素被激活。(以上常用于链接描点和按钮上)
4 ) E:hover 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支 持a:hover
5 ) E:focus 选择匹配的E元素，而且匹配元素获取焦点
层级选择器
相邻兄弟选择器
li + li:后边相邻的选择器会被选中，第一个li不会被选中
通用兄弟选择器
li ~ li:li后面的所有li元素被选中
子选择器
ul> li:ul后面直接的li元素被选中
前缀
Presto 前缀-o- -o-box-shadow Opera浏览器专属的CSS属性需添加-o-前缀
Trident 前缀-ms- -ms-box-shadow IE浏览器专属的CSS属性需添加-ms-前缀
Gecko 前缀-moz- -moz-box-shadow 所有基于Gecko引擎的浏览器（如Firefox） 专属的CSS属性需添加-moz-前缀
Webkit 前缀-webkit- -webkit-box-shadow 所有基于Webkit引擎的浏览器（如Chrome、Safari）专属的CSS需添加-webkit-前缀
优雅降级， 渐进增强
渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
文本阴影：text-shadow:5px 5px 5px #f66;
指定多个阴影：(参数形式为X坐标 Y坐标 阴影的模糊程度 阴影颜色)
b)自动换行：word-break normal ：使用浏览器默认换行规则 keep-all：只能在半角空格或连接字符处换行 break-all：允许在单词内换行（对于标点符号来说，允许标点符号位于行首，不过在IE中是不可以的）
c)word-wrap：让长单词与URL地址自动换行 normal：只在允许的断字点换行（浏览器保持默认处理）
word-break：属性允许长单词或 URL 地址换行到下一行。
设置圆角
border-radius:5px;
盒子阴影
box-shadow:5px 5px 10px #f66
css3自适应
width : fill-available/fit-content/max-content/min-content
fill-available 充满整个可用宽度和可用高度
fit-content 将元素宽度收缩为内容宽度
max-content 内部元素宽度值最大的那个元素的宽度=最终容器的宽度。如 出现文本，则相当于文本不换行
min-content 内部元素最小宽度值最大的那个元素的宽度=最终容器的宽度
CSS3渐变
分为线性渐变(linear)和径向渐变(radial)
径向渐变
语法：
background: radial-gradient(center, shape, size, start-color, …, last-color);
说明：
center：渐变起点的位置，可以为百分比，默认是图形的正中心。
shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。
size：渐变的大小，即渐变到哪里停止，它有四个值。
closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。
线性渐变：
语法：
background: linear-gradient(direction, color-stop1, color-stop2, …);
说明：
direction：默认为to bottom，即从上向下的渐变；
stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。
css3 2d变换
transform
rotate() 旋转函数 取值度数
Transform-origin 旋转的基点
skew() 倾斜函数 取值度数 (扭曲)
skewX() skewY()
scale() 缩放函数 取值 正数、负数和小数
scaleX()scaleY()
translate() 位移函数
translateX()translateY()
rotate() 方法
单位：deg
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
skew() 方法
通过 skew() 方法，元素翻转（倾斜/扭曲）给定的角度，
根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
scale() 方法
通过 scale() 方法，元素的尺寸会增加或减少，
根据给定的宽度（X 轴）和高度（Y 轴）
translate() 方法
通过 translate() 方法，元素从其当前位置移动，根据给定的
left（x 坐标） 和 top（y 坐标） 位置参数
css3过度
transition
transition-property 要运动的样式 （all || [attr] || none）
transition-duration 运动时间
transition-delay 延迟时间
transition-timing-function 运动形式
ease：（逐渐变慢）默认值
linear：（匀速）
ease-in：(加速)
ease-out：（减速）
ease-in-out：（先加速后减速）
css3 3D属性
3D转换
语法：transform： rotate3d()/ translate3d()
rotate3d(x,y,z,angle)：旋转
translate3d(x,y,z)：平移
rotate3d(x,y,z,angle)
x: 在x轴是否旋转，是为1，否为0
y: 在y轴是否旋转，是为1，否为0
z: 在z轴是否旋转，是为1，否为0
angle：旋转角度
rotateX(angle) 定义沿 X 轴的 3D 旋转。正值前，负值后
rotateY(angle) 定义沿 Y 轴的 3D 旋转。正值右，负值左
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
translate3d(x,y,z)
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z轴的值
perspective 设置从何处查看一个元素的角度
transform-style:规定被嵌套元素如何在 3D 空间中显示
@keyframes 创建动画
语法：
@keyframes animationname {keyframes-selector {css-styles;}}
keyframes-selector 动画持续时间的百分比
例： @keyframes mymove{ 0% {top:0px;}25% {top:200px;}50% {top:100px;}75% {top:200px;}100% {top:0px;}}
animation 动画属性的简写属性
语法：animation：name duration timing-function delay iteration-count
name 动画名称
duration 动画指定需要多少秒或毫秒完成
timing-function 动画效果的速度
delay 延时
iteration-count：value/infinite 动画播放次数
animation-direction: normal|alternate; 是否反向播放动画
animation-play-state: paused|running; 动画正在运行还是暂停
动画关键帧
animation-timing-function：
step-start/step-end
弹性布局属性
lex-direction属性 决定主轴的方向
.box{
flex-direction: row |row-reverse | column | column-reverse
}
Row(默认值)：主轴为水平方向，起点在左端。
Row-reverse:主轴水平方向，起始点在右端。
Column:主轴为垂直方向，起点在上沿。
Column-reverse:主轴在垂直方向，起点在下沿
Justify-content属性：定义了项目在主轴上的对齐方式
.box{
justify-content:
flex-start |flex-end |center |space-between |space-around;
}
flex-start:默认值 左对齐
flex-end 右对齐
Center居中
Space-between 两端对齐，项目之间的间隔都相等
Space-around 每个项目两侧的间隔相等。
所以，项目之间的间隔比项目与边框的间隔大一倍
align-items属性定义项目在交叉轴上如何对齐
align-items:flex-start | flex-end | center |
baseline |stretch;
Flex-wrap属性flex-wrap:nowrap | wrap | wrap-reverse;
align-content属性
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
flex-grow属性
页面布局
固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸；
可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局；
弹性布局：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；
混合布局：同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；只是混合像素、和百分比两种单位作为页面单位。
布局响应：对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：pc优先（从pc端开始向下设计）；移动优先（从移动端向上设计）； 无论基于那种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（发生布局改变的临界点称之为断点）
响应式布局
优点：
1）： 面对不同分辨率设备灵活性强 2）： 能够快捷解决多设备显示适应问题
缺点：
1）： 兼容各种设备工作量大，效率低下 2）： 代码累赘，会出现隐藏无用的元素，加载时间加长
新增标签
header : 头部信息
footer ：页脚
nav：导航链接的部分。
main: 主体。元素中的内容对于文档来说应当是唯一的
section：独立的内容区块
aside：侧边栏导航
article：文章标签
hgroup： 标签用于对网页或区段（section）的标题进行组合
mark：标记，内容显示背景颜色，可以修改
address：地址标签
time： 表示日期或时间，也可以同时表示两者，相当于span
figure+figcaption 表示一段独立的内容，一般表示文档主体流内容中的一个独立单元。 figcaption表示 figure 的标题。从属于 figure ， 并且， figure 中只能放置一个 figcaption
dialog：标记定义一个对话框(会话框)类似微信
open(指示这个对话框是激活的和能互动的。当这个 open 特性没有被设置，对话框不应该显示给用户。)
embed：标记定义外部的可交互的内容或插件 比如flash
source：标记定义媒体资源
video：用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放
autoplay autoplay 视频就绪自动播放 muted
controls controls 向用户显示播放控件
width pixels(像素) 设置播放器宽度
height pixels(像素) 设置播放器高度
loop loop 播放完是否继续播放该视频，循环播放
src url 视频url地址
poster imgurl 加载等待的画面图片
audio：于在文档中表示音频内容
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
src url 要播放的音频的 URL。
canvas：可被用来通过脚本（通常是JavaScript）绘制图形
新增的智能表单
新增类型（type属性）
搜索
号码
网址
电子邮件地址
数字
范围
颜色
有关时间的：
月份
周数
时间
本地时间
Datalist ：选项列表
input中输入list属性，属性值为该标签的id值，标签中子标签使用option，设置value和label
例：
文本域/多行文本框：
表单字段集
定位
检索对象的定位方式；
语法：position：static/relative/absolute/fixed／sticky/unset/initial/inherit
取值：
1、static：默认值，无特殊定位，对象遵循HTML原则；
2、relative ：相对定位
依据 right:; top:; left:; bottom:;
等属性在正常文档流中偏移位置
(相对自己原来的位置偏移)。
absolute：绝对定位，将对象从文档流中拖离出来，
使用left/right/top/bottom等属性相
对其最接近的一个并有定位设置的父元
素进行绝对定位；如果不存在这样的父对象，
则依据html(根元素)，而其层叠通过z-index属性
定义；
包含块是绝对定位的基础，包含块就是为决对定位元素提供坐标，偏移和显示范围的参照物；
1、父元素上面没有定位属性，根据html进行位置移动
2、父元素上有定位属性，找最近的一个含有定位属性的父元素进行位置的移动
定义元素为包含块：
给绝对定位元素的父元素添加声明position：relative；
绝对定位和相对定位的区别
1、参照物不同绝对定位的参照物是包含块，相对定位的参照物是元素本身位置；
2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，
元素仍然占据原来的空间
fixed：固定定位
对象定位遵从绝对定位方式（absolute）；
但是要遵守一些规范
只能根据浏览器的窗口（html）来定义自己的位置。
sticky(粘性定位)有以下几个特点：
1、该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
2、当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定
在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达
距离相对定位的元素顶部50px的位置时固定，不再向上移动。
3、元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素
，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素
的偏移量
z-index : auto | number
检索或设置对象的层叠顺序。
auto：默认值。遵从其父对象
number:无单位的整数值。可为负数
说明：
1）较大 number 值的对象会覆盖在较小
number 值的对象之上。如两个绝对定位对
象的此属性具有同样的 number 值，那么将
依据它们在HTML文档中声明的顺序层叠。
此属性仅仅作用于 position 属性值为 relative 或 absolute,fixed 的对象。
透明属性
opacity:value;(value的取值范围0-1,0.1,0.2,0.3-----0.9)
高度 塌陷解决方式
after{content:“.”
; display:block; clear:both; height:0;
overflow:hidden; visibility:hidden ; }
元素类型
HTML元素被分为两种类型:块状元素，内联元素
块状元素（block element）
1、块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域
2、默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列。
3、块状元素都可以定义自己的宽度和高度。
4、块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子。
常见的块状元素有：div ul li h1-h6 p ol
常见的块状元素有：
div -最常用的块级元素
dl - 和dt-dd 搭配使用的块级元素
form - 交互表单
h1 -h6- 大标题
hr - 水平分隔线
ol – 有序列表
p - 段落
ul - 无序列表
li
fieldset - 表单字段集
colgroup-col - 表单列分组元素
table-tr-td 表格及行-单元格
内联、行内元素（inline element）
1、内联元素的表现形式是始终以行内逐个进行显示
2、内联元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状
3、内联元素也会遵循盒模型基本规则，如可以定义padding,border,margin,background等属性，但个别属性不能正确显示;(padding-top:;margin-top/bottom:
常见的内联元素有：a br strong em span
常见的内联元素有：
a –超链接（锚点） b - 粗体(不推荐)
br - 换行 i - 斜体
em - 强调 input - 输入框
img - 图片
label - 表单标签
span - 常用内联容器，定义文本内区块
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
u - 下划线
select - 项目选择
元素类型的转换
盒子模型可通过display属性来改变默认的显示类型
1）display属性与属性值 (18个属性值)
属性值：block/inline/inline-block/none/list-item/table-header-group/table-footer-group…
作用：该属性设置或检索对象元素应该生成的盒模型的类型
css层叠：
css层叠指的是样式的优先级，当产生冲突时以优先级高的为准。
五大浏览器内核
浏览器最关键的部分就是它的渲染引擎（Rendering Engine），也
就是大家平常所说的的“内核”。
Trident /(MSHTML) （三叉戟；三叉线；三齿鱼叉） IE
Gecko （壁虎） 火狐
Presto （ 迅速的） Opera
Webkit （Safari内核,Chrome内核原型,它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核）
Blink (由Google和Opera Software开发的浏览器排版引擎)
浏览器内核代表作品
*Trident:IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器
代表作品IE,因为IE捆绑在Windows中，所以占有极高的市场份额，又称IE内核是MSHTML，此内核只能应用于windows平台，且是不开源的。
*Gecko：代表作品Mozilla Firefox 是开源的,它的最大优势是跨平台，能在Microsoft Windows、Linux和MacOS X等主要操作系统上运行。
*Webkit :代表作品Safari、Chrome ， 是一个开源项目。
*Presto :代表作品Opera ，Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎。
*Blink ：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。