H5+CSS3进阶

一 HTML5简介

1.1 什么是HTML5？

• 是一个新版本的 HTML 语言，定义了新的标签、特性和属性
• 拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5

1.2 使用情况

绝对多数新的属性，都已经被浏览器所支持，最新版本的浏览器已经开始陆续支持最新的特性

二 H5新增标签

2.1 语义化标签

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

注意：

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

2.2 多媒体标签

（1）音频标签audio

注意：

• 在 chrome 浏览器中已经禁用了 autoplay 属性
• 不同浏览器支持不同的格式，所以我们采取的方案是这个音频准备多个文件

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

（2）视频标签video

<!-- 谷歌把自动播放禁用了，解决方案：添加muted静音 -->
<video src="media/video.mp4" controls="controls" muted="muted"></video>

<!-- 浏览器兼容问题解决方案 -->
<video autoplay="autoplay" muted="muted" loop="loop">
        <source src="media/video.mp4" type="video/mp4">
        <source src="media/video.ogg" type="video/ogg">
    </video>

2.3 新增 input 标签

2.4 新增表单属性

三 CSS3相关新增

3.1 CSS3属性选择器

button {
    cursor: pointer;
}
/* 属性选择器 */
button[disabled] {
    cursor: default;
}
input[type="search"] {
    color: red;
}
/* 选择以icon开头的 */
div[class^="icon"] {
    width: 100px;
    height: 100px;
    background-color: pink;
    margin: 10px;
}
/* 选择以abc结尾的 */
div[class$="abc"] {
    width: 150px;
    height: 150px;
    background-color: blue;
}
/* 选择包含abw的 */
div[class*="abw"] {
    width: 200px;
    height: 200px;
    background-color: green;
}

<button>按钮</button>
<button>按钮</button>
<button disabled="disabled">按钮</button>

<input type="text" value="文本框">
<input type="search" name="" id="" value="搜索框">

<div class="icon1">1</div>
<div class="icon2">2</div>
<div class="icon3">3</div>
<div class="123abc">4</div>
<div class="12abwe">5</div>

3.2 结构伪类选择器

ul li:first-child {
    color: red;
}
ul li:last-child {
    color: aqua;
}
ul :nth-child(4) {
   background-color: green;
}
/* 偶数 */
ul li:nth-child(even) {
    background-color: pink;
}
/* 奇数 */
ul li:nth-child(odd) {
    background-color: #666;
}
/* 第三个以后 */
ul li:nth-child(n+3) {
    background-color: #ccc;
}
/* 前三个 */
ul li:nth-child(3-n) {
    background-color: #333;
}

注意：

• nth-child 选择父元素里面的第几个子元素，不管是第几个类型
• nt-of-type 选择指定类型的元素

3.3 伪元素选择器（重要）

div::before {
    content: "hello";
    display: block;
    width: 100px;
    height: 100px;
    background-color: pink;
}
div::after {
    content: "Echo";
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: purple;
}

注意：

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

四 2D转换

4.1 移动translate

x 就是 x 轴上水平移动
y 就是 y 轴上水平移动

transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)

注意：

• 2D的移动主要是指水平、垂直方向上的移动
• translate 最大的优点就是不影响其他元素的位置
• translate 中的100%单位，是相对于本身的宽度和高度来进行计算的
• 行内标签没有效果

4.2 旋转rotate

2D旋转指的是让元素在二维平面内顺时针或者逆时针旋转

/* 角度为正时，顺时针，角度为负时，逆时针 */
img:hover {
  transform: rotate(360deg)
}

设置元素旋转中心点(transform-origin)

transform-origin: x y;

注意：

• 参数 x 和 y 用空格隔开
• x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center
• 还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center)

4.3 缩放scale

用来控制元素的放大与缩小

transform: scale(x, y)

注意：

• x 与 y 之间使用逗号进行分隔
• transform: scale(1, 1): 相当于没有放大
• transform: scale(2, 2): 宽和高都放大了二倍
• transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致
• transform:scale(0.5, 0.5): 缩小
• scale 最大的优势：缩放后，不影响其他盒子

4.3 2D转换综合写法

transform: translate(200px, 0) rotate(360deg) scale(1.2)

• 同时使用多个转换，其格式为 transform: translate() rotate() scale()
• 顺序会影响到转换的效果(先旋转会改变坐标轴方向)
• 但我们同时有位置或者其他属性的时候，要将位移放到最前面

五 动画（animation）

5.1 动画的使用步骤

（1）定义动画

@keyframes 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px
    }
}

（2）使用动画

div {
	/* 调用动画 */
    animation-name: 动画名称;
 	/* 持续时间 */
 	animation-duration: 持续时间；
}

5.2 动画常见属性

速度曲线属性值：

5.3 动画简写方式

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

注意：

• 简写属性里面不包含 animation-paly-state
• 暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用
• 要想动画走回来，而不是直接调回来：animation-direction: alternate
• 盒子动画结束后，停在结束位置：animation-fill-mode: forwards

六 3D转换

6.1 坐标轴

• x 轴：水平向右 – 注意：x 轴右边是正值，左边是负值
• y 轴：垂直向下 – 注意：y 轴下面是正值，上面是负值
• z 轴：垂直屏幕 – 注意：往外边的是正值，往里面的是负值

6.2 3D移动translate3d

• transform: translateX(100px)：仅仅是在 x 轴上移动
• transform: translateY(100px)：仅仅是在 y 轴上移动
• transform: translateZ(100px)：仅仅是在 z 轴上移动
• transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离

6.3 透视perspective

body {
  perspective: 500px;
}

注意：

• 透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离，距离视觉点越近的在电脑平面成像越大，越远成像越小
• 透视需要写在被视察元素的父盒子上面

6.4 3D旋转rotate

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

6.5 3D呈现transform-style（重要）

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