HTML5的新标签

最新推荐文章于 2022-09-28 19:30:16 发布

Dear_Mr

最新推荐文章于 2022-09-28 19:30:16 发布

阅读量731

点赞数

分类专栏： html 文章标签： html5 多媒体存储缓存标签

本文链接：https://blog.csdn.net/dear_mr/article/details/76163918

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

新特性

语义特性

HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web

本地存储特性

HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

设备兼容特性

HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联

连接特性

有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能

网页多媒体特性

存在audio（音频）、video（视频）的多媒体功能

三维、图形及特效特性

基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果

性能与集成特性

提供了应用程序缓存，意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问

应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

利用manifest属性：

<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>

</body>
</html>

Manifest 文件：

manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

HTML5提供的新标签

header：页眉（网页（部分区域）的头部顶部导航区域等等），闭合标签；块元素；默认的宽是：100%；高：内容的高度；实质上，跟DIV标签，可以说是完全一样的特性；

nav 导航链接部分；闭合标签；块元素；默认的宽是：100%；高：内容的高度；实质上，跟 DIV标签，可以说是完全一样的特性。

section 标签定义网页中的区域（部分）。比如章节、页眉、页脚或文档中的其他部分。闭合标签；块元素；默认的宽是：100%；高：内容的高度；实质上，跟DIV标签，可以说是完全一样的特性；

footer 页脚（网页（部分区域）的底部|版权区域等等），闭合标签；块元素；默认的宽是：100%；高：内容的高度；实质上，跟DIV标签，可以说是完全一样的特性；

article 内容是引用其他地方的。一个区域中的，另外一部分内容；闭合标签；块元素；默认的宽是：100%；高：内容的高度；实质上，跟DIV标签，可以说是完全一样的特性

aside 跟 article 是一起使用；是辅助 article 区域的内容。也可以理解为整个网页的辅助区域；（最常见的京东的右侧的工具栏）

hgroup 给标题分组，为标题或者子标题进行分组，通常与h1-h6元素组合使用。如果文章中只有一个标题，则不使用hgroup。 闭合标签；块元素；默认的宽是：100%；高：内容的高度；实质上，跟DIV标签，可以说是完全一样的特性；

figure 对多个元素进行组合。通常与figcaption联合使用。闭合标签；块元素；默认的宽是：100%；高：内容的高度；实质上跟DIV标签，可以说是完全一样的特性；figcaption 定义figure元素组的标题，必须写在figure元素中。一个figure元素内最多只允许放置一个figcaption元素。闭合标签；块元素；默认的宽是：100%；高：内容的高度；实质上，跟DIV标签，可以说是完全一样的特性；

audio 播放声音文件，比如音乐或其它音频流。可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。闭合标签；行内元素；默认的宽:controls的宽度300px；高:controls的高度32px；autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。src url 要播放的音频的 URL。

video 播放视频文件，比如电影或其它视频流。可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。闭合标签；行内元素；默认的宽：300px 高：150px。autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。height 设置视频播放器的高度。loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。src 要播放的视频的 URL。width 设置视频播放器的宽度。

source为媒介元素（比如 video 和 audio）指定多个播放格式与编码，浏览器会自动选择第一个可以识别的格式。非闭合标签，只有开始标签，没有结束标签。source 行内元素，默认无宽度和高度。media 定义媒介资源的类型，供浏览器决定是否下载。src 媒介的 URL。type 定义播放器在音频流中的什么位置开始播放。默认，音频从开头播放。

canvas定义图形，比如图表和其他图像。闭合标签；行内元素；默认情况下，canvas创建的画布宽：300px;高：150px;

datalist 定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。
闭合标签；行内元素；默认无宽度和高度。

embed 定义嵌入的内容，比如插件。用来插入各种多媒体，格式可以是MIDI、MP3等。非闭合标签，只有开始标签，没有结束标签。行内元素；默认的宽：300px；高：150px。

time 定义日期或时间，或者两者。闭合标签；行内元素，默认情况下，宽：内容的宽度；高：内容的高度；

address 为文档或 section 定义联系信息，比如：电子邮箱、地址、电话、QQ、微信号等。
闭合标签；块元素；默认的宽是：100%；高：内容的高度；实质上，跟DIV标签，可以说是完全一样的特性；

map定义客户端的图像映射。图像映射是带有可点击区域的图像。闭合标签；行内元素；默认情况下，无宽度和高度；

area area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。闭合标签，行内元素；只有结束标签，没有开始标签。默认情况下，无宽度和高度；

mark定义页面中需要突出显示或高亮显示的内容，通常在引用原文时，使用此元素，目的就是引起当前用户的注意。闭合标签；行内元素；默认情况下，宽：内容的宽度；高：内容的高度；

details 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。(备注信息)，块元素；默认的宽是：100%；高：内容的高度；实质上，跟DIV标签，可以说是完全一样的特性；但是有一个动态的效果，点击可以显示(展开)内容，再点击可以隐藏(收起)内容；

在实际应用中，不是每一个标签都很常用，需要区别对待

Dear_Mr

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5的新标签

新特性语义特性HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web本地存储特性HTML5 提供了两种在客户端存储数据的新方法：localStorage - 没有时间限制的数据存储sessionStorage - 针对一个 session 的数据存储设备兼容特性HTML5提供了前所未有的数据与应用接入开放
复制链接

扫一扫