复习html5时记录的笔记。
了解网站的基础概念，学习 HTML 基础知识，了解各种常用标签的意义以及基本用法。包括HTML5新增的语法特征。
请添加图片描述

文章目录

一、HTML概述
- 1.HTTP基础
- 2.什么是HTML
- 3.HTML网页结构
- 4.HTML注释
二、HTML常用标签
- 1.HTML标签
- 2.HTML元素
- 3.HTML常见标签
- 4.容器标签
- 5.HTML列表
- 6.HTML样式
三、HTML 表格与 DIV 应用
- 1.创建表格
- 2.完善表格
- 3.div设置
四、HTML 表单
- 1.创建表单
- 2.插入表单对象
- 3.菜单和列表
- 4.文本域
五、HTML图像与框架
- 1.插入图像
- 2.使用框架（iframe）
六、HTML5简介
- 1.HTML5代码规范
- 2.HTML5 的改变
- 3.新特性和新规则
- 4.新增的结构元素
- 5.废除的元素
七、HTML5表单
- 1.HTML5表单元素
- 2.HTML5表单新增元素
- 3.HTML5输入类型
八、HTML5 Canvas API
- 1.Canvas 元素
- 2.绘制简单图形
- 3.直线绘制
- 4.矩形绘制
- 5.圆和扇形的绘制
- 6.填充和渐变
- 7.文字绘制
- 8.图片绘制
九、HTML5 视频音频与拖放
- 1.HTML5 视频介绍
- 1.HTML5 视频介绍
- 3.HTML5 拖放
十.HTML5 Web Storage 和文件上传
- 1.Web Storage 概述
- 2.localStorage 方法
- 3.sessionStorage 方法
- 4.HTML5 文件上传概述
- 5.如何实现文件上传
- 6.文件读取
总结

一、HTML概述

1.HTTP基础

HTTP概述(转自百科)

超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的 WWW 文件都必须遵守这个标准。设计 HTTP 最初的目的是为了提供一种发布和接收 HTML 页面的方法。1960 年美国人 Ted Nelson 构思了一种通过计算机处理文本信息的方法，并称之为超文本（Hypertext）,这成为了 HTTP 超文本传输协议标准架构的发展根基。Ted Nelson 组织协调万维网协会（World Wide Web Consortium）和互联网工程工作小组（Internet Engineering Task Force ）共同合作研究，最终发布了一系列的 RFC，其中著名的 RFC 2616 定义了 HTTP 1.1。

下图描述了客户端和服务器的交互过程。当用户在浏览器输入网址后，浏览器与服务器建立了一个连接，浏览器给 Web 服务器发送了一个 HTTP 请求，服务器接收并解析请求后，返回响应。HTTP 响应中包含状态代码和返回资源的内容（响应正文）。
请添加图片描述

常见状态码

200 ：成功。

400 ：客户端请求有语法错误，服务器端不能理解。

401 ：该请求可能未经过授权。

403 ：服务器端收到该请求，但是拒绝为它提供服务，可能是没有权限等等。

404 ：该资源没找到。

500 ：服务器端发生了一个不可预知的错误。

503 ：服务器端当前还不能处理客户端的这个请求，可能过段时间之后才能恢复正常.

2.什么是HTML

HTML（超文本标记语言）是一种用于创建网页的标准标记语言。 HTML 不需要编译，可以直接由浏览器执行，它的解析依赖于浏览器的内核。它不是一种编程语言，而是一种标记语言。

3.HTML网页结构

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 简介</title>
  </head>
  <body></body>
</html>

<!DOCTYPE html> 是我们的文档声明头。他告诉了浏览器，本文档处理的是 HTML 文档。html 标签即根元素，此处表示文档的开始。head 标签是网页的头部，设置网页的相关信息。title 标签设置网页标题。body 标签定义文档的主体，也就是我们的主要内容。

4.HTML注释

在 HTML 中满足以下格式的内容即为注释，被注释的内容将不会被渲染和显示。

<!DOCTYPE html>
<html>
  <body>
    <!--这是一段注释。注释不会在浏览器中显示。-->

    <p>这是一段普通的段落。</p>
  </body>
</html>

二、HTML常用标签

1.HTML标签

HTML 标签是 HTML 语言中最基本的单位，HTML 标签是 HTML（标准通用标记语言下的一个应用）最重要的组成部分。HTML 标签的大小写无关的，例如和表示的意思是一样的，都代表“主体”，推荐使用小写。

双标签（双标记）
双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下：

<标记名></标记名>

<html></html>
<head></head>
<title></title>
<body></body>
<h1></h1>
<p></p>
<div></div>
<span></span>
<a></a>
<ul></ul>

单标签（单标记）

<标记名/>

<br />
<!--换行-->
<hr />
<!--水平分隔线-->
<meta />
<img />

标签的关系

嵌套关系

<head>
  <title> </title>
</head>

并列关系

<head></head>
<body></body>

2.HTML元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

eg：

<p>I am LW</p>

这个元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。元素内容是：I am LW。

3.HTML常见标签

h 系类标签

h 标签有六种 h1，h2，h3，h4，h5，h6，它代表着我们的标题

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 简介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>
  </body>
</html>

请添加图片描述

p 标签

p 标签是我们的文本标签。删掉上段代码标签里的内容，把下面的内容放到标签里面去。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 简介</title>
    <meta charset="utf-8" />
  </head>
  <body>
<p>我是第一段文字</p>
<p>我是第二段文字</p>
  </body>
</html>

请添加图片描述
图片标签

HTML 的图像是通过标签 <img> 来定义的。语法: <img src=“图片地址”/> 。

<!DOCTYPE html>
<html>
<head>
    <title>HTML 简介</title>
    <meta charset="utf-8" />
</head>
<body>
<p>图片</p>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />
</body>
</html>

请添加图片描述
a 标签

<a> 标签是超链接标签，意思就是我们点击它可以跳转到一个网页

<!DOCTYPE html>
<html>
<head>
    <title>HTML 简介</title>
    <meta charset="utf-8" />
</head>
<body>
<a href="https://www.baidu.com/">baidu</a>
</body>
</html>

点击文字,跳转至链接页面
请添加图片描述

div 标签

<div> 标签是一个块级元素，块级元素占据其父元素（容器）的整个空间，可以把它想成一个盒子。 <div> 能够设置其宽高，这里的效果是生成一个宽高 200 像素的粉色 div,style后面会讲到。

<!DOCTYPE html>
<html>
<head>
    <title>HTML 简介</title>
    <meta charset="utf-8" />
</head>
<body>
<div style="width:200px;height:200px;background:pink">块级元素</div>
</body>
</html>

请添加图片描述
换行标签和空格字符

在浏览器显示页面时，浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都会被认为是一个空格。如果希望在不产生一个新段落的情况下换行，可以使用 lt;br/> 标签。如果想使用空格的话可以使用&nbsp；字符。

<body>
  <p>这是一段文字 前面有很多空格但是只显示一个</p>
  <p>这是一段文字&nbsp;&nbsp;&nbsp;&nbsp;用了空格字符</p>
  <br />
  <p>上面是换行符</p>
</body>

请添加图片描述
水平分割线

<hr/> 标签用于在 HTML 页面中创建一条水平线。

<body>
  <hr />
  <hr />
  <hr />
</body>

请添加图片描述

4.容器标签

两种容器标签 div 和 span。

<div>标签

标签 <div> 可将网页页面分割成不同的独立部分，通常用于定义文档中的区域或节。该标签是一个块级元素，浏览器会自动在 <div> 和 </div> 所标记的区域前后自动放置一个换行符。

<span>标签

标签 <span> 通常作为文本的容器，它没有特定的含义和样式，只有与 CSS 同时使用才可以为指定文本设置样式属性。该标签是一个内联元素，他与块级元素相反，内联元素不会自动在前后自动放置换行符，因此内联元素会默认显示在同一行。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <style>
      #box {
    
    
        width: 200px;
        height: 200px;
        background: red;
      }
    </style>
  </head>
  <body>
    <div id="box">这是div标签，自动换行</div>
    <input type="text" /><span>这是span标签，不自动换行</span>
  </body>
</html>

请添加图片描述

5.HTML列表

列表作为网页设计的重要内容之一，能够用来制作导航栏和新闻列表等。HTML 列表分为：有序列表（ol），无序列表（ul）以及自定义列表（dl）。

无序列表与有序列表

无序列表是一个项目的列表，此列项目使用实心圆、空心圆、方块进行标记，无序列表使用 <ul> 标签。同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于<ol> 标签。每个列表项始于 <li> 标签。

<p>无序列表</p>
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>

<p>有序列表</p>
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
</ol>

可以看到有多少个列表项就有多少个 <li> 标签。请添加图片描述
无序列表和有序列表的 type 属性：

type 属性定义了列表项前项目符号的类型。

<ul> 标签的 type 属性：

值	备注
disc（默认）	实心圆
circle	空心圆
square	小方块

<ol> 标签的 type 属性

值	备注
1（默认）	数字表示（1，2，3…)
A	大写字母表示（A,B,C…)
a	小写字母表示（a,b,c…)
I	大写罗马数字表示(I,II,III…)
i	小写罗马数字表示(i,ii,iii…)

举例：

<p>无序列表</p>
<ul type="circle">
  <li>空心圆列表项1</li>
  <li>空心圆列表项2</li>
</ul>

<p>有序列表</p>
<ol type="A">
  <li>列表项1</li>
  <li>列表项2</li>
</ol>

只需要修改 type 属性，就可以看到不同的项目符号了。
请添加图片描述
自定义列表（dl）
定义：自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。自定义列表的列表项前没有任何项目符号。

语法格式：

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  ...
</dl>

例子：

<h2>一个自定义列表：</h2>
<dl>
  <dt>A</dt>
  <dd>abcdefh</dd>
  <dt>1</dt>
  <dd>12345678</dd>
</dl>

在浏览器中的运行效果为：
请添加图片描述

6.HTML样式

通过 style 属性来改变 HTML 元素的样式。

HTML 样式实例 - 背景颜色

通过 “background-color” 属性值的设置来给背景设置颜色。

<html>
  <body>
    <p style="background-color:red">小丫么小牛马</p>
  </body>
</html>

请添加图片描述

HTML 样式实例 - 字体、颜色和尺寸

通过对 font-family 属性值的设置来设置字体，通过对 color 属性值的设置来设置颜色，通过对 font-size 属性值的设计来设计字体大小。

<html>
  <body>
    <p style="font-family:arial;color:green;font-size:50px;">小牛马</p>
  </body>
</html>

请添加图片描述
HTML 样式实例 - 文本对齐

下面的标题“小牛马”相对于页面居中对齐。

<html>
  <body>
    <h1 style="text-align:center">实验楼</h1>
  </body>
</html>

请添加图片描述

三、HTML 表格与 DIV 应用

1.创建表格

表格由 <table> 标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

我们先来创建一个简单的表格：

<table>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

请添加图片描述
我们发现这个表格没有边框，接下来让我们为它添加一个 border 属性再来看看效果。

<table border="1">
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

在浏览器显示效果为：
请添加图片描述

2.完善表格

caption 元素定义表格标题

表格一般都有标题，在 HTML 中表格标题通过定义。

<table border="1" width="300px" height="150px">
  <caption>
    表格标题
  </caption>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

请添加图片描述
给表格添加表头

表格的表头使用标签进行定义，表头通常用于列名字。

<table border="1" width="300px" height="150px">
  <caption>
    支出表
  </caption>
  <tr>
    <th>支出</th>
    <th>备注</th>
  </tr>
  <tr>
    <td>32</td>
    <td>买苹果</td>
  </tr>
  <tr>
    <td>24</td>
    <td>买饮料</td>
  </tr>
</table>

请添加图片描述
表格与单元格的属性

表格的其他常用属性：

属性名	含义	常用属性值
cellspacing	设置单元格与单元格之间的距离	单位为px，像素值，默认为2px
cellpadding	设置文字与单元格之间的距离	默认为1px
width	设置表哥的宽度	单位为px
height	设置表格高度	单位为px
bgcolor	设置背景颜色	red，green等

属性的使用和 border 类似，只需要在 table 标签中添加属性即可。

单元格跨行和跨列

绘制表格的时候，我们常常需要合并单元格，而在 HTML 中提供了 colspan（合并列）和 rowspan（合并行）属性来帮助我们实现这一效果。

colspan 又称跨列，rowspan 又称跨行。

<table border="1" width="300px" height="150px">
  <h3>单元跨两列</h3>
  <tr>
    <th>姓名</th>
    <th colspan="2">电话</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>344 22 112</td>
    <td>211 32 123</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>433 31 212</td>
    <td>234 21 654</td>
  </tr>
</table>

<table border="1" cellspacing="0">
  <h3>单元跨两行</h3>
  <tr>
    <th>姓名</th>
    <td>张三</td>
  </tr>
  <tr>
    <th rowspan="2">电话</th>
    <td>344 22 112</td>
  </tr>
  <tr>
    <td>234 21 654</td>
  </tr>
</table>

请添加图片描述

3.div设置

在网页中可以使用很多个 div，在网页制作中，使用 div 可以将网页中的任何元素布局到网页中的任何位置。

语法：

<div style="样式设置"><div></div></div>

div 和 table 的区别

div 布局：

<div style="width:100%;border:1px solid #d4d4d4">
  <div style="background-color:pink">小牛</div>
  <div style="background-color:skyblue">小马</div>
</div>

table 布局：

<table style="width:100%;border:1px solid #d4d4d4">
  <tr>
    <td style="background-color:pink">小牛</td>
  </tr>
  <tr>
    <td style="background-color:skyblue">小马</td>
  </tr>
</table>

两个布局最终效果相同：请添加图片描述

同样的效果，使用 div 布局能比表格更加灵活，但是我们需要根据不同的场景使用不同的布局方式，现在我们来看看两种布局的优缺点。

table 元素布局：

优点
1.理解比较简单。
2.不同的浏览器看到的效果一般相同。

缺点：
1.显示样式和数据绑定在一起。
2.布局的时候灵活度不高。
3.一个页面可能会有大量的 table 元素，代码冗余度高。
4.增加带宽。
5.搜索引擎不喜欢这样的布局。

div 元素布局：

优点：
1.符合 W3C 标准。
2.搜索引擎更加友好。
3.样式的调整更加方便，内容和样式的分离，使页面和样式的调整变得更加方便。
4.节省代宽，代码冗余度低。
5.表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

四、HTML 表单

1.创建表单

标签用于创建 HTML 表单，常见的表单格式为： ```c ```

name：定义表单的名字。

method：定义表单结果从浏览器传送到服务器的方式，默认参数为：get 。post 安全性更高，因此常用作传输密码等，而 get 安全性较低，一般用于查询数据。

action：发送数据要去的地址。它的值必须是一个有效的 URL，可以是相对 URL 也可以是绝对 URL。如果没有提供此属性或者 action=“#”，则数据将被发送到包含表单的页面的 URL。

2.插入表单对象

网页中的表单由许多不同的表单元素组成，这些表单元素包括文字字段、单选按钮、复选框、按钮等。

文字字段

在网页中最常见的表单元素就是文字字段，用户可以在文字字段内输入字符或者单行文本。语法:

<input
  type="text"
  name="控件名称"
  value="文字字段的默认取值"
  size="控件的长度"
  maxlength="最长字符数"
/>

该语法包含了许多参数，除了 type 参数以外，其他的参数都是可选的，可以自行选择。举栗子：

<form name="formBox" method="post" action="">
  姓名：<input type="text" name="name" size="20" /><br />
  年龄:<input type="text" name="age" size="40" value="10" maxlength="3" />
</form>

可以尝试给年龄输入值，如果文本字段长度超过了 3，就不能再输入了。

请添加图片描述
密码输入框

密码输入框是一种特殊的文字字段，他的各个属性和文字字段是相同的，但是输入进密码输入框的字符全部是“*”表示，保证周围人看不见输入的文本。

<input type="password" name="pwd" />

单选按钮

单选按钮可以使用户从选择列表中选择一个选项。

<form name="formBox" method="post" action="">
  <input type="radio" name="sex" value="male" checked />男<br />
  <input type="radio" name="sex" value="female" />女
</form>

几个单选按钮可以连接在一起，只需要把它们的 name 值设置为相同的。

同一组中只有一个按钮可以同时被选。如果没有选中任何一个，那么整个单选按钮池就被认为处于未知状态，且不会随表单提交。

可以尝试如果 name 不相同或者没有 name 会是什么情况。

复选框

复选框可以让用户从一个选项列表中选择超出一个的选项。

<form name="formBox" method="post" action="">
  <input type="checkbox" name="music" checked />音乐<br />
  <input type="checkbox" name="art" />美术<br />
  <input type="checkbox" name="math" />数学<br />
</form>

复选框可以拥有自己的名字，并不需要属于一个组。

按钮

HTML 表单中，有三种按钮：提交按钮，重置按钮，匿名按钮。我们可以使用 <button> 元素或者 <input> 元素来创建一个按钮。type 属性的值指定显示什么类型的按钮。

提交按钮（submit）

用于发送表单数据给服务器。

语法：

<form name="formBox" method="post" action="">
  <input type="text" value="输入的内容" />
  <button type="submit">This a submit button</button>

  <!--or-->

  <input type="submit" value="This is a submit button" />
</form>

重置按钮（reset）

重置按钮用来清除用户在页面中输入的信息。

语法：

<form name="formBox" method="post" action="">
  <input type="text" />
  <button type="reset">This a reset button</button>

  <!--or-->

  <input type="reset" value="This is a reset button" />
</form>

在文本框中输入内容，点击按钮即可清除。

匿名按钮（button）

没有自动生效的按钮，但是可以使用 JavaScript 代码进行定制。如果省略了 type 属性，那么这就是默认值。

语法：

<button type="button">This a anonymous button</button>

<!--or-->
<button>This a anonymous button</button>

<!--or-->
<input type="button" value="This is a anonymous button" />

不管使用的是元素还是元素，按钮的行为都是一样的。它们的不同点在于：

从前面的例子中也可以看出元素允许使用 HTML 内容作为其标记内容，但元素只接受纯文本内容。

使用元素，可以有一个不同于按钮标签的值（通过将其设置为 value 属性）。（但是在 IE 8 之前的版本中是不行的）。

3.菜单和列表

菜单和列表主要是用来选择给定答案中的一种，这类选择中往往答案比较多。

下拉菜单

下拉菜单能够节省页面空间，正常状态下显示一个选项，单击展开所以选项。

<form name="formBox" method="post" action="">
  <select name="select">
    <option value="成都">成都</option>
    <option value="广州">广州</option>
    <option value="四川">四川</option>
    <option value="上海">上海</option>
  </select>
</form>

下拉菜单的宽度是由标记中包含的最长文本的宽度决定的。请添加图片描述
列表项

在页面中列表项可以显示出几条信息，一旦超出这个信息量，在列表项右侧会出现滚动条，拖动滚动条可以看到所有选项。

<form name="formBox" method="post" action="">
  <select name="select" size="2" multiple="multiple">
    <option value="成都">成都</option>
    <option value="广州">广州</option>
    <option value="四川">四川</option>
    <option value="上海">上海</option>
  </select>
</form>

请添加图片描述

size=“2” 表示一次显示 2 条数据。

4.文本域

当用户想要填入多行文本时，就应该使用文本域而不是文本字段。文本域使用 <textarea> 标记。

<form name="formBox" method="post" action="">
  留下您的联系方式：
  <textarea name="textarea" cols="35" rows="5">
  <!--cols 代表列数，rows 代表行数。-->
</textarea>
</form>

请添加图片描述

五、HTML图像与框架

1.插入图像

图像标签
在 HTML 中，图像由 <img> 标签定义。语法为：

<img src="url" alt="" />

<img> 是空标签，它只包含属性，没有闭合标签。要在页面上显示图像，需要使用源属性（src）。src 的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。

alt 规定图像的替代文本即当图片未成功显示的时候显示的文本信息。title 设置鼠标悬停时显示的内容（一般不用设置）。

此外还可以通过设置 width 和 height 的值来设置图片的宽和高。

例子：

<img
  src="https://img0.baidu.com/it/u=394330416,3830680890&fm=253&fmt=auto&app=138&f=PNG?w=668&h=467"
  alt="小牛"
  title="你好啊"
  width="700px"
  height="600px"
/>

相对路径
这种路径是以引用文件的网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

图像文件和 HTML 文件位于同一文件夹：只需输入图像文件的名称即可，比如：<img src=“syl.png” />

图像文件位于 HTML 文件的下一级文件夹：输入文件夹名和文件名，之间用/隔开，比如：<img src=“img/img1/syl.png” />

图像文件位于 HTML 文件的上一级文件夹：在文件名之前加入…/ ，如果是上两级，则需要使用 …/ …/，以此类推，比如：<img src=“…/123.png” />

绝对路径
指当所有网页引用同一个文件时，所使用的路径都是一样的。比如D:\webStudy\xnm.png或者 https://img0.baidu.com/it/u=394330416,3830680890&fm=253&fmt=auto&app=138&f=PNG?w=668&h=467。

2.使用框架（iframe）

使用框架，可以在同一个浏览器窗口中显示不止一个页面。

语法：

<iframe src="URL">
  <!-- URL指向不同的页面 -->
</iframe>

iframe - 设置高度与宽度

属性默认以像素为单位,但是你可以指定其按比例显示(如：“60%”)。

<iframe src="https://daohang.qq.com/?unc=Af31009" width="400" height="400"></iframe>

请添加图片描述

iframe - 移除边框

frameborder 属性用于定义 iframe 表示是否显示边框。设置属性值为 “0” 移除 iframe 的边框:

<iframe
  src="https://daohang.qq.com/?unc=Af31009" 
  width="400"
  height="400"
  frameborder="0"
></iframe>

使用 iframe 来显示目标链接页面

iframe 可以显示一个目标链接的页面，目标链接的属性必须使用 iframe 的属性。

<p><a href="https://daohang.qq.com/?unc=Af31009" target="daohang">导航</a></p>
<iframe width="400" height="400" name="daohang"></iframe>

因a 标签的 target 属性是名为 daohang 的 iframe 框架，所以在点击链接时页面会显示在 iframe 框架中。
需要保证 iframe 框架的 name 属性的名称与 a 标签的 target 属性名一致。

六、HTML5简介

1.HTML5代码规范

使用正确的文档类型

文档类型声明位于 HTML 文档的第一行：

<!DOCTYPE html>

可以省略 html 和 body 标签但不推荐

在标准 HTML5 中，和标签是可以省略的，比如下面的写法也是正确的：

<!DOCTYPE html>
<head>
  <title>页面标题</title>
</head>

<h1>我是标题</h1>
<p>我是段落。</p>

但是不推荐省略掉，建议还是写成下面这样：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <h1>我是标题</h1>
    <p>我是段落。</p>
  </body>
</html>

使用小写元素名

HTML5 元素名可以使用大写和小写字母，建议使用小写字母，会显得更加好看一点，千万不要使用大小写混写，那样会显得很不专业。建议的写法如下：

<section>
  <p>我是小牛马。</p>
</section>

关闭所有 HTML 元素
在 HTML5 中, 你不一定要关闭所有元素 (例如

元素)，但是建议每个元素都要添加关闭标签。比如下面这样写也不会报错：

<section>
  <p>我是小牛。
  <p>我是小马。
</section>

建议写成下面这样：

<section>
  <p>我是小牛。</p>
  <p>我是小马。</p>
</section>

关闭空的 HTML 元素

在 HTML5 中, 空的 HTML 元素也不一定要关闭,可以这样写：

<meta charset="utf-8">

建议的写法是还是关闭：

<meta charset="utf-8" />

使用小写属性名

同样的 HTML5 属性名允许使用大写和小写字母。但是我们依然建议使用小写字母：

<div class="test"></div>

属性值

HTML5 属性值可以不用引号。但是属性值推荐使用引号，尤其是属性值有空格的话，一定要使用引号，不然不会起作用，属性的命名如果很长建议使用驼峰命名法：

<div class="test XiaoNiuMa"></div>

图片属性

图片通常使用 alt 属性。在图片不能显示时，它能替代图片显示。建议定义好图片的尺寸，在加载时可以预留指定空间，减少闪烁。比如：

<img src="xnm.png" alt="HTML5" style="width:520px;height:1314px" />

空格前后的等号

等号的前后可以使用空格，也可以不使用，推荐少用空格。

避免一行代码过长

使用 HTML 编辑器，一行代码过长时左右滚动代码来查看是不方便的。如果实在太长，建议分为几行来写。

空格和缩进

不要无缘无故的添加空行，一般一个模块或一个功能添加一个空行便于区分，缩进使用两个空格，不建议使用 Tab。

注释

快捷键为 Ctrl + /。首先要选中要注释的代码再使用快捷键。

<!-- 这是注释 -->

2.HTML5 的改变

HTML5 是 HTML 最新的修订版本，由万维网联盟（W3C）于 2014 年 10 月完成标准制定。目标是取代 1999 年所制定的 HTML 4.01 和 XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

HTML5 添加了许多新的语法特征，其中包括 <video>、<audio> 和 <canvas> 元素，同时集成了 SVG 内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。其它新的元素如 <section>、<article>、<header> 和 <nav> 则是为了丰富文档的数据内容。新的属性的添加也是为了同样的目的。同时也有一些属性和元素被移除掉了。一些元素，像 <a>、<cite> 和 <menu> 被修改，重新定义或标准化了。同时 apis 和 DOM 已经成为 HTML5 中的基础部分了。HTML5 还定义了处理非法文档的具体细节，使得所有浏览器和客户端程序能够一致地处理语法错误。
----维基百科

3.新特性和新规则

新特性

语义特性：HTML5 新标准中添加了拥有具体含义的 HTML 标签比如：<article>、<footer>、<header>、<nav>、 <section>。

连通性：能够让你和服务器之间通过创新的新技术方法进行通信。

对本地离线存储的更好的支持。

用于媒介回放的 video 和 audio 元素。

用于绘画的 canvas 元素。

性能与集成特性：提供了非常显著的性能优化和更有效的计算机硬件使用。

设备兼容特性：能够处理各种输入和输出设备。

CSS3 特性。

新规则

新特性应该基于 HTML、CSS、DOM、JavaScript。

减少对外部插件的需求，比如 Flash。

HTML5 应该独立于设备

更多取代脚本的标记

更优秀的错误处理

4.新增的结构元素

HTML5 定义了一组新的语义化标记来描述元素的内容，可以简化 HTML 页面设计，并且使用浏览器搜索网页时，也可以利用这些元素。

首先来看一个普通的页面的布局方式：
请添加图片描述
以上是很常见的 div+css 布局模式，通过 class 名称来区分不同的结构，包括头部、导航、文章内容、右边栏，还有底部模块。

而 HTML5 新标签带来的新的布局则是下面这种情况：请添加图片描述
代码如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>my page</title>
  </head>
  <body>
    <header>header</header>
    <nav>nav</nav>
    <article>
      <section>section</section>
    </article>
    <aside>aside</aside>
    <footer>footer</footer>
  </body>
</html>

section 标签

<section> 表示文档中的一个区域（或节）。比如章节、页眉、页脚或文档中的其他部分，一般来说会包含一个标题。

栗子：

<body>
  <section>
    <h1>section是什么？</h1>
    <p>一个新章节</p>
  </section>
</body>
<!--不要把 <section> 元素作为一个普通的 div 容器来使用。一般来说，一个 <section> 应该出现在文档大纲中。-->

article 标签

<article> 标签定义独立的内容。常常使用在论坛帖子，报纸文章，博客条目，用户评论等独立的内容项目之中。article 可以嵌套，内层的 article 对外层的 article 标签有隶属关系。

例子：

<body>
  <article>
    <h1>我是谁</h1>
    <p>一个小牛马</p>
  </article>
</body>

nav 标签

<nav> 标签定义导航链接的部分：描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表。

例子：

<body>
  <nav>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </nav>
</body>
<!--并不是所有的链接都必须使用 <nav> 标签，它只用来将一些热门的链接放入导航栏。一个网页也可能含有多个 <nav> 标签,例如一个是网站内的导航列表,另一个是本页面内的导航列表。-->

header 标签

<header> 标签定义文档的页眉，通常是一些引导和导航信息。它不局限于写在网页头部，也可以写在网页内容里面。

通常 header 标签至少包含一个标题标记（h1-h6），还可以包括 hgroup 标签，还可以包括表格内容、标识、搜索表单、nav 导航等。

例子：

<body>
  <header>
    <h1>网站标题</h1>
    <h2>网站副标题</h2>
  </header>
</body>

footer 标签

<footer> 标签定义 section 或 document 的页脚，包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或者日期。它和 header 标签使用基本一样，可以在一个页面中多次使用，如果在一个区段的后面加入了 footer 标签，那么它就相当于该区段的页脚了。

例子：

<body>
  <footer>
    <span>Copyright ©1999-2022北京创新乐知网络技术有限公司</span>
  </footer>
</body>

aside 标签

<aside> 标签表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。他们通常包含在工具条，例如来自词汇表的定义。也可能有其他类型的信息，例如相关的广告、笔者的传记、web 应用程序、个人资料信息，或在博客上的相关链接。

例子：

<body>
  <aside>
    <h1>作者简介</h1>
    <p>一个小牛马</p>
  </aside>
</body>

5.废除的元素

HTML5 中废除了一些纯表现的元素、只有部分浏览器支持的元素、一些会对可用性产生负面影响的元素。

纯表现元素

纯表现元素指的是可以用 CSS 代替的元素。例如：basefont、big、center、font、s、strike、tt、u这些元素，他们的功能都是纯粹为页面展示服务的，html5 提倡把页面展示性功能放在 CSS 样式表中统一处理，所以将这些元素废除，用 CSS 样式进行替代。

对可用性产生负面影响的元素

对于 frameset 元素、frame 元素与 noframes 元素，由于 frame 框架对网页可用性存在负面影响，在 html5 中已不支持 frame 框架，只支持 iframe 框架，html5 中同时将 frameset、frame 和 noframes 这三个元素废除。

只有部分浏览器支持的元素

对于 applet、bgsound、blink、marquee 等元素，由于只有部分浏览器支持，特别是 bgsound 元素以及 marquee 元素，只被 IE 支持，所以在 html5 中被废除。其中 applet 元素可由 embed 元素或 object 元素替代，bgsound 元素可由 audio 元素替代，marquee 可以由 javascript 编程的方式替代。

七、HTML5表单

1.HTML5表单元素

datalist 元素

datalist 元素用于为文本框提供一个可供选择的列表，使用 datalist 元素来为表单小部件提供建议的、自动完成的值，并使用一些 option 子元素来指定要显示的值。然后使用 list 属性将数据列表绑定到一个文本域(通常是一个元素)。

一旦数据列表与表单小部件相关联，它的选项用于自动完成用户输入的文本。通常，这是作为一个下拉框向用户展示的，在输入框中输入可能匹配的内容。

栗子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <label for="myColor">What's your favorite color?</label>
    <input type="text" name="myColor" id="myColor" list="mySuggestion" />
    <datalist id="mySuggestion">
      <option>black</option>
      <option>blue</option>
      <option>green</option>
      <option>red</option>
      <option>white</option>
      <option>yellow</option>
    </datalist>
  </body>
</html>

也可以写成下面这样：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <label for="myColor">What's your favorite color?</label>
    <input type="text" name="myColor" id="myColor" list="mySuggestion" />
    <datalist id="mySuggestion">
      <option value="black"></option>
      <option value="blue"></option>
      <option value="green"></option>
      <option value="red"></option>
      <option value="white"></option>
      <option value="yellow"></option>
    </datalist>
  </body>
</html>

请添加图片描述

2.HTML5表单新增元素

autocomplete 属性

autocomplete 属性规定表单是否应该启用自动完成功能：
自动完成允许浏览器预测对字段的输入，当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。当 autocomplete 属性值为 on 时表示启用自动完成功能，为 off 时表示关闭。autocomplete 属性适用于，以及下面的类型：text, search, url, telephone, email, password, datepickers, range 以及 color。

例子：

<body>
  <form action="#" method="get" autocomplete="on">
    Name:<input type="text" name="name" /><br />
    E-mail: <input type="email" name="email" autocomplete="off" /><br />
    <input type="submit" value="提交" />
  </form>
</body>

请添加图片描述

autofocus 属性

autofocus 属性规定在页面加载时，域自动地获得焦点。适用于所有标签的类型。

例子：

<body>
  <form action="#" method="get">
    Name：<input type="text" name="user_name" autofocus="autofocus" /><br />
    <input type="submit" value="提交" />
  </form>
</body>

运行效果为：
请添加图片描述
form 属性

form 属性规定输入域所属的一个或多个表单。form 属性适用于所有标签的类型。form 属性必须引用所属表单的 id。

例子：

<body>
  <form action="#" method="get" id="user_form">
    First name:<input type="text" name="fname" />
    <input type="submit" value="提交" />
  </form>

  <p>
    下面的输入域在 form 元素之外，但仍然是表单的一部分， 也就是说提交按钮会把
    first name 和 last name的值都提交。
  </p>

  Last name: <input type="text" name="lname" form="user_form" />
</body>

请添加图片描述

multiple 属性

multiple 属性规定输入域中可选择多个值，适用于以下类型的标签：email 和 file。

例子：

<body>
  <form action="#" method="get" id="user_form">
    选择文件: <input type="file" name="file" multiple="multiple" />
    <input type="submit" value="提交" />
  </form>
</body>

novalidate 属性

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。适用于，以及下面的类型：text, search, url, telephone, email, password, datepickers, range 以及 color。

例子：

<body>
  <form action="#" method="get" id="user_form" novalidate="true">
    E-mail: <input type="email" name="user_email" />
    <input type="submit" value="提交" />
  </form>
</body>

pattern 属性

pattern 属性规定用于验证 input 域的模式（pattern）。模式（pattern）是正则表达式。pattern 属性适用于以下类型的标签：text, search, url, telephone, email 以及 password。

例子：

<body>
  <form action="#" method="get">
    Name:
    <input type="text" name="name" pattern="[A-z]{4}" title="请输入四个字母" />
    <input type="submit" value="提交" />
  </form>
</body>

请添加图片描述
注：想要了解更多正则表达式的语法，请访问正则表达式手册。

placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。适用于以下类型的标签：text, search, url, telephone, email 以及 password。提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失。

例子：

<body>
  <form action="#" method="get">
    <input type="search" name="user_search" placeholder="小牛马" />
    <input type="submit" value="提交" />
  </form>
</body>

请添加图片描述
required 属性

required 属性规定必须在提交之前填写输入域（不能为空）。适用于以下类型的标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

例子：

<body>
  <form action="#" method="get">
    <input type="search" name="user_search" required="required" />
    <input type="submit" value="提交" />
  </form>
</body>

请添加图片描述

3.HTML5输入类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

Input 类型 - email

email 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。

例子：

<body>
  <form action="#" method="get">
    E-mail: <input type="email" name="user_email" /><br />
    <input type="submit" value="提交" />
  </form>
</body>

请添加图片描述
Input 类型 - url

url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。

例子：

<body>
  <form action="#" method="get">
    Url: <input type="url" name="user_url" /><br />
    <input type="submit" value="提交" />
  </form>
</body>

请添加图片描述

Input 类型 - number

number 类型用于应该包含数值的输入域。属性 max 设定允许输入的最大值，属性 min 设定允许输入的最小值，属性 value 设定默认值，属性 step 设定合法的数字间隔（比如 step 的值为 2，则合法的数字为 -2,0,2,4 等）。

例子：

<body>
  <form action="#" method="get">
    number：<input
      type="number"
      name="points"
      min="0"
      max="10"
      step="2"
      value="2"
    /><br />
    <input type="submit" value="提交" />
  </form>
</body>

请添加图片描述
Input 类型 - range

range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。同样的 range 也有 max，min，value，step 属性与上面所讲的 number 中的一致。

例子：

<body>
  <form action="#" method="get">
    range:
    <input
      type="range"
      name="points"
      min="1"
      max="10"
      value="2"
      step="2"
    /><br />
    <input type="submit" value="提交" />
  </form>
</body>

请添加图片描述
Input 类型 - Date Pickers（日期选择器）

HTML5 拥有多个可供选取日期和时间的新输入类型：

date - 选取日、月、年

month - 选取月、年

week - 选取周和年

time - 选取时间（小时和分钟）

datetime - 选取时间、日、月、年（UTC 时间）注意：此类型已被弃用，目前大多数浏览器都不再支持。

datetime-local - 选取时间、日、月、年（本地时间）

例子：

<body>
  <form action="#" method="get">
    Date: <input type="date" name="user_date" /><br />
    <input type="submit" value="提交" />
    <br /><br />
    Month: <input type="month" name="user_month" /><br />
    <input type="submit" value="提交" />
  </form>
</body>

请添加图片描述
Input 类型 - color

color 类型用于选择颜色。

例子：

<body>
  <form action="#" method="get">
    <input type="color" name="colordemo" />
    <input type="submit" value="提交" />
  </form>
</body>

运行效果为：
请添加图片描述

八、HTML5 Canvas API

1.Canvas 元素

canvas 元素的外观和 img 元素相似，但是没有 img 元素的 src 属性和 alt 属性。canvas 的 width 属性和 height 属性用来设置画布的宽和高，单位是 px。默认的画布的高度是 150px，宽度是 300px。

<body>
  <canvas
    id="myCanvas"
    width="200"
    height="100"
    style="border:2px solid #000000;"
  >
  </canvas>
</body>

默认情况下 <canvas> 元素没有边框和内容，标签通常需要指定一个 id 属性 (脚本中经常引用)。

2.绘制简单图形

canvas 元素本身并不能实现图形绘制，所有的绘制工作必须要和 JavaScript 脚本结合起来。
首先，给 canvas 元素添加一个 id 属性，这样能够让我们在 JavaScript 脚本中通过 id 属性找到对应的 canvas 元素。

<canvas
  id="myCanvas"
  width="200"
  height="100"
  style="border:2px solid #000000;"
>
  <!-- 添加id属性值为myCanvas -->
</canvas>

添加了 id 属性后，找到对应的 canvas 元素：

var myCanvas = document.getElementById("myCanvas");
// 通过document.getElementById来找到id为myCanvas的元素

然后通过 canvas 元素的 getContext()方法获取上下文，即创建 Context 对象，以获取允许进行绘制的 2D 环境。

var ctx = myCanvas.getContext("2d");

最后通过 Context 对象的相关方法完成绘制，比如：fillStyle()等。

ctx.fillStyle = "red";
//设置矩形的位置和尺寸（位置从 左上角原点坐标开始，尺寸为100*100的矩形）
ctx.fillRect(0, 0, 100, 100);

整体的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" style="width:200;height:100">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      var myCanvas = document.getElementById("mycanvas");
      var ctx = myCanvas.getContext("2d");
      //设置颜色
      ctx.fillStyle = "red";
      //设置矩形的位置和尺寸（位置从 左上角原点坐标开始，尺寸为100*100的矩形）
      ctx.fillRect(0, 0, 100, 100);
    </script>
  </body>
</html>

请添加图片描述
进行绘制时，需要指定确定的坐标位置，坐标原点(0,0)位于 canvas 的左上角，x 轴水平方向向右延伸，y 轴垂直向下延伸，如图：

3.直线绘制

strokeStyle：设置或返回笔的颜色、渐变或模式。默认值为：#000000。

lineWidth：设置或返回当前的线条宽度，以像素计。

beginPath()：起始一条路径，或重置当前路径。

closePath()：创建从当前点回到起始点的路径。

moveTo()：把路径移动到画布中的指定点，不创建线条。

lineTo()：添加一个新点，然后在画布中创建从该点到最后指定点的线条。

stroke()：绘制已定义的路径。

绘制一条直线例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById("mycanvas");
      //获取Context上下文
      var ctx = myCanvas.getContext("2d");
      // 开始路径绘制
      ctx.beginPath();
      // 设置路径起点，坐标为(20,20)
      ctx.moveTo(20, 20);
      // 添加一个(200,200)的新点
      ctx.lineTo(200, 200);
      // 设置线宽
      ctx.lineWidth = 2.0;
      // 设置线的颜色
      ctx.strokeStyle = "#CC0000";
      // 绘制已定义的路径
      ctx.stroke();
    </script>
  </body>
</html>

运行效果为：
请添加图片描述
绘制三角形例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById("mycanvas");
      //获取Context上下文
      var ctx = myCanvas.getContext("2d");
      // 开始路径绘制
      ctx.beginPath();
      // 设置路径起点，坐标为(20,20)
      ctx.moveTo(20, 20);
      // 添加一个(200,200)的新点
      ctx.lineTo(200, 200);
      // 添加一个(400,20)的新点
      ctx.lineTo(400, 20);
      //创建从当前点回到起始点的路径
      ctx.closePath();
      // 设置线宽
      ctx.lineWidth = 2.0;
      // 设置线的颜色
      ctx.strokeStyle = "#CC0000";
      // 绘制已定义的路径
      ctx.stroke();
    </script>
  </body>
</html>

运行效果为：

请添加图片描述

4.矩形绘制

rect() 方法介绍

使用 rect() 方法创建矩形。语法为：

ctx.rect(x,y,width,height);

参数说明：

x 表示矩形左上角的 x 坐标。

y 表示矩形左上角的 y 坐标。

width 表示矩形的宽度，以像素计。

height 表示矩形的高度，以像素计。

注：使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。

栗子:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById("mycanvas");
      //获取Context上下文
      var ctx = myCanvas.getContext("2d");
      //绘制矩形
      ctx.rect(10, 10, 100, 200);
      //绘制已定义的路径
      ctx.stroke();
    </script>
  </body>
</html>

运行效果为：
请添加图片描述
strokeRect() 方法介绍
使用 strokeRect() 方法绘制矩形（不填色）。笔触的默认颜色是黑色。语法为：

ctx.strokeRect(x, y, width, height);

注：参数与 rect() 方法一致，唯一的区别是这里不需要再加一句 stroke() 或 fill() 方法。无法填色。

前面绘制矩形的例子也可以这样写：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById("mycanvas");
      //获取Context上下文
      var ctx = myCanvas.getContext("2d");
      //绘制矩形
      ctx.strokeRect(10, 10, 100, 200);
    </script>
  </body>
</html>

fillRect() 方法介绍

使用 fillRect() 方法创建实心矩形。语法为：

ctx.fillRect(x, y, width, height);

注：参数说明与前面一致，默认的填充颜色为黑色，可以使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。

栗子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById("mycanvas");
      //获取Context上下文
      var ctx = myCanvas.getContext("2d");
      //绘制矩形
      ctx.fillRect(10, 10, 100, 200);
    </script>
  </body>
</html>

运行效果为：
请添加图片描述
clearRect() 方法介绍

使用 clearRect() 方法清空给定矩形内的指定像素。语法为：

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById("mycanvas");
      //获取Context上下文
      var ctx = myCanvas.getContext("2d");
      //绘制矩形
      ctx.fillRect(10, 10, 100, 200);
      //清空指定像素
      ctx.clearRect(20, 20, 50, 50);
    </script>
  </body>
</html>

运行效果为：
请添加图片描述

5.圆和扇形的绘制

使用 arc() 方法绘制圆或者椭圆。语法为：

ctx.arc(x, y, r, sAngle, eAngle, counterclockwise);

参数说明：

x 表示圆的中心的 x 坐标。

y 表示圆的中心的 y 坐标。

r 表示圆的半径。

sAngle 表示起始角，以弧度计（特别需要注意的是弧的圆形的三点钟位置是 0 度而不是常规以为的 90 度）。

eAngle 表示结束角，以弧度计。

counterclockwise 表示绘制圆的方向，值为 false 表示顺时针，为 true 表示逆时针。是一个可选值，默认值是 false。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById("mycanvas");
      //获取Context上下文
      var ctx = myCanvas.getContext("2d");
      //开始路径绘制
      ctx.beginPath();
      //绘制圆
      ctx.arc(100, 75, 50, 0, 2 * Math.PI);
      //绘制已定义的路径
      ctx.stroke();
    </script>
  </body>
</html>

运行效果为：
请添加图片描述
绘制扇形也很简单，只需要给定角度值小于 2 * Math.PI 再闭合一下就可以了.

栗子:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById("mycanvas");
      //获取Context上下文
      var ctx = myCanvas.getContext("2d");
      //开始路径绘制
      ctx.beginPath();
      //绘制圆
      ctx.arc(100, 75, 50, 0, 0.5 * Math.PI);
      //闭合
      ctx.moveTo(100, 125);
      ctx.lineTo(100, 75);
      ctx.lineTo(150, 75);
      //绘制已定义的路径
      ctx.stroke();
    </script>
  </body>
</html>

运行效果为：

请添加图片描述

6.填充和渐变

使用 fillStyle 属性，设置或返回用于填充绘画的颜色、渐变或模式。语法为：

ctx.fillStyle = color | gradient | pattern;

参数说明：

color 表示绘图填充的颜色。默认值是 #000000。

gradient 表示用于填充绘图的渐变对象（线性或放射性）。

pattern 表示用于填充绘图的 pattern 对象。

例子：
绘制实心矩形，填充颜色为红色。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById("mycanvas");
      //获取Context上下文
      var ctx = myCanvas.getContext("2d");
      //填充为红色
      ctx.fillStyle = "red";
      //绘制实心矩形
      ctx.fillRect(10, 10, 100, 200);
    </script>
  </body>
</html>

运行效果为：
请添加图片描述
渐变

使用 createLinearGradient() 方法创建线性渐变。语法为：

ctx.createLinearGradient(x0, y0, x1, y1);

参数说明：

x0 表示渐变开始点的 x 坐标。

y0 表示渐变开始点的 y 坐标。

x1 表示渐变结束点的 x 坐标。

y1 表示渐变结束点的 y 坐标。

使用 addColorStop() 方法规定渐变对象中的颜色和停止位置。语法为：

gradient.addColorStop(stop, color);

参数说明：

stop 表示渐变中开始与结束之间的位置。是介于 0.0 与 1.0 之间的值。

color 表示在结束位置显示的 CSS 颜色值。

注：addColorStop() 方法与 createLinearGradient() 或 createRadialGradient() 一起使用。我们可以多次调用 addColorStop() 方法来改变渐变。如果我们不对 gradient 对象使用该方法，那么渐变将不可见。为了获得可见的渐变，至少需要创建一个色标。
例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById("mycanvas");
      //获取Context上下文
      var ctx = myCanvas.getContext("2d");
      //设置渐变色
      var gradient = ctx.createLinearGradient(0, 0, 170, 0);
      gradient.addColorStop(0, "red");
      gradient.addColorStop("0.2", "orange");
      gradient.addColorStop("0.5", "yellow");
      gradient.addColorStop("0.7", "green");
      gradient.addColorStop(1, "blue");
      //填充色为渐变色
      ctx.fillStyle = gradient;
      //绘制实心矩形
      ctx.fillRect(10, 10, 100, 200);
    </script>
  </body>
</html>

运行效果为：

请添加图片描述
放射状/环形的渐变

使用 createRadialGradient() 方法创建放射状/环形的渐变。语法为：

ctx.createLinearGradient(x0, y0, x1, y1);

参数说明：

x0 表示渐变的开始圆的 x 坐标。

y0 表示渐变的开始圆的 y 坐标。

r0 表示开始圆的半径。

x1 表示渐变的结束圆的 x 坐标。

y1 表示渐变的结束圆的 y 坐标。

r1 表示结束圆的半径。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById("mycanvas");
      //获取Context上下文
      var ctx = myCanvas.getContext("2d");
      //设置渐变色
      var gradient = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
      gradient.addColorStop(0, "red");
      gradient.addColorStop("0.2", "orange");
      gradient.addColorStop("0.5", "yellow");
      gradient.addColorStop("0.7", "green");
      gradient.addColorStop(1, "blue");
      //填充色为渐变色
      ctx.fillStyle = gradient;
      //绘制实心矩形
      ctx.fillRect(10, 10, 190, 150);
    </script>
  </body>
</html>

运行效果为：

请添加图片描述

fill() 方法

使用 fill() 方法填充当前的图像（路径）。默认颜色是黑色。填充另一种颜色/渐变使用 fillStyle 属性。

语法为：

ctx.fill();

注：如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，以关闭该路径，然后填充该路径。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById("mycanvas");
      //获取Context上下文
      var ctx = myCanvas.getContext("2d");
      //绘制矩形
      ctx.rect(20, 20, 150, 100);
      ctx.fillStyle = "red";
      ctx.fill();
    </script>
  </body>
</html>

运行效果为：
请添加图片描述

7.文字绘制

fillText() 方法

使用 fillText() 方法在在画布上绘制实心文本。语法为：

ctx.fillText(text, x, y, maxWidth);

参数说明：

text 规定在画布上输出的文本。

x 表示开始绘制文本的 x 坐标位置（相对于画布）。

y 表示开始绘制文本的 y 坐标位置（相对于画布）。

maxWidth 表示允许的最大文本宽度，以像素计。可选。

栗子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById("mycanvas");
      //获取Context上下文
      var ctx = myCanvas.getContext("2d");
      //绘制实心文本
      ctx.fillText("Hello Xnm!", 10, 50);
    </script>
  </body>
</html>

运行效果为：
请添加图片描述
strokeText() 方法

使用 strokeText() 方法在画布上绘制空心文本。语法为：

ctx.strokeText(text, x, y, maxWidth);

注：参数说明与 fillText() 方法一致。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById("mycanvas");
      //获取Context上下文
      var ctx = myCanvas.getContext("2d");
      //设置字体样式
      ctx.font = "50px Georgia";
      //绘制空心文本
      ctx.strokeText("Hello Xnm!", 10, 50);
    </script>
  </body>
</html>

运行效果为：

请添加图片描述

font 属性

使用 font 属性设置或返回画布上文本内容的当前字体属性。font 属性使用的语法与 CSS font 属性相同。

textAlign 属性

使用 textAlign 属性设置或返回文本内容的当前对齐方式。语法为：

ctx.textAlign = "center|end|left|right|start";

参数说明：

start 默认值，表示文本在指定的位置开始。

center 表示文本的中心被放置在指定的位置。

end 表示文本在指定的位置结束。

left 表示文本左对齐。

right 表示文本右对齐。

注：使用 fillText() 或 strokeText() 方法在实际地在画布上绘制并定位文本

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title></title>
</head>

<body>
<!--添加canvas元素，设置画布的大小-->
<canvas id="mycanvas" width="520px" height="1314px">
    对不起，你的浏览器不支持canvas
</canvas>

<script type="text/javascript">
    //获取canvas元素
    var myCanvas = document.getElementById("mycanvas");
    //获取Context上下文
    var ctx = myCanvas.getContext("2d");
    //画一条线便于展示
    ctx.strokeStyle = "blue";
    ctx.moveTo(200, 20);
    ctx.lineTo(200, 180);
    ctx.stroke();
    //设置字体样式
    ctx.font = "20px Georgia";
    //值为start的情况
    ctx.textAlign = "start";
    ctx.strokeText("Hello Xnm!", 200, 20);
    //值为center的情况
    ctx.textAlign = "center";
    ctx.strokeText("Hello Xnm!", 200, 60);
    //值为end的情况
    ctx.textAlign = "end";
    ctx.strokeText("Hello Xnm!", 200, 100);
    //值为left的情况
    ctx.textAlign = "left";
    ctx.strokeText("Hello Xnm!", 200, 140);
    //值为right的情况
    ctx.textAlign = "right";
    ctx.strokeText("Hello Xnm!", 200, 180);
</script>
</body>
</html>

运行效果为：
请添加图片描述
textBaseline 属性

textBaseline 属性设置或返回在绘制文本时的当前文本基线。语法为：

ctx.textBaseline = "alphabetic|top|hanging|middle|ideographic|bottom";

参数说明：

alphabetic 表示文本基线是普通的字母基线。默认值。

top 表示文本基线是 em 方框的顶端。

hanging 表示文本基线是悬挂基线。

middle 表示文本基线是 em 方框的正中。

ideographic 表示文本基线是表意基线。

bottom 表示文本基线是 em 方框的底端。

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title></title>
</head>

<body>
<!--添加canvas元素，设置画布的大小-->
<canvas id="mycanvas" width="1314px" height="1314px">
    对不起，你的浏览器不支持canvas
</canvas>

<script type="text/javascript">
    //获取canvas元素
    var myCanvas = document.getElementById("mycanvas");
    //获取Context上下文
    var ctx = myCanvas.getContext("2d");
    //画一条线便于展示
    ctx.strokeStyle = "blue";
    ctx.moveTo(20, 100);
    ctx.lineTo(1314, 100);
    ctx.stroke();
    //设置字体样式
    ctx.font = "30px Georgia";
    //值为alphabetic的情况
    ctx.textBaseline = "alphabetic";
    ctx.fillText("Hello Xnm!", 20, 100);
    //值为top的情况
    ctx.textBaseline = "top";
    ctx.fillText("Hello Xnm!", 220, 100);
    //值为hanging的情况
    ctx.textBaseline = "hanging";
    ctx.fillText("Hello Xnm!", 420, 100);
    //值为middle的情况
    ctx.textBaseline = "middle";
    ctx.fillText("Hello Xnm!", 620, 100);
    //值为ideographic的情况
    ctx.textBaseline = "ideographic";
    ctx.fillText("Hello Xnm!", 820, 100);
    //值为bottom的情况
    ctx.textBaseline = "bottom";
    ctx.fillText("Hello Xnm!", 1020, 100);
</script>
</body>
</html>

运行效果为：
请添加图片描述

8.图片绘制

drawImage() 方法

使用 drawImage() 方法在画布上绘制图像、画布或视频。drawImage() 方法也能够绘制图像的某些部分，或增加或减少图像的尺寸。
canvas 绘制图片的基本格式为：

//创建一个图片对象
var image = new Image();
//设置图片的路径
image.src = "xxx";
//当图片加载完成后
image.onload = function () {
    
    
  //绘制图片
  ctx.drawImage();
};

语法 1，在画布上定位图像：

ctx.drawImage(img, x, y);

语法 2，在画布上定位图像，并规定图像的宽度和高度：

ctx.drawImage(img, x, y, width, height);

语法 3，剪切图像，并在画布上定位被剪切的部分：

ctx.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);

参数说明：

img 规定要使用的图像、画布或视频。

sx 表示开始剪切的 x 坐标位置。可选值。

sy 表示开始剪切的 y 坐标位置。可选值。

swidth 表示被剪切图像的宽度。可选值。

sheight 表示被剪切图像的高度。可选值。

x 表示在画布上放置图像的 x 坐标位置。

y 表示在画布上放置图像的 y 坐标位置。

width 表示要使用的图像的宽度（伸展或缩小图像）。可选值。

height 表示要使用的图像的高度，（伸展或缩小图像）。可选值。

例子 1，在画布上定位图像并作出一个立体的效果：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="1314px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById("mycanvas");
      //获取Context上下文
      var ctx = myCanvas.getContext("2d");
      //创建一张图片
      var image = new Image();
      //设置图片的路径
      image.src = "a.png";
      //当图片加载完成后
      image.onload = function () {
    
    
        //输出5张照片
        for (var i = 0; i < 5; i++) {
    
    
          //参数：（1）绘制的图片  （2）坐标x，（3）坐标y
          ctx.drawImage(image, 100 + i * 80, 100 + i * 80);
        }
      };
    </script>
  </body>
</html>

运行效果为：

请添加图片描述

例子 2，在画布上定位图像，并规定图像的宽度和高度：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="1314px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById("mycanvas");
      //获取Context上下文
      var ctx = myCanvas.getContext("2d");
      //创建一张图片
      var image = new Image();
      //设置图片的路径
      image.src = "a.png";
      //当图片加载完成后
      image.onload = function () {
    
    
        //绘制图片
        ctx.drawImage(image, 100, 100, 150, 150);
      };
    </script>
  </body>
</html>

运行效果为：
请添加图片描述

例子 3，剪切图像，并在画布上定位被剪切的部分：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="1314px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById("mycanvas");
      //获取Context上下文
      var ctx = myCanvas.getContext("2d");
      //创建一张图片
      var image = new Image();
      //设置图片的路径
      image.src = "a.png";
      //当图片加载完成后
      image.onload = function () {
    
    
        //绘制图片
        ctx.drawImage(image, 100, 100, 150, 150, 150, 150, 150, 150);
      };
    </script>
  </body>
</html>

运行效果为：

请添加图片描述

九、HTML5 视频音频与拖放

1.HTML5 视频介绍

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

视频格式和浏览器支持如下所示：

格式	浏览器
.ogg	FireFox 3.5+ ，chrome 5.0+ ，Opera 10.5+
.mp4/H.264	Safari 3.0+ ，chrome 5.0+ ，IE 9.0+
.webm	FireFox 4.0+ ，chrome 6.0+ ，Opera10.6+

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <video width="320" height="240" controls="controls">
          <source
        src="https://xxx/video.ogg"
        type="video/ogg"
      />
      <source
        src="https://xxx/video.mp4"
        type="video/mp4"
      />
      你的浏览器不支持video元素
    </video>
  </body>
</html>

注：<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的。video 元素允许多个 source 元素，source 元素可以链接不同的视频文件，浏览器将使用第一个可识别的格式。

引入单个文件也可以这样写：

<body>
  <video
    src="https://xxx/video.ogg"
    width="320"
    height="240"
    controls="controls"
  >
    你的浏览器不支持video元素
  </video>
</body>

video 标签的属性如下所示：

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，如播放按钮。
height	pixels	设置视频播放器的高度
lool	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	规定视频的音频输出应该被静音
poster	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload	preload	如果出现该属性，则视频在页面加载是进行加载，并预备播放。如果使用“autoplay”，则忽略该属性
src	URL	要播放的视频的URL
width	px	设置视频播放器的高度

字幕的简单使用

使用常用的 WebVtt 字幕格式，在中使用元素引入字幕。例如：

<track
  src="https://xxx/video_ch.vtt"
  srclang="zh"
  kind="subtitles"
  label="中文"
  default
/>
<track
  src="https://xxx/video_en.vtt"
  srclang="en"
  kind="subtitles"
  label="English"
/>

track 元素属性说明：

src：指定资源 url。

srclang：资源的语言，例如：中文 zh，英文 en。

kind：默认值是 subtitles 字幕，captions 标题、音效及其他音频信息，descriptions 视频的文本描述，chapters 章节导航，metadata 元数据。

label：选择字幕时候出现的文字。

default：default 指的是默认会显示的字幕。例如两个 <track> 元素，如果都没有 default 属性，那都不显示，需要用户手动调出。另外，default 只能出现在一个 <track> 元素上。

1.HTML5 视频介绍

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

视频格式和浏览器支持如下所示：

格式	浏览器
.ogg	FireFox 3.5+ ，chrome 5.0+ ，Opera 10.5+
.mp4/H.264	Safari 3.0+ ，chrome 3.0+ ，IE 9.0+
.webm	FireFox 3.5+ ，chrome 3.0+ ，Opera10.5+

<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的。audio 元素允许多个 source 元素，source 元素可以链接不同的音频文件，浏览器将使用第一个可识别的格式。

audio 标签的属性如下所示：
请添加图片描述

3.HTML5 拖放

拖放（Drag 和 drop）是 HTML5 标准的组成部分，任何元素都能够拖放，从字面意思上来理解，拖放就是抓取对象后拖到另一个位置上。

注：img元素和 a 元素（必须指定 href）默认允许拖放。

栗子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      #div1 {
    
    
        width: 200px;
        height: 100px;
        padding: 10px;
        border: 1px solid red;
      }
    </style>
    <script type="text/javascript">
      function allowDrop(ev) {
    
    
        ev.preventDefault();
      }

      function drag(ev) {
    
    
        ev.dataTransfer.setData("Text", ev.target.id);
      }

      function drop(ev) {
    
    
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
      }
    </script>
  </head>

  <body>
    <p>请把图片拖放到矩形中：</p>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br />
    <img
      id="drag1"
      src="drag-image.png"
      draggable="true"
      ondragstart="drag(event)"
    />
  </body>
</html>

运行效果：
请添加图片描述

下面将为大家一一介绍拖放是如何实现的。

确定什么是可拖动的

为了使元素可拖放，首先把 draggable 属性设置为 true，再加上全局事件处理函数 ondragstart，如下所示：

<img draggable="true" ondragstart="drag(event)" />

定义拖动数据

每个 drag event 都有一个 dataTransfer 属性保保存事件的数据。这个属性（ DataTransfer 对象）也有管理拖动数据的方法。setData() 方法添加一个项目的拖拽数据，如下面的示例代码所示：

function drag(ev) {
    
    
  ev.dataTransfer.setData("Text", ev.target.id);
}

在这个例子中数据类型是 “Text”，值是可拖动元素的 id (“drag1”)。

定义一个放置区
ondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式,如下所示：

function allowDrop(ev) {
    
    
  ev.preventDefault();
}

进行放置
当放置被拖数据时，会发生 drop 事件。如下所示：

function drop(ev) {
    
    
  //调用 preventDefault() 来避免浏览器对数据的默认处理
  ev.preventDefault();
  //通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
  var data = ev.dataTransfer.getData("Text");
  //被拖数据是被拖元素的 id ("drag1"),把被拖元素追加到放置元素（目标元素）中
  ev.target.appendChild(document.getElementById(data));
}

上面只是简单的讲解了一个图片拖放的案例，想要了解更多拖放的知识，请访问：MDN HTML 拖放 API

十.HTML5 Web Storage 和文件上传

1.Web Storage 概述

早些时候，本地存储使用的是 cookie。但是 Web 存储需要更加的安全与快速。这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上。它也可以存储大量的数据，而不影响网站的性能。

HTML5 定义了本地存储规范 Web Storage，提供了两种存储类型 API：localStorage 和 sessionStorage。

先说说 cookie：

大小的限制：cookie 的大小被限制在 4KB。
带宽的限制：只要涉及 cookie 的请求，cookie 数据都会在服务器和浏览器间来回传送。这样无论访问哪个页面，cookie 数据都会消耗网络的带宽。
cookie 会频繁的在网络中传送，而且数据在网络中是可见的，因此在不加密的情况下，是有安全风险的。

Web Storage 数据存储机制相比于 Cookie 有明显的优势：

存储空间的大小一般为 5~10MB，与具体浏览器有关。
存储内容仅仅存储在本地客户端，不会被发送到服务器。
提供了更丰富、更易用的接口、操作更方便。

2.localStorage 方法

特点：持久化的本地存储，除非主动手动删除，否则数据一直不会过期。

方法：

1.设置

setItem(key,value)：在本地客户端存储一个字符串类型的数据。
setItem.key=value：也可以像这样直接存储。

保存数据：

localStorage.setItem(key, value);

保存添加数据例子：

//方法1向本地存储中添加一个名为name,值为"xnm"的key-value对象
localStorage.setItem("name", "xnm");
//方法2
localStorage["price"] = 1314;
//方法3
localStorage.amount = 520;

注：使用 setItem 方法保存数据时，将第一个参数 key 指定为键名，将第二个参数 value 指定为键值，保存时不允许保存相同的键名，保存后可以修改键值，但不允许改键名（只能重新取键名，然后再保存键值）。

2.获取

getItem(key)：读取已存储在本地的数据，获取键值。
localStorage.key：也可以像这样直接获取值。

读取数据：

localStorage.getItem(key);

注：使用 getItem 方法读取数据时，将参数指定为键名，返回键值。

3.删除

removeItem(key)：移除已存储在本地数据，通过键名作为参数删除数据。
localStorage.clear()：也可以一次性清除

删除单个数据：

localStorage.removeItem(key);

注：通过 key 删除本地数据。

例子：

<body>
  <h1>简单Web留言本</h1>
  <textarea id="memo" cols="60" rows="6"></textarea><br />
  <input type="button" value="新增留言" onclick="saveStorage('memo');" />
  <input type="button" value="清空数据" onclick="clearStorage();" />
  <input
    type="button"
    value="清空最后一个数据"
    onclick="clearsingleStorage();"
  />
  <hr />
  <p id="msg"></p>
  <script type="text/javascript">
    //savaStorage是一个新增留言的函数
    function saveStorage(id) {
    
    
      //获取textarea的value值
      var data = document.getElementById(id).value;
      //获取当前时间
      var time = new Date().toUTCString();
      //将当前时间作为键名，textarea的value值（也就是用户输入的值）的值作为键值
      localStorage.setItem(time, data);
      //显示留言
      showMsg("msg");
    }
    //showMsg是一个显示留言的函数
    function showMsg(id) {
    
    
      var result = '<table border="1">';
      //遍历本地储存数据
      for (var i = 0; i < localStorage.length; i++) {
    
    
        //获取key值
        var key = localStorage.key(i);

        //获取value值
        var value = localStorage.getItem(key);
        //显示数据
        result += "<tr><td>" + value + "</td><td>" + key + "</td></tr>";
      }
      result += "</table>";
      var target = document.getElementById(id);
      target.innerHTML = result;
    }
    //显示留言
    showMsg("msg");
    //clearStorage是一个清空留言的函数
    function clearStorage() {
    
    
      //清空数据
      localStorage.clear();
      //显示留言
      showMsg("msg");
    }
    //clearsingleStorage是一个删除单个数据的函数
    function clearsingleStorage() {
    
    
      localStorage.removeItem(localStorage.key(localStorage.length - 1));
      //显示留言
      showMsg("msg");
    }
  </script>
</body>

运行效果如下所示：
请添加图片描述

3.sessionStorage 方法

直接关闭页面，再重新运行查看一下效果。

sessionStorage 方法将数据保存在 session 对象中，所谓 session 直译过来就是会话，再通俗一点讲就是指用户在浏览某个网站时，从进入网站到关闭浏览器的这段时间，session 对象可以用来保存在这段时间内所要求保存的任何数据。我们称之为会话级别的本地存储。

注：当浏览器窗口被关闭时，session 对象保存的数据会被删除。

sessionStorage 方法的使用与 localStorage 方法的使用类似。

例子：

<body>
  <script type="text/javascript">
    if (sessionStorage.pagecount) {
    
    
      sessionStorage.pagecount = Number(sessionStorage.pagecount) + 1;
    } else {
    
    
      sessionStorage.pagecount = 1;
    }
    document.write("你刷新了本页面 " + sessionStorage.pagecount + " 次");
  </script>

  <p>刷新页面看看效果。</p>

  <p>关闭浏览器再运行看看效果</p>
</body>

注：上面的案例 sessionStorage 改成 localStorage 也就可以简单的记录自己的网站的浏览人数了，当然这只是自己写简单网站，自己看自己浏览次数的使用方法。尝试一下 sessionStorage 保存数据，读取数据，删除单个数据，清空数据的写法。

4.HTML5 文件上传概述

在之前我们操作本地文件都是使用 flash、silverlight 或者第三方的 activeX 插件等技术，由于使用了这些技术后就很难进行跨平台、或者跨浏览器、跨设备等情况下实现统一的表现，从另外一个角度来说就是让我们的 web 应用依赖了第三方的插件，而不是很独立。在 HTML5 标准中，默认提供了操作文件的 API 让这一切直接标准化。有了操作文件的 API，让我们的 Web 应用可以很轻松的通过 JS 来控制文件的读取、写入、文件夹、文件等一系列的操作。

5.如何实现文件上传

在 HTML4 标准中文件上传控件只接受一个文件，而在新标准中，只需要设置 multiple，就支持多文件上传。按住 Ctrl 或者 Shift 即可选择多个文件。

<input type="file" class="file" multiple />

获取文件信息
选中文件通过 HTMLInputElement.files 属性返回，返回值是一个 FileList 对象，这个对象是一个包含了许多 File 文件的列表。比如我们首先运行上面例子的代码，然后随便上传一个文件（这里上传的是一个名为 700.png 的图片），然后按 F12 进入控制台，输入代码:

file.files;

运行效果为：
在这里插入图片描述
从运行效果我们可以看出每个 File 对象包含了以下信息：

lastModified 表示 UNIX timestamp 形式的最后修改时间。

lastModifiedDate 表示 Date 形式的最后修改时间。

name 表示文件名。只读字符串，只包含文件名称，不包含任何路径。

size 表示文件的字节大小，只读的 64 位整数。

type 表示文件的 MIME 类型。当类型不确定时为 “”。

webkitRelativePath 此处为空，当在 input 上加 webkitdirectory 属性时，用户可选择文件夹，此时 webkitRelativePath 表示文件夹中文件的相对路径。

注：FileList 对象由 DOM 提供，列出了所有用户选择的文件，每一个代表了一个 File 对象。你可以通过检查文件列表的 length 属性决定用户可以选则多少文件。各个 File 对象可以方便地通过访问文件列表来获取，像访问数组那样。

限制文件的上传类型

如果我们需要限制用户上传文件的类型，比如某处我们只希望能够上传图片，那么我们可以使用 input 的 accept 属性，accept 属性接受一个逗号分隔的 MIME 类型字符串。比如：

<!-- 表示只接受 png 图片 -->
accept="image/png" 或 accept=".png"

<!-- 表示接受PNG/JPEG 文件. -->
accept="image/png, image/jpeg" 或 accept=".png, .jpg, .jpeg"

<!-- 表示接受任何图片文件类型. -->
accept="image/*"

<!-- 表示接受任何 MS Doc 文件类型. -->
accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"

例子：

<form>
  <div>
    <label for="profile_pic">上传图片</label>
    <input
      type="file"
      id="profile_pic"
      name="profile_pic"
      accept=".jpg, .jpeg, .png"
    />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

6.文件读取

以上 File 对象只获取到了对文件的描述信息，但没有获得文件中的数据。HTML5 中提供了 FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容。

首先创建一个 FileReader 实例：

var reader = new FileReader();

属性

FileReader.error 属性表示在读取文件时发生的错误，只读。语法为：

var error = instanceOfFileReader.error;

FileReader.readyState 属性表示 FileReader 状态的数字，只读。取值如下：

常量名	值	描述
EMPTY	0	还没有加载任何数据.
LOADING	1	数据正在被加载.
DONE	2	已完成全部的读取请求

语法为：

var state = instanceOfFileReader.readyState;

FileReader.result 属性表示文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作，只读。

事件处理

FileReader.onabort	处理abort事件。该事件在读取操作被中断时触发。
FileReader.onerror	处理error事件。该事件在读取操作发生错误时触发。
FileReader.onload	处理load事件。该事件在读取操作完成时触发。
FileReader.onloadstart	处理loadstart事件。该事件在读取操作开始时触发
FileReader.onloadend	处理loadend事件。该事件在读取操作结束时（要么成功，要么失败）触发。
FileReader.onprogress	处理progress 事件。该事件在读取 Blob 时触发

方法

FileReader.abort()	中止读取操作。在返回时，readyState属性为DONE。
FileReader.readAsArrayBuffer()	开始读取指定的 Blob 中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象。
FileReader.readAsDataURL()	开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个 data: URL 格式的字符串以表示所读取文件的内容。
FileReader.readAsText()	开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个字符串以表示所读取的文件内容。

我们常用的是上传一个图片并显示出来和上传文本显示文本，因为这里只对 FileReader.readAsDataURL() 和 FileReader.readAsText() 方法进行举例说明，想要了解更多的知识可以访问 MDN FileReader

请上传 .txt 、.jpg 、.png 文件。

例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>文件读取</title>
    <script type="text/javascript">
      //检查浏览器是否支持FileReader
      if (typeof FileReader == "undified") {
    
    
        alert("您老的浏览器不行了！");
      }

      function showDataByURL() {
    
    
        var resultFile = document.getElementById("fileDemo").files[0];
        if (resultFile) {
    
    
          //创建一个 FileReader 实例
          var reader = new FileReader();
          //读取文件数据
          reader.readAsDataURL(resultFile);
          /*读取的过程就相当于 加载过程 */
          /*读取完毕  预览 */
          reader.onload = function (e) {
    
    
            var urlData = this.result;
            document.getElementById("result").innerHTML +=
              "<img src='" + urlData + "' alt='" + resultFile.name + "' />";
          };
        }
      }

      function showDataByText() {
    
    
        var resultFile = document.getElementById("fileDemo").files[0];
        if (resultFile) {
    
    
          var reader = new FileReader();
          reader.readAsText(resultFile, "gb2312");
          reader.onload = function (e) {
    
    
            var urlData = this.result;
            document.getElementById("result").innerHTML += urlData;
          };
        }
      }
    </script>
  </head>

  <body>
    <input type="file" name="fileDemo" id="fileDemo" multiple="multiple" />
    <input
      type="button"
      value="显示图片"
      id="readAsDataURL"
      onclick="showDataByURL();"
    />
    <input
      type="button"
      value="显示文本"
      id="readAsText"
      onclick="showDataByText();"
    />
    <div id="result"></div>
  </body>
</html>

运行效果为：
请添加图片描述

总结

五万多字了，麻了。有所缺漏，欢迎指正。

学HTML就看这篇呀（HTML详解）

文章目录

一、HTML概述

1.HTTP基础

2.什么是HTML

3.HTML网页结构

4.HTML注释

二、HTML常用标签

1.HTML标签

2.HTML元素

3.HTML常见标签

4.容器标签

5.HTML列表

6.HTML样式

三、HTML 表格与 DIV 应用

1.创建表格

2.完善表格

3.div设置

四、HTML 表单

1.创建表单

2.插入表单对象

3.菜单和列表

4.文本域

五、HTML图像与框架

1.插入图像

2.使用框架（iframe）

六、HTML5简介

1.HTML5代码规范

2.HTML5 的改变

3.新特性和新规则

4.新增的结构元素

5.废除的元素

七、HTML5表单

1.HTML5表单元素

2.HTML5表单新增元素

3.HTML5输入类型

八、HTML5 Canvas API

1.Canvas 元素

2.绘制简单图形

3.直线绘制

4.矩形绘制

5.圆和扇形的绘制

6.填充和渐变

7.文字绘制

8.图片绘制

九、HTML5 视频音频与拖放

1.HTML5 视频介绍

1.HTML5 视频介绍

3.HTML5 拖放

十.HTML5 Web Storage 和文件上传

1.Web Storage 概述

2.localStorage 方法

3.sessionStorage 方法

4.HTML5 文件上传概述

5.如何实现文件上传

6.文件读取

总结

猜你喜欢