HTML5 新增标签

来源：互联网发布：实对称矩阵是正交矩阵编辑：程序博客网时间：2024/06/10 18:21

HTML5：语义化标签：

标签

描述

定义页面主体上的头部，header标签往往在一对body标签之中

定义页面的底部（页脚）

定义用于表达书的一部分或一章，或者一章内的一节

<nav>

用于菜单导航、链接导航的标签，是navigator的缩写。

用于表示一篇文章的主体内容，一般为文字集中显示的区域

<aside>

用以表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。从一个简单页面显示上，就是边栏，可以在左边，也可以在右边。从一个页面的局部看，就是摘要

给标题分组，为标题或者子标题进行分组，通常与h1-h6元素组合使用

标签规定独立的流内容（图像、图表、照片、代码等等）。

figcaption 元素写在 figure 内为其添加标题

为媒介元素（比如 video 和 audio）指定多个播放格式与编码，浏览器会自动选择第一个可以识别的格式。非闭合标签，只有开始标签，没有结束标签。

定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

请使用 input 元素的 list 属性来绑定 datalist。

定义嵌入的内容，比如插件。<embed src="helloworld.swf" />

<time >

定义日期或时间，或者两者。

①标签定义文档或文章的作者/拥有者的联系信息。

②如果 <address> 元素位于 <body> 元素内，则它表示文档联系信息。

③如果 <address> 元素位于 <article> 元素内，则它表示文章的联系信息。

④<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行

注意：标签不应该用于描述通讯地址，除非它是联系信息的一部分。元素通常连同其他信息被包含在 <footer> 元素中。

<map>

定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

注意：<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。

<area>

永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

圆形：shape="circ"，coords="x,y,z"

多边形：shape="poly"，coords="x1,y1,x2,y2,x3,y3,..."

矩形：shape="rect"，coords="x1,y1,x2,y2"

<mark>

定义页面中需要突出显示或高亮显示的内容

标签定义元素的细节，目前只有 Chrome 和 Safari 6 支持 <details> 标签。与 <summary> 标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。

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

<video>标签的属性：

属性

值

描述

autoplay

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

controls

如果出现该属性，则向用户显示控件，比如播放按钮。

height

pixels

设置视频播放器的高度。

loop

如果出现该属性，则当媒介文件完成播放后再次开始播放。

preload

如果出现该属性，则视频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

src

url

要播放的视频的 URL。

width

pixels

设置视频播放器的宽度。

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

<audio>标签的属性：

属性

值

描述

autoplay

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

controls

如果出现该属性，则向用户显示控件，比如播放按钮。

loop

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

preload

如果出现该属性，则音频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

src

url

要播放的音频的 URL。

<canvas>画布标签：定义图形，比如图标和其他图像

属性

描述

fillStyle

设置或返回用于填充绘画的颜色、渐变或模式

strokeStyle

设置或返回用于笔触的颜色、渐变或模式

矩形

方法

描述

rect()

创建矩形

fillRect()

绘制“被填充”的矩形

strokeRect()

绘制矩形（无填充）

clearRect()

在给定的矩形内清除指定的像素

路径

方法

描述

fill()

填充当前绘图（路径）

stroke()

绘制已定义的路径

beginPath()

起始一条路径，或重置当前路径

moveTo()

把路径移动到画布中的指定点，不创建线条

closePath()

创建从当前点回到起始点的路径

lineTo()

添加一个新点，然后在画布中创建从该点到最后指定点的线条

转换

方法

描述

rotate()

旋转当前绘图

translate()

重新映射画布上的 (0,0) 位置

方法

描述

fillText()

在画布上绘制“被填充的”文本

strokeText()

在画布上绘制文本（无填充）

图像绘制

方法

描述

drawImage()

向画布上绘制图像、画布或视频

像素操作

属性

描述

width

返回 ImageData 对象的宽度

height

返回 ImageData 对象的高度

其他

方法

描述

save()

保存当前环境的状态

restore()

返回之前保存过的路径状态和属性

以上是我总结的HTML5常用新增标签和一些标签的属性，如果有问题希望小伙伴们不吝赐教！

问题：许多标签没有自己独特的功能，表现就像div,那么语义化的好处是什么？

1. 有些标签是带有自己的样式和功能的，比如datalist 、detail 标签，这种类型的标签就像一个小组件，这不就是angular等前端的框架扩展html实现的东西吗? HTML会成长成什么样子，who knows？

2. 试想，如果我们没有加载到外部的css文件，我们的页面没有披上css华丽的外衣，变成了皇帝的新装，还好这些语义化的标签，让我们的页面不至于一丝不挂，远看像裸奔，近看，吊带、小裤裤、和袜子结构完整，似乎还能体现出你的衣品

3. 有利于SEO（serch engine optimization）HTML优化是网站内部优化的重点，<h1>-<h6> <title> <img> 等标签都可以告诉爬虫信息和重点，可以更好的和搜索引擎沟通，一个结构完整标签使用恰当的html 文档就像一篇好文章，一看就知道你的主题、中心思想、内容深度和广度，文笔构思

4.语义化标签对我们这样的程序猿也是人性化的，增加代码的可读性，方便了我们开发和维护页面，有了统一的标准，减少差异化，有利于团队合作

阅读全文

1 0