HTML5新增元素

HTML5 增强的iframe元素
- HTML5新增的srcdoc属性
- HTML5新增的seamless属性
- HTML5新增的sandbox属性
HTML5新增结构元素
- article与section元素
- header和footer元素
- nav与aside元素
- main元素
- hgroup 标题组合
- figure与figcaption元素
HTML5新增的语义元素
- mark元素
- time元素
- details与summary元素
- ruby、rtc、rb、rt和rp元素
- wbr元素
- menu和menuitem元素

HTML5 增强的iframe元素

HTML5 不再推荐在页面中使用框架集，但是依然保留一个与框架集相关的元素：iframe 元素，该元素可以在普通 HTML 页面中使用，用于在普通 HTML 页面中生成一个行内框架，可以直接放在 HTML 页面的任意位置，可以指定以下属性：

src： 指定一个URL，指定该 iframe 将装载哪个页面
name： 设置 iframe 的名字
longdesc： 指定一个页面的 URL ，该页面包含了 iframe 的长描述
scrolling： 设置是否在 iframe 中显式滚动条（ yes、no、auto ）
height： 设置 iframe 的高度
width： 设置 iframe 的宽度
frameborder： 设置是否显示该 iframe 的边框
marginheight： 设置该 iframne 的顶部和底部的页边距
marginwidth： 设置该 iframe 的左侧和右侧的页边距

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body><iframe src="http://www.qq.com" frameborder="2" width="400" height="400" name="baidu" scrolling="auto"></iframe>
</body>
</html>

HTML5新增的srcdoc属性

HTML5 新增的 srcdoc 属性允许直接指定 HTML 片段，这样 iframe 元素将直接显示该 srcdoc 所指定的 HTML 片段，如果浏览器暂时不支持 srcdoc 属性，那么将会继续显示 src 属性所指定的页面内容：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body><iframe src="http://www.qq.com" frameborder="2" width="400" height="400" name="baidu" scrolling="auto" srcdoc="<h1>HTML</h1>"></iframe>
</body>
</html>

HTML5新增的seamless属性

seamless 属性是一个支持 boolean 值的属性，指定了该属性的 iframe 所生成的框架看上去像是原文档的一部分，不再显示边框和滚动条（ 目前没有浏览器支持 ）。

HTML5新增的sandbox属性

sandbox 是一个安全性方面的属性，用于对框架中的网页增加一系列额外限制，该属性支持如下属性值：

""： 限制全部
allow-forms： 允许框架内的表单进行提交
allow-same-origin： 允许将框架内所加载的网页视为与使用该 iframe 元素的页面来自相同源（即使这两个网页来自不同源）
allow-scripts： 允许框架内所加载的网页执行 JavaScript 脚本
allow-top-navigation： 允许将框架内所加载网页中的超链接导航到父级窗口

对于不指定 sandbox 属性的 iframe 元素，该元素对应框架内所加载的 HTML 页面几乎不受任何限制，但如果指定了 sandbox 为 “”，这就意味着限制了 iframe 元素页面的如下功能：

禁止该页面内的插件
禁止该页面内的表单提交
该页面内超链接只能加载到该 iframe 框架内
该 iframe 框架内所加载的网页将被视为来自不同的源，对于不同源的网页（两个页面对应URL的域名不同或端口不同），该页面将会被禁止使用Ajax与服务器交互，禁止加载来自服务器的内容，同时禁止该页面从 Cookie 或 Web Storage 中读取内容

注意： sandbox 允许同时指定以上多个属性，多个属性之间以空格隔开即可。

1. allow-forms属性值

指定 allow-forms 属性值允许 iframe 框架内的网页提交表单，该属性通常需要和 allow-same-origin 属性值结合使用：sandbox="allow-forms allow-same-origin"

2. allow-scripts属性值

指定 allow-scripts 属性值允许 iframe 框架内页面中的 JavaScript 脚本运行。但是出于安全性考虑，其它浏览器（除了IE）都禁止指定了 sandbox 属性的 iframe 内页面弹出 JavaScript 对话框。

3. allow-top-navigation属性值

指定 allow-top-navigation 属性值允许 iframe 框架内网页中的超链接在该行内框架所在的父级浏览器中打开：

<!-- top.html -->
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body><iframe src="nav.html" width="200" height="120" sandbox="allow-top-navigation"</iframe>主页面内容
</body>
</html><!-- nav.html -->
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body><a href="http://www.baidu.com" alt="百度" target="_top">百度</a>
</body>
</html>

target="_top" 设置该超链接需要直接在浏览器中打开，由于 iframe 元素设置了 sandbox="allow-top-navigation"属性，因此该页面中行内框架内的超链接所链接的页面会直接装载到浏览器中。

4. allow-same-origin 属性值

设置该属性值允许将 iframe 框架内的网页视为与使用该 iframe 元素的网页来自相同的源（两个网页所在的URL的域名相同、端口相同）。出于安全性考虑，如果 iframe 所加载页面来自不同的源，那么该 iframe 内的页面将不允许使用 Ajax 与服务器交互，禁止加载来自服务器的内容，同时禁止该页面从 Cookie 或 Web Storage 中读取内容。

一旦设置了该属性值，该行内框架内所加载的页面将会被视为与包含行内框架的页面来自相同的源，框架内的页面才可以使用 Ajax 与服务器交互，加载来自服务器的内容，从 Cookie 或 Web Storage 中读取内容。

注意： 上面的功能往往都需要使用 JavaScript 脚本才能实现，因此 allow-same-origin 属性值通常与 allow-scripts 属性值结合使用。

HTML5新增结构元素

article与section元素

article： 用于代表页面上独立、完整的一篇文章，该元素的内容可以是一个帖子、一篇博客、一篇短文、一条完整的回复等
- article 元素内部可以使用 header 定义文章标题
- article 元素内部可以使用 footer 定义文章脚注部分
- article 元素内部可以使用多个 section 把文章内容分成几个段落
- article 内部可以嵌套多个 article 作为它的附属文章
section： 该元素用于对页面的内容进行分块，通常可以由标题和内容组成
- 通常建议 section 元素包含一个标题
- section 元素可以嵌套 section 元素，用于表示该分块包含多个子分块
- section 元素可以包含多个 article 元素，表示该分块内部包含多篇文章

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><h1>浏览器帖子内容</h1><article><h2>学习Android，必须先学习Java吗？</h2><p>Android上程序必须用Java写吗？可以用C++吗？</p><!-- 帖子回复部分 --><section><h2>回复内容</h2><!-- 每个article表示一个回复 --><article><!-- 回复标题 --><h3>还是得学习的</h3><div>作者：Jack</div><p>回复内容</p></article><!-- 每个article表示一个回复  --><article><!-- 回复标题 --><h3>Java是基础</h3><div>作者：Tom</div><p>回复内容</p></article></section><!-- 帖子评价部分 --><section><h2>评价内容</h2><!-- 每个article表示一个评价 --><article><h3>讨论很好</h3><p>很好</p></article></section></article>
</body>
</html>

注意： div 元素只是作为页面内容的通用容器，如果程序是为了动态修改页面某个部分的内容，则建议使用 div 元素；而 section 元素则主要作为内容的分块。

article、section 元素的主要作为是定义文档结构，以便搜索引擎、浏览器等工具解析该文档的结构。

header和footer元素

header： 该元素通常用于代表标题
footer： 该元素通常用于父级元素定义脚注部分，包括该文章的版权信息、作者授权信息等

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><!-- 网页标题 --><header><a href="#">返回首页</a><h1>浏览器帖子内容</h1></header><article><h2>学习Android，必须先学习Java吗？</h2><p>Android上程序必须用Java写吗？可以用C++吗？</p><!-- 帖子回复部分 --><section><h2>回复内容</h2><!-- 每个article表示一个回复 --><article><!-- 回复标题 --><h3>还是得学习的</h3><div>作者：Jack</div><p>回复内容</p></article><!-- 每个article表示一个回复  --><article><!-- 回复标题 --><h3>Java是基础</h3><div>作者：Tom</div><p>回复内容</p></article></section><!-- 帖子评价部分 --><section><h2>评价内容</h2><!-- 每个article表示一个评价 --><article><h3>讨论很好</h3><p>很好</p></article></section><!-- 帖子的脚注 --><footer>以上帖子和回复仅代表个人立场。</footer></article><footer><a href="#">站点信息</a><a href="#">联系我们</a></footer>
</body>
</html>

nav与aside元素

nav： 该元素专门用于定义页面上的 “导航条”
aside： 该元素专门用于定义当前页面或当前文章的附属信息，通常建议使用 CSS 将其渲染成侧边栏

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><!-- 网页标题 --><header><a href="#">返回首页</a><h1>浏览器帖子内容</h1></header><article><h2>学习Android，必须先学习Java吗？</h2><p>Android上程序必须用Java写吗？可以用C++吗？</p><!-- 帖子回复部分 --><section><h2>回复内容</h2><!-- 每个article表示一个回复 --><article><!-- 回复标题 --><h3>还是得学习的</h3><div>作者：Jack</div><p>回复内容</p></article><!-- 每个article表示一个回复  --><article><!-- 回复标题 --><h3>Java是基础</h3><div>作者：Tom</div><p>回复内容</p></article></section><!-- 帖子评价部分 --><section><h2>评价内容</h2><!-- 每个article表示一个评价 --><article><h3>讨论很好</h3><p>很好</p></article></section><!-- 帖子的脚注 --><footer>以上帖子和回复仅代表个人立场。</footer><!-- 作为文章的边栏 --><aside><section><h4>关于楼主</h4><div>用户组：</div><div>注册日期：</div></section></aside></article><footer><a href="#">站点信息</a><a href="#">联系我们</a></footer><!-- 作为HTML的边栏信息 --><aside><h3>页面导航</h3><nav><ul><li><a href="#">查看相关内容</a></li><li><a href="#">返回首页</a></li></ul></nav></aside>
</body>
</html>

main元素

一个HTML文档最多只能包含一个 main 元素，该元素用于包含网页中除导航条、Logo、版权信息等之外的主要内容。main 元素不应该放在允许重复出现的内容中：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><!-- 网页标题 --><header><h1>浏览回复内容</h1></header><main><h2>学习Android，必须先学习Java吗？</h2><p>Android上程序必须用Java写吗？可以用C++吗？</p></main>
</body>
</html>

hgroup 标题组合

用于定义标题的组合：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><!-- 网页标题 --><header><hgroup><h1>主标题</h1><h3>副标题</h3></hgroup></header><main><h2>学习Android，必须先学习Java吗？</h2><p>Android上程序必须用Java写吗？可以用C++吗？</p></main>
</body>
</html>

figure与figcaption元素

figure： 该元素用于表示一块独立的图片区域，该元素内部可以包含一个或多个 img 元素所代表的图片。还可以包含一个 figcaption 元素，用于定义该图片区域的标题
figcaption： 该元素通常放在 figure 内部，用于定义图片区域的标题

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><figure style="border: 2px solid black;padding: 5px;width: 510px;"><figcaption><b>图片标题</b></figcaption><img src="a.png" alt="" style="width: 165px;height: 230px;"><img src="a.png" alt="" style="width: 165px;height: 230px;"><img src="a.png" alt="" style="width: 165px;height: 230px;"></figure>
</body>
</html>

HTML5新增的语义元素

mark元素

mark 元素用于显示 HTML 页面中需要重点关注的内容，浏览器通常会用黄色显示 mark 标注的内容，非常适用于高亮显示全文检索时的关键字：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><mark>HTML 5</mark> 是下一代HTML规范。
</body>
</html>

time元素

time 用来显示被标注内容是日期、时间或日期时间。可以指定下面两个主要的属性：

datetime： 主要用于向机器提供时间，datetime 属性的属性值应该是符合 yyyy-MM-ddTHH:mm 格式的日期时间。也可以只指定日期或者时间
pubdate： 是一个支持 boolean 值的属性，用于表明是否为发布日期

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body>旅游计划时间<time datetime="2020-12-12">2020年12月12日</time>
</body>
</html>

details与summary元素

details 元素用于显示一段详细信息或某个主题的细节，通常和 summary 元素结合使用，当把 summary 放在 details 元素内部的时候， summary 元素用于为 details 定义摘要信息，摘要信息默认是可见的，当用户点击摘要信息的时候，浏览器就会显示出 details 里的详细内容：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><details><summary>三国演义</summary>中国四大名著之一</details>
</body>
</html>

ruby、rtc、rb、rt和rp元素

这个几个元素都用于为东亚文字定义解释：

ruby： 该元素用于为一个或多个短语定义 ruby 注释，该注释的通用形式是在短语后面紧跟一段注释文字，用于说明该短语的发音或其他注释
rb： 该元素作为 ruby 的子元素，用于定义该 ruby 注释所解释的短语
rt： 该元素用于定义 ruby 注释的说明部分（发音或其他注释）。该元素通常作为 ruby 或 rtc 的子元素，如果 rt 元素后面紧跟 rb、rt、rtc 或 rp 元素，该元素就可以省略结束的 rt 标签
rtc： 该元素将作为 ruby 注释的说明部分的容器，通常作为 rt 元素的容器并作为 ruby 的子元素，如果 rtc 元素后面紧跟 rb、rtc 元素，则该元素可以省略结束的 rtc 标签
rp： 该元素用于为不支持 ruby 注释提供备用文本，一个广泛的约定是使用该元素标注 ruby 注释的文本内容两边的圆括号。对于支持 ruby 的浏览器而言，rp 元素的内容通常不会显示出来

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><ruby><rb>饕</rb><rp>（</rp><rt>tao</rt><rp>）</rp><rb>餮</rb><rp>（</rp><rt>tie</rt><rp>）</rp></ruby>
</body>
</html>

wbr元素

该元素用于指定在文本的何处适合添加换行，有些英文单词或术语过长可能导致在错误的位置换行，此时可以通过 wbr 元素来告诉浏览器适合的换行时机：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body>这里有一个很长的英文单词，使用wbr告诉浏览器，是否换行由浏览器决定：inter<wbr>national<wbr>ization.
</body>
</html>

menu和menuitem元素

menu： 用于定义菜单
- type： 指定为 context 值，表明菜单是弹出式菜单，这样该菜单可以作为其它组件的 contextmenu 属性的属性值
- label： 菜单文本
menuitem： 用于定义菜单项
- type： 指定菜单的类型，支持：command（普通菜单项）、checkbox（复选菜单项）、radio（单选菜单项）
- label： 指定菜单项的文本
- icon： 指定菜单项的图标
- disabled： 指定菜单项是否不可用
- checked： 指定该菜单项是否已勾选， 当 type 属性为 checkbox 或 radio 的时候有效
- radiogroup： 该属性指定该菜单项所属的单选组， 当 type 为 radio 的时候有意义
- default： 指定菜单项是否为默认菜单项

<menu><menu label="文件"><menuitem type="command" onclick="file_new()" label="新建"><menuitem type="command" onclick="file_open()" label="打开"></menu><menu label="编辑"><menuitem type="command" onclick="edit_cut()" label="剪切"><menuitem type="command" onclick="edit_copy()" label="复制"></menu>
<menu>

注意： 目前还没有浏览器支持。

06-HTML5新增元素相关推荐

HTML5新增元素之Canvas-实现太极八卦图和扇子
HTML5新增元素之Canvas-实现太极八卦图和扇子绘制流程: 1.在HTML5中添加canvas元素,并且设置宽度和ID 2.在canvas元素中添加提示语句,让不支持的canvas的浏览器能够 ...
html页面主详新增,HTML5 新增元素详解
一.HTML5新增结构元素之前,我们只能用万能的div标签,并为其设置不同的id如header, footer, sidebar等来分别表达头部,底部或者侧栏等.而现在代码编写者不再需要为id的命名 ...
html 5新增技术,HTML5新增元素，标签总结
总是遇到h5新标签的笔试题目,就查阅了资料来总结一下: 1.form相关: (1)form属性:在HTML5中表单元素可放在表单之外,通过给该元素添加form属性来指向目标表单(form属性值设为目标 ...
那些是html5新增元素类型,HTML5 元素分类
HTML5 元素分类发布时间:2020-03-02 02:39:31 来源:51CTO 阅读:547 作者:双士之心 HTML5元素分类:结构性元素.级块性元素.行内语义性元素.交互性元素. 目的: ...
哪一个不是html5新增的语义化标记元素,东师19春《HTML5开发基础与应用》作业考核【标准答案】...
<HTML5开发基础与应用>作业考核-0001 试卷总分:100 得分:0 一. 单选题 (共 30 道试题,共 60 分) 1.关于cookie存储机制下列说法不正确的是: A.简 ...
HTML5 新增结构元素分为主体结构元素和非主体结构元素
做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.今天先介 ...
（一）html5中的新增元素和废除元素
//刘梦冰发表于2015-6-29 1.新增的结构元素 (1)section元素 section元素表示页面中的一个内容区块,比如章节.页眉.页脚或者页面中的其他部分,它可以与h1.h2.h3等元素结 ...
HTML5 学习总结（二）——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html><head>< ...
html5新增标记元素的内容类型,HTML5新标签与javaScript新方法
HTML5 (0106) 1.文档声明 2.字符编码设置 3.验证(http://validator.w3.org/) HTML5新增的语义化标签 1.语义化标签:说明页面内容,便于搜索引擎寻找该内容 ...

06-HTML5新增元素