HTML5和CSS3一些基本概括

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 慢快慢