我在这段时间学习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中：
<canvas ></canvas>
在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();
如图：
这期结束！！！！！！！！！！！
