html5基础标签整理

• 什么是 HTML5？

HTML5 是最新的 HTML 标准。

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

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

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

注释：在下面的章节中，您将学到如何“帮助”老版本的浏览器处理 HTML5。

• HTML5 中的新内容？

HTML5 的新的文档类型（DOCTYPE）声明非常简单

注释：HTML5 中默认的字符编码是 UTF-8。

• HTML5 - 新的属性语法

> HTML5 标准允许  中不同的属性语法。 在 HTML5 标准中，根据对属性的需求，可能会用到所有  种语法。 单引用，双引用，不引用,Empty
<input type="text" value="John Doe" disabled>
Unquoted
<input type="text" value=John>
Double-quoted
<input type="text" value="John Doe">
Single-quoted
<input type="text" value='John Doe'>
           

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

新的语义元素，比如

<header>, <footer>, <article>，<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 浏览器支持,所有现代浏览器都支持 HTML5。 此外，所有浏览器，不论新旧，都会自动把未识别元素当做行内元素来处理。

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

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

• 把 HTML5 元素定义为块级元素

HTML5 定义了八个新的语义 HTML 元素。所有都是块级元素。 您可以把 CSS display 属性设置为

block，以确保老式浏览器中正确的行为 向 HTML 加新元素,可以通过浏览器 trick 向 HTML 添加任何新元素 本例向 HTML

添加了一个名为

<myHero>

的新元素，并为其定义 display 样式 Internet Explorer 的问题

上述方案可用于所有新的 HTML5 元素，但是： 注意：Internet Explorer 8 以及更早的版本，不允许对未知元素添加样式。

• HTML5 中的新元素

  新的语义/结构元素

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

  标签

  描述

  <article>

  定义文档内的文章。

  <aside>

  定义页面内容之外的内容。

  <bdi>

  定义与其他文本不同的文本方向。

  <details>

  定义用户可查看或隐藏的额外细节。

  <dialog>

  定义对话框或窗口。

  <figcaption>

  定义

  <figure>

  元素的标题。

  <figure>

  定义自包含内容，比如图示、图表、照片、代码清单等等。

  <footer>

  定义文档或节的页脚。

  <header>

  定义文档或节的页眉。

  <main>

  定义文档的主内容。

  <mark>

  定义重要或强调的内容。

  <menuitem>

  定义用户能够从弹出菜单调用的命令/菜单项目。

  <meter>

  定义已知范围（尺度）内的标量测量。

  <nav>

  定义文档内的导航链接。

  <progress>

  定义任务进度。

  <rp>

  定义在不支持 ruby 注释的浏览器中显示什么。

  <rt>

  定义关于字符的解释/发音（用于东亚字体）。

  <ruby>

  定义 ruby 注释（用于东亚字体）。

  <section>

  定义文档中的节。

  <summary>

  定义 元素的可见标题。

  <time>

  定义日期/时间。

  <wbr>

  定义可能的折行（line-break）。

新的表单元素

<datalist>

定义输入控件的预定义选项。

<keygen>

定义键对生成器字段（用于表单）。

<output>

定义计算结果。

• HTML5 图像

`<canvas>`定义使用 JavaScript 的图像绘制。
`<svg>`定义使用 SVG 的图像绘制。
           

Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。

• SVG

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

• Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。

Canvas 是逐像素进行渲染的。

在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

• 新的媒介元素

标签描述

<audio>

定义声音或音乐内容。

<embed>

定义外部应用程序的容器（比如插件）。

<source>

定义

<video> 和 <audio>

的来源。

<track>

定义

<video>

和

<audio>

的轨道。

<video>

定义视频或影片内容。

• html5地理定位

HTML5 Geolocation（地理定位）用于定位用户的位置。

• 定位用户的位置

HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

• HTML5 - 使用地理定位

请使用 getCurrentPosition() 方法来获得用户的位置。 getCurrentPosition() 方法 - 返回数据

若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy

属性。如果可用，则会返回其他的属性。

• Geolocation 对象 - 其他有趣的方法

watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。 clearWatch()

- 停止 watchPosition() 方法

• 拖放

1、拖放（Drag 和 Drop）是很常见的特性。它指的是您抓取某物并拖入不同的位置。

2、拖放是 HTML5 标准的组成部分：任何元素都是可拖放的。 把元素设置为可拖放

3、首先：为了把一个元素设置为可拖放，请把 draggable 属性设置为true

4、拖放的内容 - ondragstart 和 setData()然后，规定当元素被拖动时发生的事情。

• 拖到何处 - ondragover

1、ondragover 事件规定被拖动的数据能够被放置到何处。

默认地，数据/元素无法被放置到其他元素中。为了实现拖放，我们必须阻止元素的这种默认的处理方式。 2、进行放置 - ondrop

当放开被拖数据时，会发生 drop 事件。

• 代码解释：

调用 preventDefault() 来阻止数据的浏览器默认处理方式（drop 事件的默认行为是以链接形式打开） 通过

dataTransfer.getData() 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据

被拖数据是被拖元素的 id (“drag1”) 把被拖元素追加到放置元素中

• 什么是 HTML 本地存储？

通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。 在 HTML5

之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。

与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。

本地存储经由起源地（origin）（经由域和协议）。所有页面，从起源地，能够存储和访问相同的数据。

• HTML 本地存储对象

HTML 本地存储提供了两个在客户端存储数据的对象： window.localStorage - 存储没有截止日期的数据

window.sessionStorage - 针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）

在使用本地存储时，请检测 localStorage 和 sessionStorage 的浏览器支持

• localStorage 对象

localStorage 对象存储的是没有截止日期的数据。当浏览器被关闭时数据不会被删除，在下一天、周或年中，都是可用的。

• sessionStorage 对象

sessionStorage 对象等同 localStorage 对象，不同之处在于只对一个 session

存储数据。如果用户关闭具体的浏览器标签页，数据也会被删除。