14 HTML5

5/28/2021 html

# HTML5新特性

# 1 增加了audio和video音频播放,抛弃了Flash

视频已经在 Web 上广泛流行了,但是其格式几乎都是专有的。YouTube 使用 Flash,Microsoft 使用 Windows Media,Apple 使用 QuickTime。

在一种浏览器中用来嵌入这些内容的标记在另一种浏览器中是无效的。HTML5新增 <audio><video> 标签使得浏览器不需要插件即可播放视频和音频。

# 2 新增了canvas画布(绘画,制作动画(如小游戏开发等))

HTML 5 引进了很多新特性,其中最令人期待的之一就是 canvas 元素。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。 每一个 canvas 元素都有一个上下文(context) (想象成绘图板上的一页),在其中可以绘制任意图形。浏览器支持多个 canvas 上下文,并通过不同的 API 提供图形绘制功能。

# 3 地理定位

HTML5 的另一个功能是地理信息定位功能,一些浏览器提供了 geolocation API ,这个 API 也由 W3C 管理,可以结合 HTML5 实现你当前地理位置定位。Google Maps 在使用该功能,在 Google 地图上,有一个小圆圈,点击一下,就能告诉 Google 地图你现在的地理位置。目前,Geolocation API 并没有被众多桌面浏览器广泛采用(只有 Chrome 和 Firefox 3.6+ 采用了),但 Google Gears 插件可以帮助那些旧浏览器实现该功能。

Twitter借此实现地理信息感知的tweets 消息,当浏览器支持geolocation API的时候,会自动使用该 API,否则,则使用 Google Gears。

# 4 硬件加速

Web 开发人员只需使用 HTML5 标记就可以利用硬件加速的优势以及可以通过多种设备访问数据的强大云环境。 针对您的网站,使用像 SVG 这样的技术来优化包括台式机和笔记本电脑等尺寸较大的电脑,以及智能手机和平板电脑等更多便携设备上的体验。

# 5 WEB SOCKET(全双工通信)

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。

创建 WebSocket 对象:

var Socket = new WebSocket(url, [protocol] );

# 6 本地离线应用程序

HTML5中,新增了一个API,利用本地缓存机制,为离线的Web应用程序开发提供了可能。

为了能够让Web应用程序在离线状态的时候也能正常工作,必须把所有构成Web应用程序的资源文件,诸如HTML文件,CSS文件,JavaScript脚本文件放在本地缓存中,当服务器没有和网络连接时,也可以利用本地缓存中的资源文件来正常运行Web应用程序。

# 7 本地存储

相对于HTML4只能使用cookie在客户端存储数据,大小受限制,占用带宽,操作复杂的情况。 HTML5支持使用 Web Storage 在客户端进行存储数据,容量更大,减轻带宽压力,操作简便。

# 8 语义化标记

HTML5的最大的意义在于改变了 Web 文档的结构方式,借助 header, footer, section, article 这些标签,我们可以实现更具结构化,语义化的 Web 文档。这样,搜索引擎可以更容易索引 Web 站点,我们也可以搜索到更快,更准确的信息。

# HTML5网页标准结构

在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义。(即使我们用css样式的id和class形容这块内容的意义)。这些标签只是我们提供给浏览器的指令,只是定义一个网页的某些部分。但现在,那些之前没“意义”的标签因为因为HTML5的出现消失了,这就是我们平时说的“语义”。

HTML5制订的网页标准结构

结构标签

# 1. header

header标签定义一个页面或一个区域的头部。

header 元素代表“网页”或“section”的页眉。 通常包含h1-h6元素或hgroup,作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分,一个搜索框,一个nav,或者任何相关logo。

<header>头部</header>

# 2. article

article标签定义一篇文章。

article代表一个在文档,页面或者网站中自成一体的内容,其目的是为了让开发者独立开发或重用。譬如论坛的帖子,博客上的文章,一篇用户的评论,一个互动的widget小工具。

<article>
    <h1>一篇文章</h1>
    <p>文章内容..</p>
</article>

# 3. nav

nav标签定义导航链接。

nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。

<nav>
    <ul>
        <li>HTML 5</li>
        <li>CSS3</li>
        <li>jQuery</li>
    </ul>
</nav>

# 4. section

section标签定义一个区域。

section元素代表文档中的“节”或“段”,“段”可以是指一篇文章里按照主题的分段;“节”可以是指一个页面里的分组。

<section>section标签</section>

# 5. aside

aside标签定义侧边栏。

aside元素被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。

<article>
    <p>内容</p>
    <aside>
        <h1>作者简介</h1>
        <p>这里是一段作者的简介内容。</p>
    </aside>
</article>

# 6. main

<main> 标签规定文档的主要内容。

<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。

注释:在一个文档中,不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代:<aside><footer><header><nav>

<main>
    <h1>Web Browsers</h1>
    <p>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。</p>
    <article>
        <h1>Google Chrome</h1>
        <p>Google Chrome 是由 Google 开发的一款免费的开源 web 浏览器,于 2008 年发布。</p>
    </article>
    <article>
        <h1>Internet Explorer</h1>
        <p>Internet Explorer 由微软开发的一款免费的 web 浏览器,发布于 1995 年。</p>
    </article>
    <article>
        <h1>Mozilla Firefox</h1>
        <p>Firefox 是一款来自 Mozilla 的免费开源 web 浏览器,发布于 2004 年。</p>
    </article>
</main>

footer标签页脚。

footer元素代表“网页”或“section”的页脚,通常含有该节的一些基本信息,譬如:作者,相关文档链接,版权资料。如果footer元素包含了整个节,那么它们就代表附录,索引,提拔,许可协议,标签,类别等一些其他类似信息。

<footer>
    <p>页脚</p>
</footer>

# 语义化标签

# 1. mark

mark定义高亮元素。

<p>大家好,<mark>学习前端</mark>感觉真简单!</p>

# 2. details 与 summary

details(描述) 与 summary(摘要)

一般用于名词解释或用于封装一个区块等

<details>

<summary>HTML</summary>

<div>
    <h4>美景</h4>
</div>

</details>

# 3. meter

meter 定义度量衡。

meter: 显示一个计数仪表。

属性
value:当前值。
min {number}:最小值。
max {number}:最大值。
low {number}: 指定范围的最小值。
high {number}:指定范围的最大值。

<meter value="100" min="30" max= "200">100</meter>公里/小时

# 4. progress

progress定义进度条。
progress: 显示一个进度条。

属性
value:进度条完成时的最大值。
max {number}:进度的完成值。

任务已经完成了:

<progress max="100" value="65">65%</progress>

# 5. dialog

dialog定义对话框或窗口。

<dialog open>这是打开的对话窗口</dialog>

# 6. figure

figure标签用于对元素进行组合。

<figure>
    <h5> 富士山下的桃林 </h5>
    <p>桃花朵朵开,溪水潺潺流</p>
    <img src='images/flower.jpg' />
</figure>
更新时间: Friday, May 28, 2021 22:01