HTML5:
1.新增的语义化标签 :header nav aside footer
2.音频audio标签:语法 属性 浏览器的兼容性 加背景音乐
其基本语法:< audio controls="condtrols ">
<source src=有两种格式 要么是MP3格式要么是Ogg格式,因为存在浏览器兼容性的问题 ,只有用这种方法解决。
视频video标签 和音频标签解决浏览器的兼容性问题是一样的,其语法格式也是相同,视谷歌浏览器把自动播放这个功能禁止播放了,解决谷歌浏览器 是需要静音 加自动播放这样效果才能显示出来。
3. 新增的input表单标签
限制输入内容是的格式,
type="email" 限制用户输入必须为Email类型
type="url" 限制用户输入必须为URL类型
type="number" 限制用户输入必须为数字类型
type="tel" 手机号码
type="search" 搜索框
type="date" 限制用户输入必须为日期类型
这些基本常用的标签
input表单 属性
1.required =required表单拥有该属性表示其内容不能为空,必填
2.placeholder提示文本表单的提示信息,存在默认值将不显示autofocus=autofocus自动聚焦属性,页面加载完成自动聚焦到指定表单
3.autocompleteoff / on当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。 默认已经打开,如 autocomplete=”on “ 关闭 autocomplete =”off” -需要放在表单内同时加上name属性 -同时成功提交
4.multiple=multiple可以选中多个文件提交一次上传多个文件
4. CSS3
属性选择器
元素 [属性]
元素[属性和属性值比如 id="tel"]
元素[att^="val"] ^代表的是以val开头的属性值
元素[att$="val"] $代表的是以val结尾的属性值
结构伪类选择器
类选择器、属性选择器、伪类选择器,权重为 10
结构伪类选择器
:first-child
:last-child
:nth-child(n)
n可以是数字、单词、公式(从0开始计算)
不考虑元素的类型
指定父元素
:first-of-type
:last-of-type
:nth-of-type()
考虑元素的类型
伪元素选择器
::before
::after
content不能省略,可以设置为空
伪元素要注意的 :before和after 属于行内元素 在做页面的时候要转化
伪元素和标签选择器的权重都为1
5. 2D转换
转换 transform translate移动 旋转 rotate 缩放 scale
语法:
transform: translate(x,y); 或者分开写
transform: translateX(n);
transform: translateY(n);
2d移动一般和过度还有定位搭配使用
旋转 语法 transform:rotate (...deg)这个度数单位不能省略
转换中心 是transfom-origin 默认的是以中心点转换的 还有左上角 右上角等
一.移动translate 的步骤
1. 给元素添加 转换属性 transform
2. 属性值为移动 translate(x,y) 如 transform:translate(50px,50px);
3.rotate 旋转
2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转 注意deg这个单位度数不能省略。
4.2d缩放 scale
scale缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子
他的放大个缩小是以四周发散的一个过程。不像宽高 影响其他盒子。
语法 :
transform:scale(0.5) 缩小 小于1 都是缩小
transform:scale(2) 宽和高都放大了2倍 大于1是放大
中间是以逗号隔开的
综合写法 :
transform:translate()位移 rotate()旋转 scale()缩放 中间用空格隔开,其顺便不能变。
二.动画 animation
动画 可以设置变化的次数 甚至是无数次
1.语法步骤 :
/* 我们想页面一打开,一个盒子就从左边走到右边 */
/* 1. 定义动画 */
@keyframes move {
/* 开始状态 */
0% {
transform: translateX(0px);
}
/* 结束状态 */
100% {
transform: translateX(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 2. 调用(使用)动画 */
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
}
2.动画属性
规定动画 @keyframes
规定 @keyframes动画的名称 :animation-name
动画持续时间:animation-duration
动画的速度曲线 :animation-timing-function
1. linear: 匀速
2.ease: 慢-快-慢 默认值
3.ease-in: 慢-快
4.ease-out: 快-慢
5.ease-in-out: 慢-快-慢。
动画延迟时间 也就是何时开始 :animation-delay
动画循环方向:animation-direction
默认值normal 反向运动reverse 正反正alternate 反正反alternate-reverse
速度曲线细节
透视 perspective
3D呈现 transfrom-style
l控制子元素是否开启三维立体环境。。
ltransform-style: flat 子元素不开启3d立体空间 默认的
ltransform-style: preserve-3d; 子元素开启立体空间
l代码写给父级,但是影响的是子盒子
l这个属性很重要,后面必用 |
|