一、什么是HTML5?
HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。
HTML5的设计目的是为了在移动设备上支持多媒体。
HTML5 定义了 HTML 标准的最新版本,是对HTML的第五次重大修改,号称下一代的HTML标准。
两个概念:
- 是一个新版本的HTML语言,定义了新的标签、特性和属性
- 拥有一个强大的技术集,这些技术集是指: HTML5、CSS3 、javascript,这也是广义上的 HTML5。
二、HTML5拓展了哪些内容?
- 新的语义化元素——比如 article、footer、header、nav、section
- 新的表单控件——比如 calendar、date、time、email、url、search
- 用于媒介回放的 video 和 audio 元素
- 用于绘画的 canvas 元素
- 对本地离线存储的更好的支持
三、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” 方法的注释:
- 该方法将表单数据以名称/值对的形式附加到 URL 中
- 该方法对于用户希望加入书签的表单提交很有用
- URL 的长度是有限的(不同浏览器限制不一样),因此,您不能确定是否所有的表单数据都能被正确传输
- 绝不要使用 “get” 方法来发送敏感数据!(比如密码或者其他敏感信息,在浏览器的地址栏中是可见的)
-
post——以 HTTP post 事务的形式发送表单数据(form-data)。
关于 “post” 方法的注释:
- 该方法将表单数据以 HTTP post 事务的形式发送
- 通过 “post” 方法提交的表单不能加入书签
- “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种方式):
- localStorage.变量名称 = “数据值”;
- localStorage.setItem(“变量名称”,“数据值”);
- 对应获取数据(2种方式):
- localStorage.变量名称;
- localStorage.getItem(“变量名称”);
- 删除存储的数据:
- 删除指定的数据:localStorage.removeItem(“变量名称”);
- 删除所有的数据: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>