html5基础标签整理

html5基础标签整理

• 什么是 HTML5？

---

HTML5 是最新的 HTML 标准。
HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

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

• HTML5 中的新内容？

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

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

• HTML5 - 新的属性语法

> HTML5 标准允许 4 中不同的属性语法。 在 HTML5 标准中，根据对属性的需求，可能会用到所有 4 种语法。 单引用，双引用，不引用,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
存储数据。如果用户关闭具体的浏览器标签页，数据也会被删除。