一、html5大纲
基本内容
在HTML5中，可以使用之前我们所学习的结构元素来编排一份网页大纲，那样我们就可以通过这个网页大纲来了解网页中具有那些内容，网页中以什么样的形式来组织这些内容有更清楚的认识。HTML5大纲分析工具：/outliner显性编排
显式编排是指明确使用section元素进行分块来创建网页文档，每个内容区块内使用标题（h1~h6）<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body><h1>显性编排</h1><p>这里介绍显示编排</p><section><h2>区块A</h2><p>内容</p></section><section><h2>区块B</h2><p>内容</p></section></body></html>
隐式编排
所谓的隐式编排，就是我们不使用section元素进行明确的区块划分，而是根据我们写的（h1-h6、hgroup等）元素进行自动创建区块，因为HTML5的分析器可以根据不同级别的标题判断出对应的内容区块。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body><h1>隐式编排</h1><p>隐式编排<</p><h2>子目录A</h2><p>子目录</p><h2>子目录B</h2><p>子目录</p><h3>子子目录A</h3><p>子子目录</p><h3>子子目录B</h3><p>子子目录</p><h2>子目录C</h2><p>子目录</p><h2>子目录D</h2><p>子目录</p></body></html>
标题分级
不同的标题有不同的级别，在（h1-h6）中h1的级别最高，而h6的级别最低。所以在隐式编排的情况下就会按照以下规则生成！1）、如果出现新的标题比上一个标题级别低，那么将生成下级内容区块！
2）、如果新出现的标题比上面出现的一个标题级别高，或者两者级别相同，那么就生成新的内容区块！
补充：
不同的内容区块可以使用相同级别的标题，父内容区块与子内容区块都可以使用相同级别的H1标题。
二、ol和dl元素
ol的start属性和reversed属性
可以通过start属性来定义标号的开始值。可以通过reversed属性来进行反向编号。重新定义含义的dl元素
dl元素在HTML5中，把dl元素进行了重定义。每一项包含一条或者多条带名字的dt元素，用来表示术语，dt元素后面紧跟一个或者多个dd元素，用来表示定义。重定义后的dl列表包含多个带名字的列表项。<dt>html5</dt><dd>html5是超文本标记语言</dd>
三、简单图形绘制
canvas
1. 创建一个canvas画布
画布的创建方法：指定id、width（画布宽度）、height（画布高度）。
例如：
上面这个实例的意思就是，创建一个画布，长度为500，高度为350.
2. 引入绘画脚本
引入脚本的方法：
比如：
上面这个实例的意思就是：引入一个名为canvas的JS脚本，JS脚本的语言编码是utf-8
3. 使用draw函数进行绘画
在body的属性里面，使用οnlοad="draw(‘canvas’);"语句。调用脚本文件中的draw函数进行图形绘画。
基本样式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="canvas.js"></script></head><body onload="draw('canvas');"><canvas id="canvas" width="500" height="350"></canvas></body></html>
绘制一个矩形
绘制步骤：
获取canvas元素取得上下文填充与会绘制边框设置绘制样式指定画笔宽度设置颜色值绘制矩形 创建一个javascript文件function draw(id){var canvas = document.getElementById(id);var context = canvas.getContext('2d');context.fillStyle = "green";//背景颜色context.strokeStyle = "#fff";//边框颜色context.lineWidth = 5;//边框宽度context.fillRect(0,0,400,300);//填充部分位置context.strokeRect(50,50,180,120);//边框位置}
创建一个html文件
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>canvas绘制矩形</title><script type="text/javascript" src="canvas.js"></script><style type="text/css">body{margin: 0;padding: 0;}</style></head><body onload="draw('canvas')"><canvas id="canvas" width="400" height="300"></canvas></body></html>
