html--语义化标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		1.header 页眉(最顶部的盒子)
		2.footer 页脚(最底部的盒子)
		3.main   主体(中间的盒子)
		4.hgroup  标题组合使用(一个盒子内有两个标题,可以使用组合)
		5.nav 	 导航栏
		6.article 独立的内容
		7.aside 辅助信息的内容
		8.section 区域
		9.figgure 描述图像或视频
		10.figcaption 描述图像或视频的标题部分
		11.datalist 选项列表(将所选中的内容筛选出来)
		12.details 文档细节,出现小三角,可以将下面内容收缩 open=以下内容是否要展示 
		13.summary 文档标题
		14.progress 定义进度条 min="定义最小值" max=定义最大值  value=“进度条走到N%”
		15.meter   定义度量范围(样式不一样)(属性值同进度条这块一样)
		16.time 定义日期 
		17.mark 带有标记
	</head>
	<body>
		<header>页眉(最顶部的盒子)</header>
		<footer>页脚(最底部的盒子)</footer>
		<main>主体(中间的盒子)</main>
		<hgroup>标题组合使用(一个盒子内有两个标题,可以使用组合)</hgroup>
		<nav>导航栏</nav>
		
		<main>
			<article>独立的内容(如:主体盒子下每一块盒子)
				<section>每一块盒子的的一小部分的区域
				<figure>
					视频/音频
					<figcaption>标题</figcaption>
				</figure>
				</section>
			</article>
			<aside>辅助信息内容(左侧/右侧的信息内容)</aside>
		</main>
		
		<article>
		
				<input type="text" list="elems" />
			<datalist id="elems">
				<option >1</option>
				<option >2</option>
				<option >3</option>
			</datalist>
			<details open>
				<summary>HTML</summary>
				<summary>超文本标记语言</summary>
			</details>
			
		</article>
		<section>
		<progress min="0" max="100" value="50"></progress>
		<meter min="0" max="100" value="80"></meter>
		<time title="2-14-00:00">日期</time>
		<mark>带有标记的属性</mark>
		</section>
	</body>
</html>

  

posted on 2022-02-11 19:14  爱前端的小魏  阅读(29)  评论(0编辑  收藏  举报

导航