本教程适用人群
只要你对网页前端技术感兴趣，你就可以学习，听了本教程之后你也会学会利用HTML5制作出一个完美的网页
课后目标
1、完全掌握HTML5网页结构
2、熟悉并掌握常用的CSS3新增的样式属性
3、能够独立地完成常见HTML5网页
HTML+css3基础入门
第一讲、初识HTML5
1、什么是HTML5
HTML—超文本标记语言（HyperText Markup language）：一种语法简单、结构清晰的语解释型文档。
HTML5就是HTML网页标记语言的第五次重大更新产品。
2、HTML5的目标
- 用更简洁的HTML代码创建更多功能的网页程序
- 让网页结构更加清楚明了
- 增加了更加语义化的结构标签，使网页结构清晰，一目了然！
3、HTML5的好处
解决不兼容问题，将HTML5网页上的音视频、图像、动画等等都带入一个国际标准化，为开发人员节约时间。
4、结构清晰的HTML5
HTML5中增加了主体元素，比如新增的NAV标签，表示导航的意思，之前使用DIV并没有实际的意义！
5、放心的使用HTML5
- 兼容性：HTML5在老版本的浏览器上面也可以完美运行。
- 实用性：HTML5抛弃了不切实际的功能，一切按照实用性的线路出发！
6、WebStorm开发工具安装
第二讲、最基本的HTML5网页骨架
...
...
...
1、新的网页结构
1）DOCTYPE声明
HTML4中的DOCTYPE声明格式
HTML5中的DOCTYPE声明格式
2）网页字符编码
在HTML4中指定元素的形式来制定网页的字符编码
在HTML5中对元素直接进行追加sharset属性来指定字符
3）元素
表示页面中的一个内容区块或者整个页面的标题❓
使用方法：
4）
表示页面中的导航链接
5）元素
表示页面中的一块与上下文不相关的的独立内容，比如一篇文章中的文章
6）元素
表示页面中的一块内容区块，比如章节的页眉、页脚等等。也可以和Hn（h1、h2..)等一起使用，标示出文档的结构！
7）
表示article元素的内容之外的，和内容相关的辅助信息，如文章的侧栏
8）
表示页面或者是页面中的一块区域的页脚，比如存放文件的创建时间、作者、联系方式等等。
2、新增的主体 结构元素
1）article元素
标签定义及使用说明
菜鸟教程：html5_article
article元素
创建时间:
article是一个独立的区域
section:h2标题
嵌套article1中的标题
噜啦啦噜啦啦
嵌套article2中的标题
咕噜咕噜咕噜
2）section元素
section，顾名思义就是一个章节
不推荐没有标题的内容实用section元素
HTML5轮廓工具
⚠️：
♦️section不是通用容器元素。如果仅仅是用于设置样式或脚本处理，应用div元素。
♦️只有元素内容会被列在文档大纲中时，才适合用section元素。
♦️我们可以理解为一个非文章段落，有明确 id 的一个特殊模块容器（不是专用以包住块的容器）。
特别强调：section 不是一个专用来做容器的标签，专用的是 div ，也就是说，一般情况下作为元素容器，使用div而不是section
section 里应该有 标题（h1~6），但文章中推荐用 article 来代替
菜鸟教程：html5_section
这是一个section元素
这里是一个内容区域
这是次级section1
次级section1的内容
这是次级section2
次级section2的内容
3）aside元素
标题：aside元素
article标题
article正文内容
4）nav元素
nav的使用方法
NAV-1
NAV-2
5）time元素
6）pubdate 属性
指示
Hello,Pubdate
发布时间：
3、新增的非主体 结构元素
1）header元素
一个header元素至少可以包含一个heading元素（h1-h6），也可以包括hgroup元素、NAV元素等
⚠️在一个文档中，可以定义多个
⚠️
2）hgroup元素
已弃用
将标题和它的子标题进行分组
hgroup元素一般会把h1-h6的元素进行分组，如在一个内容区块的标题和他的子标题是一组。
通常情况下，文章只有一个主标题时，不需要hgroup元素。
3）footer元素
假如您使用
4）address元素
标签定义文档作者/所有者的联系信息，在页面中呈现联系信息，包括文档的作者、邮箱、地址、电话信息等。展示和文章中的相关的联系人的所有联系信息。
元素的文本通常呈现为斜体。大多数浏览器会在该元素的前后添加换行。
如果
元素位于 元素内部，则它表示该文档作者/所有者的联系信息。如果 元素位于
文档标题
文章正文
4、新增和废除元素的认识
1）其他新增元素
1⃣️新增的figure元素与figcaption元素,是一种元素的组合，带有可选标题
- figcaption元素必须书写在figure元素内部，可以写在figure元素内的其他从属元素前面或后面。
- 一个figure元素内最多只允许放置一个figcaption元素。
The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.
Fig.1 - A view of the pulpit rock in Norway.
2⃣️新增的details元素与summary元素
⚠️目前，只有 Chrome 和 Safari 6 支持
details元素是一种用于标识该元素内部的子元素 可以被展开、收缩显示的元素。
用来供用户开启关闭的交互式控件。任何形式的内容都能被放在
details元素具有一个布尔类型的属性——open：
✤ 当该值为true时，该元素内部的子元素应该被展开显示
✤ 当该属性值为false时，其内部的子元素应该被收缩起来不显示
✤ 该属性的默认值为false。
✳️
summary元素从属于details元素
✤ 与
✤ 标题是可见的，用户点击标题时，会显示出 details。
✤
✤ 如果details元素内没有summary元素，浏览器那你会提供默认的文字以供点击，例如“details”
Copyright 1999-2011.
- by Refsnes Data. All Rights Reserved.
All content and graphics on this web site are the property of the company Refsnes Data.
注意：目前，只有 Chrome 和 Safari 6 支持 details 标签。
3⃣️新增的mark元素
mark元素表示页面中需要突出显示或高亮显示的，对于 当前用户 具有参考作用的一段文字。
✳️主要目的：吸引 当前用户 的注意。
请在需要突出显示文本时使用 标签。
⚠️Internet Explorer 8 及更早版本不支持 标签。
mark元素是对原文内容有补充作用的一个元素，他应该用在一段原文作者不认为重要的，但是现在为了与原文作者不相关的其他目的而需要突出显示或者高亮显示的文字上面。
mark元素还有一个作用：在引用原文时，为了某种特殊的目的而把作者没有表示出来的内容重点表示出来。
Do not forget to buy milk today.
4⃣️新增的progress元素
下载进度：
注意： IE 9 或者更早版本的 IE 浏览器不支持 progress 标签。
注释：
✤ value属性表示已经完成了多少工作量，max属性表示总共有多少工作量。工作量的单位是随意的，不指定。
✤ 在设定属性点时候，value属性和max属性只能指定为有效的浮点数，value属性必须大于0，且小于或等于max的属性，max的属性必须大于0。
5⃣️新增的meter元素
展示给定的数据范围：
2/10
2 out of 10
60%
60%
optimum < low
optimum > high
low < optimum < high
注意： IE 浏览器不支持 meter 标签。
比如：磁盘使用情况，查询结果的相关性等。
⚠️注意：
属性
- value：在元素中特地地表示出来的 实际值 。默认为0，可以为浮点小数值。
- min：定义最小值，默认值是 0，不能小于0。
- max：定义最大值，默认值是 1。如果设定时小于min的值，则把min的值视为最大值。
- low：规定被 界定 为低的值的范围，必须<=high的值。
- high：规定被 界定 为高的值的范围。如果小于low的值，则把low的值视为high属性的值，如果大于max的值，则把max的值视为high的值。
- optimum：最佳值 必须在min与max之间，可以大于high的值。
如果该值高于 "high" 属性，则意味着值越高越好。
如果该值低于 "low" 属性的值，则意味着值越低越好。
optimumoptimum>high 表现为红色❤️
low
2）废除元素
1⃣️能使用CSS代替的元素：
basefont、big、center、font、s、strike、tt、u
标签用来制作更大的文本
标签规定文本的字体、字体尺寸、字体颜色
标签对那些不正确、不准确或者没有用的文本进行标识。
定义加删除线文本
标签定义打字机文本
2⃣️不再使用frame框架
对于frameset元素、frame元素与noframes元素，由于frame框架对页面可用性存在负面影响，在html5里面已经不支持frame框架，只支持iframe框架，同时废除以上这三个元素。
3⃣️只有部分浏览器支持的元素
applet元素、bgsound、blink、marquee元素
- bgsound元素、marquee元素，只被IE浏览器支持，所以在HTML5里面被废除！
- applet元素可以由embed元素或者object元素代替
- bgsound元素由audio元素代替
- marquee可以使用javascript来代替！
4⃣️其他被废除的元素
- rb 使用ruby元素代替
- acronym 使用abbr元素代替
- dir 使用ul元素代替
- inindex 使用form元素与input元素相结合的方式代替
- listing 使用pre元素代替
- xmp 使用code元素代替
- nextid 使用GUIDS代替
- plaintext 使用“text/plian” MIME类型代替
3）Html5大纲
1⃣️HTML5大纲上
（1）在HTML5中，可以使用之前我们所学习的结构元素来编排一份网页大纲
我们可以通过这个网页大纲来了解网页中具有那些内容，网页中以什么样的形式来组织这些内容有更清楚的认识。
（2）HTML5大纲分析工具
http://gsnedders.html5.org/outliner
（3）分析一个网页的大纲！
♦️找到出现 Untitled Section 的原因并解决！
（4）header元素可以做大纲吗？
（5）在header元素中用图片来生成大纲的方法！
（6）关于nav元素和aside元素。
2⃣️HTML5大纲下
网页大纲的编排规则
可以分为“显式编排”和“隐式编排”两种方式。
（1）显式编排
显式编排 指明确使用section元素进行分块，每个内容区块内使用标题（h1~h6）
（2）隐式编排
隐式编排 指不使用section元素进行明确的区块划分，而是根据标题元素h1-h6的级别进行自动创建区块。
（3）标题分级
不同的标题有不同的级别，在（h1-h6）中h1的级别最高，而h6的级别最低。所以在隐式编排的情况下就会按照以下规则生成！
- 如果出现新的标题比上一个标题级别低，那么将生成下级内容区块！
- 如果新出现的标题比上面出现的一个标题级别高或者级别相同，那么就生成新的内容区块！
（4）不同的内容区块可以使用相同级别的标题
父内容区块与子内容区块都可以使用相同级别的H1标题
5、加强版的ol与dl
- Coffee
- Tea
- Milk
- Coffee
- Tea
- Milk
- Coffee
- Tea
- Milk
- Coffee
- Tea
- Milk
1）ol的start属性和reversed属性
- 标签定义了一个有序列表. 列表排序以数字来显示。
- 标签来定义列表选项。
提示： 无序列表使用- 标签。
（1）start：定义标号的开始值。HTML5不支持，不赞成使用。请使用样式取代它。
（2）reversed：反向编号(9,8,7...)
（3）type：规定列表的类型（1、A、a、I、i） 不赞成使用。请使用样式代替。2）重新定义含义的dl元素
- Coffee
- Black hot drink
- Milk
- White cold drink
dl dt dd- 在 HTML 4.01 中，
- 是一个专门用来定义术语的列表。
- 在 HTML5 中，把dl元素进行了重定义。每一项包含一条或者多条带名字的dt（定义项目/名字），用来表示术语，dt后面紧跟一个或者多个dd（描述每一个项目/名字），用来表示定义。重定义后的dl列表包含多个带名字的列表项。
6、初识CANVAS
HTML5
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性
getContext("2d")可用于在画布上绘制文本、线条、矩形、圆形等等颜色、样式和阴影
属性 描述 fillStyle 设置或返回用于填充绘画的颜色、渐变或模式 strokeStyle 设置或返回用于笔触的颜色、渐变或模式 shadowColor 设置或返回用于阴影的颜色 shadowBlur 设置或返回用于阴影的模糊级别 shadowOffsetX 设置或返回阴影距形状的水平距离 shadowOffsetY 设置或返回阴影距形状的垂直距离 方法 描述 createLinearGradient() 创建线性渐变（用在画布内容上） createPattern() 在指定的方向上重复指定的元素 createRadialGradient() 创建放射状/环形的渐变（用在画布内容上） addColorStop() 规定渐变对象中的颜色和停止位置 线条样式
属性 描述 lineCap 设置或返回线条的结束端点样式 lineJoin 设置或返回两条线相交时，所创建的拐角类型 lineWidth 设置或返回当前的线条宽度 miterLimit 设置或返回最大斜接长度 矩形(rectangle)
方法 描述 rect() 创建矩形 fillRect() 绘制“被填充”的矩形 strokeRect() 绘制矩形（无填充） clearRect() 在给定的矩形内清除指定的像素 路径
方法 描述 fill() 填充当前绘图（路径） stroke() 绘制已定义的路径 beginPath() 起始一条路径，或重置当前路径 moveTo() 把路径移动到画布中的指定点，不创建线条 closePath() 创建从当前点回到起始点的路径 lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条 clip() 从原始画布剪切任意形状和尺寸的区域 quadraticCurveTo() 创建二次贝塞尔曲线 bezierCurveTo() 创建三次方贝塞尔曲线 arc() 创建弧/曲线（用于创建圆形或部分圆） arcTo() 创建两切线之间的弧/曲线 isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false 转换
方法 描述 scale() 缩放当前绘图至更大或更小 rotate() 旋转当前绘图 translate() 重新映射画布上的 (0,0) 位置 transform() 替换绘图的当前转换矩阵 setTransform() 将当前转换重置为单位矩阵。然后运行 transform() 文本
属性 描述 font 设置或返回文本内容的当前字体属性 textAlign 设置或返回文本内容的当前对齐方式 textBaseline 设置或返回在绘制文本时使用的当前文本基线 方法 描述 fillText() 在画布上绘制“被填充的”文本 strokeText() 在画布上绘制文本（无填充） measureText() 返回包含指定文本宽度的对象 图像绘制
方法 描述 drawImage() 向画布上绘制图像、画布或视频 像素操作
属性 描述 width 返回 ImageData 对象的宽度 height 返回 ImageData 对象的高度 data 返回一个对象，其包含指定的 ImageData 对象的图像数据 方法 描述 createImageData() 创建新的、空白的 ImageData 对象 getImageData() 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据 putImageData() 把图像数据（从指定的 ImageData 对象）放回画布上 合成
属性 描述 globalAlpha 设置或返回绘图的当前 alpha 或透明值 globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上 其他
方法 描述 save() 保存当前环境的状态 restore() 返回之前保存过的路径状态和属性 createEvent() getContext() toDataURL() 1）简单了解canvas
Title （1）创建一个canvas画布
画布的创建方法：指定id、width（画布宽度）、height（画布高度）。
例如：
即创建一个画布，长度为500，高度为350.（2）引入绘画脚本
引入脚本的方法：
比如：
即：引入一个名为canvas的JS脚本，JS脚本的语言编码是utf-8（3）使用draw函数进行绘画
在body的属性里面，使用
onload="draw('canvas');"语句。调用脚本文件中的draw函数进行图形绘画。
2）绘制一个矩形（rectangle）
（1）获取canvas元素
用
getElementById方法获取到canvas对象。
var c=document.getElementById("myCanvas");（2）取得上下文，创建 context 对象
在绘制图形的时候要用到图形上下文，图形上下文是一个封装了很多绘图功能的对象。要使用canvas对象的getContext() 方法获得图形上下文。在draw函数中把参数设置为“2d”。
var ctx=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。（3）填充与会绘制边框
canvas绘制边框有两种方法：
- 填充（fill）
将图形内部填满。 - 绘制边框（stroke）
不把图形内部填满，只是绘制图形的外框。
下面的两行代码绘制一个红色的矩形：
ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75);✤ fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
上述fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。（4）设置绘制样式
当我们在绘制图形的时候，首先要设定好绘制的样式，然后我们就可以调用有关的方法进行绘制。
fillStyle属性
填充的样式，在这个属性里面设置填入的填充颜色值。
✤ 设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。strokeStyle属性
图形边框的样式，在这个属性里面设置填入边框的填充颜色。
（5）指定画笔宽度
通过对上下文对象（context）的lineWidth属性来设置图形边框的宽度，任何直线的宽度都是可以通过lineWidth来设置直线的宽度的。
context.lineWidth = 5;（6）设置颜色值
绘制图形的时候要填充的颜色或者边框分别可以通过fillStyle属性和strokeStyle属性来指定。
颜色的值可以使用:
- 16进制的颜色值（#000000）
- 颜色名（black）
rgb（rgba(0,0,0）)rgba（rgba(0,0,0,0.1)）
（7）绘制矩形
使用fillRect方法和strokeRect方法来填充矩形和绘制矩形的边框。
填充：context.fillRect（x,y,width,height）
绘制：context.strokeRect（x,y,width,height）
这两种方法的参数都是一样的X：矩形的起点横坐标，y：矩形的起点纵坐标
canvas 的左上角坐标为 (0,0)，为其原点
width：矩形的长度，height：矩形的高度。3）绘制一个圆形
（1）开始创建路径
使用图形上下文对象的beginPath方法。
context.beginPath（）;（2）创建图形路径
创建圆形路径时，需要使用图形上下文对象的arc方法。
context.arc（x,y,radius,starAngle,endAngle,anticlockwise）
x是绘制圆形的起点横坐标，y是绘制圆形起点的纵坐标，radius是圆形的半径，starAngle是开始的角度，endAngle是结束的角度，anticlockwise是否按顺时针方向绘制。
绘制半径与圆弧时指定参数为开始弧度与结束弧度，如果你喜欢使用角度，可以使用以下这个方法，把角度换成弧度。
var radius = degrees*Math.PI/180
这个里面的Math.PI表示的角度是180度，Math.PI*2的角度是360度。（3）创建完成关闭路径
使用图形上下文对象的closePath方法将路径关闭。
context.closepath();（4）设置绘制样式然后调用绘制方法进行绘制
context.fillStyle = 'rgba(255,0,0,0.25)'; context.fill();4）绘制文字
（1）设置文字字体
context.font = "font-weight font-size font-family ";
context.font有三个参数，第一个参数font-weight
第二个参数font-size规定文本的字体尺寸
第三个参数font-family 规定文本的字体系列
font-family 可以的值是'ariSDal','arial','宋体','微软雅黑'...等等任何字体。（2）设置文字垂直对齐方式
context.textBaseline = 'alphabetic';
属性值可以是top（顶部对齐）、hanging（悬挂）、middle（中间对齐）、、bottom（底部对齐）、alphabetic是默认值。（3）设置文字水平对齐方式
conText.textAlign = "start"
属性值可以设置为：start、end、left、right、center。5）保存文件
很多时候绘制完成的图片需要保存，那么我们就可以使用到Canvas API来完成这最后一步！
Canvas API使用toDataURL方法把绘画的状态输出到一个 data URL中然后重新装载，然后我们就可以把重新装载后的文件直接保存。Canvas API保存文件的原理实际上就是把我们绘画的状态动态输出到一个data URL地址所指向的数据中的过程。
什么是data URL ?
data URL实际上就是base64位编码的URL,主要用于小型的，可以在网页中直接嵌入，而不需要从外部嵌入数据，比如img元素里面的图像文件。data URL的格式 “data:image/jpeg;base64,/9j/4...”
toDataURL的使用方法
canvas.toDataURL（type）;
这个方法使用一个参数type，表述输出数据的MIME类型。
什么是MIME类型：
jpg image/jpeg6）canvas小示例
在canvas画布中制作动画相对来说很简单，实际上就是不断变化坐标、擦除、重绘、的过程。
（1）使用setInterval 方法设置动画的间隔时间。
setInterval(code,millisec)
setInterval方法html中固有方法，这个方法接受两个参数，第一个函数表示执行动画的函数，第二个参数为间隔时间，单位是（毫秒）。（1）用来绘图的函数
- 通过不断的变换X和Y的坐标来实现动画效果。
- 在该函数中先用clearRect方法将画布整体或者是局部擦除。
擦除图像clearRect方法：
context.fillRect(x,y,width,height);
x是指我们起点的横坐标，y是指我们起点的纵坐标，width是指擦子的长度，height是指擦子的高度。4、本地储存
1）Web Storsge
（1）sessionStorage临时保存
（2）localStorage永久保存
2）实战简单的访客留言板
5、影音多媒体
1）video元素与audio元素的基础知识
2）viedo与audio的常用属性
3）video与audio的4种方法
6、HTML5拖放API
1）拖放的步骤
2）DataTransfer对象的属性与方法
3）拖放的时的效果
使用