<!DOCTYPE html>
<html>
<head>
<title> 这是标题 </title>
<meta charset='utf-8' />
</head>
<body>
页面内容部分
</body>
</html>1）标签不区分大小写
2）元素可以省略结束标签
3）允许省略属性的属性值 如：boolean值，有些则为true，没写则为false :<input checked /> 原来还需写 checked="checked" ;
4）允许属性值不使用引号
1）section：定义文档中的节。类似文章的段落。比如章节、页眉、页脚或文档中 的其他部分。一般用于成节的内容，会在文档流中开始一个新的节。
2）article：它是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其他内容使用。
3）nav：此标签代表页面的一个部分，表示页面中导航链接的部分。
4）aside：它用来装载非正文的内容，被视为页面里一个单独的部分。它包含的内容与页面的主要内容是分开的，可以被删除，而不会影响到网页的内容、章节或是页面所要传达的信息。
5）hgroup：对网页或区段section的标题元素(h1-h6)进行组合。
6）footer：定义是section 或文档的页脚，包含了与页面、文章或是部分内容有关的信息
7）header：定义文档的页眉，通常是一些引导 和导航信息。它不局限于写在网页头部，也可以写在网页内容里面。
8）figure：用于对元素进行组合。多用于图片与图片 描述组合
h5
<input list='browers'>
<datalist id='browers'>
<option value='ie'>
<option value='chrome'>
...
</datalist>
1）email：定义用于输入email地址的字段
<form action="#" method="get">
<input type='email' name='user_email'/>
<input type='submit' value='提交' /> --按钮
</form>
<form action="#" method="get"> //action值是URL，当确认按钮被按下时，接受和处理表单数据的 URL；method--传送数据的HTTP方法
<input type='date' /> --可以让你自由 选择年月日的控件
<input type='submit' value='提交' /> --按钮
</form>
formenctype--规定当表单数据提交到服务器时如何编码；
formmenthod--定义发送表单数据到action URL的HTTP方法；
formnovalidate--该属性覆盖<form>元素的novalidate属性；
formtarget--规定表示提交表单后在哪里显示接收到响应的名称或关键词_blank新页面；
除了formnovalidate属性，其他属性都是只针对type="submit"和type="image"
4）新增的height和width属性：规定<input>元素的宽高(只针对type="image")
5）list：属性引用<datalist>元素，其中包含<input>元素的预定义选项
list="datalistId"--引用id为datalistId的datalist(下拉列表)
6）新增的min、max、step属性： min/max--输入框所输入的最小/大值；step--输入框规定合法的数字间隔
7）multiple:属性规定允许用户输入到<input>元素的多个值
8）pattern：规定用于验证<input>元素的值的正则表达式
9）placeholder：规定可描述<input>字段预测值的简短的提示信息
10）required：规定必须在提交表单之前填写输入字段
Canvas元素概述：canvas是H5新增的专门用来绘制图形的元素，通过Canvas技术，用户可以在Web中绘制各种图形。它是一块无色透明的区域，只是一个容器，通过js可在 区域上任意绘图
<canvas id="myCanvas" width="233" height="300">
您的浏览器不支持canvas元素(不支持 时显示)
</canvas>A 在页面中添加canvas，定义id属性值以便调用
B 使用id寻找到元素 getElementById
C 通过canvas元素的getContext方法获取 其上下文，创建Context对象，以获取允许进行绘制的2D环境
var context=c.getContext("2d");
D 使用js脚本来进行绘制context.fillStyle="#f00"; //颜色填充样式 context.fillRect(x,y,width,height); //绘制图形(相对于画布的位置)
beginPath()--定义了一个新的路径绘制动作的开始
moveTo()--为指定点创建了一个新的子路径，这个点就变成了新的上下文点【起点】。
lineTo()--以上下文点为起点，到方法参数中指定的点之间画一条直线【终点】
stroke()--为所画的线条赋予颜色，并使其可见。如果没有特别的指定颜色的话，默认为黑色
相关属性：lineWidth--直线的宽度、strokeStyle--直线的颜色、lineCap属性--直线端点样式： 1) butt(默认) 2) round 3)square
var canvas=document.getElementById('myCanvas');
var context=canvas.getContext("2d"); //获取2d场景
//画直线
context.fillStyle='#ff0000'; //绘制样式
//context.fillRect(50, 50, 50, 50);
context.beginPath(); //开始新的路径绘制
context.moveTo(50, 50); //起点(x,y)
context.lineTo(150, 150); //终点(x,y)
context.lineWidth=10; //线条宽度
context.lineCap='round'; //端点样式
context.strokeStyle='yellow';
context.stroke(); //使绘制的线条可见arcTo()--在画布上创建介于两个切线之间的弧/曲线
quadraticCur--绘制二次曲线，每条二次曲线要由上下文点，一个控制点和一个终止点来定义
bezierCurveTo()--绘制贝塞尔曲线使用此方法。每条贝塞尔曲线需要由上下文点、两个 控制点和一个终止点来确定。由于贝塞尔曲线有两个控制点，因此贝塞尔曲线可以比二次曲线更加的复杂多变
var canvas=document.getElementById('myCanvas');
var context=canvas.getContext("2d"); //获取2d场景
context.fillStyle='#ff0000'; //绘制样式
//绘制弧线
context.beginPath(); //新的路径
context.moveTo(20,20);
context.lineTo(100,20);
context.arcTo(150,20,150,70,50);
context.lineTo(150,120);
context.closePath();
context.stroke();
//圆角矩形
context.beginPath();
context.moveTo(250, 100);
context.arcTo(400, 100, 400, 400, 30); //(x1, y1, x2, y2, radius)
context.arcTo(400, 400, 100, 400, 30);
context.arcTo(100, 400, 100, 100, 30);
context.arcTo(100, 100, 400, 100, 30);
context.fillStyle='red';
context.fill();
context.stroke();
//绘制矩形
context.beginPath();
context.rect(150, 150, 40, 40); //(x, y, w, h)
context.fillStyle='blue'; //填充颜色
//阴影样式--放在fill()方法之前
context.shadowColor='black'; //颜色
context.shadowBlur=20; //模糊度 0 颜色最深
context.shadowOffsetX=10; //阴影与图形的水平距离
context.shadowOffsetY=23; //垂直距离
context.globalAlpha=0.3; //绘图的图形透明度0-1
context.fill();
context.stroke();//绘制圆
context.beginPath();
context.arc(300,300,50,0,2*Math.PI,0); //(x, y, radius, startAngle, endAngle, anticlockwise)
context.fillStyle='red';
context.fill();
context.stroke();
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext("2d");
var clg=ctx.createLinearGradient(50,0, 200, 0); //水平渐变--类似拉一条直线渐变
clg.addColorStop(0, '#ff0000'); //红绿蓝渐变
clg.addColorStop(0.5,'#00ff00');
clg.addColorStop(1,'#0000ff');
ctx.fillStyle=clg;
//ctx.strokeStyle=grad;
ctx.fillRect(10, 10, 200, 200);
var crg=ctx.createRadialGradient(350,100,50, 350, 100,66); //径向渐变--类似拉一条直线从圆心往外渐变
crg.addColorStop(0, '#000000'); //红绿蓝渐变
crg.addColorStop(0.5,'#ffffff');
crg.addColorStop(1,'#0000ff');
ctx.fillStyle=crg;
//ctx.strokeStyle=grad;
ctx.fillRect(230, 10, 200, 200); 2、context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh); 对图像实现裁剪之后再放置
方式一
<audio src='horse.mp3' controls='controls'>
您的浏览器不支持audio元素
</audio> //control显示控制按键
方式二(多种格式,防止不支持)
<audio controls='controls'>
<source src=' .ogg' type='audio/ogg'>
<source src=' .mps' type='audio/mpeg'>
您的浏览器不支持audio元素
</audio>
<video src='movie.ogg' width='230' height='230' controls>
您的...
</video>