html5

一、什么是HTML5？

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

HTML5的设计目的是为了在移动设备上支持多媒体。

HTML5 定义了 HTML 标准的最新版本，是对HTML的第五次重大修改，号称下一代的HTML标准。

两个概念：

• 是一个新版本的HTML语言，定义了新的标签、特性和属性
• 拥有一个强大的技术集，这些技术集是指： HTML5、CSS3 、javascript，这也是广义上的 HTML5。

二、HTML5拓展了哪些内容？

1. 新的语义化元素——比如 article、footer、header、nav、section
2. 新的表单控件——比如 calendar、date、time、email、url、search
3. 用于媒介回放的 video 和 audio 元素
4. 用于绘画的 canvas 元素
5. 对本地离线存储的更好的支持

三、HTML5新增语义化元素

1. 什么是语义元素？

一个语义元素能够清楚的描述其意义给浏览器和开发者。

无语义元素实例: <div> 和 <span>无需考虑内容;

语义元素实例: <form> <table> <img> ——清楚的定义了它的内容。

许多现有网站都包含以下HTML代码： <div id="nav">, <div class="header">，或者 <div id="footer">, 来指明导航链接、 头部以及尾部。

HTML5 提供了新的语义元素来明确一个Web页面的不同部分。

2. 新增语义化元素有哪些？

新增元素如下，它们都是块级元素。

1）<header> 头部

定义文档的头部区域，可作为介绍内容或者导航链接栏的容器，主要用于定义内容的介绍展示区域。

2）<nav>导航

定义页面的导航链接部分区域

3）<article> 内容

定义独立的区域内容。

4）<section> 区块

定义文档中的节（section、区段），比如章节、页眉、页脚或文档中的其他部分，一般嵌套在article内一起使用。

<!-- article定义一块独立的区域，section定义文档中的节，比如章节，页眉页脚或文档中的其他部分 -->
<article style="background-color: #ccc;">
  <h2>HTML5简介</h2>
  <section>
    <h4>第一章 什么是HTML5？</h4>
    <p>HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。</p>
  </section>
  <section>
    <h4>第二章 HTML5拓展了哪些内容？</h4>
    <p>新的语义化元素</p>
    <p>新的表单控件</p>
    <p>用于媒介回放的 video 和 audio 元素</p>
  </section>
</article>

显示效果如下：

5）<aside> 侧边栏

定义主区域内容之外的内容（比如侧边栏），aside 标签的内容应与主区域的内容相关。

6）<figure> 图表

定义独立的流内容（图像、图表、照片、代码等等），

7）<figcaption> 图表标题

定义 figure 元素的标题，figcaption 元素应该被置于 figure 元素的第一个或最后一个子元素的位置。

<!-- figure定义图标类的一块内容 figcaption定义figure的标题 -->
<figure>
  <figcaption>小雏菊</figcaption>
  <img src="../imgs/flower.webp" width="200px">
</figure>

显示效果如下：

8）<footer> 尾部

定义文档的底部区域，在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。

9）<details> 细节

定义文档或文档某个部分的细节。

允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。

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

open属性——规定 details 是否可见。

10）<summary> 细节标题

summary 标签为 details 元素定义一个可见的标题，当用户点击标题时会显示出详细信息。
summary 元素应该是 details 元素的第一个子元素。

<!-- details创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息，summary用于设置details的标题 默认隐藏信息，点击可展开详情 -->
<details>
  <summary>手机详情：</summary>
  <p>屏幕：5.96寸，2560*1440像素</p>
  <p>电池：3220mAh</p>
  <p>相机：3000万像素</p>
</details>

显示效果如下：

11）<dialog> 对话框

定义对话框，比如提示框。

open属性——设置对话框元素显示。

<script>
  function testdialog() {
    var open = document.getElementById("dialog1").open;
    if (open) {
      document.getElementById("dialog1").open = "";
    } else {
      document.getElementById("dialog1").open = "open";
    }
  }
</script>
<!-- dialog定义对话框,比如提示框 -->
<input type="button" value="测试对话框dialog" onclick="testdialog();">
<dialog id="dialog1">这是一个HTML5提供的对话框元素</dialog>

显示效果如下：

12）<mark> 高亮

定义带有记号的文本，即使文本高亮显示。

<p>mark定义带有<mark>记号</mark>的文本，在mark标签内的文本会<mark>高亮显示</mark>。</p>
<p><mark>mark的高亮部分默认显示背景色是黄色</mark>，那么<mark style="background-color: pink;">背景色能不能变为粉色</mark>呢？</p>
<p>答案当然是可以的！<mark>改变背景色</mark>需要配合<mark style="background-color: skyblue; font-size: 25px;">css</mark>来做到哦！</p>

显示效果如下：

13）<meter> 度量衡

定义度量衡，仅用于已知最大和最小值的度量。

比如：磁盘使用情况，查询结果的相关性等。

meter 不能作为一个进度条来使用， 进度条 <progress> 标签。

属性：

• value——当前值
• min——最小值
• max——最大值

<!-- meter定义已知范围或分数值内的标量测量，eg：磁盘用量 -->
<!-- value表示当前值，min最小值，max最大值；双标签间的内容文字是不可见的 -->
<!-- 属于行内元素 在一行上显示 不自动换行 -->
<meter value="2" min="0" max="10">十分之四</meter>
<meter value="50" max="100"></meter>
<meter value="0.8">80%</meter>

显示效果如下：

14）<progress> 进度条

定义任何类型的任务的进度。

progress 标签需要与 JavaScript 一起使用，来动态显示任务的进度。

属性：

• value——当前进度
• max——最大值（需要完成的值）

<!-- progress标示任务的进度/进程 -->
<!-- 单写progress标签，会显示蓝条来回滚动，双标签间的内容文本不可见，一般省略不写 -->
<!-- 属于行内元素 在一行上显示 不换行 -->
<progress>进度条</progress>

显示效果如下：

<!-- value属性表示当前进度，max最大值，如下写法展示静态页面 -->
下载进度：<progress value="22" max="100"></progress>

显示效果如下：

<!-- 一般与js一起使用，动态展示任务的进度 -->
<input type="button" value="测试进度" onclick="testprogress();">
<progress id="pro1" value="0" max="100"></progress>
<script>
  function testprogress() {
    var pro1 = document.getElementById("pro1");
    var i = 0;
    window.setInterval(function () {
      pro1.value = i;
      i++;
    }, 50);
  }
</script>

显示效果如下：

四、HTML5新增表单元素

1. HTML5新增input元素

type = “date” ——日期框，可勾选-年-月-日。

type = “time” ——时间框，可勾选-时-分-秒。

type = “datetime” ——日期时间框，可勾选-年-月-日-时-分-秒，google浏览器不支持。

type = “datetime - local” ——日期时间框，可勾选-年-月-日-时-分-秒，google浏览器支持。

type = “month” ——月份框，可勾选-年-月。

type = “week” ——周，可勾选-年-周。

<!-- datepickers -->
<!-- 可输入/选择固定格式的日期时间 -->
<input type="date" name="mydate"> <br>
<input type="time" name="mytime"> <br>
<input type="datetime" name="mydatetime" placeholder="Chrome不支持datetime"> <br>
<input type="datetime-local" name="mydatetime-local"> <br>
<input type="month" name="mymonth"> <br>
<input type="week" name="myweek"> <br>

显示效果如下：

type = “color” ——颜色框，可勾选颜色

type = “tel” ——电话框

type = “email” ——邮箱框，在提交时会校验邮箱地址的格式是否正确。

type = “url” ——网址框，在提交时会校验网址格式是否正确。

type = “search” ——搜索框，文本框末尾新增×符号，可点击一次性删除输入内容。

<input type="color" name="mycolor" placeholder="color">
<input type="email" name="myemail" placeholder="email">
<input type="tel" name="mytel" placeholder="tel">
<input type="url" name="myurl" placeholder="url">
<input type="search" name="mysearch" placeholder="search">

type = “number” ——数值框，仅可输入数字类型。

使用下面的属性来规定对所接受的数字的限定：

• required——规定输入字段的值是必需的，不能为空，必填项
• pattern——规定用于验证输入字段的模式
• disabled——规定输入字段是禁用的，跳灰显示
• readonly——规定输入字段的值无法修改，只读
• value——规定输入字段的默认值
• max——规定允许的最大值
• min——规定允许的最小值
• step——规定输入字段的合法数字间隔，步长

<input type="number" name="myname" placeholder="number" required value="1" min="1" max="9" step="2">
<!-- disabled 禁用 -->
<input type="number" name="mynumber1" disabled>
<!-- readonly 只读 -->
<input type="number" name="mynumber2" readonly>

显示效果如下：

type = “range” ——滑动条，可手动拖拽，比如：音量调整

使用下面的属性来规定对数字类型的限定：

• value——规定默认值
• max——规定允许的最大值
• min——规定允许的最小值
• step——规定合法的数字间隔，步长

<!-- range滑动条 -->
<input type="range" name="myrange" value="5" min="0" max="10" step="1">

显示效果如下：

2. HTML5新增非input表单元素

<datalist>预定义选项列表

datalist定义输入控件的预定义选项，为 input 元素提供预定义选项列表，用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist>元素的 id 属性。

• select 与 datalist 的区别：

  对于select来说，select的下拉菜单是供用户选择的，用户只能选择其中的选项不能自己添加。

  但是datalist就不同了，datalist不仅可以供用户选择，用户还可以自己输入，而且datalist还可以达到模糊匹配的效果，使用很方便。

• 注意：使用这种下拉的智能提示框也要注意场合。

  比如在一些要选择不是太多的场景下，使用一般的下拉框其实就可以了。

  而如果在需要用户在很多数据中去选择，则可以建议使用Datalist下拉建议提示框，因为可以方便用户快速检索去选择。

<!-- datalist需配合input元素使用，datalist不会被显示出来，option表示预定义选项的每一项 -->
<!-- input绑定datalist：input的list属性值 = datalist的id属性值 -->
<input type="text" list="city" placeholder="请输入您所在的城市">
<datalist id="city">
  <option value="北京"></option>
  <option value="上海"></option>
  <option value="西安"></option>
  <option value="杭州"></option>
  <option value="厦门"></option>
</datalist>

显示效果如下：

五、HTML5 新增表单属性

HTML5 的 <form>和 <input> 标签添加了几个新属性。

1. <form> 新属性

1）autocomplete 自动完成

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。（用户首次填写提交过的表单信息，在重新刷新页面后再次填写输入时，会自动匹配显示之前输入过的相似内容）

autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text、 password、search、 url、 telephone、email、datepickers、range 以及 color。

autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。

<form> 的 autocomplete 属性为 “on”-开，但是 <input type="e-mail">的autocomplete自动为“off”-关。

2）novalidate 不校验

novalidate 属性是一个 boolean(布尔) 属性，规定在提交表单时不应该验证 form 或 input 域。

适用于form表单内自动校验的input类型，比如：email、url、number等，
注意： 不是给input表单元素添加该属性，而是给 <form> 添加。

<form action="" method="GET" autocomplete="on" novalidate>
  姓名:<input type="text" name="username" autocomplete="on">
  密码:<input type="text" name="username" autocomplete="off">
  <input type="submit" value="提交">
</form>

2. <input> 新属性

1）autocomplete 自动完成

同form属性使用一致

2）autofocus 自动聚焦（获取光标）

autofocus 属性是一个 boolean 属性，规定在页面加载时，输入域自动地获得焦点。

<input type="text" name="nickname" placeholder="昵称">
<input type="text" name="name" placeholder="真实姓名" autofocus>
<input type="number" name="age" placeholder="年龄">

显示效果如下：

3）form 绑定在表单外的输入字段

form 属性规定 <input> 元素所属的一个或多个表单。

要求：在外的<input>元素的form属性值 = 所需归属的<form>元素的id属性值。

即：即使输入字段位于 HTML 表单之外（但仍属表单），也可随form表单一同提交数据。

<form action="" method="GET" novalidate autocomplete="on" id="message">
	<input type="text" name="nickname" placeholder="昵称">
	<input type="submit" value="提交">
</form>
<input type="password" name="password" placeholder="密码" form="message">

4）formaction 表单提交地址

formaction 属性用于描述表单提交的URL地址，代替 <form> 元素中的action属性。
formaction 属性用于 type=“submit” 和 type=“image”。

**注意：**action是<form> 元素的属性，formaction是<input>表单元素的属性。

<form action="admin.html" method="GET">
    姓名:<input type="text" name="username" value="张三">
	<input type="submit" value="提交" formaction="login.html">
	<!-- <input type="image" src="img_submit.gif" alt="submit" formaction="login.html"> -->
</form>    

显示效果如下：最终提交的路径是login，而不是admin

5）formenctype 表单数据提交前编码情况

formenctype 属性描述了表单数据提交到后台处理程序之前如何对其进行编码。 (仅适用于 method=“post” 的表单)

该属性与 type=“submit” 和 type=“image” 配合使用。

formenctype 属性代替 form 元素的 enctype 属性。

**同理 注意：**enctype是<form> 元素的属性，formenctype是<input>表单元素的属性。

formenctype属性值同enctype属性值一致：

• application/x-www-form-urlencoded——默认。在发送前对所有字符进行编码。将空格转换为 “+” 符号，特殊字符转换为 ASCII HEX 值。
• multipart/form-data——不对字符编码。当使用有文件上传控件的表单时，该值是必需的。
• text/plain——将空格转换为 “+” 符号，但不编码特殊字符。

<input type="file" name="avatar">
<input type="submit" value="提交" formenctype="multipart/form-data">

6）formmethod 表单提交方式

formmethod 属性定义了表单提交的方式。

formmethod 属性代替了 <form> 元素的 method 属性。

该属性可以与 type=“submit” 和 type=“image” 配合使用。

**同理 注意：**method是<form> 元素的属性，formmethod是<input>表单元素的属性。

formmethod属性值同method属性值一致：

• get——默认。将表单数据（form-data）以名称/值对的形式附加到 URL：URL?name=value&name=value。

  关于 “get” 方法的注释：

  1. 该方法将表单数据以名称/值对的形式附加到 URL 中
  2. 该方法对于用户希望加入书签的表单提交很有用
  3. URL 的长度是有限的（不同浏览器限制不一样），因此，您不能确定是否所有的表单数据都能被正确传输
  4. 绝不要使用 “get” 方法来发送敏感数据！（比如密码或者其他敏感信息，在浏览器的地址栏中是可见的）

• post——以 HTTP post 事务的形式发送表单数据（form-data）。

  关于 “post” 方法的注释：

  1. 该方法将表单数据以 HTTP post 事务的形式发送
  2. 通过 “post” 方法提交的表单不能加入书签
  3. “post” 方法比 “get” 更安全，且 “post” 没有长度限制

<input type="submit" value="提交" formmethod="post">

7）formnovalidate 不校验表单

novalidate 属性是一个 boolean 属性。

novalidate属性描述了 <input> 元素在表单提交时无需被验证。

formnovalidate 属性会覆盖 <form> 元素的novalidate属性。

formnovalidate 属性与 type="submit 一起使用。

**同理 注意：**novalidate是<form> 元素的属性，formnovalidate是<input>表单元素的属性。

<input type="submit" value="提交" formaction="login.html" formmethod="GET" formnovalidate>

8）formtarget 表单提交后在何处相应显示

formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。

formtarget 属性覆盖 <form>元素的target属性。

formtarget 属性与 type=“submit” 和 type=“image” 配合使用。

**同理 注意：**target 是<form> 元素的属性，formtarget 是<input>表单元素的属性。

9）height 与 width 图片作为提交按钮，图片的宽高属性

height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。

height 和 width 属性只适用于 image 类型的<input> 标签。

图像通常会同时指定高度和宽度属性。

如果图像设置高度和宽度，图像所需的空间在加载页时会被保留。

如果没有这些属性，浏览器不知道图像的大小，并不能预留适当的空间。图片在加载过程中会使页面布局效果改变 （尽管图片已加载）。

<input type="image" src="../cat.jpeg" alt="submit" title="点击小猫提交" width="100px" height="50px">

10）list

list 属性规定输入域的 datalist。

datalist 是输入域的选项列表标签。

option是datalist中的每一项。option 元素永远都要设置 value 属性。

绑定要求：<input>的list属性值 = <datalist>的id属性值

<input type="text" name="country" placeholder="请输入所属国家" list="country">
<datalist id="country">
  <option value="中国"></option>
  <option value="美国"></option>
  <option value="英国"></option>
  <option value="韩国"></option>
</datalist>

显示效果如下：

11）multiple 多选

multiple 属性是一个 boolean 属性。

multiple 属性规定<input> 元素中可选择多个值。

multiple 属性适用于file 类型的<input> 标签，以及<select>标签。

选择照片上传（可多选）：<input type="file" name="img" multiple>
选择喜欢的体育活动（可多选）：
<select  name="sports" multiple>
  <option value="football">足球</option>
  <option value="basketball">篮球</option>
  <option value="badminton">羽毛球</option>
  <option value="volleyball">排球</option>
</select>

显示效果如下：

12）placeholder 提示文本

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。

placeholder 属性适用于以下类型的 <input> 标签：text、password、search、 url、 tel以及email。

<input type="text" placeholder="姓名">
<input type="password" placeholder="密码">
<input type="email" placeholder="邮箱">
<input type="url" placeholder="个人网址">
<input type="tel" placeholder="联系号码">
<input type="search" placeholder="请输入要搜索的问题">

显示效果如下：

13）required 必填项

规定输入字段的值是必需的，不能为空，必填项

required 属性是一个 boolean 属性.

required 属性规定必须在提交之前填写输入域（不能为空）。

required 属性适用于以下类型的 <input> 标签：text、password、 radio、 checkbox、search、 url、 tel、 email、 date pickers、 number以及 file。

14）pattern (regexp) 正则表达式校验

pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。

pattern 属性适用于以下类型的 <input> 标签：text、password、search、url、tel 和 email

<!-- [A-Za-z]{3}是正则表达式 表示只能输入大小写字母类型 若不符合要求则不能完成提交数据 -->
<input type="text" name="username" placeholder="请输入账号" required pattern="[A-Za-z]{3}" />

六、新增音视频元素

1. <Video> 视频

大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。

<Video>的属性：

• src——资源路径（绝对路径 / 相对路径 / 网络地址），可直接在video标签上添加路径，也可通过source子元素添加路径
• controls——视频播放的控制器
• width/height——视频窗口初始化大小
• autoplay——自动播放，视频在就绪后马上播放
• loop——循环播放
• muted——静音播放

<source>（子元素）——设置被播放的资源

<video> 元素支持多个 <source> 元素，<source> 元素可以链接不同的视频文件，浏览器将使用第一个可识别的格式。

<source>的属性：

• src——资源路径（绝对路径 / 相对路径 / 网络地址）
• type——被播放资源的类型（video元素支持三种视频格式： MP4、WebM 和 Ogg）

<Video>与</Video>标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

<!-- 关于src的2个书写位置 -->
<!-- 1. 直接写在video标签内部 -->
<!-- 谷歌禁用了自动播放属性，解决方案：添加静音播放属性，即可实现静音自动播放 -->
<video src="./resource/haidi.mp4" controls width="500px" height="400px" autoplay muted>
  您的浏览器不支持 video 标签。
</video>
<!-- 2. 写在source标签内 -->
<video controls width="80%">
  <source src="./resource/haidi.mp4" type="video/mp4">
  <source src="./resource/haidi.mp4" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>

在没有control控件之前，需要通过JS来控制视频播放：

<!-- 给对应的按钮添加点击事件 -->
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<button onclick="makeNormal()">常规尺寸</button>
<br>
<video src="./resource/haidi.mp4" id="video1" width="400px"></video>
<script>
  // 获取视频DOM对象
  var video1obj = document.getElementById("video1");
  // 播放/暂停
  function playPause() {
    // 判断视频是否是暂停状态，如果为真，则点击播放；若为假，则点击暂停
    if (video1obj.paused) {
      video1obj.play();
    } else {
      video1obj.pause()
    }
  }
  // 放大
  function makeBig() {
    video1obj.width = "800";
  }
  // 缩小
  function makeSmall() {
    video1obj.width = "200"
  }
  // 正常尺寸
  function makeNormal() {
    video1obj.width = "400"
  }
</script>

2. <Audio> 音频

HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。

<audio>的属性：

• src——资源路径（绝对路径 / 相对路径 / 网络地址），可直接在audio标签上添加路径，也可通过source子元素添加路径
• controls——音频播放的控制器
• autoplay——自动播放，音频在就绪后马上播放（谷歌浏览器禁用自动播放）
• loop——循环播放
• muted——静音播放

<source>（子元素）——设置被播放的资源

<audio>元素允许使用多个 <source> 元， <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。

<source>的属性：

• src——资源路径（绝对路径 / 相对路径 / 网络地址）
• type——被播放资源的类型（audio元素支持三种视频格式： MP3、Wav和 Ogg）

在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。

<!-- src的2种书写位置 -->
<!-- 1. 写在audio标签内 -->
<audio src="./resource/haidi.mp3" controls loop>
  您的浏览器不支持 audio 元素。
</audio>
<!-- 2. 写在source标签内 -->
<audio controls>
  <source src="./resource/haidi.mp3" type="audio/mp3">
  您的浏览器不支持 audio 元素。
</audio>

七、Web存储

HTML5可以在本地存储用户的网页数据。

在没有Web存储之前网页数据本地存储使用cookie完成，cookie浏览器自带的存储空间，每一个cookie可以存4k，但是cookie本地存储并不安全。

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

客户端存储数据有两种方式：localStorage 和 sessionStorage。

在使用 web 存储前，应检查浏览器是否支持 localStorage 和sessionStorage：

if (typeof(Storage) !== "undefined") {
 // 支持 localStorage sessionStorage 对象! // 一些代码.....
 } else { 
// 抱歉! 不支持 web 存储。
}

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

• 保存数据（2种方式）：

1. localStorage.变量名称 = “数据值”;
2. localStorage.setItem(“变量名称”,“数据值”);

• 对应获取数据（2种方式）：

1. localStorage.变量名称;
2. localStorage.getItem(“变量名称”);

• 删除存储的数据：

1. 删除指定的数据：localStorage.removeItem(“变量名称”);
2. 删除所有的数据：localStorage.clear( );

注意: 键/值对通常以字符串存储。

1. localStorage 永久存储

长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

案例：若登录成功，则在跳转的登陆成功页面显示登录用户名，点击退出按钮则清除存储用户信息

登录页面代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录</title>
  <script>
    function mylogin() {
      // 获取用户名的输入框对象
      var usernameObj = document.getElementById("username");
      // 获取密码的输入框对象
      var psdObj = document.getElementById("psd");
      // 获取显示错误提示信息的span对象
      var errorObj = document.getElementById("error");
      // 获取用户输入的用户名和密码
      var username = usernameObj.value;
      var psd = psdObj.value;
      // 判断用户名密码是否正确(假设用户名正确为张三，密码为123456)
      if (username == "张三" && psd == "123456") {
        // 判断浏览器是否支持web存储
        if (typeof (Storage) !== "undefined") {
          localStorage.myname = username;
        } else {
          alert("不支持localStorage")
        }
        window.location.href = "success.html";
      } else {
        // 用户名密码错误时：给span元素中写入一段提示文字
        errorObj.innerHTML = "用户名密码有误，请重新输入";
      }
    }
  </script>
</head>

<body>
  <span id="error"></span><br>
  <input type="text" id="username" placeholder="请输入用户名"><br>
  <input type="password" id="psd" placeholder="请输入密码"><br>
  <button id="btn" onclick="mylogin();">登录</button>
</body>

</html>

登陆成功页面代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登陆成功</title>
  <script>
    // 登陆成功页面显示登录的用户名
    window.onload = function () {
      // 获取h1元素
      var h1obj = document.getElementById("h1");
      // 判断浏览器是否支持本地存储
      if (typeof (Storage) !== "undefined") {
        var myval = localStorage.myname;
        // 把存储的用户名写进去到h1标签中
        h1obj.innerHTML = myval + ":登陆成功";
      } else {
        alert("浏览器不支持localStorage")
      }
    }
    // 点击退出时清除存储的数据
    function myexit() {
      if (typeof (Storage) !== "undefined") {
        localStorage.clear();
        // 重新刷新登录成功页面，检查存储数据是否被清除掉
        window.location.href = "success.html";
      } else {
        alert("浏览器不支持localStorage");
      }
    }
  </script>
</head>

<body>
  <h1 id="h1">登录成功</h1>
  <button onclick="myexit();">退出</button>
</body>

</html>

显示效果如下：

2. sessionStorage 暂时存储

临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

案例：每点击一下按钮，页面显示累计点击次数

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    function testBtnCount() {
      if (typeof (Storage) !== "undefined") {
        //判断sessionStorage.clickcount中是否保存过数据值
        if (sessionStorage.clickcount) {
          sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
        } else {
          sessionStorage.clickcount = 1;
        }
        document.getElementById("h4").innerHTML = "您已经点击了该按钮" + sessionStorage.clickcount + "次";
      } else {
        alert("浏览器不支持sessionStorage")
      }
    }
  </script>
</head>

<body>
  <button onclick="testBtnCount();">测试按钮的点击次数</button>
  <h4 id="h4"></h4>
</body>

</html>

显示效果如下：

3. localStorage和sessionStorage区别

• localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
• 它们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。
• localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
• sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
• 不同浏览器无法共享localStorage或sessionStorage中的信息。
• 相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。
• localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。
• sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。

八、<canvas> 画布

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

1. 创建一个画布（Canvas）

一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.

注意: 默认情况下 <canvas> 元素没有边框和内容。

<!-- 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小 -->
<canvas id="myCanvas" width="200" height="100"></canvas>

使用 style 属性来添加边框：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #ff0000;">
</canvas>

2. 使用 JavaScript 来绘制图像

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

<body>
  <!-- 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小 -->
  <canvas id="myCanvas" width="200" height="100" style="border:3px solid #0000ff;">
  您的浏览器不支持 HTML5 canvas 标签。
  </canvas>
    
  <script>
    // 1. 找到 canvas 元素
    var c = document.getElementById("myCanvas");
    // 2. 创建 context 对象，getContext("2d") 对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
    var ctx = c.getContext("2d");
    // 3. fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）
    ctx.fillStyle = "#FF0000";
    // 4. fillRect(x, y, width, height) 方法定义了矩形当前的填充方式
    ctx.fillRect(0, 0, 150, 75);
  </script>
</body>