2019-08-17 HTMl 5 开始

1.1新标签

header :头部标签

nav：导航标签

article：内容标签

section：块级标签

aside：侧边栏标签

footer:尾部标签

注意：

1.这种语义化标准主要是针对搜索引擎的

2.这些新标签页面中是可以使用多次的

3.在IE9中 需要把这些元素转换为块级元素

4.其实我们移动端更喜欢使用这些标签

---

1.2新媒体标签

音频： audio (ogg,mp3)

autoplay谷歌浏览器禁用

loop:无限循环

因为不同浏览器支持不同音频格式 所以我们准备多个格式

    

    
    
    您的浏览器不支持audio标签。

视频： video

controls: 播放控件

    

    

     您的浏览器不支持video标签。

    自动播放  静音播放  muted

---

1.4 表单新属性

type = "email" 可以验证输入内容是否符合邮箱格式

type = "url" 可以验证输入内容是否符合网址格式

type = "data" 带有日期控件

type = "time" 时间

type = "month" 月份

type = "week" 周

type = "number" 数字

type = "tel" 手机号码

type = "week" 周

type = "search" 搜索框

type = "color" 颜色控件

required：表单拥有该属性表示其内容不能为空 必填

placeholder： 提示文字/占位符

autofocus：自动聚焦属性

autocomplete ：（值： on/off）当用户在字段开始输入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项，默认已经打开，需要放在表单内同时加上name睡醒 同时成功提交

multiple：可以多选文件提交

---

2 css3

---

2.1 css3属性选择器

鼠标样式：小手 ---- cursor：pointer

属性能够选择器使用方法:

元素[属性名]{

}

属性选择器的权重要比标签选择器高

类选择器，属性选择器，伪类选择器，权重为10

input[type = submit]{
type = submit的
}

div[class^="icon"]{
class属性以icon开头的
}
div[class$="icon"]{
以icon结尾的
}
div[class*="icon"]{
包含"icon"的
}

---

2.2 css3 结构为类选择器

E:first-child ------------ 匹配父元素的第一个子元素

E:last-child ------------ 匹配父元素的最后一个子元素

E: nth-child(n) ------------- 匹配父元素的第n个子元素

E: nth-child(n) -------------- n可以是关键词 even 是偶数 odd 是奇数

E: nth-child(n) -------------- n可以是公式 从0开始计算

2n ： 偶数 2n + 1：奇数

E:first-of-type ------------- 指定类型的第一个

E:last-of-type ------------- 指定类型的第一个

E:nth-of-type(n) ------------- 指定类型的第一个

---

2.3 伪类选择器（常用）

E::before 在元素内部的前面插入内容

E::after 在元素内部的后面插入内容

注意：

1. 两者内部必须有属性：content

2. 两者会创建一个元素，行内元素

3 不是一个真正意义上的元素 dom里面看不到

4 伪元素选择器权重为1

字体图标

demo 里面的 @font-face复制一份到style里面 然后复制小方框

给元素指定字体图标

font-family:"icomoon"

---

3 css 3 2d转换

转换（transform） 可以实现元素的位移，旋转，缩放等效果

移动（translate）-----------transform:translate(x,y)
x y不能省略

transform : translateX/Y(100px)

优点：不会影响其他元素

可以做子元素在父元素水平垂直居中

子元素绝对定位 上 左值： 50%

然后translate的（X，Y）值偏移-50%

p{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

对行内标签没有效果

---

旋转

旋转（rotate）----------- transform:rotate(xdeg)

过渡写到本身上 谁做动画给谁加

xdeg度数

---

缩放（scale）

byebye