H5C3

h5新增语义化标签

• header头部标签
• nav导航标签
• article内容标签
• section块级标签
• aside侧边栏标签
• footer尾部标签

语义化标签注意事项

• 语义化标签主要针对搜索引擎
• 可以使用一次或者多次
• 在IE9浏览器中，需要把语义化标签都转换为块级元素
• 语义化标签，在移动端支持比较友好

h5音视频标签

• audio音频标签
• video视频标签

注意事项

audio

1、可以在不使用标签的情况下，也能够原声的支持音频格式文件的播放
2、目前只支持MP3、Wav、Ogg
3、参数

属性	属性值	描述
autoplay	autoplay	自动播放
controls	controls	播放控件
loop	loop	循环播放
src	url	音频url地址

4、不同浏览器支持的格式不同，解决方案如下

<audio controls>
	<source src="./media/future.mp3" type="audio/mpeg">
</audio>

video

1、目前只支持Ogg、MPEG4、WebM
2、参数

属性	属性值	描述
autoplay	autoplay	自动播放
controls	controls	播放控件
width	像素	视频宽度
height	像素	视频高度
loop	loop	循环播放
preload	auto（加载）/none（不加载）	规定是否预加载了视频（如果有了autoplay，就忽略该属性）
src	url	视频地址
poster	Imgurl	加载等待的画面图片
muted	muted	静音播放

3、代码示例

<!-- 谷歌浏览器禁用了自动播放功能，如果想自动播放，需要添加 muted 属性 -->
 <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
   <source src="./media/video.mp4" type="video/mp4">
   <source src="./media/video.ogg" type="video/ogg">
 </video>

4、注意事项

• 两个标签的使用方法基本一致
• 两者在浏览器中都存在兼容性问题
• chrome禁止了音视频标签的自动播放
• chrome中视频添加muted标签可以自动播放

input标签

属性值	说明
type=“email”	Email类型
type=“url”	Url类型
type=“date”	日期类型
type=“time”	时间类型
type=“month”	月类型
type=“week”	周类型
type="number"	数字类型
type="tel"	手机号码
type="search"	搜索框
type=“color”	生成一个颜色选择表单

表单属性

属性	属性值	说明
required	required	内容不能为空，必填
placeholder	提示文本（占位符）	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦
autocomplete	off/on	是否保留表单输入的历史记录，默认为on
multiple	multiple	可以多选文件提交

css3属性选择器

1、属性选择器

选择符	简介
E[attr]	选择具有attr属性的E元素
E[attr="val"]	选择具有attr属性且属性值等于val的E元素
E[attr^="val"]	选择具有attr属性且属性值以val开头的E元素
E[attr$="val"]	选择具有attr属性且属性值以val结尾的E元素
E[attr*="val"]	选择具有attr属性且属性值包含val的E元素

2、结构伪类选择器

选择器	简介
E:first-child	匹配父元素中第一个子元素E
E:last-child	匹配父元素中最后一个子元素E
E:nth-child(n)	匹配父元素中第n个子元素E
E:first-of-type	指定父元素中元素E的第一个
E:last-of-type	指定父元素中元素E的最后一个
E:nth-of-type(n)	指定父元素中元素E的第n个

nth-child先看第几个，再看元素；nth-of-type先看指定的元素，再看第几个

nth-child参数

• 本质上就是选中第几个元素
• n可以是数字、关键字、公式
• n如果是数字，就是选中第几个
• 常用的关键字为：even 偶数，odd 奇数
• 常见公式如下

公式	取值
2n	偶数
2n+1	奇数
5n	5、10、15、20、…
n+5	从第五个开始（包含第五个）到最后
-n+5	前五个（包含第5个）

伪元素选择器

选择符	简介
::before	在元素的前面插入内容
::after	在元素的后面插入内容

注意事项

• before与after必须有content属性
• before在内容前，after在内容后
• 创建的元素为一个行内元素
• 创建出来的元素在Dom中找不到，所以称之为伪元素
• 伪元素和标签选择器一样，权重为1

css3中的2D转换

转换

• 移动：translate（translate(10px,10px)）
• 旋转：rotate (rotate(90deg))
• 缩放：scale （scale(1.2)）

语法

• x为水平移动
• y为垂直移动

transform: translate(x, y);
transform: translateX(x);
transform: translateY(y);
------
transform: rotate(0deg)
------
transform: scale(1, 1)  /* 宽高都方法一倍，相当于没有放大 */
transform: scale(2, 2)  /* 宽高都放大两倍 */
transform: scale(2)  /* 如果只写一个参数，第二个参数就和第一个参数一致 */
transform: scale(0.5, 0.5)  /* 缩小 */
------
综合写法：
如果使用多个转换，其格式为transform: translate() rotate() scale()
transform: translate(200px, 0) rotate(360deg) scale(1.2)

• translate不影响其它元素的位置
• translate中的100%，是相对于元素自身宽度与高度来进行计算的
• 对行内标签无效

设置元素中心点

transform-origin: x y;

注意事项：

• xy需要用空格隔开
• xy默认旋转的中心点是元素的中心（50%，50%），等价与 center center
• xy可以设置为方位名词（top、bottom、left、right、center）

动画

基本使用

• 先定义动画
• 再调用定义好的动画

语法格式：

/* 定义动画 */
@keyframes 动画名称 {
	0% {
		width: 100px;
	}
	100% {
		width: 200px;
	}
}
/* 调用动画 */
div {
	animation-name: 动画名称;
	animation-duration: 持续时间;
}

动画序列

• 0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
• 在@keyframes中规定某项css样式，就由创建当前样式逐渐改为新样式的动画效果
• 动画是使元素从一个样式逐渐变化到另一个样式的效果，可以改变任意多的样式任意多的次数
• 用百分比来规定发生的时间，或者from和to，等同于0%到100%

常见属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animation-play-state属性
animation-name	动画名称（必须的）
animation-duration	规定订花完成一个周期所花费的时间（秒或者毫秒），默认是0（必须）
animation-timing-function	规定动画 的速度曲线，默认是"ease"
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1，还有ifinite
animation-direction	规定动画是否在下一周期逆向播放，默认是normal、alternate（逆播放）
animation-play-state	规定动画是否正在运行或暂停。默认是"running" 还有paused
animation-fill-mode	规定动画结束后状态，保持forwards回到起始backwards

代码示例

div {
    width: 100px;
    height: 100px;
    background-color: #8f5f5f;
    /* 动画名称 */
    animation-name: move;
    /* 动画花费时长 */
    animation-duration: 2s;
    /* 动画速度曲线 */
    animation-timing-function: ease-in-out;
    /* 动画等待多长时间执行 */
    animation-delay: 2s;
    /* 规定播放的次数  infinite：无线循环 */
    animation-iteration-count: infnite;
    /* 是否逆行播放 */
    animation-direction: alternate;
    /* 动画结束之后的状态 */
    animation-fill-mode: forwards;
}
div:hover {
    /* 规定动画是否暂停或者播放 */
    animation-play-state: paused;
}

动画简写方式

/* animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode

• 简写属性中不包含animation-play-state
• 暂定动画animation-play-state: paused 经常和鼠标经过配合使用
• 想要动画走回来，而不是直接调回来：animation-direction: alternate
• 盒子结束后，停在结束的位置：animation-fill-mode: forwards
  ####速度曲线细节
• animation-timing-function：规定动画的速度曲线，默认是ease

值	描述
linear	动画从头到尾的速度是相同的，匀速
ease	默认，动画以低俗开始，然后加快，在结束前变慢
ease-in	以低速开始
ease-out	以低速结束
ease-in-out	以低速开始和结束
steps()	制定了时间函数中的间隔数量（步长）

css3D转换

特点

• 近大远小
• 物体和面遮挡不可见

三维坐标

• x轴：水平向右（右边为正值，左边为负值）
• y轴：垂直向下（下边为正值，上边为负值）
• x轴：垂直屏幕（往外边是正值，往里面是负值）

转换

• 3D位移：transform: translate3d(x, y, z)
• 3D旋转：transform: rotate3d(x, y, z)
• 透视：perspective
• 3D呈现：transform-style

写法

• 3D 移动就是在 2D 移动的基础上多加了一个可以移动的方向，就是 z 轴方向
• transform: translateX(100px)：仅仅是在 x 轴上移动
• transform: translateY(100px)：仅仅是在 y 轴上移动
• transform: translateZ(100px)：仅仅是在 z 轴上移动
• transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离
• 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充

transform: translate3d(100px, 100px, 100px);
值不能省略，不需要需要填写0

透视

简介

• 如果想要网页产生 3D 效果需要透视(理解成 3D 物体投影的 2D 平面上)
• 实际上模仿人类的视觉位置，可视为安排一直眼睛去看
• 透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离
• 距离视觉点越近的在电脑平面成像越大，越远成像越小
• 透视的单位是像素

写法

body {
	perspective: 1000px
}

1、translateZ与perspective的区别

• perspecitve 给父级进行设置，translateZ 给 子元素进行设置不同的大小

3D旋转

写法

• transform: rotateX(45deg) – 沿着 x 轴正方向旋转 45 度
• transform: rotateY(45deg) – 沿着 y 轴正方向旋转 45 度
• transform: rotateZ(45deg) – 沿着 z 轴正方向旋转 45 度
• transform: rotate3d(x, y, z, 45deg) – 沿着自定义轴旋转 45 deg 为角度

3D呈现：transform-style

• 控制子元素是否开启三位立体环境
• transform-style:flat子元素不开启3D立体空间（默认）
• transform-style:preserve-3d 子元素开启立体空间
• 代码写给父级，但影响的是子盒子

浏览器私有前缀

• -moz-：代表Firefox浏览器的私有属性
• -ms-：代表ie浏览器的私有属性
• -webkit-：代表safari、chrome私有属性
• -o-：代表Opera私有属性
  代码示例：

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;