html5新的结构元素不包括的有哪些 html5新增的结构元素有哪些

转载

mob6454cc79cd11 2023-10-21 07:20:34

文章标签 html5新的结构元素不包括的有哪些 html页面主详新增 html HTML HTML5 文章分类 HTML5 移动开发

一、HTML5新增结构元素

之前，我们只能用万能的div标签，并为其设置不同的id如header, footer, sidebar等来分别表达头部，底部或者侧栏等。而现在代码编写者不再需要为id的命名费尽心思，对于手机、阅读器等设备更有语义的好处。

HTML 5增加了新的结构元素来表达这些最常用的结构：

section: 这可以表达书本的一部分或一章，或者一章内的一节

header: 页面主体上的头部。并非head元素

footer: 页面的底部(页脚)，可以是一封邮件签名的所在

nav: 到其他页面的链接集合

article: 诸如blog, 杂志，纲要等之中的一条独立记录

举个例子，一个blog的首页，用HTML 5写的话，可以是这样：

[syntaxHighLighter brush="html"]
HTML5 新增结构元素 
 
Page title
Page subtitle
Navigation...
Title
Content...
Title
Content...
Top links...
 
 
   Chart 1.1 
 
Copyright ©
2010.
[/syntaxHighLighter]

二、HTML5新增块级元素

aside: 定义页面内容之外的内容，比如侧边栏

figure: 定义媒介内容的分组，以及它们的标题

figcaption: 媒介内容的标题说明

dialog: 定义对话(会话)

aside可以用以表达注记、贴士、侧栏、摘要、插入的引用等诸如作为补充主体的内容。比如这样表达blog的侧栏：

[syntaxHighLighter brush="html"]

最新文章

文章标题

<>/pre[/syntaxHighLighter]

figure元素表示一个有说明的块级图片。比如：

[syntaxHighLighter brush="html"]

PRC

Figure 1. JavaScript Alert Box.

[/syntaxHighLighter]

dialog元素用于表达人们之间的对话。在HTML 5中，dt用于表示说话者，而dd则用来表示说话者的内容。如：

[syntaxHighLighter brush="html"]

悟空什么是幸福佛我请你穿越这片田野，去摘一朵最美丽的花，但是有个规则：你不能走回头路，而且你只能摘一次。

[/syntaxHighLighter]

三、HTML5新增行内语义标签元素

mark: 定义有记号的文本

time: 定义日期/时间

meter: 定义预定义范围内的度量

progress: 定义运行中的进度(进程)

mark元素用来标记一些不是那么需要着重强调的文本。

[syntaxHighLighter brush="html"]

今天别忘记了买牛奶。

[/syntaxHighLighter]

time元素如其名，用来表达时间。它需要一个datetime的特性来标明机器能够认识的时间，如：

[syntaxHighLighter brush="html"]
On Saturdays, we open at 09:00.
The concert is next Wednesday.
We finally hit the road at 5am last Tuesday.
[/syntaxHighLighter]

meter元素表达特定范围内的数值。可用于薪水、百分比、分数等。比如：

[syntaxHighLighter brush="html"]

您的分数是：

B+.

25%
1/4
200 out of 800
max: 100; current: 25

173mm Height: 104mm

[/syntaxHighLighter]

可以使用标签来显示 JavaScript 中耗费时间的函数的进度。

[syntaxHighLighter brush="html"]

对象的下载进度：

85%

[/syntaxHighLighter]

四、HTML5新增行交互性标签元素

details: 定义元素的细节

datagrid: 定义树列表 (tree-list) 中的数据

datalist: 定义选项列表

menu: 定义菜单列表

command: 定义命令按钮

details用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段(如点击)与legend交互才显示出来。这跟现在各种通过JavaScript隐藏一段内容，在点击后才显示出来的做法有些类似。比如：

[syntaxHighLighter brush="html"]This document was written in 2010.[/syntaxHighLighter]

datagriddatagrid用来控制数据，可以由用户或者脚本来更新，比如：

[syntaxHighLighter brush="html"]
1. (datagrid row 0)
2. (datagrid row 1) 
   
1. (datagrid row 1,0)
2. (datagrid row 1,1)
3. (datagrid row 2)
[/syntaxHighLighter]

datalist 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被想显示出来，它仅仅是合法的输入值列表。请使用 input 元素的 list 属性来绑定 datalist。

[syntaxHighLighter brush="html"]
Example 1 (for HTML 5 browsers)
Enter your favorite cartoon character:
Example 2 (for both legacy and HTML 5 browsers)
[/syntaxHighLighter]

menu 在HTML 2就存在了，不过HTML 4把它废弃了。HTML 5废物利用，并在期内加上command元素。autosubmit为true时，表单控件改变时自动提交。label为菜单定义一个可见的标注，type是表现的方式，默认为list，还有context和toolbar。

[syntaxHighLighter brush="html"]
 
 
• Red
• blue
Click Me!
[/syntaxHighLighter]

五、HTML5新增行多媒体标签元素

video: 定义视频

audio: 定义音频

source: 媒介元素(比如和 )定义媒介资源

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

[syntaxHighLighter brush="html"]
If you are reading this, it is because your browser does not support the HTML5 video element.
[/syntaxHighLighter]

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

[syntaxHighLighter brush="html"]

您的浏览器不支持 audio 标签。

[/syntaxHighLighter]
[syntaxHighLighter brush="html"]
If you are reading this, it is because your browser does not support the HTML 'audio' element.
[/syntaxHighLighter]