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,rgrd.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>

下面是所有的效果截图：