1.命名锚
HTML 链接 - name 属性
name 属性规定锚(anchor)的名称。
您可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示,它对读者是不可见的。
当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
命名锚的语法:
<a name="label">锚(显示在页面上的文本)</a>
提示:锚的名称可以是任何你喜欢的名字。
提示:您可以使用 id 属性来替代 name 属性,命名锚同样有效。
实例
首先,我们在 HTML 文档中对锚进行命名(创建一个书签):
<a name="tips"
>基本的注意事项 - 有用的提示</a>
然后,我们在同一个文档中创建指向该锚的链接:
<a href="#tips">有用的提示</a>
您也可以在其他页面中创建指向该锚的链接:
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
在上面的代码中,我们将 # 符号和锚名称添加到 URL 的末端,就可以直接链接到 tips 这个命名锚了。
2.img
替换文本属性(Alt)
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat"
>
在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。
map链接
img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性(根据浏览器),所以我们同时向 map 元素添加了 "id" 和 "name" 属性。
3.表格
架构
table 主框架
tr 行 caption 标题
th 表头 td表格数据
表头
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
1 <html> 2 3 <body> 4 5 <h4>表头:</h4> 6 <table border="1"> 7 <tr> 8 <th>姓名</th> 9 <th>电话</th> 10 <th>电话</th> 11 </tr> 12 <tr> 13 <td>Bill Gates</td> 14 <td>555 77 854</td> 15 <td>555 77 855</td> 16 </tr> 17 </table> 18 19 <h4>垂直的表头:</h4> 20 <table border="1"> 21 <tr> 22 <th>姓名</th> 23 <td>Bill Gates</td> 24 </tr> 25 <tr> 26 <th>电话</th> 27 <td>555 77 854</td> 28 </tr> 29 <tr> 30 <th>电话</th> 31 <td>555 77 855</td> 32 </tr> 33 </table> 34 35 </body> 36 </html>
关于空格
空格由和号开始 ("&"),然后是字符"nbsp",并以分号结尾(";")。可用于表格无内容带边框。
跨行与跨列
colspan=“2” 跨列
rowsapn = “2” 跨行
<html> <body> <h4>横跨两列的单元格:</h4> <table border="1"> <tr> <th>姓名</th> <th colspan="2">电话</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>横跨两行的单元格:</h4> <table border="1"> <tr> <th>姓名</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">电话</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html>
间隙
cellpadding="10" 内容与边框间隙
cellspacing="10" 边框与边框间隙
背景
直接上background
对齐
直接上align
外边框
frame=“box”、“above”、“below”、“hsides”、"vsides"
<html> <body> <p><b>注释:</b>frame 属性无法在 Internet Explorer 中正确地显示。</p> <p>Table with frame="box":</p> <table frame="box"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with frame="above":</p> <table frame="above"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with frame="below":</p> <table frame="below"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with frame="hsides":</p> <table frame="hsides"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with frame="vsides":</p> <table frame="vsides"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> </body> </html>
4.列表
类型
无序列表 ul li
有序列表 ol li
定义列表 dl dd dt
不同类型无序列表
type =“disc” 实心圆点
type =“circle” 空心圆点
type =“circle” 方形圆点
不同类型有序列表
无type 数字 123
type = “A” ABC
type = “a” abc
type = “I” 大写罗马字母
type = “i” 小写罗马字母
5.布局
header | 定义文档或节的页眉 |
nav | 定义导航链接的容器 |
section | 定义文档中的节 |
article | 定义独立的自包含文章 |
aside | 定义内容之外的内容(比如侧栏) |
footer | 定义文档或节的页脚 |
details | 定义额外的细节 |
summary | 定义 details 元素的标题 |
6.字符实体
HTML 中的预留字符必须被替换为字符实体。
http://www.w3school.com.cn/html/html_entities.asp
7.统一资源定位器
http://www.w3school.com.cn/html/html_url.asp
8.form
Action 属性
action 属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
通常,表单会被提交到 web 服务器上的网页。
在上面的例子中,指定了某个服务器脚本来处理被提交表单:
<form action="action_page.php">
如果省略 action 属性,则 action 会被设置为当前页面。
Method 属性
method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST):
<form action="action_page.php" method="GET">
Name 属性
如果要正确地被提交,每个输入字段必须设置一个 name 属性
用 <fieldset> 组合表单数据
<fieldset> 元素组合表单中的相关数据
<legend> 元素为 <fieldset> 元素定义标题。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<!DOCTYPE html> <html> <body> <form action="/demo/demo_form.asp"> <fieldset> <legend>Personal information:</legend> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </fieldset> </form> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<!DOCTYPE html> <html> <body> <form action="/demo/demo_form.asp"> <fieldset> <legend>Personal information:</legend> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </fieldset> </form> </body> </html>
9.表单元素类型
<input> 元素
最重要的表单元素是 <input> 元素。
<input> 元素根据不同的 type 属性,可以变化为多种形态。
<select> 元素(下拉列表)
<option> 元素定义待选择的选项。
列表通常会把首个选项显示为被选选项。
通过添加 selected 属性来定义预定义选项。
<textarea> 元素
<textarea> 元素定义多行输入字段(文本域):
<textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea>
<button> 元素
<button> 元素定义可点击的按钮
HTML5 表单元素
HTML5 增加了如下表单元素:<datalist> <keygen> <output>
10. <input> 元素的输入类型
输入类型:text
<input type="text"> 定义供文本输入的单行输入字段
输入类型:password
<input type="password"> 定义密码字段:
password 字段中的字符会被做掩码处理(显示为星号或实心圆)
输入类型:submit
<input type="submit"> 定义提交表单数据至表单处理程序的按钮。
表单处理程序(form-handler)通常是包含处理输入数据的脚本的服务器页面。
在表单的 action 属性中规定表单处理程序(form-handler)
Input Type: radio
<input type="radio"> 定义单选按钮。
Input Type: checkbox
<input type="checkbox"> 定义复选框。
复选框允许用户在有限数量的选项中选择零个或多个选项。
Input Type: button
<input type="button> 定义按钮。
HTML5 输入类型
HTML5 增加了多个新的输入类型:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
注释:老式 web 浏览器不支持的输入类型,会被视为输入类型 text。
输入类型:number
<input type="number"> 用于应该包含数字值的输入字段。
能够对数字做出限制。
根据浏览器支持,限制可应用到输入字段。
输入限制:http://www.w3school.com.cn/html/html_form_input_types.asp
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<form> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> </form>
输入类型:date
<input type="date"> 用于应该包含日期的输入字段。
根据浏览器支持,日期选择器会出现输入字段中
输入类型:color
<input type="color"> 用于应该包含颜色的输入字段。
根据浏览器支持,颜色选择器会出现输入字段中。
输入类型:range
<input type="range"> 用于应该包含一定范围内的值的输入字段。
根据浏览器支持,输入字段能够显示为滑块控件。
输入类型:month
<input type="month"> 允许用户选择月份和年份。
根据浏览器支持,日期选择器会出现输入字段中。
输入类型:week
<input type="week"> 允许用户选择周和年。
根据浏览器支持,日期选择器会出现输入字段中。
输入类型:time
<input type="time"> 允许用户选择时间(无时区)。
根据浏览器支持,时间选择器会出现输入字段中。
输入类型:datetime
<input type="datetime"> 允许用户选择日期和时间(有时区)。
根据浏览器支持,日期选择器会出现输入字段中。
输入类型:datetime-local
<input type="datetime-local"> 允许用户选择日期和时间(无时区)。
根据浏览器支持,日期选择器会出现输入字段中。
输入类型:email
<input type="email"> 用于应该包含电子邮件地址的输入字段。
根据浏览器支持,能够在被提交时自动对电子邮件地址进行验证。
某些智能手机会识别 email 类型,并在键盘增加 ".com" 以匹配电子邮件输入。
输入类型:search
<input type="search"> 用于搜索字段(搜索字段的表现类似常规文本字段)。
输入类型:tel
<input type="tel"> 用于应该包含电话号码的输入字段。
目前只有 Safari 8 支持 tel 类型。
输入类型:url
<input type="url"> 用于应该包含 URL 地址的输入字段。
根据浏览器支持,在提交时能够自动验证 url 字段。
某些智能手机识别 url 类型,并向键盘添加 ".com" 以匹配 url 输入。
11. <input> 元素的属性
value 属性
value 属性规定输入字段的初始值:
readonly 属性
readonly 属性规定输入字段为只读(不能修改):
readonly 属性不需要值。它等同于 readonly="readonly"。
disabled 属性
disabled 属性规定输入字段是禁用的。
被禁用的元素是不可用和不可点击的。
被禁用的元素不会被提交。
disabled 属性不需要值。它等同于 disabled="disabled"。
size 属性
size 属性规定输入字段的尺寸(以字符计)
maxlength 属性
maxlength 属性规定输入字段允许的最大长度
如设置 maxlength 属性,则输入控件不会接受超过所允许数的字符。
该属性不会提供任何反馈。如果需要提醒用户,则必须编写 JavaScript 代码。
HTML5 属性
HTML5 为 <input> 增加了如下属性:
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height 和 width
- list
- min 和 max
- multiple
- pattern (regexp)
- placeholder
- required
- step
并为 <form> 增加如需属性: autocomplete novalidate
autocomplete 属性
autocomplete 属性规定表单或输入字段是否应该自动完成。
当自动完成开启,浏览器会基于用户之前的输入值自动填写值。
提示:您可以把表单的 autocomplete 设置为 on,同时把特定的输入字段设置为 off,反之亦然。
autocomplete 属性适用于 <form> 以及如下 <input> 类型:text、search、url、tel、email、password、datepickers、range 以及 color。
novalidate 属性
novalidate 属性属于 <form> 属性。
如果设置,则 novalidate 规定在提交表单时不对表单数据进行验证。
autofocus 属性
autofocus 属性是布尔属性。
如果设置,则规定当页面加载时 <input> 元素应该自动获得焦点。
form 属性
form 属性规定 <input> 元素所属的一个或多个表单。
提示:如需引用一个以上的表单,请使用空格分隔的表单 id 列表。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get" id="form1"> First name: <input type="text" name="fname" /><br /> <input type="submit" value="提交" /> </form> <p>下面的 "Last name" 字段位于 form 元素之外,但仍然是表单的一部分。</p> Last name: <input type="text" name="lname" form="form1" /> </body> </html>
被包含进这个form
formaction 属性
formaction 属性规定当提交表单时处理该输入控件的文件的 URL。
formaction 属性覆盖 <form> 元素的 action 属性。
formaction 属性适用于 type="submit" 以及 type="image"。
formenctype 属性
formenctype 属性规定当把表单数据(form-data)提交至服务器时如何对其进行编码(仅针对 method="post" 的表单)。
formenctype 属性覆盖 <form> 元素的 enctype 属性。
formenctype 属性适用于 type="submit" 以及 type="image"。
formmethod 属性
formmethod 属性定义用以向 action URL 发送表单数据(form-data)的 HTTP 方法。
formmethod 属性覆盖 <form> 元素的 method 属性。
formmethod 属性适用于 type="submit" 以及 type="image"。
formnovalidate 属性
novalidate 属性是布尔属性。
如果设置,则规定在提交表单时不对 <input> 元素进行验证。
formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。
formnovalidate 属性可用于 type="submit"。
formtarget 属性
formtarget 属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。
formtarget 属性会覆盖 <form> 元素的 target 属性。
formtarget 属性可与 type="submit" 和 type="image" 使用。
height 和 width 属性
height 和 width 属性规定 <input> 元素的高度和宽度。
height 和 width 属性仅用于 <input type="image">。
注释:请始终规定图像的尺寸。如果浏览器不清楚图像尺寸,则页面会在图像加载时闪烁。
不带单位
ist 属性
list 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
min 和 max 属性
min 和 max 属性规定 <input> 元素的最小值和最大值。
min 和 max 属性适用于如需输入类型:number、range、date、datetime、datetime-local、month、time 以及 week。
multiple 属性
multiple 属性是布尔属性。
如果设置,则规定允许用户在 <input> 元素中输入一个以上的值。
multiple 属性适用于以下输入类型:email 和 file。
Select images: <input type="file" name="img" multiple>
pattern 属性
pattern 属性规定用于检查 <input> 元素值的正则表达式。
pattern 属性适用于以下输入类型:text、search、url、tel、email、and password。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
placeholder 属性
placeholder 属性规定用以描述输入字段预期值的提示(样本值或有关格式的简短描述)。
该提示会在用户输入值之前显示在输入字段中。
placeholder 属性适用于以下输入类型:text、search、url、tel、email 以及 password。
required 属性
required 属性是布尔属性。
如果设置,则规定在提交表单之前必须填写输入字段。
required 属性适用于以下输入类型:text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.
step 属性
step 属性规定 <input> 元素的合法数字间隔。
示例:如果 step="3",则合法数字应该是 -3、0、3、6、等等。
提示:step 属性可与 max 以及 min 属性一同使用,来创建合法值的范围。
step 属性适用于以下输入类型:number、range、date、datetime、datetime-local、month、time 以及 week。
12.HTML5 中的新元素
http://www.w3school.com.cn/html/html5_new_elements.asp
结构元素 + 表单元素+输入类型+属性语法 +图像+媒介元素
13.HTML5 中的代码规范
请使用正确的文档类型
请始终在文档的首行声明文档类型:
<!DOCTYPE html>
如果一贯坚持小写标签,那么可以使用:
<!doctype html>
请使用小写元素名
HTML5 允许在元素名中使用混合大小写字母。
我们推荐使用小写元素名:
- 混合大小写名称并不好
- 开发者习惯使用小写名(比如在 XHTML 中)
- 小写更起来更纯净
- 小写更易书写
关闭所有 HTML 元素
关闭空的 HTML 元素
在 HTML5 中,关闭空元素是可选的。
允许这样:
<meta charset="utf-8">
也允许这样:
<meta charset="utf-8" />
斜杠(/)在 XHTML 和 XML 中是必需的。
使用小写属性名
HTML5 允许大小写混合的属性名。
我们建议使用小写属性名:
- 混合属性名并不好
- 开发者习惯于使用小写属性名(比如在 XHTML 中)
- 小写属性名看情况更纯净
- 小写属性名更易书写
属性值加引号
HTML5 允许不加引号的属性值。
我们推荐属性值加引号:
- 如果属性值包含值,则必须使用引号
- 混合样式绝对不好
- 加引号的值更易阅读
必需的属性
请始终对图像使用 alt 属性。当图像无法显示时该属性很重要。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
请始终定义图像尺寸。这样做会减少闪烁,因为浏览器会在图像加载之前为图像预留空间。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
避免长代码行
当使用 HTML 编辑器时,通过左右滚动来阅读 HTML 代码很不方便。
请尽量避免代码行超过 80 个字符。
14.Canvas
另见
15.SVG
什么是SVG?
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准
SVG 的优势
与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:
- SVG 图像可通过文本编辑器来创建和修改
- SVG 图像可被搜索、索引、脚本化或压缩
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
另见
15.多媒体
音频
http://www.w3school.com.cn/html5/html_5_audio.asp
http://www.w3school.com.cn/html/html_audio.asp
视频
http://www.w3school.com.cn/html5/html_5_video.asp
16.地图定位
另见
17.HTML拖放
拖放是 HTML5 标准的组成部分:任何元素都是可拖放的
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<!DOCTYPE HTML> <html> <head> <script> 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> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html>
把元素设置为可拖放
首先:为了把一个元素设置为可拖放,请把 draggable 属性设置为 true:
<img draggable="true">
拖放的内容 - ondragstart 和 setData()
然后,规定当元素被拖动时发生的事情。
在上面的例子中,ondragstart 属性调用了一个 drag(event) 函数,规定拖动什么数据。
dataTransfer.setData() 方法设置被拖动数据的数据类型和值:
function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); }
在本例中,数据类型是 "text",而值是这个可拖动元素的 id ("drag1")。
拖到何处 - ondragover
ondragover 事件规定被拖动的数据能够被放置到何处。
默认地,数据/元素无法被放置到其他元素中。为了实现拖放,我们必须阻止元素的这种默认的处理方式。
这个任务由 ondragover 事件的 event.preventDefault() 方法完成:
event.preventDefault()
进行放置 - ondrop
当放开被拖数据时,会发生 drop 事件。
在上面的例子中,ondrop 属性调用了一个函数,drop(event):
function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); }
代码解释:
- 调用 preventDefault() 来阻止数据的浏览器默认处理方式(drop 事件的默认行为是以链接形式打开)
- 通过 dataTransfer.getData() 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据
- 被拖数据是被拖元素的 id ("drag1")
- 把被拖元素追加到放置元素中
18.HTML本地存储
通过本地存储(Local Storage),web 应用程序能够在用户浏览器中对数据进行本地的存储。
在 HTML5 之前,应用程序数据只能存储在 cookie 中,包括每个服务器请求。本地存储则更安全,并且可在不影响网站性能的前提下将大量数据存储于本地。
与 cookie 不同,存储限制要大得多(至少5MB),并且信息不会被传输到服务器。
本地存储经由起源地(origin)(经由域和协议)。所有页面,从起源地,能够存储和访问相同的数据。
HTML 本地存储对象
HTML 本地存储提供了两个在客户端存储数据的对象:
- window.localStorage - 存储没有截止日期的数据
- window.sessionStorage - 针对一个 session 来存储数据(当关闭浏览器标签页时数据会丢失)
在使用本地存储时,请检测 localStorage 和 sessionStorage 的浏览器支持:
if (typeof(Storage) !== "undefined") {
// 针对 localStorage/sessionStorage 的代码
} else {
// 抱歉!不支持 Web Storage ..
}
localStorage 对象
localStorage 对象存储的是没有截止日期的数据。当浏览器被关闭时数据不会被删除,在下一天、周或年中,都是可用的。
实例
// 存储
localStorage.setItem("lastname", "Gates");
// 取回
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
实例解释:
- 创建 localStorage 名称/值对,其中:name="lastname",value="Gates"
- 取回 "lastname" 的值,并把它插到 id="result" 的元素中
上例也可这样写:
// 存储
localStorage.lastname = "Gates";
// 取回
document.getElementById("result").innerHTML = localStorage.lastname;
删除 "lastname" localStorage 项目的语法如下:
localStorage.removeItem("lastname");
注释:名称/值对始终存储为字符串。如果需要请记得把它们转换为其他格式!
下面的例子对用户点击按钮的次数进行计数。在代码中,值字符串被转换为数值,依次对计数进行递增:
实例
if (localStorage.clickcount) { localStorage.clickcount = Number(localStorage.clickcount) + 1; } else { localStorage.clickcount = 1; } document.getElementById("result").innerHTML = "您已经点击这个按钮 " + localStorage.clickcount + " 次。";
sessionStorage 对象
sessionStorage 对象等同 localStorage 对象,不同之处在于只对一个 session 存储数据。如果用户关闭具体的浏览器标签页,数据也会被删除。
下例在当前 session 中对用户点击按钮进行计数:
实例
if (sessionStorage.clickcount) { sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1; } else { sessionStorage.clickcount = 1; } document.getElementById("result").innerHTML = "在本 session 中,您已经点击这个按钮 " + sessionStorage.clickcount + " 次。";