H5C3

水深无声 2023-06-16 04:00 23阅读 0赞

# HTML5： #

HTML第五次重大修改，增加了新的元素、属性和行为

## 新特性： ##

语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效，性能与集成特性，css3特性  
广义HTML5包含HTML5本身、css3、js

## **H5新增语义化标签：** ##

< header>：头部标签  
< nav>：导航标签  
< article>：内容标签  
< section>：块级标签  
< aside>：侧边栏标签  
< footer>：尾部标签  
语义化标签主要针对搜索引擎；新标签页面中可以使用多次；IE9中，需要把这些元素转换为块级元素；它们更适用于移动端

## **H5新增多媒体标签：** ##

< audio>：音频，支持格式：Ogg Vorbis、MP3、Wav  
< audio src=“media/snow.mp3” controls=“controls”>< /audio>  
***属性***：  
controls：显示控件（比如播放、暂停）不同浏览器的控件不同  
autoplay：马上播放 谷歌浏览器把它禁用了  
loop：音频结束时重新播放  
src：要播放音频的URL

<audio controls="controls">
            <source src="media/snow.mp3" type="audio/mpeg" />
            <source src="media/snow.ogg" type="audio/ogg /">
                您的浏览器不支持播放声音
        </audio>不同浏览器支持的格式不同，所以提供多个格式

< video>：视频，支持格式：Ogg、MP4、WebM

<video src="media/video.mp4" controls="controls"></video>
    video muted="muted" loop="loop" poster="media/pig.jpg" controls>
            <source src="media/video.mp4" type="video/mp4" />
            <source src="media/video.ogg" type="video/ogg" />
            您的浏览器不支持播放视频
        </video>

***属性：***  
controls：显示控件  
autoplay：马上播放 谷歌浏览器把它禁用了，添加静音属性可以解决  
loop：视频结束时重新播放  
src：要播放视频的URL  
preload：加载完再播放  
poster：加载等待的画面图片  
muted：静音播放  
width：宽度  
height：高度

## **H5新增input表单、表单属性：** ##

邮箱: <input type="email" />
    网址: <input type="url" />
    日期: <input type="date" />
    日期: <input type="time" />
    数量: <input type="number" />  e可以输入（科学计数法）
    手机号码: <input type="tel" />
    搜索: <input type="search" />
    颜色: <input type="color" />
    <input type="submit" value="提交">//用于检测

***属性：***  
required：表单内容不能为空  
placeholder：表单的提示信息，存在默认值将不再显示（占位符）  
autofocus：自动聚焦  
autocomplete：在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项（需要在表单加入name属性）  
multiple：可以多选文件提交

# CSS3： #

在CSS2的基础上新增样式；移动端支持优于PC端；不断改进中；应用相对广泛

## CSS3属性选择器： ##

属性选择器使用方法：button\[disabled\] 标签名\[属性\]

/* 1.直接写属性 */
            button[disabled] { 
                cursor: default;
            }
            /* 2. 属性等于值 */
            input[type="search"] { 
                color: pink;
            }
            /* 3. 以某个值开头的 属性值 */
            div[class^="icon"] { 
                color: red;
            }
            /* 4. 以某个值结尾的 */
            div[class$="icon"] { 
                color: green;
            }
            /* 5. 可以在任意位置的 */
            div[class*="icon"] { 
                color: blue;
            }

***注意：*** 类选择器、属性选择器、伪类选择器，权重都为10

## CSS3结构伪类选择器 ##

也属于伪类选择器

E:first-child：匹配父元素中第一个子元素E  
E:last-child：匹配父元素中最后一个子元素E  
E:nth-child(n)：匹配父元素中第n个子元素E n可以为数字、关键字、公式（从0计算，0和超出的会被忽略） even偶数 odd奇数  
选择父元素里面的第n个孩子，它不管里面的孩子是否同一种类型  
E:first-of-type：指定类型E的第一个  
E:last-of-type：指定类型E的最后一个  
E:nth-of-type(n)：指定类型E的第n个

ul li:first-child { 
                background-color: pink;
            }
            ul li:last-child { 
                background-color: deeppink;
            }
            /* nth-child(n) 我们要第几个，n就是几 比如我们选第8个， 我们直接写 8就可以了 */
            ul li:nth-child(8) { 
                background-color: lightpink;
            }
           /* of-type 选择指定类型的元素 */
            div span:first-of-type { 
                background-color: purple;
            }
            div span:last-of-type { 
                background-color: skyblue;
            }
            div span:nth-of-type(2) { 
                background-color: red;
            }

## CSS3伪元素选择器： ##

::before：在元素内部的前面插入内容  
::after：在元素内部的后面插入内容  
***注意：*** 必须有content属性；before和after会创建一个元素，属于行内元素，因为在dom中看不到创建的元素，所以称之为伪元素；伪元素和标签选择器权重为1

## CSS3 2D转换： ##

transform，可以实现元素的位移（translate）、旋转（rotate）、缩放（scale）等效果  
二维坐标系：x轴水平向右，y轴垂直向下

**translate：**  
transform: translate(x, y);

1.  我们如果只移动x坐标  
    transform: translateX(100px);
2.  我们如果只移动y坐标  
    transform: translateY(100px);

***注意：*** translate最大的优点时**不会影响其他元素的位置**；百分比单位是相对于自身元素的百分比；对行内标签没有效果

**盒子实现水平和垂直居中：**

position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);

**rotate：**  
让元素在二维平面内顺时针或是逆时针旋转  
***注意：*** 单位时deg（度）；角度为正时，顺时针，负时，逆时针；默认旋转中心时元素的中心点  
transform-origin：设置元素转换的中心点  
transform-origin: x y; *注意：* xy使用空格隔开的；默认是50% 50%，可以跟方位名词和数字+像素

**scale：**  
transform: scale(x, y); 参数表示倍数，只写一个参数指两个一样；不会影响其他盒子，可以设置中心点

**2D转换综合写法：**

transform: translate() rotate() scale();

***注意：*** 同时有位移和其他属性，需要把**位移放到最前面**；其顺序会影响转换的效果

## CSS3动画： ##

**animation：**  
可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果；可以改变任意多的次数；相比较与过渡，动画可以实现更多变化，更多控制，连续自动播放等效果  
***制作动画步骤：***

1.定义动画
    @keyframes 动画名称 { 
                /* 开始状态 from */
                0% { 
                    
                }
                /* 结束状态 to */
                100% { 
                   
                }
            }
    2.调用动画
    	/* 动画名称 */
                animation-name: 动画名称;
                   /* 持续时间 */
                animation-duration: 时间;

**动画序列**

1.  可以做多个状态的变化 keyframe 关键帧
2.  里面的百分比要是整数
3.  里面的百分比就是 总的时间（比如10s）的划分 25% \* 10 = 2.5s

**动画常用的属性：**  
@keyframes：规定动画  
animation：所有动画属性的简写属性  
animation-name：动画名称  
animation-duration：完成一个动画的时间，默认0  
animation-timing-function：动画的速度曲线，默认ease（慢快慢）linear（匀速）steps（步长）  
animation-delay：动画何时开始，默认0  
animation-iteration-count：动画播放次数，默认1，infinite 无限  
animation-direction：动画是否在下一周期逆向播放，默认normal，反向alternate  
animation-play-state：动画是否在运行或暂停，默认running，暂停paused  
animation-fill-mode：动画结束后状态，保持forwards，回到起始backwards

**动画简写属性：**  
alternate：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 动画起始或结束状态  
注意：前两个必写；简写属性不包括暂停，经常在鼠标经过里写

## CSS3 3D转换： ##

***特点：*** 近大远小，物体后面遮挡看不见  
三维坐标系：x轴水平向右 y轴垂直向下 z轴垂直屏幕向外

**3D位移：**  
3D位移比2D位移多了一个z轴  
translateZ 后面的单位一般跟px，不用百分比  
transform: translate3d(0, 100px, 100px); xyz是不能省略的，如果没有就写0

**透视perspective：**  
如果想在网页产生3D效果需要透视；模拟人类的视觉位置，可以安排一只眼去看；透视也称为视距，就是人的眼睛到屏幕的距离；距离视觉点越近的在电脑平面成像越大，越远成像越小；透视的单位是像素  
***注意：*** 透视写到被观察元素的父盒子上面，透视的值越小，所观察的物体越大；z是写到被观察的元素身上

**3D旋转：**  
让元素沿着x轴、y轴、z轴或者自定义轴旋转  
transform: rotateX(45deg)  
transform: rotateY(45deg)  
transform: rotateZ(180deg)  
transform: rotate3d(x,y,z,deg)  
*旋转方向的问题可以参考**左手准则**：* 左手大拇指沿着轴（x、y、z）的正方向，其余四指弯曲的方向就是度数为正时的旋转方向

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

# 浏览器私有前缀 #

兼容老版本的写法

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