h5新增的结构标签

最新推荐文章于 2023-10-11 12:03:29 发布

小青龙8085

最新推荐文章于 2023-10-11 12:03:29 发布

阅读量490

点赞数 1

分类专栏：寒假前端

本文链接：https://blog.csdn.net/lbs311709000127/article/details/104063293

版权

寒假前端专栏收录该内容

28 篇文章 2 订阅

订阅专栏

结构标签（块状元素）-----有意义的div

标签	描述
article	标记定义一篇文章
header	标记定义一个页面或一个区域的头部
nav	标记定义导航栏链接
section	标记定义一个区域
aside	标记定义内容部分的侧边栏
hgroup	标记定义一个区块中相关内容
figure	标记定义一组媒体内容
figcaption	标记定义figure元素的标题
footer	标记定义一个页面或一个区域的脚部
dialog	标记定义一个对话框或会话框

现在用这些新增的结构标签做了一个HTML5布局图；在做dialog这部分的时候发现它不会继承父元素（article）的宽和高，继承了浏览器的宽和高，并且自动加了个边框，为什么是白色的？文字是白色的。而且位置也脱离了article这个元素，跑到了body里面。

效果：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding: 0;
			}
			body,html{
				width: 100%;
				height:100%;
				background: darkred;
				text-align: center;
				font-size: 20px;
			}
			header{
				width: 90%;
				background: #fff;
				
				margin: 10px auto;
			}
			nav{
				border-top: 1px solid #666;
			}
			section{
				margin: 10px auto;
				background: #fff;
				overflow: hidden;
				width: 87.3%;
				color: #fff;
				padding: 20px;
			}
			.d{
				color: black;
				height:30px;
				line-height: 30px;
				width: 100%;
				text-align: center;
			}
			aside{
				float: left;
				width: 42%;
				height: 400px;
				background: black;	
				line-height: 400px;
				margin-right: 15px;
				margin-top: 10px;
			}
			article{
				float: left;			
				width: 53%;
				height: 400px;
				background: black;
				text-align: center;
				padding: 0 20px;
				margin-top: 10px;
			}
			hgroup{
				background: darkred;
				height: 80px;
				text-align: center;
			}
			p{
				background: darkred;
				height: 100px;
				margin-top: 10px;
				line-height: 100px;
			}
			dialog{
				background: darkred;
				width: 46.3%;
				height: 100px;
				margin-top: 10px;
				margin-left: 620px;
				color: #fff;
			}
			footer{
				margin: 0 auto;
				background: #fff;
				width: 90%;
				height: 50px;
				line-height: 50px;
				text-align: center;
			}
		</style>		
	</head>
	<body>
		Body
		<header>
			header
			<nav><!--导航栏-->
				nav
				<a></a>
				<a></a>
				<a></a>
			</nav>
		</header>
		<section>
			<div class="d">section</div>
			<aside>
				侧边栏aside
			</aside>
			<article>
				article
				<hgroup>
					<h1>hgroup1:可爱的老鼠</h1>
					<h2>hgroup2:作者：2020</h2>
				</hgroup>
				<p>文章段落</p>
				<dialog open>
					dialog：
					<dt>作者评论</dt>
					<dd>读着评论</dd>
				</dialog>
			</article>
		</section>
		<footer>footer</footer>
	</body>
</html>

小青龙8085

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
h5新增的结构标签

结构标签（块状元素）-----有意义的div标签描述 article 标记定义一篇文章 header 标记定义一个页面或一个区域的头部 nav 标记定义导航栏链接 section 标记定义一个区域 aside 标记定义内容部分的侧边栏 hgroup 标记定义一个区块中相关内容 figure 标记定义一组媒体内容 ...
复制链接

扫一扫