《HTML 5与CSS 3 权威指南(第3版·上册)》——2.2 新增的元素和废除的元素

简介:

本节书摘来自华章出版社《HTML 5与CSS 3 权威指南(第3版·上册)》一 书中的第2章,第2.2节,作者:陆凌牛,更多章节内容可以访问云栖社区“华章计算机”公众号查看。

2.2 新增的元素和废除的元素

本节将详细介绍HTML 5中新增和废除了哪些
元素。

2.2.1 新增的结构元素

在HTML 5中,新增以下与结构相关的元素。
(1)section元素
section元素表示页面中的一个内容区块,比如章节、页眉、页脚或页面中的其他部分。它可以与h1、h2、h3、h4、h5、h6等元素结合使用,标示文档结构。
HTML 5中的代码示例:

<section>…</section>```
HTML 4中的代码示例:

`
(2)article元素?
article元素表示页面中的一块与上下文不相关的独立内容,譬如博客中的一篇文章或报纸中的一篇文章。
HTML 5中的代码示例:
<article>…</article>```
HTML 4中的代码示例:

`
(3)aside元素
aside元素表示article元素的内容之外的、与article元素的内容相关的辅助信息。
HTML 5中的代码示例:
<aside>…</aside>```
HTML 4中的代码示例:

`
(4)header元素?
header元素表示页面中一个内容区块或整个页面的标题。
HTML 5中的代码示例:
<header>…</header>```
HTML 4中的代码示例:

`
(5)footer元素
footer元素表示整个页面或页面中一个内容区块的脚注。一般来说,它会包含创作者的姓名、创作日期以及创作者联系信息。
HTML 5中的代码示例:
<footer></footer>```
HTML 4中的代码示例:

`
(6)nav元素
nav元素表示页面中导航链接的部分。
HTML 5中的代码示例:
<nav></nav>```
HTML 4中的代码示例:

`
(7)f?igure元素
f?igure元素表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。使用 f?igcaption元素为f?igure元素组添加标题。
HTML 5中的代码示例:
<f?igure>
<f?igcaption>PRC</f?igcaption>
<p>The People's Republic of China was born in 1949...</p>
</f?igure>```
HTML 4中的代码示例:

PRC


The People's Republic of China was born in 1949...


`
(8)main元素
main元素表示网页中的主要内容。主内容区域意指与网页标题或应用程序中本页面主要功能直接相关或进行扩展的内容。
HTML 5中的代码示例:
<main>…</main>```
HTML 4中的代码示例:

`

2.2.2 新增的其他元素

除了结构元素外,在HTML 5中,还新增以下元素。
(1)video元素
video元素用于定义视频,比如电影片段或其他视频流。
HTML 5中的代码示例:

<video src="movie.ogg" controls="controls">video元素</video>```
HTML 4中的代码示例:

   <param name="src" value="movie.ogv">

`
(2)audio元素
audio元素用于定义音频,比如音乐或其他音频流。
HTML 5中的代码示例:

<audio src="someaudio.wav">audio元素</audio>```
HTML 4中的代码示例:

<param name="src" value="someaudio.wav">

`
(3)embed元素
embed元素用来插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU、MP3等。
HTML 5中的代码示例:

<embed src="horse.wav" />```
HTML 4中的代码示例:

(4)mark元素
mark元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。
HTML 5中的代码示例:

`
HTML 4中的代码示例:

<span></span>```
(5)progress元素
progress元素表示运行中的进程,可以使用 progress元素来显示 JavaScript 中耗费时间的函数的进程。
HTML 5中的代码示例:

`
这是HTML 5中的新增功能,故无法用HTML 4代码来实现。
(6)meter元素
meter元素表示度量衡,仅用于已知最大值和最小值的度量。必须定义度量的范围,既可以在元素的文本中,也可以在 min/max 属性中定义。
HTML 5中的代码示例:

<meter></meter>```
这是HTML 5中的新增功能,故无法用HTML 4代码来实现。
(7)time元素
time元素用于表示日期或时间,也可以同时表示两者。
HTML 5中的代码示例:

`
HTML 4中的代码示例:

<span></span>```
(8)ruby元素
ruby元素表示 ruby 注释(中文注音或字符)。
HTML 5中的代码示例:

漢 (ㄏㄢˋ)`
这也是HTML 5中的新增功能。
(9)rt元素
rt元素表示字符(中文注音或字符)的解释或发音。
HTML 5中的代码示例:

<ruby>漢 <rt> ㄏㄢˋ </rt></ruby>```
这是HTML 5中的新增功能。
(10)rp元素
rp元素在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。
HTML 5中的代码示例:

漢 (ㄏㄢˋ)`
这是HTML 5中的新增功能。
(11)wbr元素
wbr元素表示软换行。wbr元素与br元素的区别是:br元素是此处必须换行,而wbr元素意思就是浏览器窗口或父级元素的宽度足够宽时(没必要换行时),不进行换行,而当宽度不够时,主动在此处进行换行。wbr元素好像对字符型的语言用处比较大,但是对于中文,貌似没多大用处。
HTML 5中的代码示例:

<p> To learn AJAX, you must be fami<wbr>liar with the XMLHttp<wbr>
Request Object. </p>```
这是HTML 5中的新增功能。
(12)canvas元素
canvas元素表示图形,比如图表和其他图像。这个元素本身没有行为,仅提供一块画布,但把一个绘图API展现给客户端JavaScript,以使脚本能够把想绘制的东西绘制到这块画布上。
HTML 5中的代码示例:

`
HTML 4中的代码示例:

<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200">
</object>```
(13)command元素
command元素表示命令按钮,比如单选按钮、复选框或按钮。
HTML 5中的代码示例:

`
这是HTML 5中的新增功能。
(14)details元素
details元素表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用。summary元素提供标题或图例。标题是可见的,用户点击标题时,会显示细节信息。summary元素应该是details元素的第一个子元素。
HTML 5中的代码示例:

<details>
   <summary>HTML5</summary>
   This document teaches you everything you have to learn about HTML5.
</details>```
这是HTML 5中的新增功能。
(15)datalist元素
datalist元素表示可选数据的列表,与input元素配合使用,可以制作出输入值的下拉
列表。
HTML 5中的代码示例:

`
这是HTML 5中的新增功能。
(16)datagrid元素
datagrid元素表示可选数据的列表,它以树形列表的形式显示。
HTML 5中的代码示例:

<datagrid></datagrid>```
这是HTML 5中的新增功能。
(17)keygen元素
keygen元素表示生成密钥。
HTML 5中的代码示例:

`
这是HTML 5中的新增功能。
(18)output元素
output元素表示不同类型的输出,比如脚本的输出。
HTML 5中的代码示例:

<output></output>```
HTML 4中的代码示例:

`
(19)source元素
source元素为媒介元素(比如

<source>```
HTML 4中的代码示例:

`
(20)menu元素
menu元素表示菜单列表。当希望列出表单控件时使用该标签。
HTML 5中的代码示例:

<menu>
  <li><input type="checkbox" />Red</li>
  <li><input type="checkbox" />blue</li>
</menu>```
在HTML 4中,menu元素不被推荐使用。
(21)dialog元素
dialog元素表示对话框。
HTML 5中的代码示例:

`

2.2.3 新增的input元素的类型

HTML 5中新增很多input元素的类型,现列举如下:
email:email类型表示必须输入e-mail地址的文本输入框。
url:url类型表示必须输入URL地址的文本输入框。
number:number类型表示必须输入数值的文本输入框。
range:range类型表示必须输入一定范围内数字值的文本输入框。
Date Pickers:HTML 5拥有多个可供选取日期和时间的新型输入文本框。
date:选取日、月、年。
month:选取月、年。
week:选取周和年。
time:选取时间(小时和分钟)。
datetime:选取时间、日、月、年(UTC时间)。
datetime-local:选取时间、日、月、年(本地时间)。

2.2.4 废除的元素

由于各种原因,在HTML 5中废除了很多元素,简单介绍如下。
1.?能使用CSS替代的元素
对于basefont、big、center、font、s、strike、tt、u等元素,由于它们的功能都是纯粹为画面展示服务的,而HTML 5中提倡把画面展示性功能统一放在CSS样式表中统一编辑,所以将这些元素废除,使用编辑CSS、添加CSS样式表的方式进行替代。其中font元素允许由“所见即所得”的编辑器进行插入,s元素、strike元素可以由del元素进行替代,tt元素可以由CSS的font-family属性进行替代。
2.?不再使用frame框架
对于frameset元素、frame元素与noframes元素,由于frame框架对网页可用性存在负面影响,在HTML 5中已不支持frame框架,只支持iframe框架,或者由服务器方创建的由多个页面组成的复合页面的形式,同时将这三个元素废除。
3.?只有部分浏览器支持的元素
对于applet、bgsound、blink、marquee等元素,由于只有部分浏览器支持这些元素,特别是bgsound元素以及marquee元素,只被Internet Explorer所支持,所以在HTML 5中被废除。其中applet元素可由embed元素或object元素进行替代,bgsound元素可由audio元素进行替代,marquee可以由JavaScript编程的方式所替代。
4.?其他被废除的元素
其他被废除元素还有:
废除rb元素,使用ruby元素替代。
废除acronym元素,使用abbr元素替代。
废除dir元素,使用ul元素替代。
废除isindex元素,使用form元素与input元素相结合的方式替代。
废除listing元素,使用pre元素替代。
废除xmp元素,使用code元素替代。
废除nextid元素,使用GUIDS替代。
废除plaintext元素,使用"text/plian"?MIME类型替代。

相关文章
|
6天前
|
移动开发 开发者 UED
HTML5 语义元素详解
HTML5引入了诸多语义元素
|
9天前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
9天前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
6天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
7天前
|
移动开发 数据安全/隐私保护 UED
HTML5 表单元素详解
HTML5 引入了新的表单元素和属性,如 `&lt;form&gt;、&lt;input&gt;、&lt;textarea&gt;、&lt;select&gt;` 和 `&lt;button&gt;`,以及 `required、min、max` 等属性,增强了表单的创建与交互。其中,`&lt;input&gt;` 支持多种类型如 `email、url、date` 等,提供了更好的用户体验和数据验证。此外,HTML5 还新增了原生表单验证功能,简化了开发流程并提升了安全性。
WK
|
1天前
|
Web App开发 存储 移动开发
HTML5新增了哪些表单元素
HTML5通过新增多种表单元素和属性,提升了用户体验与交互性。例如,`email`和`url`元素分别验证邮箱地址和网址格式;`number`和`range`便于输入数字及区间值;`date`等元素简化了日期时间的选择;`search`添加搜索图标,`color`提供颜色选择器;`datalist`结合`input`属性给予用户下拉列表选项;`keygen`用于生成密钥对以增强安全性;`output`则用于动态展示计算结果。这些改进共同提高了表单的功能性和易用性。
WK
10 2
WK
|
1天前
|
存储 移动开发 前端开发
HTML5新增了哪些其他元素和属性
这段文字介绍了HTML5中新增的多种元素和属性,包括页面布局元素如header、nav等,表单元素如email、tel输入框等,以及其他元素如canvas、svg等。此外,还介绍了全局及表单属性,例如contenteditable、placeholder等,这些新功能显著增强了HTML5在现代网页设计与开发中的实用性与灵活性。
WK
12 1
|
7天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代,拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识,一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解,这篇文章都将是你的理想指南。我们将探索基本概念,实现页面布局,并点缀以个性化样式,最终将静态页面转变为动态交互式网站。准备好了吗?让我们开始吧!
|
10天前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
18 2
|
10天前
|
前端开发 数据安全/隐私保护 容器
HTML+CSS 水滴登录页
该代码实现了一个创意的水滴登录页面,包含一个水滴形状的登录框与两个按钮(忘记密码和注册)。登录框包括用户名、密码输入框及登录按钮。页面设计独特,采用渐变色与动态效果,增强了交互性和视觉美感。以下为关键实现步骤: - 重置默认样式。 - 设置页面背景颜色和尺寸。 - 定义登录表单容器的布局、位置和尺寸。 - 设置登录表单内容样式,包括3D效果和过渡动画。 - 创建伪元素增强水滴效果。 - 设定输入框容器和输入框样式。 - 为提交按钮、忘记密码和注册按钮设定特定样式,并添加悬停效果。