html学习笔记（一）

主要的一些HTML5的新方法:

canvas 提供给开发者能够在网页上画图  简单了学习了之后感觉这个渐变功能不错

<canvas id="myCanvas" width="100" height="100"></canvas>
		<canvas id="myCanvas2" width="100" height="100"></canvas><br>
<script type="text/javascript">
		var c = document.getElementById("myCanvas");
		var ctx = c.getContext('2d'); //获取上下文
		var grd = ctx.createRadialGradient(50, 50, 0, 50, 50, 80); //创建一个放射性的渐变到画布上   前三个参数是开始圆的x,y,r 后三个是结束圆的x,y,r
		grd.addColorStop(0, "red");// 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
		grd.addColorStop(1, "white");
		ctx.fillStyle = grd; //	设置或返回用于填充绘画的颜色、渐变或模式。
		ctx.fillRect(0, 0, c.width, c.height); //填充到画布
		var c2 = document.getElementById("myCanvas2");
		var ctx2 = c2.getContext("2d");
		var grd2 = ctx2.createLinearGradient(0, 0, 100, 100);
		grd2.addColorStop(0, "black");
		grd2.addColorStop(1, "white");
		ctx2.fillStyle=grd2;
		ctx2.fillRect(0,0,100,100);
	</script>

input中的一些新的type：

选择你喜欢的颜色: <input type="color" name="favcolor"><br>
		生日 (日期和时间): <input type="datetime-local" name="bdaytime"><br/>
		生日: <input type="date" name="bday"><br />
		E-mail: <input type="email" name="email"><br />
		数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5"><br />
		滑块<input type="range" name="points" min="1" max="10"><br/>
		Search Google: <input type="search" name="googlesearch"><br>

mark是对字进行标记 就是给字加上一个背景色 默认是黄色

<p>Do not forget to buy <mark style="background-color: navajowhite;">milk</mark> today.</p>

下面是所有的效果截图：