<audio> : 音频标签 HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放,但是支持的格式是有限的,目前只支持三种音频格式,Ogg Vorbis Mp3 Wav.
<audio controls="controls" loop="loop" autoplay="autoplay"> <source src="字母歌.ogg" type="audio/ogg"> <source src="字母歌.mp3" type="audio/mpeg"> 您的浏览器太low啦 </audio><video>: 视频标签,主流播放器支持MP4,ogg格式
<video controls="controls" autoplay="autoplay" muted="muted" loop="loop"> <source src="Comp1_3.mp4" type="video/mp4" > <source src="Comp1_3.ogg" type="video/ogg" > 您的浏览器太low啦 不支持播放视频 </video>基本语法 : 元素(标签)[属性值]
<body> <button>开启</button> <button disabled="disabled">关闭</button> </body> <style> button { cursor: pointer; } button[disabled] { cursor: default; } </style>其他使用
E[attr^=value] : 以value开头的都会被选出来E[attr$=value] : 以value结尾的都会被选出来E[attr*=$value] : 包含value的都会被选出来E[attr=value] : 属性等于值的都会被选出来 结构伪类选择器 E:first-child : 第一个child被选出来E:last-child : 最后一个被选出来E:nth-child : 我们要选第几个,n就是几 可以是数字,关键字,也可以是公式,常用的even(偶数),odd(奇数) 例如 : E:nth-child(2n) ,E:nth-child(n+5)注意 : n是从0开始的 E :nth-of-type(n) : 指定类型和第几个进行选择 伪元素选择器 ::before : 在元素内部的前面插入内容::after : 在元素内部的后面插入内容注意 : before和after必须有content属性before在内容的前面,after在内容的后面before和after创建一个元素,但是属于行内元素因为在dom里面看不见刚才创建的元素,所以我们称为伪元素伪元素和标签选择器一样,权重为1动画的定义:
<style> @keyframes donghuamingcheng { 0% { width: 50%; } 100% { width: 150%; } } </style>动画的使用,在使用的元素下添加动画名称和持续时间
<style> div { width: 100px; height: 100px; background-color: pink; /*引入动画名称*/ animation-name: donghuamingcheng; /*动画持续的时间*/ animation-duration: 2s; } @keyframes donghuamingcheng { 0% { transform: translateX(0); } 100% { transform: translateX(300px); } } </style>动画属性
@keyframes: 规定动画animation: 所有动画属性的简写属性,除了animation-play-state属性animation-name: 规定@keyframes动画的名称(必须有)animation-duration:规定动画完成一个周期所花费的秒或毫秒,默认是0(必须有)animation-timing-function: 规定动画的速度曲线,默认是"ease"animation-delay: 规定动画何时开始,默认是0animation-iteration-count: 规定动画播放的次数,默认是1,还有infinite(循环)animation-direation: 规定动画是否在下一周期播放,默认是"normal",还有"alternate"逆播放.animation-play-state: 规定动画是否正在运行或暂停,默认是"running",还有"paused".animation-fill-mode : 规定动画结束后的状态,保持forword回到原始backwords.速度曲线细节 liner: 动画从头到位的速度是相同的,匀速ease: 默认动画从低速开始,然后加快,在结束前变慢ease-in: 动画以低速开始ease-out: 动画以低速结束ease-in-out: 动画以低速开始和结束steps(): 指定了时间函数中的间隔数量