Html5+CSS3

本教程适用人群

只要你对网页前端技术感兴趣，你就可以学习，听了本教程之后你也会学会利用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网页骨架


<!DOCTYPE html><!--声明为 HTML5 文档-->
<html><!--HTML 页面的根元素-->
<head lang="en"><!--<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。-->
       <meta charset="UTF-8">
       <title></title><!--文档的标题-->
</head>
<body><!--包含了可见的页面内容-->
  <header>...</header><!--定义文档或者文档的一部分区域的页眉-->
  <nav>...</nav><!--定义导航链接-->
  <article>...</article><!--定义独立的内容，定义的内容本身必须是有意义的且必须是独立于文档的其余部分-->
  <section>...</section><!--定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域-->
  <aside>...</aside><!--定义 <article> 标签外的内容，内容应该与附近的内容相关，可用作文章的侧栏-->
  <footer>...</footer><!--定义文档或者文档的一部分区域的页脚，应该包含它所包含的元素的信息，一般该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。-->
</body>
</html>

1、新的网页结构

1）DOCTYPE声明

HTML4中的DOCTYPE声明格式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
HTML5中的DOCTYPE声明格式
<!DOCTYPE html>

2）网页字符编码

在HTML4中指定<meta>元素的形式来制定网页的字符编码
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

在HTML5中对<meta>元素直接进行追加sharset属性来指定字符
<meta charset=UTF-8" />

3）<header>元素

表示页面中的一个内容区块或者整个页面的标题❓
使用方法：<header></header>

4）<nav>元素

表示页面中的导航链接
<nav>...</nav>

5）<article>元素

表示页面中的一块与上下文不相关的的独立内容，比如一篇文章中的文章
<article></article>

6）<section>元素

表示页面中的一块内容区块，比如章节的页眉、页脚等等。也可以和Hn（h1、h2..)等一起使用，标示出文档的结构！
<section></section>

7）<aside>元素

表示article元素的内容之外的，和内容相关的辅助信息，如文章的侧栏
<aside><aside>

8）<footer>元素

表示页面或者是页面中的一块区域的页脚，比如存放文件的创建时间、作者、联系方式等等。
<footer></footer>

2、新增的主体结构元素

1）article元素

标签定义及使用说明

<article> 标签定义独立的内容。
<article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。
<article> 的潜在来源：论坛帖子、博客文章、新闻故事、评论
菜鸟教程：html5_article

<article>
    <header>
        <h1>article元素</h1>
        <p>创建时间:<time pubdate="pabdate">2019/3/15</time></p>
    </header>
    <p>
        <b>article</b>是一个独立的区域
    </p>
    <section>
        <h2>section:h2标题</h2>
        <article>
            <header>
                <h3>嵌套article1中的标题</h3>
                <p>
                    <time pubdate datetime="2019/3/15T17:00">2小时前</time>
                </p>
            </header>
            <p>
                噜啦啦噜啦啦
            </p>
        </article>
        <article>
            <header>
                <h3>嵌套article2中的标题</h3>
                <p>
                    <time pubdate datetime="2019/3/15T17:00">2小时前</time>
                </p>
            </header>
            <p>
                咕噜咕噜咕噜
            </p>
        </article>
    </section>
    <footer>
        <p><small>Copyright@ZoeyZu</small></p>
    </footer>
</article>

article 运行结果

2）section元素

section，顾名思义就是一个章节
<section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。
不推荐没有标题的内容实用section元素
HTML5轮廓工具

没有标题的section结构目录显示untitled section

⚠️：
♦️section不是通用容器元素。如果仅仅是用于设置样式或脚本处理，应用div元素。
♦️只有元素内容会被列在文档大纲中时，才适合用section元素。
♦️我们可以理解为一个非文章段落，有明确 id 的一个特殊模块容器（不是专用以包住块的容器）。
特别强调：section 不是一个专用来做容器的标签，专用的是 div ，也就是说，一般情况下作为元素容器，使用div而不是section
section 里应该有标题（h1~6），但文章中推荐用 article 来代替

菜鸟教程：html5_section

<section>
    <h1>这是一个section元素</h1>
    <p>这里是一个内容区域</p>
    <section>
        <h2>这是次级section1</h2>
        <p>次级section1的内容</p>
    </section>
    <section>
        <h2>这是次级section2</h2>
        <p>次级section2的内容</p>
    </section>
</section>

section 运行结果

3）aside元素

<aside> 标签定义 <article> 标签外的内容。
aside 的内容应该与附近的内容相关。
<aside> 的内容可用作文章的侧栏

<header>
    <h1>标题：aside元素</h1>
</header>
<article>
    <h2>article标题</h2>
    <p>article正文内容</p>
    <aside>
        <h3>aside——附加信息：aside相关</h3>
        <dl>
            <dt>aside</dt>
            <dd>aside标签定义 article标签外的内容</dd>
            <dd>aside 的内容应该与附近的内容相关</dd>
            <dd>aside的内容可用作文章的侧栏</dd>
        </dl>
    </aside>
</article>

aside 运行结果

<aside>
    <h1>aside作为全局站点附属通知</h1>
    <h1>网站公告</h1>
    <p>国庆节放假同知</p>
    <p>中秋节放假同知</p>
</aside>

aside作为全局站点附属通知

4）nav元素

<nav> 定义导航链接
并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav> 元素只是作为标注一个导航链接的区域。
在不同设备上（手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求。
使用场合
1、传统的导航条
2、侧边栏导航
3、内页导航
4、翻页操作

<h1>nav的使用方法</h1>
<nav>
    <ul>
        <li>
            <a href="html5_nav.html">首页</a>
        </li>
        <li>
            <a href="html5_aside.html">aside</a>
        </li>
        <li>
            <a href="html5_section.html">section</a>
        </li>
    </ul>
</nav>
<article>
    <header>
        <h2>
            NAV-1
        </h2>
        <nav>
            <li>
                <a href="新增的主体结构元素.html">新增的主体结构元素</a>
            </li>
            <li>
                <a href="html5_section.html">section</a>
            </li>
        </nav>
    </header>
</article>
<article>
    <header>
        <h2>
            NAV-2
        </h2>
        <nav>
            <li>
                <a href="新增的主体结构元素.html">新增的主体结构元素</a>
            </li>
            <li>
                <a href="html5_section.html">section</a>
            </li>
        </nav>
    </header>
</article>

<footer>
    <p>
        <a href="/">©️版权信息</a>
        <a href="/">站点帮助</a>
        <a href="/">联系我们</a>
    </p>
</footer>

nav 运行结果

5）time元素

<time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的，表示时间时允许带时差。
能够以机器可读的方式对日期和时间进行编码，如，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。
可以定义的格式如下：
<time datetime="2014-9-28">2014年9月28<time>
<time datetime="2014-9-28">9月28<time>
<time datetime="2014-9-28">今天的时间<time>
<time datetime="2014-9-28T22:30">2014年9月28晚上10点<time>日期后加T表示具体时间
<time datetime="2014-9-28T22:30Z">UTC标准时间2014年9月28晚上10点<time>尾部加Z表示UTC标准时间
<time datetime="2014-9-28T22:30+8:00">中国时间2014年9月28晚上10点<time>设置时区

6）pubdate 属性

指示 <time> 元素中的日期 / 时间是文档（或最近的前辈 <article> 元素）的发布日期
当页面中含有多个time元素时，含有pubdate属性的time表示当前文章的发布时间

 <h1>Hello,Pubdate</h1>
    <p>发布时间：<time datetime="2019/3/16" pubdate="pubdate">2019-3-16</time> </p>

3、新增的非主体结构元素

1）header元素

<header> 具有引导和导航作用的结构元素，定义文档或者文档的一部分区域的页眉。

<header> 元素应该作为介绍内容或者导航链接栏的容器，通常用来放置整个页面或页面内的一个内容区块的标题，也可以包含其他的内容，如logo图片、搜索表单等等

图中网页标题和文章标题适合使用header元素

一个header元素至少可以包含一个heading元素（h1-h6），也可以包括hgroup元素、NAV元素等

⚠️在一个文档中，可以定义多个 <header> 元素，可以在同一页面内，不同的内容区块上加上header元素
⚠️<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。

2）hgroup元素

已弃用
将标题和它的子标题进行分组
hgroup元素一般会把h1-h6的元素进行分组，如在一个内容区块的标题和他的子标题是一组。
通常情况下，文章只有一个主标题时，不需要hgroup元素。

3）footer元素

<footer> 标签定义文档或者文档的一部分区域的页脚，可以作为他的上层父级内容区块或是一个根区块的注脚

<footer> 元素应该包含它所包含的元素的信息。
一般情况下包括与它相关的区块的注脚信息，如作者、版权信息、使用条款的链接、联系信息等。

假如您使用 <footer> 元素来插入联系信息，应该在 <footer> 元素内使用 <address>标签。
在一个文档中，可以定义多个 <footer> 元素。
footer元素可以为article元素或者section元素所添加。

4）address元素

<address> 标签定义文档作者/所有者的联系信息，在页面中呈现联系信息，包括文档的作者、邮箱、地址、电话信息等。
展示和文章中的相关的联系人的所有联系信息。
<address> 元素的文本通常呈现为斜体。大多数浏览器会在该元素的前后添加换行。

如果 <address> 元素位于 <body> 元素内部，则它表示该文档作者/所有者的联系信息。
如果 <address> 元素位于 <article> 元素内部，则它表示该文章作者/所有者的联系信息。

<header>
    <h1>文档标题</h1>
</header>
<p>文章正文</p>
<footer>
    <address>
    Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
    Visit us at:<br>
    Example.com<br>
    Box 564, Disneyland<br>
    USA
    </address>
</footer>

footer address 运行结果

4、新增和废除元素的认识

1）其他新增元素

1⃣️新增的figure元素与figcaption元素,是一种元素的组合，带有可选标题

<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。
<figure> 元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。

<figcaption>元素被用来为 <figure> 元素定义标题,它属于figure元素

figcaption元素必须书写在figure元素内部，可以写在figure元素内的其他从属元素前面或后面。
一个figure元素内最多只允许放置一个figcaption元素。

<p>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.</p>

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>

figure figcaption 运行结果

2⃣️新增的details元素与summary元素

⚠️目前，只有 Chrome 和 Safari 6 支持 <details> 标签
details元素是一种用于标识该元素内部的子元素可以被展开、收缩显示的元素。
用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。

details元素具有一个布尔类型的属性——open：
✤ 当该值为true时，该元素内部的子元素应该被展开显示
✤ 当该属性值为false时，其内部的子元素应该被收缩起来不显示
✤ 该属性的默认值为false。

✳️<details> 元素的内容对用户是不可见的，除非设置了 open 属性

summary元素从属于details元素
✤ 与 <summary>标签配合使用可以为 details 定义标题
✤ 标题是可见的，用户点击标题时，会显示出 details。
✤ <summary> 元素应该是 <details> 元素的第一个子元素
✤ 如果details元素内没有summary元素，浏览器那你会提供默认的文字以供点击，例如“details”

<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

<p><b>注意：</b>目前，只有 Chrome 和 Safari 6 支持 details 标签。</p>

内部元素收缩

内部元素展开

3⃣️新增的mark元素

mark元素表示页面中需要突出显示或高亮显示的，对于 当前用户 具有参考作用的一段文字。
✳️主要目的：吸引 当前用户 的注意。
请在需要突出显示文本时使用 <mark> 标签。
⚠️Internet Explorer 8 及更早版本不支持 <mark> 标签。

mark元素是对原文内容有补充作用的一个元素，他应该用在一段原文作者不认为重要的，但是现在为了与原文作者不相关的其他目的而需要突出显示或者高亮显示的文字上面。

mark元素还有一个作用：在引用原文时，为了某种特殊的目的而把作者没有表示出来的内容重点表示出来。

<p>Do not forget to buy <mark>milk</mark> today.</p>

mark

4⃣️新增的progress元素

<body>

下载进度：
<progress value="22" max="100">
</progress>
<p><strong>注意：</strong> IE 9 或者更早版本的 IE 浏览器不支持 progress 标签。</p>

</body>

progress 任务进度表示

<progress> 标签代表一个任务（进程）的完成进度，这个进度可以是不确定的
可以用0到某个最大数字（比如100）之间的s数字来表示准确的进度情况（比如百分比）
提示：请将 <progress> 标签与 JavaScript 一起使用来显示任务的进度。

注释：<progress> 标签不适合用来表示度量衡（例如，磁盘空间使用情况或相关的查询结果）。表示度量衡，请使用 <meter>标签代替。

✤ value属性表示已经完成了多少工作量，max属性表示总共有多少工作量。工作量的单位是随意的，不指定。
✤ 在设定属性点时候，value属性和max属性只能指定为有效的浮点数，value属性必须大于0，且小于或等于max的属性，max的属性必须大于0。

5⃣️新增的meter元素

<p>展示给定的数据范围：</p>
2/10 
<meter value="2" min="0" max="10">2 out of 10</meter><br>
60% 
<meter value="0.6">60%</meter><br>
optimum &lt; low
<meter value="43.9" min="0" max="119" low="50" high="70" optimum="11"></meter><br>
optimum &gt; high
<meter value="43.9" min="0" max="119" low="50" high="70" optimum="88"></meter><br>
low &lt; optimum &lt; high
<meter value="43.9" min="0" max="119" low="50" high="70" optimum="50"></meter><br>


<p><strong>注意：</strong> IE 浏览器不支持 meter 标签。</p>

meter

<meter> 标签定义度量衡。仅用于已知最大和最小值的度量
比如：磁盘使用情况，查询结果的相关性等。
⚠️注意： <meter> 不能作为一个进度条来使用，进度条是 <progress>标签。

属性

value：在元素中特地地表示出来的 实际值 。默认为0，可以为浮点小数值。
min：定义最小值，默认值是 0，不能小于0。
max：定义最大值，默认值是 1。如果设定时小于min的值，则把min的值视为最大值。
low：规定被界定为低的值的范围，必须<=high的值。
high：规定被界定为高的值的范围。如果小于low的值，则把low的值视为high属性的值，如果大于max的值，则把max的值视为high的值。
optimum：最佳值 必须在min与max之间，可以大于high的值。
如果该值高于 "high" 属性，则意味着值越高越好。
如果该值低于 "low" 属性的值，则意味着值越低越好。
optimum<low 表现为绿色💚
optimum>high 表现为红色❤️
low<optimum<high 表现为黄色💛

2）废除元素

1⃣️能使用CSS代替的元素：

basefont、big、center、font、s、strike、tt、u
<basefont> 标签定义文档中所有文本的默认颜色、大小和字体。
<big> 标签用来制作更大的文本
<center> 对其所包括的文本进行水平居中
<font> 标签规定文本的字体、字体尺寸、字体颜色
<s> 标签对那些不正确、不准确或者没有用的文本进行标识。
<strike> 定义加删除线文本
<tt> 标签定义打字机文本

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

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
 
<ol reversed>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
    
<ol start="9" reversed>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

有序列表ol start reversed

1）ol的start属性和reversed属性

<ol> 标签定义了一个有序列表. 列表排序以数字来显示。
使用<li>标签来定义列表选项。
提示： 无序列表使用 <ul>标签。

（1）start：定义标号的开始值。HTML5不支持，不赞成使用。请使用样式取代它。
（2）reversed：反向编号(9,8,7...)
（3）type：规定列表的类型（1、A、a、I、i）不赞成使用。请使用样式代替。

2）重新定义含义的dl元素

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

dl dt dd

在 HTML 4.01 中，<dl> 是一个专门用来定义术语的列表。
在 HTML5 中，把dl元素进行了重定义。每一项包含一条或者多条带名字的dt（定义项目/名字），用来表示术语，dt后面紧跟一个或者多个dd（描述每一个项目/名字），用来表示定义。重定义后的dl列表包含多个带名字的列表项。

6、初识CANVAS

HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）
<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 必须使用脚本来完成实际的绘图任务

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

<head>
    <meta charset="UTF-8">
    <title>Title</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="400"></canvas>
</body>

（1）创建一个canvas画布

画布的创建方法：指定id、width（画布宽度）、height（画布高度）。
例如： <canvas id="canvas" width="500" height="350"></canvas>
即创建一个画布，长度为500，高度为350.

（2）引入绘画脚本

引入脚本的方法：
比如：<script type="text/javascript" src="canvas.js" charset="utf-8"></script>
即：引入一个名为canvas的JS脚本，JS脚本的语言编码是utf-8

（3）使用draw函数进行绘画

在body的属性里面，使用onload="draw('canvas');"语句。调用脚本文件中的draw函数进行图形绘画。
<body onload="draw('canvas')">

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/jpeg

6）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）拖放的时的效果

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,723评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,485评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,998评论 0赞 344
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,323评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,355评论 5赞 374
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,079评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,389评论 3赞 400
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,019评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,519评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,971评论 2赞 325
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,100评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,738评论 4赞 324
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,293评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,289评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,517评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,547评论 2赞 354
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,834评论 2赞 345