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：邮箱 ​ 2：电话 ​ 3：网址 ​ 4：数量 里面一般设置最大值和最小值 ​ 5：颜色 可以通过js来获取颜色 ​ 6：时间 ​ 7：日期 ​ 8：时间日期 大多数浏览起不支持这个 ​ 9：日期时间

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

参数4 等待时间(等待动画开始的时间)

2.2D变形(使图片发生一点变化)

多了一个属性

transform

rotate 变换的角度 旋转

skew 斜切 第一个参数表示y轴向x轴靠拢的度数 第二个参数表示 x轴向y轴靠拢的度数 负值表示先旋转180°

scale 缩放

translate 位移 第一个参数表示x轴位移的距离 第二个参数表示y轴位移的距离

5.3D动画

如果想让你的东西呈现为3D效果就需要用到一个属性

transform-style:preserve-3d

1.视距

出现了一个视距的属性

perspective 属性值越大 视距越小 属性值越小 视距越大

2.旋转

2D旋转和3D旋转差不多 只不过在transform:rotate 上用的更准确罢了 加上了X Y Z

3.位移

3D的位移和2D有点区别

2D的相当于在一个平面上进行操作

3D的就相当于一个立体的操作 所以在transform:translate上更为准确 要加上X,Y,Z 或者加上3D也行里面数值是三个 也是X,Y,Z

4.背面隐藏

就是新增了一个属性

backface-visibility:hidden;

5.正反面切换

里面的逻辑就是 在你最上面图片没开始转的时候 下面的图片先进行旋转到背面隐藏起来 然后当上面的图片旋转的时候下面的图片因为隐藏了没有 当上面的图片旋转了180°之后 下面的图片也开始旋转180°加上之前上面没变之前就旋转的180°等于旋转了360° 就实现了 正反面切换

6.选择原点进行变形

新增属性

transform-origin:0% 0%;

第一个0% 表现是在x轴

第二个0% 表现在y轴

---

6.自定义动画

1.自定义动画属性

animation

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

[name] 指定要绑定到选择器的关键帧的名称

[duration] 动画指定需要多少秒或毫秒完成

[timing-function] 设置动画将如何完成一个周期

[delay] 设置动画在启动前的延迟间隔。

[iteration-count] 定义动画的播放次数。

[direction] 指定是否应该轮流反向播放动画

[fill-mode] 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

[play-state] 指定动画是否正在运行或已暂停。

2.定义自定义动画属性

@keyframes

里面搭配的有from to

from 就是写从哪个地方开始

to 就是到哪里结束

也可以使用百分比进行使用 最好的就是百分比

3.项目展示

1.扇形导航

   

     
• 
     
• 
     
• 
     
• 
     
• 
   

     

2.可乐项目

            

 

3.旋转相册

    
    
    
    
    


    

        
        
        
        
        
        
        
        
        
    
    点我一下

4.立体相册

7.SVG

1.概念

以前的图片的格式有 jpg png gif jpeg

现在学了CSS3我们新增了一个SVG 位图矢量图

什么是位图矢量图？

理念：我们想用css3.0这种编程的方式 完成photoshop的功能

图片：用编程的形式 替换掉jpg png gif

所以诞生了矢量图 可以使用变成的形式画图

好处：

是用编程实现的 我们既可以将图片保存到外部

为什么css3 矢量图片想要用编程实现?

使用css3 矢量图片编程实现的功能相对文件小 效率高

1.rect画矩形

是一个做矩形的代码

context.rect(x,y,width,height);

x 矩形左上角的 x 坐标

y 矩形左上角的 y 坐标

width 矩形的宽度，以像素计

height 矩形的高度，以像素计

用法：

2.circle画圆

cx 和 cy 属性定义圆点的 x 和 y 坐标。

如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)

stroke-width 边框粗细

fill 内部颜色

3.ellipse画椭圆

cx 和 cy 属性定义圆点的 x 和 y 坐标。

rx 属性定义水平半径

ry 属性定义垂直半径

style 设置css格式 fill 内部颜色

stroke 边框的颜色

stroke-width 边框粗细

4.line直线

X1属性表示起点的横坐标

Y1属性表示起点的纵坐标

X2属性表示终点的横坐标

Y2表示终点的纵坐标

stroke 边框的颜色

stroke-width 边框粗细

5.polygon多边形

points 规定了绘制图形的时候的一系列坐标点

里面的坐标点可以看作 X1(100,10),X2(40,180),X3(190,60),X4(10,60),X5(160,180)

stroke 边框的颜色

stroke-width 边框粗细

6.polyline折线段的起点与终点用一根直线连接起来，形成一个闭合的图形区域

7.path 路径

8.canvas画布

用法：

    
    
    
    


    
    
        您的浏览器不支持canvas
    

1.绘画矩形参考

2.绘制边框矩形参考

3.绘制线参考

4.绘制三角形参考

5.画弧线参考

9.canvas绘制图片

绘制图片属性

drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

1.img 规定要使用的图像，画布或者视频

2.sx 可选 开始剪切的X坐标

3.sy 可选 开始剪切的y坐标

4.swidth 被剪切图像的宽度

5.sheight 被剪切图像的高度

6.x 在画布上放置图像的x坐标

7.y 在画布上放置图像的y坐标

8.width 要使用的图像的宽度

9.height 要使用的图像的高度

代码使用参考：

参考项目

1.飞鸟案列

getContext 绘制画布的环境

clearRect 清除画布

2.颜色渐变

getContext绘制画布的环境

createLinearGradient(x,y,x1,y1)

x,y指定渐变起点

x1,y1指定渐变终点

canvas.width宽度

canvas.heiight高度

addColorStop(index,color)

index范围0-1

fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式

color	指示绘图填充色的 CSS 颜色值。默认值是 #000000。
gradient	用于填充绘图的渐变对象（线性或放射性）
pattern	用于填充绘图的 pattern 对象

fillStyle填充线性渐变（从上到下）

fillStyle填充线性渐变（从左到右）

3.径向渐变

context.createRadialGradient(x0,y0,r0,x1,y1,r1);

x0 渐变的开始圆的 x 坐标 ​ y0 渐变的开始圆的 y 坐标 ​ r0 开始圆的半径 ​ x1 渐变的结束圆的 x 坐标 ​ y1 渐变的结束圆的 y 坐标 ​ r1 结束圆的半径

​

    
    
    
    

​

    


​

4.文字

fillText(string text, number x, number y, number maxWidth)

x和y分别表示文本距离左上角 x 和y坐标位置

strokeText(text,x,y,maxWidth)

text 是一个字符串文本。

x 表示文本的x坐标，也就是文本最左边的坐标。

y 表示文本的y坐标，也就是文本最下边的坐标（注意是最下边，而不是最上边）。

maxWidth 可选参数，表示允许的最大文本的宽度（单位为px）。如果文本宽度超出maxWidth值，文本会压缩至maxWidth值的宽度。

5.阴影

6.画板

    
    
    
    
    



    
​
    

        

        

        

    

​

/新手练习  大佬请留情/