用html5新布局元素代替div元素布局页面

最新推荐文章于 2024-04-22 10:57:48 发布

yin_991

最新推荐文章于 2024-04-22 10:57:48 发布

阅读量1.8w

点赞数 19

文章标签： html5

本文链接：https://blog.csdn.net/yin_991/article/details/78369441

版权

html5新布局元素：

1. header 用于设置一个页面的标题部分，通常会包含标题、logo、导航

3. article元素用于定义一个独立的内容区块，比如一篇文章、一篇博客、一个帖子、论坛的一段用户评论，一篇新闻消息等

article元素内可以嵌套其他元素，它可以有自己的头、尾部、主题内容。使用时要特别注意内容的独立性，一般对独立完整的内容才使用article元素，如果一段内容的话应该使用section元素

4. section元素用来定义文章中的章节，用来定义文档中特定的区块，可视为一个区域分组元素，用来给页面上的内容分块。

5. aside元素通常用来设置侧边栏，用于定义元素之外的内容，前提是这些内容与article元素内的内容相关，同时也可作为article内部元素使用，作为主要内容的附属信息，比如与主内容有关的参考资料，名词解释

6. nav用来定义导航栏、目录、超链接，并非所有超链接都放在nav中，通常只把一个文档中的主导航栏放在nav中，在文章页面nav还可以用来给文字做一个目录的超链接

与div布局比较，使用header、footer、aside、section这些新布局元素可以简化代码，要用css样式的时候不用写多几个id来区分，而是直接用元素名称来定义样式，相比于div布局，新布局元素更有利于搜索引擎的检索，减少属性的使用，从而代码看起来就更加简洁。比如如下的div布局代码及其效果可以用新布局元素来代替：

div布局代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用新布局元素代替div元素布局</title>
	<style>
		#div1{
			width: 100%;height: 640px;
		}
		#div2{
			height: 20%;background-color: #303040;
		}
		#div3{
			width: 30%;height: 70%;float: left;background-color: #403030;
		}
		#div4{
			width: 70%;height: 70%;float: left;background-color: #305070;
		}
		#div5{
			height: 10%;clear: left;background-color: #705030;
		}
	</style>
</head>
<body>
	<div id="div1">
		<div id="div2">
			<p>这是头部</p>
		</div>
		<div id="div3">
			<p>这是侧边栏</p>
		</div>
		<div id="div4">
			<p>这是主内</p>
		</div>
		<div id="div5">
			<p>这是底部</p>
		</div>
	</div>
</body>
</html>

效果：

新布局元素代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新布局元素</title>
	<style>
		body{
			height: 640px;
		}
		header{
			height: 20%;background-color: #303040;
		}
		aside{
			width: 30%;height: 70%;float: left;background-color: #403030;
		}
		section{
			width: 70%;height: 70%;float: left;background-color: #305070;
		}
		footer{
			height: 10%;clear: left;background-color: #705030;
		}
	</style>
</head>
<body>
	<header>
		这是头部
	</header>
	<aside>
		这是侧边栏
	</aside>
	<section>
		这是主内
	</section>
	<footer>
		这是底部
	</footer>
</body>
</html>

效果与div布局的一样：

把nav元素写进头部，对列表、超链接样式进行设置：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新布局元素</title>
	<style>
		body{
			height: 640px;
		}
		header{
			height: 20%;background-color: #303040;
		}
		aside{
			width: 30%;height: 70%;float: left;background-color: #403030;
		}
		section{
			width: 70%;height: 70%;float: left;background-color: #305070;
		}
		footer{
			height: 10%;clear: left;background-color: #705030;
		}
		nav{
			width: 100%;height: 70%;background: #403020;text-align: center;padding-top: 25px;
		}
		li{
			display: inline;
		}
		a{
			text-decoration: none;color: #008080;
		}
	</style>
</head>
<body>
	<header>
		header
		<nav>
			<ul>
				<li>
					<a href="http://act.mogujie.com/dongridapeizhinanpc?acm=3.mce.1_10_1evv0.19221.0.5jJjoqzajOyN6.m_347210-pos_5-mf_15261_643574-idx_17-mfs_21&ptp=1._mf1_1239_15261.0.0.7IATgOz">首页</a>
				</li>
				
				<li>
					<a href="http://act.mogujie.com/mogunew17pcnz?acm=3.mce.1_10_1evuq.19221.0.5jJjoqzajOyN6.m_347205-pos_0-mf_15261_643574-idx_25-mfs_33&ptp=1._mf1_1239_15261.0.0.7IATgOz">电影</a>
				</li>
		
				<li>
					<a href="http://act.mogujie.com/sports11?acm=3.mce.1_10_1evuy.19221.0.5jJjoqzajOyN6.m_347209-pos_4-mf_15261_643574-idx_40-mfs_45&ptp=1._mf1_1239_15261.0.0.7IATgOz">音乐</a>
				</li>
				
				<li>
					<a href="http://act.mogujie.com/qiudongdapeigoupc?acm=3.mce.1_10_1evuu.19221.0.5jJjoqzajOyN6.m_347207-pos_2-mf_15261_643574-idx_38-mfs_45&ptp=1._mf1_1239_15261.0.0.7IATgOz">小说</a>
				</li>
			</ul>
		</nav>
	</header>
	<aside>
		这是侧边栏
	</aside>
	<section>
		这是主内
	</section>
	<footer>
		这是底部
	</footer>
</body>
</html>

效果如下：

7. hgroup通常放在header里，作用是方便为标题使用样式，减少使用id的次数

8. address元素通常用来说明邮件信息、地址联系方式等

9. figure元素是一个媒体组合元素，也就是对其他的媒体元素进行组合，比如图像、图表等；figcaptio元素用来对figure元素定义标题

<section>
		<figure>
			<img src="时尚用品.jpg" alt="出错，无法打开图片">  
			<img src="桌面物件.jpg" alt="出错，无法打开图片">
		</figure>
	</section>
	<footer>
		<address>
			e-mail:yin_991@163.com     地址:**********     联系方式：***********
		</address>
	</footer>

<style>
hgroup{
			color: #008080;
		}
		address{
			padding-top: 25px;text-align: center;color: #008080;
		}
		img{
			width: 400px;height: 400px; 
		}

</style>

效果：