HTML5入门----新标记

最新推荐文章于 2022-07-11 17:06:16 发布

Mrs索莱尔

最新推荐文章于 2022-07-11 17:06:16 发布

阅读量466

点赞数 1

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/qq_29895699/article/details/51576173

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML5新标记

progress标记

进度条，属性：value表示当前进度，max表示总进度

mark标记

表示页面中需要突出或高亮显示的内容，在搜索结果中也常常出现，比如搜索结果中的关键词高亮显示

meter标记

此标记与进度条标记差不多，它主要表现特定范围内的数量值，属性：value表示实际数值、min表示规定范围内允许的最大值、low表示规定范围下限值、hight表示规定范围上限值、optiumn设置最佳值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>HTML5中meter标记，mark标记以及progress标记的用法</title>
</head>

<body>
<h1>meter标记的应用</h1>
<p>空间剩余大小;<meter min="0" max="1024" value="600">600/1024</meter>600/1024G</p>
<h1>progress标记的应用</h1>
<p>完成百分比：<progress min="0" max="100" low="60" high="90" optimum="100" value="91">91分</progress>91分</p>
<h1>mark标记的应用</h1>
<p>HTML5|CSS3|论坛|<mark>前端开发网</mark></p>
</body>
</html>

progress、meter、mark标记显示结果页面

details标记

收缩标记，在details标记中有一个summary子标签，当鼠标点击summary标签中的内容文字时，details标签中的其他元素将会展开或收缩

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTML5中details标记的用法</title>
</head>

<body>
<h3>details标记中open属性表示默认展开的状态</h3>
<details>
<summary><span>HTML5</span></summary>
<p>HTML5简化开发的开发，真是太神奇</p>
</details>

<h3>details标记中没有summary标签，会产生默认文字，比如“详细信息”</h3>
<details>
<p>HTML5简化开发的开发，真是太神奇</p>
</details>
</body>
</html>

details标记结果页面显示

figure标记

一种元素的组合，可带有标题（可选）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTML5中figure标记的用法</title>
<style type="text/css">
body{
text-align:center;
}
figcaption{
text-align:center;
}
figure{
background:#fba;
}
</style>
</head>

<body>
<h3>无标题</h3>
<figure>
<img alt="html5" src="../../9.3图片轮播/images/2.jpg" />
</figure>

<h3>通过figcaption制定标题，只能有一个figcaption标记</h3>
<figure>
<img alt="html5" src="../../9.3图片轮播/images/2.jpg" />
<figcaption>HTML5</figcaption>
</figure>
</body>
</html>

figure标记显示结果页面