HTML5

required 属性适用于以下输入类型：text、search、url、tel、email、password、number、checkbox、radio、file 以及 date pickers（日期选择器，包括date、month、week、time、datetime、datetime-local）。

autofocus 属性

autofocus 属性是布尔属性。

如果设置，则规定当页面加载时 <inpuut> 元素应该自动获得焦点。

Internet Explorer 9 以及更早的版本不支持 input 标签的 autofocus 属性。

multiple 属性

multiple 属性是布尔属性。

如果设置，则规定允许用户在 <input> 元素中输入一个以上的值。

multiple 属性适用于以下输入类型：file 和 email。

音频audio、视频video

<audio> 播放音频 —— 支持 .mp3、.wav、.ogg 格式音频文件
<video> 播放视频 —— 支持 .mp4、.webm、.ogg 格式视频文件

属性

实例：

<video src="1.ogg" controls="controls">
您的浏览器不支持Video标签
</video>

音频/视频格式兼容性解决方案

audio/video 组合 source 元素。
可以链接不同的音视频文件，也可以为同一个媒体数据指定多个播放格式。
浏览器将使用第一个可识别的格式。

实例：

<video width="320px" height="240px" controls="controls">
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.mp4" type="video/mp4">
    您的浏览器不支持video
</video>

JavaScript API

常用控制函数：

只读的媒体属性：

可脚本控制的属性值：

新 API

HTML5 Web 存储

HTML5 Web 存储，一个比 cookie 更好的本地存储方式。

什么是 HTML5 Web 存储？

使用 HTML5 可以在本地存储用户的浏览数据。
在 HTML5 之前，本地存储使用的是 cookie。
Web 存储更加安全，并且可以在不影响网站性能的前提下将大量数据存储于本地。
与 cookie 不同，存储限制要大得多（5MB左右），并且信息不会被传输到服务器。
数据以键/值对的形式存在，web 网页的数据只允许该网页访问使用。

localStorage 和 sessionStorage

客户端存储数据的两个对象为：

localStorage —— 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage —— 用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页之后将会删除这些数据。

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

if(typeof(Storage)!=="undefined"){
    // 针对 localstorage/sessionStorage 的代码
}else{
    // 抱歉！不支持 Web Storage ...
}

localStorage 对象

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

localStorage.setItem(key,value) —— 存储数据
localStorage.getItem(key) —— 读取数据
localStorage.removeItem(key) —— 删除单个数据
localStorage.clear() —— 删除所有数据
localStorage.key(index) —— 得到某个索引的 key

注：

键/值对始终存储为字符串。如果需要请记得把它们转换为其他格式。

例：

// 存储数据
localStorage.setItem("firstname","li");
// 读取数据
localStorage.getItem("firstname");

// 上例也可这样写：
// 存储
localStorage.firstname = "li";
// 读取
localStorage.firstname;

sessionStorage 对象

sessionStorage 对象针对一个 session （会话）进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

sessionStorage.setItem(key,value)
sessionStorage.getItem(key)
sessionStorage.removeItem(key)
sessionStorage.clear()
sessionStorage.key(index)

Web 存储 vs Cookie

Web 存储和 Cookie 区别在于：

存储大小。Web 存储大小 5M 左右，然而 Cookie 的存储大小更小并且和浏览器本身有关（4K左右）。
Cookie 存储的内容会保留在 HTTP 请求的 Header 中，并且会随每次请求发送到浏览器；然而 Web 存储只会保留在客户端，浏览器请求过程不会发送到服务端。

起啥名呢？？？

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5

HTML5是最新的HTML标准。HTML5是专门为承载丰富的web内容而设计的，并且无需额外插件。HTML5拥有新的语义、图形以及多媒体元素。HTML5提供的新元素和新的API简化了web应用程序的搭建。HTML5是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。使用HTML5可以在本地存储用户的浏览数据。在 HTML5 之前，本地存储使用的是 cookie。Web 存储更加安全，并且可以在不影响网站性能的前提下将大量数据存储于本地。
复制链接

扫一扫