html5新的结构元素不包括的有哪些 html5新增的结构元素有哪些 |
您所在的位置:网站首页 › html5结构元素不包括 › 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/4200 out of 800max: 100; current: 25173mm 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]Page titlePage subtitleNavigation...TitleContent... Title Content...Top links... Chart 1.1 Copyright ©2010. |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |