html5
1.新增了语义化标签
语言,语义。语言的意义就是标签的意义
意思就是这个标签的单词的意思就是他在页面中所充当角色的意思 header 头部 nav 导航 main 主要内容 footer 底部 article 文章 用来放文字段落的标签 aside右侧
2.html5兼容问题
IE9 行级元素设置宽度的时候 会失效 IE8以下爱的版本 不支持语义化标签 IE8的内核 无法解析 只能用js替代
第三种解决方案
1:通过dom就是手动创建标签 2:就是引入别人写好的一个js文件 html5shiv.js 这种方法就是我们打开网页的时候会去判断了浏览器版本 如果是IE且小于9版本 我们才去加载这个文件 如果不是 则不加载
3.html5新增标签
1.html5标签元素的新增
1:邮箱 <input type="email"> 2:电话 <input type="tel"> 3:网址 <input type="url"> 4:数量 <input type="number" value="0" max="100" min="0">里面一般设置最大值和最小值 5:颜色 <input type="color type="color"> 可以通过js来获取颜色 6:时间 <input type="time"> 7:日期 <input type="date"> 8:时间日期 <input type="datetime">大多数浏览起不支持这个 9:日期时间 <input type="datetime-local">
2.html5新增表单元素datalist
1.用来建立关联
datalist标签定义可选数据的列表。与input元素配合使用,就可以制作出输入值的下拉列表
input输入框的list属性值是datalist的id,这样datalist才能和input输入框关联起来。 datalist自身并不显示,只在需要配合input输入时才会自动显示出来。
2.新增监听
input标签中多了一个属性 pattern 是用来验证信息的 ^是以什么开头 \d是指数字(0-9) {}花括号里面的数字是几长度就是多少 $是以什么结尾
oninput 用户输入内容时触发 可用于移动端输入字数统计 oninvalid 验证不通过时 常与表单验证pattern(正则表达式 验证表单)属性搭配使用
3.html5新增进度条
1: progress 进度条标签
里面的属性有: max 最大值 value 当前进度 min 最小值
2: meter 度量器标签
当我们的当前值不在规定的较大或较小值之间 进度条会发生颜色变化
里面的属性有: height 规定当前的较高值 low 规定当前的较低值 max 最大值 value 当前进度 min 最小值
4.html5新增的音频
audio 音频标签
里面的属性值有: autoplay 音频立即播放 controls 展示播放控件 loop 音频播放结束 会重新播放 muted 静音 preload 在页面加载的时候 预备播放 与autoplay冲突
5.html5新增视频
1.video视频标签
里面的属性有: src 路径 controls 播放面板 autoplay 自动播放 loop 自动循环 poster 首次进入视频的封面图 height 视频高度 weight 视频宽度
为了更好的兼容浏览器
2.video视频中的功能(js篇)
window.onload是指页面加载完再调用
1.播放功能
play表示播放
pause表示暂停
paused表示当前状态
btn[0].οnclick=function(){ // play()函数表示播放 pause()就表示暂停 console.log(video.paused); // 当视频暂停的时候 值位true if(video.paused){ // paused表示当前状态 video.play(); this.innerText="暂停" }else{ video.pause(); this.innerText="播放" } }
2.变大,变小功能
宽高里面的数值不能带px
btn[1].οnclick=function(){ video.width="1000" } // 变小 btn[2].οnclick=function(){ video.width="300" }
3.快进,快退功能
video.duration 视频的时长 单位是秒
video.currentTime当前时长
btn[3].οnclick=function(){ console.log(video.duration);//视频的时长 单位是秒 console.log(video.currentTime);//当前播放时长 if(video.currentTime+5>video.duration){ video.currentTime=video.duration }else{ video.currentTime+=5 } } // 快退 btn[4].οnclick=function(){ console.log(video.duration);//视频的时长 单位是秒 console.log(video.currentTime);//当前播放时长 if(video.currentTime-5<0){ video.currentTime=0 }else{ video.currentTime-=5 } }
4.加速功能
video.playbackRate当前时长
加速
btn[5].οnclick=function(){ console.log(video.playbackRate);//当前播放时长 video.playbackRate=video.playbackRate*2 }
0.5倍速
btn[6].οnclick=function(){ console.log(video.playbackRate);//当前播放时长 video.playbackRate=video.playbackRate*0.5 }
1倍速
btn[6].οnclick=function(){ console.log(video.playbackRate);//当前播放时长 video.playbackRate=1 }
5.声音调节
video.muted静音
静音
btn[8].οnclick=function(){ video.muted=true }
放大声音
volume 当前音量
video.volume设置音量
btn[9].οnclick=function(){ console.log(video.volume); // 该值最大位1 if(video.volume <0.9){ video.volume+=0.1 }else{ video.volume=1 } }
减小声音
btn[10].οnclick=function(){ console.log(video.volume); // 该值最大位1 if(video.volume <0.1){ video.volume=0 }else{ video.volume-=0.1 } }
CSS3
初识CSS3
-webkit-border-radius:20px; /* webkit指的是谷歌的浏览器内核 */ • -ms-border-radius:20px; /* ms指的是ie浏览器的内核 */ • -moz-border-radius:20px; /* moz指的是火狐浏览器的内核 */ • -o-border-radius:20px; /* o指的是opera浏览器的内核 */
1.设置透明度
三种透明度方式
常用的rgba 不会继承
opacity 这个属性会继承
transparent 表示全透明
2.阴影
1.盒子阴影
阴影属性
offset-x 必需 水平阴影的位置 正值 左边的边不会变 负值 右边的边不会变
offset-y 必需 垂直阴影的位置 正值 上面的边不会变 负值 下面的边不会变
blur 可选 blur-radius阴影模糊半径 0既无模糊效果 值越大阴影边缘越模糊
spread 可选 代表阴影的周长向四周扩展的尺寸 正值 阴影扩大 负值阴影缩小
color 可选 阴影的颜色
inset 可选 可以写在参数第一位或最后一位 其他无效 inset阴影在背景之上 内容之下
box-shadow:offset-x offset-y blur spread color inset
blur:模糊 spread:伸展 inset:内凹
box-shadow:x轴偏移量 y轴偏移量 阴影模糊半径 阴影扩展 阴影颜色 投影方式
2.文字阴影
text-shadow:h-shadow v-shadow blur color
h-shadow 水平阴影 跟盒子阴影位置一样
v-shadow 垂直阴影 跟盒子阴影位置一样
blur 表示阴影的距离
3.背景
背景:
背景颜色 background-color
背景图片 background
背景重复 background-repeat
背景图片居中 background-position:center top
背景附着 background-attachment:fixed
1.背景裁剪
css3中多了一个属性
background-clip
padding-box 把边框下面去掉
content-box 内边距下面 也没有背景
2.背景图片大小
background-size
3.渐变背景
background-image:linear-gradient(xdeg,color1,color2,color3)
xdeg就是颜色到哪个位置结束 to right 就是从左边开始到右边结束
1.渐变背景2
为了适应浏览器的不同 所以我们通常会在linear-gradient前面加上不同浏览器的内核
4.径向渐变
background-image:radial-gradient
为了适应不同浏览器的不同 所以我们也在这个前面加上不同浏览器的内核
5.多背景
background: url(../images/30/ab.png) content-box no-repeat center ,url(../images/30/xiaoming.jpg) padding-box;
6.插入图片的bug
一般我们插入图片时 两张图片之间会出现一个白边
解决方法
1.把图片转为块级元素
2.在style中img中添加vertical-align:middle
middle是垂直
4.2D动画
1.2D动画(过渡效果)
CSS3中的动画多了一个属性
transition:参数1 参数2 参数3 参数4
参数1 发生变换的属性名
参数2 变化的时间长
参数3 缓冲曲线(时间)
参数3 里面包括的属性值有
linear 匀速动画 cubic-bezier(0,0,1,1)/cubic-bezier(1,1,0,0)
ease-in 先慢后快 cubic-bezier(0.25,0.1,0.25,0.1)
ease-out 先快后满 cubic-bezier(0,0,0.58,1)
ease-in-out 慢快慢