html5回顾

最新推荐文章于 2022-04-11 10:54:04 发布

执念_一生

最新推荐文章于 2022-04-11 10:54:04 发布

阅读量319

点赞数

分类专栏：前端 html回顾

本文链接：https://blog.csdn.net/qq_41620160/article/details/82224096

版权

前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

html回顾

5 篇文章 0 订阅

订阅专栏

HTML5 新特性

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

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

内容类型列表

HTML5 中引入了很多的标记元素，根据内容类型的不同，这些元素被分成了7大类：

内联（Embedded）
流（Flow）
标题（Heading)
交互（Interactive）
元数据（Metadata）
短语（Phrasing）
区段（Sectioning)

内容类型

元数据（Metadata）：通常出现在页面的head中，设置页面其他部分的表现和行为。

元素：<base>，<link>，<meta>，<noscript>，<script>，<style>，<title>。

内联（Embedded）：在文档中添加其他类型的内容。

元素：<audio>，<video>，<canvas>，<iframe>，<img>，<math>，<object>，<svg>。

交互（Interactive）：与用户交互的内容。

元素：<a> , <audio> , <video> , <button> , <details> , <embed> , <iframe> , <img> , <input> , <label> , <object> , <select> , <textarea>。

标题（Heading）：定义段落标题。

元素：<h1>，<h2>，<h3>，<h4>，<h5>，<h6>，<hgroup>。

短语（Phrasing）：文本和文本标记元素。

元素：<img>，<span>，<strong>，<label>，<br />，<small>，<sub>等。

内容类型

流（Flow）内容：包含在文档正常流中的大多数HTML5元素。

区段（sectioning）内容：定义标题，内容，导航和页脚的范围。

元素：<article>，<aside>，<nav>，<section>

各种内容类型在某些区域重叠，具体取决于它们的使用方式。

HTML5 中的页面结构

通用的 HTML5 页面结构如下图所示：

html5-layout

在 HTML5 中，我们使用简单的 <header> 标签。

<header> 标签定义了文档的头部区域。

<header> 元素适合在 <body> 标签内部使用。

<footer> 标签

在 HTML5 中，<footer> 标签定义文档或者文档的一部分区域的页脚。

文档的页脚：

<footer>
  <p>Posted by: Xiao Lu</p>
</footer>

在典型情况下，<footer> 元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。

<nav> 标签

在 HTML5 中，<nav> 标签定义导航链接的部分。

并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav> 元素只是作为标注一个导航链接的区域。

一个导航链接实例：

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

运行显示结果如下图：

<article> 标签

在 HTML5 中，<article> 标签定义独立的内容。

<article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。

<article> 的潜在来源：

论坛帖子
博客文章
新闻故事
评论

实例

<article> 
   <h1>文章标题</h1> 
   <p>文章元素的内容</p>
</article>

<section> 标签

在 HTML5 中，<section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。

实例

文档的某个区域，解释了什么是 W3C ：

<section>
  <h1>W3C</h1>
  <p>World Wide Web Consortium (W3C) 是万维网联盟...</p>
</section>

<aside> 标签

在 HTML5 中，<aside> 标签定义 <article> 标签外的内容。

aside 的内容应该与附近的内容相关。

实例

<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

提示：<aside> 的内容可用作文章的侧栏。

<audio> 元素

<audio> 标签定义声音，比如音乐或其他音频流。

目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。

如需在 HTML5 中播放音频，你需要使用以下代码：

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

control 属性供添加播放、暂停和音量控件。

<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。

<audio> 元素

<audio> 元素在浏览器中创建一个音频播放器：

<audio controls>
   <source src="audio.mp3" type="audio/mpeg">
   <source src="audio.ogg" type="audio/ogg">
您的浏览器不支持 audio 元素。
</audio>

运行显示结果如下图：

提示：可以在 <audio> 和 </audio> 之间放置文本内容，这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。

<audio> 的属性

<audio> 元素中的常见的属性：

src 属性

规定音频文件的 URL。

controls 属性

如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。

autoplay 属性

如果出现该属性，则音频在就绪后马上播放。

loop 属性

如果出现该属性，则每当音频结束时重新开始播放。

<video> 元素

<video> 标签定义视频，比如电影片段或其他视频流。

目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。

如需在 HTML5 中显示视频，你需要使用以下代码：

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

<video> 元素与 <audio> 元素一样，支持多个 <source> 元素，<source> 元素可以链接不同的视频文件，浏览器将使用第一个可识别的格式。<video> 元素也可以在 <video> 标签之间放置文本内容，这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。

<video> 的属性

<video> 元素提供了播放、暂停和音量控件来控制视频，同时<video> 元素元素也提供了 width 和 height 属性控制视频的尺寸。

<video> 元素和 <audio> 元素一样，都有 controls，autoplay 和 loop 属性。

在此例子中，视频播放结束后会重新开始播放：

<video controls autoplay loop>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>

<progress> 标签

<progress> 标签定义运行中的任务进度（进程）。

<progress> 属性

max：规定需要完成的值。

value：规定进程的当前值。

实例

正在进行中的下载：

下载进度：
<progress value="30" max="100">
</progress>

运行显示结果如下图：

HTML5 Web 存储

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

在 HTML5 之前，本地存储使用的是 cookie。

Web 存储的优势

更加安全
更加快速
可以存储大量的数据
每个服务器请求都不会发送存储的数据

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

Web 存储对象的类型

Web 存储对象有两种类型：

localStorage
sessionStorage

localStorage 与 sessionStorage 的区别

localStorage 对象存储的数据没有时间限制。

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

Web 存储使用的 API

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

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

提示: 键/值对通常以字符串存储，你可以按自己的需要转换该格式。

执念_一生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5回顾

HTML5 新特性HTML5 中的一些有趣的新特性：用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支持新的特殊内容元素，比如 article、footer、header、nav、section 新的表单控件，比如 calendar、date、time、email、url、search内容类型列表HTML5 中引入了很...
复制链接

扫一扫

专栏目录