HTML5之新增的元素和废除的元素 (声明:内容节选自《HTML 5从入门到精通》)
新增结构元素:
section元素
section元素定义文档或应用程序中的一个区段,比如章节、页眉、页脚或文档中的其他部分。它可以与h1,h2,h3,h4,h5,h6元素结合起来使用,标示文档结构。
HTML5中代码示例:<section>…</section>
HTML4中代码示例:<div>…</div>
article元素
article元素表示文档中的一块独立的内容,譬如博客中的一篇文章或报纸中的一篇文章。
HTML5中代码示例:<article>…</article>
HTML4中代码示例:<div class="article">…</div>
header元素
header元素表示页面中一个内容区块或整个页面的标题。HTML5中代码
示例:<header>…</header>
HTML4中代码示例:<div>…</div>
nav元素
nav元素表示导航链接的部分。
HTML5中代码示例: <nav>…</nav>
HTML4中代码示例:<ul>…</ul>
footer元素
footer元素表示整个页面或页面中一个内容区块的脚注。一般来说,它会包含创作者的姓名、文档的创作日期以及创建者联系信息。
HTML5中代码示例:<footer>…</footer>
HTML4中代码示例:<div>…</div>
————————————————————————————————————————————————————————
新增块级语义元素:
aside元素
aside元素表示article元素的内容之外的与article元素的内容相关的有关内容。
HTML5中代码示例:<aside>…</aside>
HTML4中代码示例:<div>…</div>
figure元素
figure元素表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。使用 <figcaption> 元素为figure元素组添
加标题。
HTML5中代码示例:
<figure> <figcaption>PRC</figcaption> <p>The People's Republic of China was born in 1949...</p> </figure>
HTML4中代码示例:
<dl> <h1>PRC</h1> <p>The People's Republic of China was born in 1949...</p> </dl>
dialog元素
dialog标签定义对话,比如交谈。注意:对话中的每个句子都必须属于 <dt> 标签所定义的部分。
HTML5中代码示例:
<dialog> <dt>老师</dt> <dd>2+2 等于?</dd> <dt>学生</dt> <dd>4</dd> <dt>老师</dt> <dd>答对了!</dd> </dialog>
————————————————————————————————————————————————————————
新增行内语义元素:
mark元素
mark元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素的一个比较典型的应用就是在搜索结果中向用户
高亮显示搜索关键词。
HTML5中代码示例:<mark>…</mark>
HTML4中代码示例:<span>…</span>
time元素
time元素表示日期或时间,也可以同时表示两者。
HTML5中代码示例: <time>…</time>
HTML4中代码示例:<span>…</span>
meter元素
meter元素表示度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围,既可以在元素的文本中,也可以在 min/max 属性中定
义。
HTML5中代码示例: <meter>…</meter>
progress元素
progress元素表示运行中的进程。可以使用 progress元素来显示 JavaScript 中耗费时间的函数的进程。
HTML5中代码示例:<progress>…</progress>
————————————————————————————————————————————————————————
新增多媒体与交互性元素:
video元素&audio元素
video用来插入视频,audio用来插入声音,当然,用下面这个:
<video src="XX.wmv">您的浏览器不支持video标签</video>
如果不支持的话,就会显示标签内的文字
details元素
details元素表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用。summary元素提供标题或图例。标题是可
见的,用户点击标题时,会显示出details。summary元素应该是details元素的第一个子元素。
HTML5中代码示例:
<details><summary>HTML 5</summary> This document teaches you everything you have to learn about HTML 5. </details>
<!--实践证明没用啊。。。—>
datagrid元素
datagrid元素表示可选数据的列表,与input元素配合使用,可以制作出输入值的下拉列表。
HTML5中代码示例:<datagrid>…</datagrid>
menu元素
menu元素表示菜单列表。当希望列出表单控件时使用该标签。
HTML5中代码示例:
<menu> <li><input type="checkbox" />Red</li> <li><input type="checkbox"/>blue</li> </menu>
U注意:HTML4中 menu元素不被推荐使用。
command元素
command元素表示命令按钮,比如单选按钮、复选框或按钮。
HTML5中代码示例:
Øcommand元素
command元素表示命令按钮,比如单选按钮、复选框或按
钮。
HTML5中代码示例: command onclick=cut()" label="cut">
————————————————————————————————————————————————————————
新增input类型:
email——email类型用于应该包含 e-mail 地址的输入域。
url——url 类型用于应该包含 URL 地址的输入域。
number——number 类型用于应该包含数值的输入域。
range——range 类型用于应该包含一定范围内数字值的输入域。
Date Pickers(数据检出器)
search——search 类型用于搜索域,比如站点搜索或 Google 搜索。search 域显示为常规的文本域。
————————————————————————————————————————————————————————
多个可供选取日期和时间的新输入类型:
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间)
————————————————————————————————————————————————————————
废除的元素:
•1.能使用css代替的元素
对于basefont、big、center、font、s、strike、tt、u这些元素,由于他们的功能都是纯粹为画面展示服务的,而在HTML5中提
倡把画面展示性功能放在css样式表中统一编辑,所以将这些元素废除,并使用编辑css样式表的方式进行替代。
•2.不再使用frame框架
对于frameset元素、frame元素与nofranes元素,由于frame框架对页面可存在负面影响,在html5中已不再支持frame框架,只支持iframe框架,或者用服务器方创建的由多个页面组成的复合页面的形式,同时将以上三个元素废除。
•3.只有部分浏览器支持的元素
对于applet、bgsound、blink、marguee等元素,由于只有部分浏览器支持这些元素,所以在HTML5中被废除。其中applet元素可由embed元素替代,bgsound元素可由audio元素替代,marquee可以由JavaScript编程的方式所替代。
HTML5之新增的元素和废除的元素 (声明:内容节选自《HTML 5从入门到精通》)的更多相关文章
- html5中新增的元素和废除的元素
一.新增的结构元素 1.section元素表示页面中的一个内容区块,比如章节.页眉.页脚或页面中的其他部分.它可以与h1.h2.h3.h4.h5.h6等元素结合起来使用,标示文档结构. h5中的代码事 ...
- 重温html5的新增的标签和废除的标签
HTML5已经盛行有段时间了,对于标签的使用,按照规范,哪些该用,哪些不该用,你是否都掌握了呢.今天我在这里详细列举下: 新增的结构标签 section元素 表示页面中的一个内容区 块,比如章节.页眉 ...
- HTML5之新增的属性和废除的属性 (声明:内容节选自《HTML 5从入门到精通》)
新增的属性 1.表单相关的属性 ———————————————————————————————————————————————————————— •autocomplete 属性 autocomple ...
- HTML5新增的属性和废除的属性
HTML5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 新增的属性 1.表单相关的属性 对input(type=text).select.textarea与button指定autofoc ...
- HTML5之新增的元素
今天打开博客看到自己有了一个小粉丝,说实话还是蛮开心的,坚持写博客大半年了,终于迎来了自己的第一个小伙伴.总算是坚持了那么久的事情看到了结果吧. 前几天参加了我们学院老师的比赛---<青年教师大 ...
- html5中新增的非主体结构的元素
html5中出了新增了article.section.nav.aside.time主要结构元素外,还增加了一些表示逻辑结构或附加信息的非主体结构元素. 一.header元素 header元素是一种具有 ...
- 1+x 证书 web 前端开发 HTML5 - 新增的元素,删除的元素
官方QQ群 1+x 证书 web 前端开发 HTML5 - 新增的元素,删除的元素 http://blog.zh66.club/index.php/archives/197/
- html5中新增非主体结构元素
1.header元素 定义HTML文档的页眉,是一种具有引导和导航作用的结构元素 <header> <h1>header元素</h1> <nav> &l ...
- HTML5中新增的主体结构元素
article元素 article元素代表文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容. 它可以使一篇博客或者报刊中的文章,一篇论坛帖子.一段用户评论或独立的插件,或其他任何独立的内 ...
随机推荐
- 写给移动开发者的 React Native 指南
本文原创版权归 简书 wingjay 所有,如有转载,请于文章篇头位置显示标注原创作者及出处,以示尊重! 作者:wingjay 出处:http://www.jianshu.com/p/b8894425 ...
- urllib的使用
1.urllib 中的urlopen urllib.urlopen(url,data) 如果请求是json格式,则data是json.dumps(data_dict)形成的数据,注意,不能在进行url ...
- node-redis模块需要注意的事项
node之中连接redis使用的redis模块,虽然好用,但是有些地方还是需要注意. npm install redis redis client 行为:1.客户端执行过程中断网的情况 由于原本连接正 ...
- Eclipse中的创建maven项目,无法添加src/main/java等source folder
maven无法添加src/main/java 通过Eclipse创建Java Web项目,目录结构如下: 默认是只有src/main/resources 这个source folder 按照maven ...
- PHP队列的实现 算法
<?php /** * php队列算法 * * Create On 2010-6-4 * Author Been * QQ:281443751 * Email:binbin1129@126.co ...
- FAQ of db2fmp messages in the db2diag.log
http://www-01.ibm.com/support/docview.wss?uid=swg21470035 Technote (FAQ) Question What do these mess ...
- MySQL 连接注意事项
外连接 A LEFT JOIN B join_condition 数据表B的结果集依赖数据表A 数据表A的结果集根据左连接条件依赖所有数据表 B表除外). 左外连接条件决定如何检索数据表B(在没有指定 ...
- 实现Date函数属性中的format方法
js中没有Date.format方法的,所以在date属性中加format方法 //js格式化属性 Date.prototype.format = function (format) { var o ...
- memcached 学习笔记 5
memcached installed on linux 使用的操作系统是centos6.5 (有桌面) 1 上传libebent和memcache到/usr/local/src [root@jt ...
- Lenovo笔记本Fn的总结
Fn与其他按键结合使用以访问特殊的ThinkPad功能. Fn+F2 锁定计算机 Fn+F3 管理电池和电源 Fn+F4 进入睡眠(待机)模式 Fn+F5 管理无线连接 Fn+F6 打印屏幕 Fn+ ...