HTML5

最新推荐文章于 2024-08-28 08:57:02 发布

亐㔓832

最新推荐文章于 2024-08-28 08:57:02 发布

阅读量129

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_55685975/article/details/115572496

版权

什么是HMTL5

HTML5是最新的HTML标准。

HTML5是专门为承载丰富的web内容而设计的，并且无需额外插件。

HTML5拥有新的语义、图形以及多媒体元素。

HTML5提供的新元素和新的API简化了web应用程序的搭建。

HTML5是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

HTML5新特性

HTML5的一些最有趣的新特性：

新的语义元素，比如<header>,<footer>,<article>,and<section>

新的表单空间，比如数字、日期、时间、日历和滑块。

强大的图像支持（借由<canvas>和<svg>）

强大的多媒体支持（借由<video>和<audio>）

强大的新API，比如用本地存储取代cookie。

HTML5被删元素

以下 HTML 4.01 元素已从 HTML5 中删除：

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

HTML5兼容浏览器

所有现代浏览器都支持HTML5。

此外，所有浏览器，不论新旧，都会自动把未识别元素当做行内元素来处理。

正因如此，可以帮助老式浏览器处理"未知的"HTML元素。

注释：甚至可以教授石器时代的IE6如何处理未知的HTML元素。

把HTML5元素定义为块级元素

HTML5定义了八个新的语义HTML元素。所有都是块级元素。

可以把CSS display属性设置为block，以确保老式浏览器中正确的行为

header, section, footer, aside, nav, main, article, figure {
      display: block; 
}

此外还可以通过浏览器trick向HTML添加任何新元素

向HTLM 添加了一个名为<myHero>的新元素，并为其定义display:block

Internet Explorer的问题

上述方案可用于所有新的HTML元素，但是：

注意：Internet Explorer 8 以及更早的版本，不允许对未知元素添加样式。

幸运的是，Sjoerd Visscher创建了 “HTML5 Enabling JavaScript”, “the shiv”：

<!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->

以上代码是一段注释，但是IE 9 的早期版本会读取它（并理解它）。

引用shiv代码的链接必须位于<head>元素中，因为Internet Explorer需要在读取之前认识所有的新元素。

HTML5新元素

HTML5提供的新元素可以构建更好的文档结构：

<article>	    定义页面独立的内容区域。
<aside>	        定义页面的侧边栏内容。
<bdi>	        允许您设置一段文本，使其脱离其父元素的文本方向设置。
<details>   	用于描述文档或文档某个部分的细节
<dialog>	    定义对话框，比如提示框
<summary>	    标签包含 details 元素的标题
<figure>	    规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>	定义 <figure> 元素的标题
<footer>	    定义 section 或 document 的页脚。
<header>	    定义了文档的头部区域
<mark>          定义带有记号的文本。
<meter>         定义度量衡。仅用于已知最大和最小值的度量。
<nav>	        定义导航链接的部分。
<progress>      定义任何类型的任务的进度。
<ruby>	        定义 ruby 注释（中文注音或字符）。
<rt>            定义字符（中文注音或字符）的解释或发音。
<rp>            在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section>       定义文档中的节（section、区段）。
<time>      	定义日期或时间。
<wbr>	        规定在文本中的何处适合添加换行符。

具体使用参考：https://www.runoob.com/html/html5-new-element.html

HTML5新的表单元素

<datalist>定义输入空间的预定义选项。

<datalist>元素为<input>元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

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

<form action="#">
     <input list="browsers" name="browser">
     <datalist id="browsers">
         <option value="Internet Explorer">
         <option value="Firefox">
         <option value="Chrome">
         <option value="Opera">
         <option value="Safari">
     </datalist>
     <input type="submit">
</form>

HTML5媒体元素

<audio>    定义音频内容
<video>    定义视频（video或者movie）
<source>   定义多媒体资源<video>和<audio>
<embed>    定义嵌入的内容，比如插件。

HTML5 Web存储

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

什么是HTML5 Web存储？

使用HTML5可以在本地存储用户的浏览数据。

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

数据以键/值对存在，web网页的数据只允许该网页访问使用。

Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。

注意: Internet Explorer 7 及更早IE版本不支持web 存储.

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

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

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

// 在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:
typeof (Storage) !== "undefined"

localStorage

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

if (typeof (Storage) !== "undefined") {
    localStorage.name = "张三";
    document.getElementById("result").innerHTML = "昵称：" + localStorage.name;
}
else {
    document.getElementById("result").innerHTML = "对不起，您的浏览器不支持 web 存储。";
}

使用 key=“name” 和 value=“菜鸟教程” 创建一个 localStorage 键/值对。

检索键值为"name" 的值然后将数据插入 id="result"的元素中。

// 移除 localStorage 中的 "name" :
localStorage.removeItem("sitename");

localStorage

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

保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

得到某个索引的key：localStorage.key(index);

sessionStorage

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

function clickCounter() {
    if (typeof (Storage) !== "undefined") {
        if (sessionStorage.clickcount) {
            sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
        } else {
            sessionStorage.clickcount = 1;
        }
        document.getElementById("result").innerHTML = "在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";
    }
    else {
        document.getElementById("result").innerHTML = "抱歉，您的浏览器不支持 web 存储";
    }
}

<p><button onclick="clickCounter()" type="button">点我！</button></p>
<div id="result"></div>

localStorage和sessionStorage区别

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。

sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。

亐㔓832

关注

0
点赞
踩
0

收藏

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

什么是HMTL5HTML5是最新的HTML标准。HTML5是专门为承载丰富的web内容而设计的，并且无需额外插件。HTML5拥有新的语义、图形以及多媒体元素。HTML5提供的新元素和新的API简化了web应用程序的搭建。HTML5是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。HTML5新特性HTML5的一些最有趣的新特性：     新的语义元素，比如<header>,<footer>,
复制链接

扫一扫