一. HTML5新增标签
1. HTML5新增语义化标签
❶. header 头部标签
❷. nav 导航标签
❸. avticle 内容标签
❹. section 定义文档区域标签
❺. aside 侧边栏标签
❻. footer 尾部标签
注意:
Ⅰ. 这种语义化标准主要针对搜索引擎
Ⅱ. 这些新标签可以在页面使用多次
Ⅲ. 在IE9中 需要把这些元素转换为块级元素
Ⅳ. 适用于移动端
2. HTML5新增input类型(type)
❶. email 邮箱类型
❷. url 网址类型
❸. date 日期类型
❹. time 时间类型
❺. month 月份类型
❻. week 周类型
❼. color 颜色选择表单
❽. search 搜索框
❾. number 数字类型
❿. tel 手机电话类型
3. HTML5新增表单属性
❶. placeholder 提示文本
❷. multiple 多选文件提交
❸. required 内容不能为空 必填
❹. autofocus 光标自动聚焦
4. HTML5新增视频音频标签
❶. video 视频标签
当前 video 元素支持三种视频格式: MP4 WebM Ogg
语法: < video src = "文件地址" > < / video >
属性:
Ⅰ. src 地址
Ⅱ. width 宽
Ⅲ. height 高
Ⅳ. autoplay 视频自动播放(谷歌浏览器要添加muted)
Ⅴ. muthed 静音播放
Ⅵ. controls 播放控件
Ⅶ. loop 循环播放
Ⅷ. poster = ' lmgurl ' 加载等待图片
❷. audio 音频标签
当前 audio 元素支持三种视频格式: MP3 Wav Ogg
语法: < audio src = "文件地址" > < / audio >
属性:
Ⅰ. src 地址
Ⅱ. width 宽
Ⅲ. height 高
Ⅳ. autoplay 视频自动播放
Ⅴ. muthed 静音播放
Ⅵ. controls 播放控件
Ⅶ. loop 循环播放
二. Css3新增选择器
1. 属性选择器 用[ ]表示
属性选择器可以根据元素特定属性来选择元素
选择符:
❶. 元素 [ 属性 ] 选择特定属性来选择元素
❷. 元素 [ 属性 = '值' ] 选择属性 = 值 来选择元素
❸. 元素 [ 属性 ^ = '值' ] 选择属性值开头相同的来选择元素
❹. 元素 [ 属性 $ = '值' ] 选择属性值结尾相同的来选择元素
❺. 元素 [ 属性 * = '值' ] 选择属性值中包含这个值的元素
注意: 属性选择器 类选择器 伪类选择器 权重都10
2. 结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素 常用于父元素里的子元素
选择符:
❶. 元素 :first - child 选择父元素第一个子元素
❷. 元素 :flast - child 选择父元素最后一个子元素
❸. 元素 :nth - child(n) 选择父元素任意一个元素
注意: nth - child(n) 里的n可以是数字 关键字和公式
Ⅰ. n为数字: 表示选择第几个子元素 里面数字从1开始
Ⅱ. n为关键字:
ⅰ. even 偶数
ⅱ. odd 奇数
Ⅲ. n为公式: 如果n是公式 则从0开始计算 第0个元素或超出的元素会被忽略
ⅰ. 2n 偶数
ⅱ. 2n + 1 奇数
ⅲ. 5n 5的倍数
ⅳ. n + 5 从第5个开始(包含第5个)到最后
ⅴ. - n + 5 从第5个向前数(包含第5个)
❹. 元素 :fist - of - type 指定类型元素的第一个
❺. 元素 :last - of - type 指定类型元素的最后一个
❻. 元素 :nth - of - type(n) 指定类型元素的第n个
❼. nth - child(n) 和 nth - of - type(n) 的区别:
Ⅰ. nth - child(n) 对父元素里所有的子元素排序选择
Ⅱ. nth - of - type(n) 对父元素里指定的子元素排序选择
3. 伪元素选择器 ::表示
伪元素可以利用Css创建新的标签元素 从而简化HTML代码
选择符:
❶. ::before 在元素内部内容前面插入内容
❷. ::after 在元素内部内容后面插入内容
语法: 元素 ::before{ }
注意:
Ⅰ. before 和 after 创建的元素属于行内元素
Ⅱ. 新创建的元素在结构里找不到 所以称为伪元素
Ⅲ. before 和 after 必须有content 属性
Ⅳ. 伪元素选择器和标签选择一样 权重为1
三. Css3盒子模型
Css3中通过 box - sizing 属性来指定盒子模型 有2个值:
1. content - box 盒子大小为 width + border + padding (会撑大盒子)
2. border - box 盒子大小为 border(不会撑大盒子 前提是pdding和border不会超过width宽)
四. Css图片模糊处理
图片模糊可以使用 filter 属性将模糊效果添加到元素上
语法: filter :blur();
注意: blur(); 模糊处理 括号里的数组越大越模糊
五. calc 函数
calc 函数可以在声明Css属性是执行一些计算
如: 要求子盒子永远比父盒子小30px
width : calc (100% - 30px);
注意: 括号里可以使用 + - * / 计算
六. Css过渡 transition
过渡: 元素从一种状态渐渐过渡到另一种状态 经常和 :hover 搭配使用
注意: 谁过渡就给谁加
语法: transition : 要过渡的属性 花费时间 运动曲线 何时开始;
1. 要过渡的属性:
想要变化的Css属性 宽 高 背景颜色 内外边距都可以 如要全部属性过渡 写all即可
2. 花费时间: 单位秒
3. 运动曲线: 默认ease
4. 何时开始: 单位秒 可设置延迟触发时间
