一、HTML
1、浏览器内核又可以分成两部分： 渲染引擎（layout engineer）和 JS引擎（rendering engine）
后来的JS的发展独立出来，
常用5大浏览器 分别是：IE（edge）、Chrome、Firefox、Safari、opera。
浏览器内核有那些？ 分别被使用在那些浏览器？
Trident（IE）
国内很多双核浏览器其中一核就是trident，美其名曰：兼容模式。
window10发布后，将其内置浏览器命名为edge，Edge最显著的特点就是新内核EdgeHTML。
Gecko（Firefox）
火狐浏览器使用的内核就是gecko，gecko特点就是代码完全公开，开发度很高，前世界程序员都可以为其编写代码，增加功能。缺点跟新频繁导致后面没落。
webkit（safari）
safari是苹果公司的浏览器，使用的是大名鼎鼎如雷贯耳的webkit内核，但是很多人错误把webkit叫做
Chrome内核（即使Chrome内核换成了blink），
Chromeium/Blink（Chrome）
2013年4月3日，Chrome和webkit闹掰了，Chromeuin项目研发blink渲染引擎（浏览器内核），内置于Chrome浏览器中，其实blink是webkit分支
presto（Opera）
presto是Opera之前使用的内核，当Chrome出了新的blink内核，抛弃了旧爱presto。
2、web标准构成
web标准不是某一个标准，是由W3C组织制定一系列的标准化集合。主要包括：结构（structure）、表现（presentation）、行为（behavior）三方面。
结构标准：用户网页元素结构整理和分类，XML XHTML
样式标准：用户设置网页元素的字体颜色尺寸大小的外观样式，CSS
行为标准： 行为是网络模型的定义及交互编写，主要包括DOM和ECMAScript两部分
<!doctype> 看到这个表示用的html5 的文档。
<meta charset="utf-8"> utf-8是用常用的字符集编码方式
3、html标签语义化， 所谓语义化就是标签的含义。
为什么语义化呢？
1》为了方便代码的阅读和维护
2》同时让浏览器和网络爬虫可以跟好的解析，从而分析内容。
3》使用语义化标签会具有更好的的搜索引擎优化
标签为<div></div>闭合标签 、<img/>单标签
标题标签（6个）H1～H6，
段落标签：<p></p>，
水平线标<hr/>，
换行标签<br/>，
图像标签<img>,
链接标签<a>
base标签（head标签里面统一跳转target属性），
无序列表标签（两个组成）ul > li ，
有序列表标签（两个组成）ol > li，
自定义列表（三个组成）dl>dt>dd
div span 没有语义化，是页面布局只要的的两个盒子，
文本格式化标签：
（1）b、strong 文字加粗方式显示，推荐用strong
（2）i、em文字以斜体方式显示，推荐用em
（3）s、del文字以删除线方式显示， 推荐使用del
（4）u、ins文字以下划线的方式显示，建议用ins，
特殊自负标签（）代替代码
空格  
< 小于号 <
> 小于号 >
& 和号 &
¥ 人民币 ¥
©️ 版权号 ©
®️ 注册商标 ®
。摄氏度 °
正负号 ±
✖️ 乘号 ×
➗ 除号 ÷
平方号 ²
立方号 ³
-中线号&mdash
二、CSS
什么是css（cascading style sheets）的缩写，翻译为‘层叠样式表’或者‘级联样式表’，简称“样式表”
CSS作用：主要是给html页面设置外观或者样式。
CSS与语法规范
#divId{width: 100px} ，css由选择器 和声明组成声明, 声明为大括号每一条语句，每条语句里由属性：值组成
#divId 》选择器 ，{}内的每一条语句句》声明， width》属性，100PX》值。
CSS书写方式
有三种： 行内式、嵌入式，外链式。
行内式：将CSS代码写入html中标签的style属性中。（style是个通用属性）
嵌入式：通过html中的<style></style>标签将CSS 代码嵌入到html网页 中，
外链样：以》.css为扩展名的文件通过<head>标签中<link>标签将文件引入，链接到到html文件（Css文件不能单独运用）
代码实例： <link rel="stylesheet" href="./src/style.css">
css总结：
（1） 使用嵌入式书写方式的代码，它只能作用于当前的html文件
（2） 使用外链式书写方式的代码，它可作用于多个html文件
（3） 使用行内式书写方式的代码，它只能当前标签元素的样式。
1、选择器
什么是选择器，通过制定的语法规则选取对应的html标记，然后给对应的htm标记设置样式。
选择器分为四大类：基本选择器，复合选择器，伪类选择器，属性选择器。
选择器：*通用选择器，标签选择器，.class选择器，#id选择器
1》复合选择器
多元素选择器：同时选择多个选择器，选择器之间用逗号分开。#id1,#id2,.class1
后代元素选择器：匹配所有e元素的后代元素f，e和f之前空格，#parent #child
子元素选择器：e匹配所有子元素f, e>f ， #parent>#child
相邻元素选择器：匹配所有紧随e元素的所有同级兄弟 #parent+#brother
2》伪类元素选择器
伪类选择器是用来给超链接的不同状态设置样式
:link(向未被访问的链接添加样式)
:visited(向已被访问的链接添加样式)
:hover(当鼠标悬停在元素上方时，向元素添加样式)
:active(鼠标放在元素上面时，点击的一瞬间)
3》属性选择器
匹配元素中带有[属性名]设置元素的样式。
[属性名]{声明语句，声明语句}
[属性名=值]{声明语句}
[属性名^=值]{声明语句}（^开头属性什么的匹配）
[属性名$=值]{声明语句}（$结尾属性等于什么的匹配）
[属性名*=值]{声明语句}（^开头属性匹配）
（1）选择器优先级分类都有对应的值大小排序，行内样式用1000，ID：100，class：10，e:1,值被称为权重值。
行内样式》ID选择器》class选择器》标签选择器
（2）!important属性
important在英文里是重要的意思，在CSS里它主要是提升权重值的，权重值无限大。
important提升了属性的权重并没有提升选择器的优先级。它不能提升继承过来的属性权重。
一个标签内可以携带多个选择器类名，一个标签内多个类名内的属性样式冲突，css代码标准谁在后面就一谁为标准。
2、属性
尺寸属性：height、width （auto，px, %）
文本与字体属性：
// 文本属性
color[文本颜色]（#FF0000，red，rgb(2,3,4)）、
text-align[水平对齐方向](left、right、center)、
text-decoration[文本修饰线]（none，underline下划线，overline上划线，line-through删除线）
text-transform[大小写转换首字母大字]（capitalize 首字母大写，uppercase全部大写，lowercase全部小写）
line-height[行高]（固定值或百分比）
text-indent[首行缩进,允许负数]（px , em）
letter-spacing[字符间距]（px）
word-spacing[单词间距]（px）
//字体属性
font-style（normal正常，italic斜体）
font-weight（normal，bold粗细）
font-size（px单位大小）
font-family（雅黑，宋体。。。）
font（以上值对应属性，一定要按顺序）
// 列表属性， 这里的列表指的是有序列表和无序列表
list-style-type【列表前项目符号类型】（none，disc实心圆，square实心小方块，circle空心圆）
list-style-position【列表项标记的放置位置】（inside在里面，outside在外面）
list-style-image【图像设置为列表项标记】（URL路径）
list（在一个声明中所有列表属性）
//样式继承性
并不是所有样式都能够被继承，只有文本和字体样式属性可以被继承。其他的样式属性都不可以被继承。
// 背景样式属性
background-color[背景色]（#ff0000，red，rgba(1，2，3，0.5)）
background-image[背景图像]（url（图像路径和名称））
background-repeat[背景图是否重复]（repeat，repeat-x，repeat-y，no-repeat）
background-position[背景图像水平位置和垂直位置]（center或x%【left,center,right】，y%【top,center,bottom】，或xpos，ypos ）
background-attachment[设置背景图像是否固定或随着页面的其余部分滚动]（scroll滚动,fixed固定）
background[简写，综合属性值]（）
// display 显示，
它用来进行块级元素和行内元素的切换，显示与隐藏这两属性一般都是JS上用。
inline、block、none、flex、inline-block inline-flex，table，
3、文档流
1》标准文档流：html文档是从上到下，从左到右的标准。
4、浮动
说浮动之前，块元素和行元素没有在上面的笔记里提到。
元素分为：块级元素和行内元素，以及行内块元素
块级元素的特性：可以设置宽高。
行内元素的特性：让多个元素排在一行展示。
想要元素们既有块级元素的特点也有行内元素的特点，使用浮动脱离文档流可以实现。
float（left，right）浮动属性两个属性值。
1》float特点：
（1）浮动脱离标准文档流，它不占用空间。（就像云或者其他悬空漂浮物不占地面面积）
（2）浮动元素它的层级要比标准文档流的层级高。它会将标准文档流的元素给压住。
2》清除浮动
注意只要有浮动，那么必须有清除浮动，因为经过浮动的元素，它影响了下面的元素排版，它浮动脱离父元素不被包裹。
只要清除浮动，他不会影响后面的元素排版，浮动元素的父元素会将浮动元素从视觉上包裹。
清除浮动有三种方法
∆给浮动元素设置一个固定高。（给父元素高的撑内容）
∆使用清除浮动的样式属性clear。（浮动元素添加高度，给最后一个浮动元素的下面新建一个div添加属性clear：both）
∆使用overflow：hidden这个属性来清除浮动。（overflow用来将溢出部分隐藏，也可以清除浮动。给浮动的父元素添加属性值，overflow：hidden）；
5、盒子模型
在CSS盒子的组成部分？
内容（content）+内填充（padding）+边框（border）+外边距（margin）
一个盒子的主要属性：width height padding border margin
padding和margin，四个方向属性，上下左右（top,right,bottom,left），简写属性顺时针。
margin 塌陷现象
盒子之间相邻的盒子margin不会重叠，取较大的值为准。
margin居中，值0 auto；
margin是用来描述兄弟元素之间的关系，不是用来描述父子之间的关系，父子之间父元素使用padding。（给父元素加border可以实现子元素的margin，但是不推荐。希望规范使用给父元素的padding属性）
border的属性三要素：粗细、线性、颜色；不写有默认属性值。
线性：dotted点、 dashed虚、solid实、double双，groove凹、ridge凸、inset内、outset外
6、 position 位置
它主要是用于实现 对元素的定位。
fixed固定定位、relative相对定位、absolute绝对定位 （使用属性一定要配合坐标方向使用，上右下左）
fixed：它是相对于浏览器窗口来进行定位，不管如何滚动，固定定位元素显示位置不变。（固定定位它的特点：脱离标准文档流；层级比标准文档流的层级高，会压在标准文档流元素上方；它不占用空间；他不会随着浏览器滚动而滚动）
relative：相对定位他是相对于‘自己原来的位置’来进行定位。（他没有脱离标准文档流；如果没有设定位置它还在原来位置；设定位置后，相对原来的位置移动，原位置会保留一个坑占位；它会将标准文档的元素压盖住；坐标方向可以是负数；）
absolute：绝对定位元素根据‘祖先元素’来进行定位。它会先查询父元素是否有定位属性，如果有根据父元素定位，如果没有则会想父元素的父级询问查找定位属性，如果祖先元素都没有设置定位属性，它就会相对于浏览器窗口来进行定位。《绝对定位元素使用配合父元素的相对定位元素位置进行定位》（它脱离文档流；不占用空间；它会压盖标准文档流元素）
7、z-index 层级覆盖数值大小决定
只有定位元素才有z-index值，固定定位，相对定位，绝对定位的元素才会拥有z-index；
z-index 没有单位，值是一个整数，默认从0开始；（可以是负数）；
8、CSS3新增
结构伪类
E：first-child 匹配第一个孩子
E：last-child 匹配最后一个孩子
E：nth-child(n) 匹配第n个孩子
E：only-child(n) 匹配第n个孩子
E：nth-child(2n) 或者 nth-child(even)匹配偶数 2、4、6
E：nth-child(2n+1) 或者 nth-child(odd)匹配奇数 3、5、7
9、table
table属性(border-collapse 表哥边框)
// 伪元素
:first-letter （操作当前元素的第一个字）
:first-line（操作当前元素的第一行）
::before（在之前插入，在一个盒子内部前面）
::after（再之后插入，在一个盒子内部后面）
// 文本阴影
text-shadow 有四个值（水平阴影、垂直阴影、模糊距离、阴影颜色）可以有对组值，用逗号隔开
h-shadow（水平阴影【必须】可负值；正值阴影在右边，负值在左边 ）
v-shadow（垂直阴影 【必须】可负值 ；正值阴影在下边，负值在上边 ）
blur（【可选】模糊距离；值越大越模糊）
color（阴影颜色，参考颜色值）
// 盒子阴影
box-shadow （水平方向阴影、垂直方向阴影、模糊距离、阴影尺寸、阴影颜色、内/外阴影）水平阴影和垂直阴影必写，其他可以忽略。
box-shadow: h-shadow v-shadow blur spread color inset
spread（阴影尺寸）inset（可将外部阴影改为内部阴影）
//圆角矩形
border-radius （盒子的四个角）值单位px %
// 透明度 《只要是颜色都可以透明度》
将颜色的值设置rgba()就可以了。a就是透明度；
可以将文本设置透明度；背景颜色设置透明度；边框颜色可以设置透明度
10、H5新特性
1》audio音频（在H5中提供了播放音频文件的标准，controls控制器 属性提供播放、暂停、音量、循环等控件）
[标签]
<audio>（定义声音） <source>规定媒体资源可以是多个。
2》video视频（在H5中提供了展示视频的标准，controls控制器 属性提供播放、暂停、音量、循环等控件）
[标签]
<audio>（定义视频） <source>规定多媒体资源可以是多个。
[属性]
width 和height（视频可以定义宽高）
3》拖放
拖放是一种常见的现象，抓取一个对象后拖到另一个地方。
浏览器支持IE9、Firefox、Chrome、Safari5以上版本。
draggable="true" 设置为可拖动
ondragstart // 开始拖动
setData() // 设置数据
getData() // 数据获取（先设置数据后才能获取到数据）
ondragover
ondrop
4》canvas 画布
承载图形的画布是一个矩形区域，可以控制里面每一个像素；
canvas拥有多种绘制路径、矩形、圆形、字符、以及添加图像的方法。
获取画布的ID，
var cxt = canvasId.getContext('2d');
cxt.fillStyle = '#ff0';
cxt.fillRect(0,0,100,100)
cxt.beginPath()
cxt.arc(80,80,100,90,Math.PI*2,true);
cxt.closePath();
cxt.fill()
cxt.drawImage(url,x坐标，y坐标)
var image = new Image();
image.onload = function(){
cxt.drawImage(image，0，0)
}
image.src='url/img.png
5》SVG 矢量图
svg是指可伸缩矢量图形（scalable vector graphics）
新建svg.svg文件，（H5：svg元素参考文档矢量图想用那个形状负值那个代码）
使用iframe引入svg,svg文件
6》H5地理定位
geolocation API用于获取用户的地理定位。
IE9+（含），Firefox、Chrome、Safari浏览器支持（对于拥有GPS设备的定位更精准）
以上图片实例仅参考。
7》WEB存储
H5提供了两种在客户端存储数据的新方法
localStorage， 没有时间限制的数据存储
sessionStorage， 针对一个session进行数据存储，当用户关闭当前浏览器窗口，数据会被删除
之前的存储都是由cookie完成的，但是cookie不适合大量数据存储，因为它们由每个对服务器的请求传递，这是的cookie速度慢，效率不高。
《回顾补充《CSS3新书性》》
3新边框属性border-radius border-shadow
3新背景属性background-size background-origin
3新文本属性text-shadow word-warp
8》2D效果 transform()
translate() // 移动 px %
rotate() // 旋转 度数deg
scale() // 缩放 倍数em
skew() // 倾斜 度数deg
matrix()
// 3D retate(Z,X,Y)三轴
9》过渡transition
transition： 指定的属性 变化的时间
10》动画 animation
animation： 动画名称 时间；
// Safari 浏览器 加前缀 -webkit-animation
@keyframes 动画名称 {from {阶段代码} to{阶段代码} } （0%～100%）
// 加前缀 @-webkit-keyframes
至少有这两个项动画属性；规定动画的名称 和 规定动画的时长
11》多列布局
column-count // 像报纸一样（数值）分为几列
column-gap //列之间的间距
column-rule // 列之间中间线或分隔线
标签：css3,定位,浏览器,标签,元素,html5,选择器,属性 From： https://www.cnblogs.com/qfy0411/p/13973102.html