HTML5和CSS3重点知识汇总.pdfVIP

HTML5和CSS3重点知识汇总

1、什么是H5：

HTML5是HTML最新的修订版本，2014年10⽉由万维⽹联盟（W3C）完成标准制定。设计⽬的是为了在移动设备上⽀持多媒体。

2、新增特性：

绘画canvas；多媒体播放videoaudio；本地离线存储；特殊内容元素articleheadernavfooter；表单控件

calendardateemail等

3、最⼩的HTML5⽂档

!DOCTYPEhtml!--h5的声明--

html

head

metacharset=utf-8

title⽂档标题/title

/head

body

⽂档内容

/body

/html

4、⽀持：

最新版Safari,Chrome,Firefox,Opera⽀持，IE9⽀持

5、⾃定义标签：

⾸先在html标签通过xmlns:命名空间名来指定；其次可以使⽤这个标签写内容（通常命名采⽤-连接⽅式）；最后，在样式⾥使⽤

命名空间名\:标签名{}定义

!DOCTYPEhtml

htmlxmlns:ownhtml

head

metacharset=UTF-8

titleDocument/title

style

//2、这⾥如果有多个标签，都是从ownhtml创建的，那么对其设置样式主要是冒号后⾯的部分，也就是命名空间部分

ownhtml\:customdiv{

font-size:.36rem;

font-weight:bold;

color:red;

}

p{

color:green;

}

/style

/head

body

ownhtml:customdivclass=customthisisacustomelement!/ownhtml:customdiv

!--1、冒号后的命名空间可以有多个值，这样就有多个不同的标签可以拿来使⽤--

pthisisnormaltext/p

/body

/html

6、canvas

这个HTML元素是为了客户端⽮量图形⽽设计的。它⾃⼰没有⾏为，但却把⼀个绘图API展现给客户端JavaScript以使脚本能够把

想绘制的东西都绘制到⼀块画布上。默认情况下canvas元素没有边框和内容。

canvasid=myCanvaswidth=200height=100style=border:1pxsolid#000000;/canvas

script

//⾸先找到canvas元素

varc=document.getElementById(myCanvas);

//创建context对象：是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的⽅法。

varctx=c.getContext(2d);

//fillStyle属性可以是CSS颜⾊，渐变，或图案。fillStyle默认设置是#000000（⿊⾊）

ctx.fillStyle=#FF0000;

//fillRect(x,y,width,height)⽅法定义了矩形当前的填充⽅式。

ctx.fillRect(0,0,150,75);

/script

canvas的左上⾓坐标为(0,0),上⾯的fillRect(0,0,150,75)意思是：在画布上绘制150x75的矩形，从左上⾓开始(0,0)。

再来⼀个画圆的实例：arc(x,y,r,start,stop)

其中，画布左上⾓坐标0，0；x为圆⼼在x轴上坐标，y同理；r为半径长度；start为起始⾓度；stop结束⾓度；Math.PI表⽰180°，

顺时针

canvasid=myCanvaswidth=500height=500style=border:1px