新增和废除元素的认识

最新推荐文章于 2024-05-05 00:05:06 发布

Dashen__Daiwo

最新推荐文章于 2024-05-05 00:05:06 发布

阅读量193

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/Dashen__Daiwo/article/details/106862870

版权

笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文介绍了HTML5中新增的figure、figcaption、details、summary、mark、progress、meter元素，详细阐述了它们的用途和示例。同时，讨论了被废除的元素，如basefont、big、frame等，以及替代方案。

摘要由CSDN通过智能技术生成

6月19号
新增和废除元素的认识
1.其他新增元素
（1）新增的figure元素和figcaption
●figure元素是一种元素的组合，带有可选标题。figure元素用来表示页面上
一块独立的内容，如果将他从网页上删除不给我们的网页造成影响。
●figcaption元素表示figure元素的标题，它属于figure元素，figcaption元
素必须书写在figure元素内部，可以写在figure元素内的其他从属元素前面或
后面。一个figure元素内最多只允许放置- -个figcaption元素。
example:

< DOCTYPE html>
<html>
<head lang=" en" >
<meta charset="UTF-8">
<title></title>
</ head>
<body>
<fi gure>
<img src=" 1. jpg" title='风景”>
<img src="2. jpg" title="风景>
<img src=' "3. jpg" title=" 风景”>
<fi gcapt ion>风景</ figcaption>
</ fi gure>
</ body> 
</html>

（2）新增的details元求与summary元素

●details元素是一种用于标识该元素内部的子元素可以被展开、收缩显示的元素。details元素具有-一个布尔类型的open属性，当该值为true时，该元素内部的子元素应该被展开显示，当该属性值为false时，其内部的子元素应该被收缩起来不现实。该属性的默认值为false，当页面打开时其内部的子元素应该处于收缩状态。

●summary元素从属于details元素，用限标点击summary元素中的内容文字时，details元素中的其他所有从属元素将会展开或者收缩。如果details元素内没有summary元素，浏览器那你会提供默认的文字以供点击，例如"details”目前只有谷歌的Chrome浏览器支持!
example：

<!DOCTYPE html>
<html>
<head lang=" en' >
<meta charset=" UTF-8" >
<title></title> 
</ head>
< body>
details>
< summary>
HTML5+CSS3视频教程
</ summary>
<p>
HTML5+CSS3视频教程，由麦子学院为您提供! www. maiziedu. com
</p>
</ details>
</ body>
</html>

（3）新增的Mark元素
●mark元素表示页面中需要突出显示或高亮显示的，对于当前用户具有参考作用的一段文字。通常在引用原文时使用mark元素，目的是引起读者的注意。mark元素是对原文内容有补充作用的-个元素，他应该用在一-段原文作者不认为重要的，但是现在为了与原文作者不相关的其他目的而需要突出显示或者高亮显示的文字上面。
●mark元素最主要的目的就是吸引当前用户的注意。
●mark元素除了高亮显示之外，还有一个作用就是在引用原文时，为了某种特殊的目的而把作者没有表示出来的内容重点表示出来。
example：

< DOCTYPE html> 
<html>
<head lang=" en" >
<meta charset="UTF-8">
<title></ title>
</ head>
<body>
<h2>以下是关于<mark>HTML5</ mark>的搜索结果</h2>
<p>
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语盲<mark>HTML</mark>的第五次重大修改(这是一项正在进行中的一个草案、外语原文: This is a work in progress!)。标准通...
</p>
<section> 
<article> 
<h2>
<a href=' / index. html" ><mark>html5</mark>_百度百科</a>
</h2>
</article>
<article>
<h2>
<a href=" index. html">< mark>HTML5</ mark>中国:中国最大的< mark>HTML5</ mark>中文门户</a>
</h2>
<p>
< mark>HTML5</ mark>中国，是中国最大的< mark>HTML5</ mark>中文门户,为广大< mark>HTML5</ mark>爱好者提供各种< mark>HTML5</ mark>资料,包括< mark>HTML5</ mark>网站、< mark>HTML5</ mark>资讯、< mark>HTML5</ mark>5应用、< mark>HTML5</ mark>游戏、< mark>HTML5</ mark>教程、 < mark>HTML5</ mark>视频、< mark>HTML5</ mark>论坛...
</p>
</article>
</section>
</ body>
</html>

result:
如图：
在这里插入图片描述
（4）progress元素
●progress元素代表-个任务的完成进度，这个进度可以使不确定的，表示进度z正在进行，但不清楚这个还有多少工作量没有完成，也可以用0到某个最大数字(比如100)之间的s数字来表示准确的进度情况(比如百分比)
●该元素具有两个表示当前任务完成情路昂的属性，value属性表示已经完成了多少工作量，max属性表示总共有多少工作量。工作量的单位是随意的，不指定的。
●在设定属性点时候，value 属性和max属性只能指定为有效的浮点数，value属性必须大于0，且小于或等于max的属性，max的属性必须大于0。
example:

< DOCTYPE html>
<html>
<head lang="en"> 
<meta charset=" UTF-8">
<title></title>
</head>
<body>
<p>
当前任务完成进度:
<progress max=" 100" value="85" color="purple"></ progress>
</p>
</ body>
</html>

效果：
在这里插入图片描述
（5）meter元素
meter元素表示规定范围内的数量值。
meter元素有6个属性!
1、value属性:在元素中特地地表示出来的实际值。该属性值默认为0，可以为该属性制定- -个浮点小数值。
2、min属性:指定规定范围时允许实用的最小值，默认0，在设定该属性时所设定的值不能小于0。
3、max属性:指定规定的范围时允许使用的最大值，如果设定时该属性值小于min的值，那么把min属性的值视为最大值。max属性的默认值1。
4、low属性:规定范围的下限值，必须小于或者等于high的值
5、high属性:规定范围的上限值。如果该属性值小于low属性的
值，那么把low属性的值视为high属性的值，同样如果该属性的值大于max属性的值，那么把max属性的值视为high的值
6、optimum属性:最佳值属性值必须在min属性值与max属性值
之间，可以大于high属性值。
example:

< !DOCTYPE html>
<html>
<head lang=" en' >
<meta charset=" UTF-8^ >
<title></ title>
</ head>
<body>
<p>硬盘实际使用情况<meter value=" 43.9"
max=" 119”min="0" >43.9/119</meter>GB</p>
<p>
硬盘实际使用情况
<meter value=" 43. 9" max=" 119” min=" 0" low=" 50" high=" 70" optimum="80" </ meter>
</p>
</body>
</html>

效果：
在这里插入图片描述
2.废除的元素
1、能使用CSS代替的元素:
basefont、big、center、font、s、strike、 tt、u；
2、不在使用frame框架对于frameset元素、frame元素与noframes元素，由于frame框架对页面可用性存在负面影响，在html5里面已经不支持frame框架，只支持iframe框架，同时废除以上这三个元素。
3、只有部分浏览器支持的元素对于applet元素、bgsound、blink、marquee元素，由于只有部分测览器支持这些元素，特别是bgsound元素以及marquee元素，只被E浏览器支持，所以在HTML5里面被废除!而applet元素可以由embed元素或者object元素代替，bgsound元素由audio元素代替，marquee可以使用javascript来代替!
4、其他被废除的元素
A、废除rb元素，使用ruby元素代替
B、废除acronym元素，使用abbr元素代替

Dashen__Daiwo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
新增和废除元素的认识

6月19号新增和废除元素的认识1.其他新增元素（1）新增的figure元素和figcaption●figure元素是一种元素的组合，带有可选标题。figure元素用来表示页面上一块独立的内容，如果将他从网页上删除不给我们的网页造成影响。●figcaption元素表示figure元素的标题，它属于figure元素，figcaption元素必须书写在figure元素内部，可以写在figure元素内的其他从属元素前面或后面。一个figure元素内最多只允许放置- -个figcaption元素。
复制链接

扫一扫