2020 July 28 HTML与CSS

CSS第十篇：HTML5与CSS3

HTML5

HTML5简介

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。用于取代HTML4与 XHTML的新一代标准版本，所以叫HTML5。
XHTML 可扩展超文本标记语言
1. XHTML是一种增强了的HTML，它的可扩展性和灵活
2. 性将适应未来网络应用更多的需求
HTML5
1. HTML5的设计目的是为了在移动设备上支持多媒体。
2. 增加了新特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3特性。
3. 废弃一些元素和属性比如 font 、center 等..
广义的HTML5
1. 广义的HTML5 是 HTML5本身 + CSS3 + JavaScript
2. HTML5 MDN 介绍： https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML

H5新增语义化标签

标签语义化
1. 以前布局，我们基本用div 来做。 div对于搜索引擎来说，是没有语义的。
新增语义化标签
```
 <header>：头部标签
 <nav>：导航标签
 <article>：内容标签
 <section>：块级标签
 <aside>：侧边栏标签
 <footer>：尾部标签
```
1. 注意：
  1. 这种语义化标准主要针对搜索引擎的
  2. 这些新标签页面中可以使用多次的
  3. 在IE9中，需要把这些元素转换为块级元素
    1. IE9把这些标签默认为行内标签，因此：display: block;
  4. 其实，我们移动端更喜欢使用这些标签
  5. HTML5 还增加了很多其他标签，我们后面再慢慢学

H5 新增多媒体标签

多媒体标签包含两个，具体如下：
```
 音频：<audio>
 视频：<video>
```
1. 使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的 flash 和其他浏览器插件。

`<audio>`音频标签

当前，<audio>元素支持三种音频格式：
```
 Ogg Vorbis
 MP3
 Wav
```

音频标签语法格式

 <audio src="文件地址" controls="controls"></audio

音频标签常见属性

 autoplay: autoplay 如果出现该属性，则音频在就绪后马上播放。
 controls: controls 如果出现该属性，则向用户显示控件，比如播放按钮。
 loop: loop 如果出现该属性，则每当音频结束时重新开始播放。
 preload: preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。
 src: url要播放的音频的 URL。

因为不同浏览器对音频格式有不同支持，因此为了适配所有浏览器，通常项目中放多个格式的音频来适配

 < audio controls="controls" > 
     <source src="happy.mp3" type="audio/mpeg" > 
     <source src="happy.ogg" type="audio/ogg" > 您的浏览器暂不支持audio标签。 
 </ audio>

`<video>` 视频标签

视频标签支持的视频格式：
```
 Ogg
 MPEG 4
 WebM
```

视频标签语法格式:

 <video src="文件地址" controls="controls"></video>

视频标签常见属性

 autoplay: autoplay 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
 controls: controls 向用户显示播放控件
 width: pixels(像素) 设置播放器宽度
 height: pixels(像素) 设置播放器高度
 loop: loop 播放完是否继续播放该视频，循环播放
 preload: auto（预先加载视频） none（不应加载视频） 规定是否预加载视频(如果有了autoplay 就忽略该属性）
 src: url 视频url地址
 poster: Imgurl 加载等待的画面图片
 muted: muted 静音播放

因为不同浏览器对视频格式有不同支持，因此为了适配所有浏览器，通常项目中放多个格式的视频来适配

 < video controls="controls" width="300">
     <source src="move.ogg" type="video/ogg" >
     <source src="move.mp4" type="video/mp4" >
     您的浏览器暂不支持video标签。播放视频
 </ video >

总结

音频标签和视频标签使用基本一致
浏览器支持情况不同
谷歌浏览器把音频和视频自动播放禁止了
我们可以给视频标签添加muted 属性可以自定播放视频，音频不可以
视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性

H5新增input表单类型、表单属性

H5新增input表单类型

 type="email"    限制用户输入必须为Email类型
 type="url"      限制用户输入必须为URL类型
 type="date"     限制用户输入必须为日期类型
 type="time"     限制用户输入必须为时间类型
 type="month"    限制用户输入必须为月类型
 type="week"     限制用户输入必须为周类型
 type="number"   限制用户输入必须为数字类型
 type="tel"      手机号码
 type="search"   搜索框
 type="color"    生成一个颜色选择表单

H5新增input表单属性

 required: required 表单拥有该属性表示其内容不能为空，必填
 placeholder: 提示文本 表单的提示信息，存在默认值将不显示
 autofocus: autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单
 autocomplete: off/on 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。 
 默认已经打开，如 autocomplete=”on “ 
 关闭 autocomplete =”off”
 -需要放在表单内同时加上name属性
 -同时成功提交
 multiple: multiple 可以多选文件提交

代码举例：

 <form action="">
     用户名: <input type="text" required="required" placeholder="请输入用户名" autofocus="autofocus" name="username" autocomplete="off"> <input type="submit" value="提交"> 上传头像: <input type="file" name="" id="" multiple="multiple">
 </form>

CSS3

CSS3现状
1. 浏览器支持程度差，需要添加私有前缀
2. 移动端支持优于PC端
3. 不断改进中

CSS3选择器

属性选择器

E[att] 选择具有att属性的E元素
E[att="val"] 选择具有att属性且属性值等于val的E元素
E[att^="val"] 匹配具有att属性、且值以val开头的E元素
E[att$="val"] 匹配具有att属性、且值以val结尾的E元素
E[att*="val"] 匹配具有att属性、且值中含有val的E元素

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

结构伪类选择器

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个

伪元素选择器

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

注意：
1. before 和 after 必须有 content 属性
2. before 在内容的前面，after 在内容的后面
3. before 和 after 创建一个元素，但是属于行内元素。
4. 因为在 dom 里面看不见刚才创建的元素，所以我们称为伪元素
5. 伪元素和标签选择器一样，权重为 1

CSS3 2D转换

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放。
1. 缩放：scale
2. 移动：translate
3. 旋转：rotate
二维坐标系
1. 2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系
2. 左上角为原点，右为x正方向，下为y正方向

2D 转换之移动 translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
语法
```
 transform: translate(x,y);
```
总结
1. 定义2D转换，沿着 X 和 Y 轴移动元素
2. translate中的百分比单位是相对于自身元素的:translate:(50%,50%);
3. translate类似定位，不会影响到其他元素的位置
4. 对行内标签没有效果

2D 转换之旋转 rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
语法
```
 transform:rotate(angle)
```
总结
1. 角度为正时，顺时针;负时，为逆时针
2. 默认旋转的中心点是元素的中心点
3. rotate里面是度数，单位是deg，比如：rotate(45deg),旋转45度
可以设置旋转中心点：
```
 /* 设置旋转中心点*/ 
 transform-origin: x y;
```
1. 参数用空格隔开
2. xy默认转换的中心点是元素的中心点（50% 50%）
3. 还可以给x y设置像素或者方位名词（top、bottom、left、right、center）
```
 /* 1.可以跟方位名词:左下角为中心店 */
 transform-origin: left bottom;
```

2D 转换之缩放scale

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。
语法
```
 transform:scale(x,y);
```

总结

 transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大
 transform:scale(2,2) ：宽和高都放大了2倍
 transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
 transform:scale(0.5,0.5)：缩小

注意：
1. scale缩放不会影响到其他元素的位置
2. 同时使用多个转换，其格式为：transform: translate() rotate() scale() ...等，其顺序会影转换的效果。（先旋转会改变坐标轴方向）
  1. 当同时有位移和其他的属性的时候，记得要将位移放到最前面

代码举例：

实现盒子水平居中；

 div {
     position: relative;
     width: 500px;
     height: 500px;
     background-color: pink;
     /* 1. 我们tranlate里面的参数是可以用 % */
     /* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */
     /* 这里的 50% 就是 50px 因为盒子的宽度是 100px */
     /* transform: translateX(50%); */
 }
    
 p {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 200px;
     height: 200px;
     background-color: purple;
     /* margin-top: -100px;
     margin-left: -100px; */
     /* translate(-50%, -50%)  盒子往上走自己高度的一半   */
     transform: translate(-50%, -50%);
 }

鼠标经过图片放大效果：

  <style>
     div {
         overflow: hidden;
         float: left;
         margin: 10px;
     }
     div img {
         /* 过渡写到本身上，谁做动画给谁加 */
         transition: all .4s;
     }
     div img:hover {
         transform: scale(1.1);
     }
 </style>
    
 <body>
     <div>
         <a href="#"><img src="media/scale.jpg" alt=""></a>
     </div>
     <div>
         <a href="#"><img src="media/scale.jpg" alt=""></a>
     </div>
     <div>
         <a href="#"><img src="media/scale.jpg" alt=""></a>
     </div>
 </body>

过渡transition

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
过渡三要素
1. 有元素的属性发生改变
2. 告诉系统哪些属性需要过过渡
3. 设置过渡的时长，如果时长未规定，则不会有过渡效果，因为默认值是 0。

举例：

 .box {
     width: 100px;
     height: 100px;
     background-color: #ff0;
     /* 告诉系统哪些属性要发生过渡 */
     /* transition-property: width, height, margin-left, background-color; */
     /* 监控所有属性的改变 */
     /* transition-property: all; */
     /* 设置过渡的时间 */
     /* transition-duration: 1s, 1s, 1s, 1s; */
     /* 设置所有属性过渡的时间 */
     /* transition-duration: 1s; */
     /* 简写 */
     transition: all 1s;
     /* 过渡延迟多少s */
     transition-delay: 2s;
 }
    
 .box:hover {
     width: 300px;
     height: 300px;
     margin-left: 30px;
     background-color: #f00;
 }
    
 div {
     transition: width 2s, height 2s, transform 2s;
 }
 div img {
     /* 过渡写到本身上，谁做动画给谁加 */
     transition: all .4s;
 }

把过渡具体添加到哪个元素上，口诀：过渡写到本身上，谁做动画给谁加

CSS3 动画

动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相对比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果

动画的基本使用

制作动画分为2步：
1. 先定义动画
2. 再使用（调用）动画

用keyframes 定义动画（类似定义类选择器）

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

动画序列
1. 0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。
2. 在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
3. 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
4. 请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

元素使用动画

 div {
     width: 200px; 
     height: 200px; 
     background-color: aqua; 
     margin: 100px auto; 
     /* 调用动画 */ 
     animation-name: 动画名称; 
     /* 持续时间 */ 
     animation-duration: 持续时间;
 }

代码举例：

 /* 动画序列 */
 /* 1. 可以做多个状态的变化 keyframe 关键帧 */
 /* 2. 里面的百分比要是整数 */
 /* 3. 里面的百分比就是 总的时间（我们这个案例10s）的划分 25% * 10  =  2.5s */
    
 @keyframes move {
     0% {
         transform: translate(0, 0);
     }
     25% {
         transform: translate(1000px, 0)
     }
     50% {
         transform: translate(1000px, 500px);
     }
     75% {
         transform: translate(0, 500px);
     }
     100% {
         transform: translate(0, 0);
     }
 }
    
 div {
     width: 100px;
     height: 100px;
     background-color: pink;
     animation-name: move;
     animation-duration: 10s;
 }

动画常用属性

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

代码举例：

 @keyframes move {
     0% {
         transform: translate(0, 0);
     }
     100% {
         transform: translate(1000px, 0);
     }
 }
    
 div {
     width: 100px;
     height: 100px;
     background-color: pink;
     /* 动画名称 */
     animation-name: move;
     /* 持续时间 */
     /* animation-duration: 2s; */
     /* 运动曲线 */
     /* animation-timing-function: ease; */
     /* 何时开始 */
     animation-delay: 1s;
     /* 重复次数  iteration 重复的 conut 次数  infinite  无限 */
     /* animation-iteration-count: infinite; */
     /* 是否反方向播放 默认的是 normal  如果想要反方向 就写 alternate */
     /* animation-direction: alternate; */
     /* 动画结束后的状态 默认的是 backwards  回到起始状态 我们可以让他停留在结束状态 forwards */
     /* animation-fill-mode: forwards; */
     /* animation: name duration timing-function delay iteration-count direction fill-mode; */
     /* animation: move 2s linear 0s 1 alternate forwards; */
     /* 前面2个属性 name  duration 一定要写 */
     /* animation: move 2s linear  alternate forwards; */
 }
    
 div:hover {
     /* 鼠标经过div 让这个div 停止动画，鼠标离开就继续动画 */
     animation-play-state: paused;
 }

动画简写属性

animation：动画名称动画时间运动曲线何时开始播放次数是否反方向动画等待或者结束的状态;
```
 animation: myfirst 5s linear 2s infinite alternate;
```
1. 盒子动画结束后，停在结束位置：animation-fill-mode ： forwards
2. 想要动画走回来，而不是直接跳回来：animation-direction ： alternate
3. 简写属性不包含暂停动画：animation-play-state: puased; 经常和鼠标经过配合使用

速度曲线细节

animation-timing-function：规定动画的速度曲线，默认是ease

 linear      动画重头到尾匀速
 ease        默认，动画以低速开始，然后加快，在结束前变慢
 ease-in     动画以低速开始
 ease-out    动画以低速结束
 ease-in-out 动画以低速开始和结束
 steps()     指定了时间函数中的间隔数量（步长）

步长举例：分几步完成动画

 div {
     overflow: hidden;
     font-size: 20px;
     width: 0;
     height: 30px;
     background-color: pink;
     /* 让我们的文字强制一行内显示 */
     white-space: nowrap;
     /* steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者linear 了 */
     animation: w 4s steps(10) forwards;
 }
    
 @keyframes w {
     0% {
         width: 0;
     }
     100% {
         width: 200px;
     }
 }
    
 <!-- 一个字一个字显示出来，像打字一样   -->
 <div>世纪佳缘我在这里等你</div>

CSS3 3D转换

3D有什么特点
1. 近大远小
2. 物体后面遮挡不可见
当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果
三维坐标系
1. 三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。
  1. x轴：水平向右,注意： x 右边是正值，左边是负值
  2. y轴：垂直向下,注意： y 下面是正值，上面是负值
  3. z轴：垂直屏幕,注意：往外面是正值，往里面是负值
3D转换
1. 3D转换主要学习工作中最常用的3D位移和3D旋转
主要知识点：
1. 3D位移：translate3d(x,y,z)
2. 3D旋转：rotate3d(x,y,z)
3. 透视：perspective
4. 3D呈现： transfrom-style

3D移动 translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。

 transform:translate3d(x,y,z)：其中 x、y、z 分别指要移动的轴的方向的距离
 translform:translateX(100px)：仅仅是在x轴上移动
 translform:translateY(100px)：仅仅是在Y轴上移动
 translform:translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ只能跟px单位）

因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动
xyz是不能省略的，如果没有就写0:transform: translate3d(400px, 100px, 100px);

透视 perspective

在2D平面产生近大远小视觉立体，但是只是效果二维的
1. 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
2. 模拟人类的视觉位置，可以为安排一只眼睛去看
3. 透视我们也称为视距：视距就是人的眼睛到屏幕的距离
4. 距离视觉点越近的在电脑平面成像越大，越远成像越小
5. 透视的单位是像素
透视写在被观察元素的父盒子上面
设置透视perspective意思就是设置好人的眼睛到屏幕的垂直距离
这样物体在人的眼睛与屏幕之间移动即在z轴上移动，当距离人眼睛越近（z值越大）物体在屏幕上越大，反之（z值越小）越小

d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。
z：就是 z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大。

translateZ

translform:translateZ(100px)：仅仅是在Z轴上移动。
有了透视，就能看到translateZ 引起的变化了

代码举例：

 body {
     perspective: 500px;
 }
    
 div {
     width: 200px;
     height: 200px;
     background-color: pink;
     margin: 100px auto;
     transform: translateZ(100px);
 }

3D旋转 rotate3d

3D旋转指可以让元素在三维平面内沿着 x轴，y轴，z轴或者自定义轴进行旋转

语法

 transform:rotateX(45deg)：沿着x轴正方向旋转 45度
 transform:rotateY(45deg) ：沿着y轴正方向旋转 45deg
 transform:rotateZ(45deg) ：沿着Z轴正方向旋转 45deg
 transform:rotate3d(x,y,z,deg)： 沿着自定义轴旋转 deg为角度（了解即可）

对于元素旋转的方向的判断,我们需要先学习一个左手准则
1. 左手的手拇指指向 x轴的正方向
2. 其余手指的弯曲方向就是该元素沿着x轴旋转的方向
3. 同理判断y轴、z轴旋转的正方形也是用左手准则来判断
旋转也要加上透视，这样更能显示旋转效果

body {
    perspective: 300px;
}

img {
    display: block;
    margin: 100px auto;
    transition: all 1s;
}

img:hover {
    transform: rotateX(45deg);
}

3D呈现 transfrom-style

控制子元素是否开启三维立体环境。
给父亲添加影响的是子盒子。
Transform-style: preserve-3d; 子元素开启立体空间，默认的值是 flat 不开启

body {
    perspective: 500px;
}

.box {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 100px auto;
    transition: all 2s;
    /* 让子元素保持3d立体空间环境 */
    transform-style: preserve-3d;
}

.box:hover {
    transform: rotateY(60deg);
}

.box div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: pink;
}

.box div:last-child {
    background-color: purple;
    transform: rotateX(60deg);
}

<body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
</body>

浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。

私有前缀

 -moz-：代表 firefox 浏览器私有属性
 -ms-：代表 ie 浏览器私有属性
 -webkit-：代表 safari、chrome 私有属性
 -o-：代表 Opera 私有属性

提倡的写法

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

CSS3其他属性

更多CSS3属性请查看https://www.w3school.com.cn/css3/index.asp

CSS第十篇：HTML5与CSS3

HTML5

HTML5简介

H5新增语义化标签

H5 新增多媒体标签

<audio>音频标签

<video> 视频标签

总结

H5新增input表单类型、表单属性

CSS3

CSS3选择器

属性选择器

结构伪类选择器

伪元素选择器

CSS3 2D转换

2D 转换之移动 translate

2D 转换之旋转 rotate

2D 转换之缩放scale

代码举例：

过渡transition

CSS3 动画

动画的基本使用

动画常用属性

动画简写属性

速度曲线细节

CSS3 3D转换

3D移动 translate3d

透视 perspective

translateZ

3D旋转 rotate3d

3D呈现 transfrom-style

浏览器私有前缀

CSS3其他属性

`<audio>`音频标签

`<video>` 视频标签