1.3 HTML5新增的元素和废除的元素_HTML5+CSS3网页制作基础培训教程-QQ阅读女生中文古言网

上QQ阅读APP看书，第一时间看更新

1.3 HTML5新增的元素和废除的元素

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

1.3 .1 新增的结构元素

由于HTML4缺少结构，即使形式良好的HTML页面也比较难以处理。必须分析标题的级别，才能看出各个部分的划分方式。边栏、页脚、页眉、导航条、主内容区和各篇文章都由通用的Div元素来表示。HTML5添加了一些新元素，专门用来标识这些常见的结构，不需要再为Div的命名费尽心思，对于手机、阅读器等设备更有语义的好处。

提示

HTML5增加了新的结构元素来表达这些最常用的结构。

① section：可以表达书本的一部分、一章或一节。

② header：页面主体上的头部，并非head元素。

③ footer：页面的底部（页脚），可以是一封邮件签名的所在。

④ nav：到其他页面的链接集合。

⑤ article：博客、杂志、文章汇编等中的一篇文章。

1.section元素

section元素表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分。它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用，标示文档结构。

HTML5中代码示例：

<section>…</section>

2.header元素

header元素表示页面中一个内容区块或整个页面的标题。

HTML5中代码示例：

<header>…</header>

3.footer元素

footer元素表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期及创作者的联系信息。

HTML5中代码示例：

<footer>…</footer>

4.nav元素

nav元素表示页面中导航链接的部分。

HTML5中代码示例：

<nav>…</nav>

5.article元素

article元素表示页面中与上下文不相关的一块独立内容，如博客中的一篇文章或报纸中的一篇文章。

HTML5中代码示例：

<article>…</article>

下面是一个网站的页面，用HTML5编写代码如下所示。

<!doctype html>
<html> 
<head> 
<meta charset=＂gb2312＂>
<title>html5新增结构元素</title>
</head>
<body>
<header>
<h1>北京新雨辰科技</h1>
</header>
<section>
<article>
<h2><a href=＂http://＂ mce_href=＂http://＂>标题1</a></h2> 
<p>内容1...</p>
</article>
<article>
<h2><a href=”http://＂ mce_href=＂http://＂>标题2</a></h2>
<p>内容2...</p>     
</article> ...
</section> 
<footer> 
<nav> 
<ul>
<li><a href=＂http://＂ mce_href=＂http://＂>导航1</a></li>
<li><a href=＂http://＂ mce_href=＂http://＂>导航2</a></li> 
 ... </ul>
 </nav>
<p>© 北京新雨辰科技</p>
</footer>  
</body>
</html>

运行代码，在浏览器中浏览，效果如图1.5所示。引入这些新元素，布局中将不再都是div元素，而是通过标签元素就可以识别出每个部分的内容和定位的代码。这种改变对于搜索引擎而言，将极大提高内容的准确度。

图1.5 HTML5新增结构元素实例浏览效果

1.3 .2 新增的块级元素

HTML5还增加了一些纯语义性的块级元素：aside、figure、figcaption、dialog。

①aside：定义所处位置内容之外的内容，如侧边栏。

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

③figcaption：媒介内容的标题说明。

④dialog：定义对话（会话）。

1.aside元素

aside可以用于表达注记、侧栏、摘要、插入的引用等作为补充主体的内容。表达blog的侧栏的代码如下。在浏览器中浏览，效果如图1.6所示。

图1.6 aside元素

<aside>
<h3>最新文章</h3>
<ul>
<li><a href=＂#＂ >文章标题</a></li>
</ul>
</aside>

2.figure元素与figcaption元素

figure元素表示一段独立的流内容，一般表示文档主题流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。以下是给图片添加标示的示例。

HTML4代码示例：

<img src=＂index.jpg＂ alt=＂葡萄酒业有限公司＂ />
<p>葡萄酒业有限公司</p>

上面的代码文字在标签里，与<img>标签各行其道，很难让人联想到这就是标题。

HTML5代码示例：

<figure>
<img src=＂index.jpg＂ alt=＂葡萄酒业有限公司＂ />
    <figcaption>
      <p>葡萄酒业有限公司</p>
    </figcaption>
</figure>

运行代码，在浏览器中浏览，效果如图1.7所示。HTML5采用figure元素对此进行了改进。当figure元素和figcaption元素组合使用时，我们就可以语义化地联想到这就是图片对应的标题。

图1.7 figure元素实例

3.dialog元素

<dialog>
<dt>问</dt>
<dd>这次夏令营和一般旅游有何区别？</dd>
<dt>答</dt>
<dd>
本次夏令营以游学为主，每10～15人有一名语文老师带队，侧重于了解黄河流域的文化，而且线路是独家定制的。
</dd>
<dt>问</dt>
<dd>15天的行程是否太长？</dd>
<dt>答</dt>
<dd>15天应该是个临界线，由于本次游学线路的特殊性，行程太短学生无法对所走路线形成一个整体的认识，所以
安排的15天行程，除第7天的行程略有些紧张外，其他都不会太累，保证孩子不至于太过疲劳。</dd>
</dialog>

运行代码，在浏览器中浏览，效果如图1.8所示。

图1.8 dialog元素示例

1.3 .3 新增的行内语义元素

HTML5增加了一些行内语义元素：mark、time、meter、progress。

① mark：定义有记号的文本。

② time：定义日期或时间。

③ meter：定义预定义范围内的度量。

④ progress：定义运行中的进度。

1.mark元素

mark元素用来标记一些不需要特别强调的文本。

举例：

<!doctype html>
<html>   
<head>     
<title>mark元素</title>
</head> 
<body> 
<p>国庆节期间，高一年级全体同学<mark>去中国科技馆参观</mark>。</p> 
</body> 
</html>

运行代码，在浏览器中浏览，效果如图1.9所示，与标签之间的文字“去中国科技馆参观”添加了记号。

图1.9 mark元素示例

2.time元素

time元素用于定义时间或日期。该元素可以代表24小时中的某一时刻，在表示时刻时，允许有时间差。在设置时间或日期时，只需将该元素的属性“datetime”设为相应的时间或日期即可。

举例：

<p id=＂p1＂>
<time datetime=＂2019-10-31＂>今天是2019年10月31日</time> 
<p> 
<p id=＂p2＂>
<time  datetime=＂2019-10-31＂>经中心校研究决定，于11月8日上午8:00在中心小学多功能教室举行“第五届小
学生艺术展演暨庆‘六一’文艺汇演”，届时我们将邀请知名艺术老师做评委。请各校积极做好参展的各项工作，特别
要做好安全预案，校长要亲自带队，确保师生安全。
</time> 
</p> 
<p id=＂p3＂>
<time datetime=＂2019-3-20＂ pubdate=＂true＂>本消息发布于2019年10月31日</time>
</p>

标签ID为“p1”，其中的<time>元素表示日期。页面在解析时，获取的是属性“datetime”中的值，而标签之间的内容只用于显示在页面中。

元素ID为“p2”中的<time>元素表示日期和时间。

元素ID为“p3”中的<time>元素表示发布日期。为了在文档中对这两个日期进行区分，在最后一个<time>元素中增加了“pubdate”属性，表示此日期为发布日期。

运行代码，在浏览器中浏览，效果如图1.10所示。

图1.10 time元素示例

3.progress元素

progress是HTML5中新增的状态交互元素，用来表示页面中某个任务完成的进度（进程）。例如下载文件时，文件下载到本地的进度值，可以通过该元素动态展示在页面中，展示的方式既可以是整数（如1～100），也可以是百分比（如10%～100%）。

举例：

<!doctype html>
<html> 
<head> 
<meta charset=＂utf-8＂ /> 
<title>progress元素在下载中的使用</title> 
<style type=＂text/css＂> 
body { font-size:13px}
p {padding:0px; margin:0px }  
.inputbtn { 
border:solid 1px #ccc; 
background-color:#eee; 
line-height:18px; 
font-size:12px
} 
</style> 
</head> 
<body> 
<p id=＂pTip＂>开始下载</p> 
<progress value=＂0＂ max=＂100＂ id=＂proDownFile＂></progress> 
<input type=＂button＂ value=＂下载＂ class=＂inputbtn＂ onClick=＂Btn_Click();＂> 
<script type=＂text/javascript＂>  
var intValue = 0;   
var intTimer;   
var objPro = document.getElementById(＇proDownFile＇);   
var objTip = document.getElementById(＇pTip＇);   //定时事件 
function Interval_handler() { 
intValue++; 
objPro.value = intValue;     
if (intValue >= objPro.max) {  clearInterval(intTimer); 
objTip.innerHTML = ＂下载完成!＂; } 
else { 
objTip.innerHTML = ＂正在下载＂ + intValue + ＂%＂;  
} 
}   //下载按钮单击事件 
function Btn_Click(){ 
intTimer = setInterval(Interval_handler, 100);  
}  
</script>
</body> 
</html>

为了使progress元素能动态展示下载进度，需要通过JavaScript代码编写一个定时事件。在该事件中，累加变量值，并将该值设置为progress元素的“value”属性值。当这个属性值大于或等于progress元素的“max”属性值时，则停止累加，并显示“下载完成！”字样，否则，动态显示正在累加的百分比数，如图1.11所示。

图1.11 progress元素示例

4.meter元素

meter元素用于表示在一定数量范围中的值，如投票中候选人各占比例情况及考试分数等。

举例：

<!doctype html>
<html>
<head>
<meta charset=＂utf-8＂ /> 
<title>meter元素</title> 
<style type=＂text/css＂> 
body { font-size:13px } 
</style> 
</head> 
<body>  
<p>共有200人参与投票，投票结果如下：</p>  
<p>王兵：
<meter value=＂30＂ optimum=＂100＂  high=＂90＂ low=＂10＂ max=＂100＂ min=＂0＂> </meter>  
<span> 30% </span></p>  
<p>李明： <meter value=＂70＂ optimum=＂100＂  high=＂90＂ low=＂10＂ max=＂100＂ min=＂0＂>  
</meter>
<span> 70% </span>
</p>
</body> 
</html>

候选人“李明”所占的比例是百分制中的70，最低比例可能为0，但实际最低为10；最高比例可能为100，但实际最高为90，如图1.12所示。

图1.12 meter元素示例

1.3 .4 新增的嵌入多媒体元素与交互性元素

HTML5新增了很多多媒体元素和交互性元素，如video、 audio。如果要在HTML4中嵌入一个视频或音频，需要引入一大段代码，还要兼容各个浏览器，而HTML5只需要引入一个标签就可以实现，就像<img>标签一样方便。

1.video元素

video元素用于定义视频，如电影片段或其他视频流。

HTML5代码示例：

<video src=＂movie.ogg＂ controls=＂controls＂>video元素</video>

HTML4代码示例：

<object type=＂video/ogg＂ data=＂movie.ogv＂>
<param name=＂src＂ value=＂movie.ogv＂> 
</object>

2.audio元素

audio元素用于定义音频，如音乐或其他音频流。

HTML5代码示例：

<audio src=＂someaudio.wav＂>audio元素</audio>

HTML4代码示例：

<object type=＂application/ogg＂ data=＂someaudio.wav＂>
<param name=＂src＂ value=＂someaudio.wav＂> 
</object>

3.embed元素

embed元素用来插入各种多媒体，格式可以是MIDI、WAV、AIFF、AU、MP3等。

HTML5代码示例：

<embed src=＂horse.wav＂ />

HTML4代码示例：

<object data=＂flash.swf＂type=＂application/x-shockwave-flash＂></object>

1.3 .5 新增的input元素的类型

在制作网站页面的时候，难免会遇到表单开发，用户输入的大部分内容都是在表单中完成并提交到后台的。HTML5也提供了大量的表单功能。

HTML5对input元素进行了大幅度的改进，我们可以简单地使用这些新增的元素来实现以往需要JavaScript才能实现的功能。

1.url类型

input元素里的url类型是一种专门用来输入url地址的文本框。如果该文本框中内容不是url地址格式的文字，则不允许提交。例如：

<form>
   <input name=＂urls＂ type=＂url＂ value=＂url＂/>
    <input type=＂submit＂ value=＂提交＂/>
</form>

设置此类型后，从外观上来看与普通元素差不多，如图1.13所示。可是将此类型放到表单中后，单击“提交”按钮，如果此文本框中输入的不是URL地址，将无法提交。

图1.13 url类型示例

2.email类型

如果将上面的URL类型代码中的type修改为email，那么在表单提交的时候会自动验证此输入框中的内容是否为email格式，如果不是，则无法提交。代码如下：

<form>
  <input name=＂email＂ type=＂email＂ />
  <input type=＂submit＂ value=＂提交＂/>
</form>

其外观如图1.14所示。

图1.14 email类型示例

3.date类型

input元素里的date类型在开发网页过程中是很常见的。例如，我们经常看到的购买日期、发布时间、订票时间等。date类型的时间采用的是日历的形式，方便用户输入，如图1.15所示。

<form>
   <input id=＂lykongtiao _date＂ type=＂date＂/>
   <input type=＂submit＂ value=＂提交＂/>
</form>

在HTML4中，需要结合使用JavaScript才能实现日历选择日期的效果。在HTML5中，只需要设置input为date类型即可，提交表单的时候也不需要验证数据。

图1.15 date类型示例

4.time类型

input里的time类型是专门用来输入时间的文本框，并且在提交时会检查输入时间的有效性。它的外观可能会根据不同类型的浏览器而呈现不同的形式。

<form>
   <input id=＂ linyikongtiao_time＂ type=＂time＂/>
   <input type=＂submit＂ value=＂提交＂/>
</form>

time类型是用来输入时间的，在提交的时候检查是否输入了有效的时间。其外观如图1.16所示。

图1.16 time类型示例

5.datetime类型

datetime类型是一种专门用来输入本地日期和时间的文本框，同样，它在提交的时候会对数据进行检查。但目前主流浏览器都不支持datetime类型。

<form>
   <input id=＂linyikongtiao_datetime＂ type=＂datetime＂/>
   <input type=＂submit＂ value=＂提交＂/>
</form>

1.3 .6 废除的元素

HTML5中废除了很多元素，具体如下。

1.能使用CSS替代的元素

对于basefont、big、center、font、s、strike、tt、u这些元素，因为它们的功能都是纯粹为页面样式服务的，而HTML5提倡把页面样式功能放在CSS样式表中编辑，所以将这些元素废除了。

2.不再使用frame框架相关的元素

对于frameset元素、frame元素与noframes元素，因为frame框架对网页可用性存在负面影响，HTML5已不支持frame框架，只支持iframe框架，所以将以上三个元素废除了。

3.只有部分浏览器支持的元素

对于applet、bgsound、blink、marquee等元素，因为只有部分浏览器支持这些元素，特别是bgsound元素和marquee元素，只能在Internet Explorer浏览器中运行，所以HTML5将这些元素废除了。applet元素可由embed元素或object元素替代，bgsound元素可由audio元素替代，marquee元素可以由JavaScript编程的方式替代。

4.其他被废除的元素

acronym元素，使用abbr元素替代。

dir元素，使用ul元素替代。

isindex元素，使用form元素与input元素相结合的方式替代。

listing元素，使用pre元素替代。

xmp元素，使用code元素替代。

nextid元素，使用GUIDS替代。

plaintext元素，使用“text/plian”MIME类型替代。