目录
一、语义化结构标签:
header:网页头部
main:网页主体
footer:网页底部
nav:网页导航
aside:和主体相关的内容
artice:文章之类的
section:独立的区块,上边标签都不适合就用这个
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- header nav section article aside footer -->
<header>
<h1>大标题</h1>
<p>段落标签</p>
</header>
<nav>
<a href="#">首页</a>
<a href="#">上一页</a>
<a href="#">下一页</a>
<a href="#">尾页</a>
</nav>
<section>
<h1>section标签</h1>
<p>section元素用于对网站或应用程序中页面的内容进行分块,表示一段专题性的内容,一般会带有标题</p>
</section>
<article>
<header>
<h1>article标签</h1>
<p>发布期日:2022-10-24</p>
</header>
<p>发布的内容</p>
</article>
<!-- 都可以嵌套使用 -->
<aside>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">目的地</a></li>
<li><a href="#">酒店</a></li>
<li><a href="#">机票</a></li>
</ul>
</nav>
</aside>
<footer>
<p>互联网药品信息服务资格证书 (粤)—非营业性—2017-0153 | 互联网宗教信息服务许可证:粤(2022)0000011</p>
</footer>
<!-- 综合嵌套 -->
<article>
<header>
<h1>article页面独立区块</h1>
<p>评论发表日期</p>
</header>
<section>
<h2>评论</h2>
<article>
<header>
<h3>评论人:A</h3>
<p>1小时前</p>
</header>
<p>评论的内容</p>
</article>
<article>
<header>
<h3>评论人:B</h3>
<p>2小时前</p>
</header>
<p>评论的内容</p>
</article>
</section>
</article>
</body>
</html>
二 、details标签
details标签
<details>
<summary></summary>
</details>
details元素用于描述文档或文档某个部分的细节。summary元素经常与details 元素配合使
用,作为details 元素的第一个子元素,用于为details定义标题。在默认情况下,标题可见,不显示
details中的内容;当用户点击标题时,会显示或隐藏details中的其他内容。
示图:
progress标签
progress标签
<h2>项目正在进行中</h2>
<p><progress></progress></p>
<h2>当前项目进度</h2>
<p><progress max="100" value="80"></progress> </p>
示图:
progress标签是行内元素,不会独占一行,一般用来定义运行中的任务进度(进程)。如
Windows系统中软件的安装、文件的复制等场景的进度。
常用属性
progress标签的常用属性有两个
( 1 ) value :已经完成的工作量。不设置此属性时,此进度条为“不确定”型,无具体进度信息,
只是表示进度正在进行,但是不清楚还有多少工作量没有完成。
(2) max :总共有多少工作量。可以自行设置max 值。 value 的默认取值范围为 0.01~1 ,无
max 属性时,如果value 值为 0.5 则表示当前进度为 50% 。( value和max属性的值必须大于0 )
示图:
<h2>当前项目进度</h2>
<p><progress max="100" value="80"></progress> </p>
meter标签 :
<h2>我的周考成绩</h2>
<p>
第一周:<meter value="50" min="0" max="100" high="80" low="60" optimum="100"></meter>
第二周:<meter value="70" min="0" max="100" high="80" low="60" optimum="100"></meter>
第三周:<meter value="90" min="0" max="100" high="80" low="60" optimum="100"></meter>
</p>
meter标签是行内元素,不会独占一行,一般用于表示指定范围内的数值。如磁盘使用情况、查询结果、周考成绩或投票比例等。
常用属性
(1)value:定义度量的值。
(2)min:定义最小值,默认值是 0。
(3)max:定义最大值,默认值是 1。
(4)high:定义度量的值位于哪个点被界定为高的值。
(5)low:定义度量的值位于哪个点被界定为低的值。
(6)optimum:定义什么样的度量值是最佳的值。如果该值高于high属性,则意味着值越高越好;如果该值低于low属性的值,则意味着值越低越好。
示图: