html5

浏览数：38 / 时间：2015年06月09日

我在这段时间学习WEB前端，当我学完HTML5后，其实我觉得我还是不太了解，这个东西对于我来了太过于模糊了，虽然我查了一些这个方面的资料，但还是有很多我不懂的地方，所以我也只能按我理解的一些东西来写。

而说到html5，我们就不能不说在这中间提出的语义化，而“语义化”，我对它的理解是，当我拿到一段html文件时，语义化的使用，会让我能更快更好的理解它；当我把文件生成网页后发放到网络上后，可以让搜索引擎或者爬虫软件理快的检测到我，并对我的网页建立索引，并且让我的网页的PR值上升；这就是我对它的理解。而百度是这样理解的：语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解.语义化的(X)HTML文档有助于提升你的网站对访客的易用性，比如使用PDA、文字浏览器以及残障人士将从中受益。对于搜索引擎或者爬虫软件来说，则有助于它们建立索引，并可能给予一个较高的权值。事实上SEO最有效的一种办法，就是对网页的HTML结构进行重构，实质上就是语义化。

　　而HTML 5 添加了一些新元素，用来标识常用的结构，使html更具语义化，结构也更加清晰。而下面是一些新增的结构标记：

　 <nav></nav>---------------这个标签一般使用在导航栏上，定义导航栏，让导航栏一目了然

　　<article></article>----------定义外部的内容

　　//外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容，<article> 标签的内容独立于文档的其余部分。

　　<audio>--------------------音频标签

　　<video>--------------------视频标签

　　<em>----------------------强调标签

　　<header></header>-------定义 section 或 page 的页眉

　　<hgroup></hgroup>------对网页或区段（section）的标题进行组合

　　<section></section>------定义文档中的节（section）

　　<time></time>-----------定义日期/时间

　　<table>中：

　　<caption></caption>----定义表的标题

　　<thead></thead>-------定义表头

　　<tbody></tbody>-------定义表格的主体

　　<tfoot></tfoot>--------定义表格的尾部

　　<button></button>----定义按钮

　　<datalist></datalist>----定义可选数据的列表

　　<meter></meter>------标签定义度量（单位）,仅用于已知最大和最小值的度量

　　新增的一些属性：

　　<input>中使用

　　required="required"-----必需在提交之前填写输入字段

　　type="number"---------数字输入框，可以增减数字

　　type="range"----------刻度，就用PS中调透明度的那个划块

　　type="color"-----------颜色模块，可以自己选择颜色

　　type="date"-----------日期，可以选择日期

　　上面我们介绍的是HTML5中新增的一些结构标记和属性，下面我们在介绍下个HTML5中新增的功能：

　　绘制图形----------------<canvas>

　　<canvas>是一个很重要的元素，专门用来绘制图形；

　　例如：

　　body中：

　　在script中：

　　var mycanvas=document.getElementById("mycanvas");

　　var ctx=mycanvas.getContext("2d")-------------这两名是拿到画笔，就像你要画画总要先拿笔一样；

　　现在拿到笔了，我们就可以先画一些简单的图形了；

　　　　绘制实心矩形

　　　　ctx.fillStyle="red";
　　　　ctx.fillRect(100,100,100,100);

　　　　如图：

　　　　绘制空心矩形

　　　　ctx.strokeStyle="blue";
　　　　ctx.lineWidth=5
　　　　ctx.strokeRect(10,10,100,100);

　　　　绘制有边框有填充的矩形
　　　　ctx.fillStyle="red";
　　　　ctx.strokeStyle="green";
　　　　ctx.lineWidth=1;-----------------------------边框粗细
　　　　ctx.rect(10,10,100,60);
　　　　ctx.fill();
　　　　ctx.stroke();

　　如图：

　　绘制直线
　　ctx.beginPath();---------------------- 打开
　　ctx.strokeStyle="blue";
　　ctx.fillStyle="green";

　　ctx.moveTo(400,0);------------------起点（X，Y）

　　ctx.lineTo(100,200);------------------终点（X，Y）
　　ctx.closePath();---------------------- 关闭
　　ctx.stroke();
　　ctx.fill();

　　如图：

　　现在我们根据上面所学画一棵松树：

　　body代码同上;

　　script代码如下：

　　　　var mycanvas=document.getElementById("mycanvas");
　　　　var ctx=mycanvas.getContext("2d");
　　　　ctx.beginPath();
　　　　ctx.strokeStyle="green";
　　　　ctx.fillStyle="green";
　　　　ctx.lineWidth=1;
　　　　ctx.moveTo(400,0);
　　　　ctx.lineTo(300,50);
　　　　ctx.lineTo(500,50);
　　　　ctx.lineTo(400,0);
　　　　ctx.closePath();
　　　　ctx.stroke();
　　　　ctx.fill();
　　　　ctx.beginPath();
　　　　ctx.strokeStyle="green";
　　　　ctx.fillStyle="green";
　　　　ctx.lineWidth=1;
　　　　ctx.moveTo(400,50);
　　　　ctx.lineTo(300,100);
　　　　ctx.lineTo(500,100);
　　　　ctx.lineTo(400,50);
　　　　ctx.closePath();
　　　　ctx.stroke();
　　　　ctx.fill();
　　　　ctx.beginPath();
　　　　ctx.strokeStyle="green";
　　　　ctx.fillStyle="green";
　　　　ctx.lineWidth=1;
　　　　ctx.moveTo(400,100);
　　　　ctx.lineTo(300,150);
　　　　ctx.lineTo(500,150);
　　　　ctx.lineTo(400,100);
　　　　ctx.closePath();
　　　　ctx.stroke();
　　　　ctx.fill();
　　　　ctx.beginPath();
　　　　ctx.strokeStyle="green";
　　　　ctx.fillStyle="green";
　　　　ctx.lineWidth=1;
　　　　ctx.moveTo(380,150);
　　　　ctx.lineTo(380,220);
　　　　ctx.lineTo(420,220);
　　　　ctx.lineTo(420,150);
　　　　ctx.lineTo(380,150);
　　　　ctx.closePath();
　　　　ctx.stroke();
　　　　ctx.fill();