HTML5的结构元素

举报
yd_221104950 发表于 2020/12/03 23:35:54 2020/12/03
【摘要】 HTML5定义了一组新的语义化标记来描述元素的内容,如article、header、section、footer、aside等标签,明确表示网页的结构,这样搜索引擎就能轻易抓到网页的重点。 元素名称说明header标记头部区域的内容footer标记脚部区域的内容section独立的文章内容aside相关内容或者引文nav导航类辅助内容 <!DOCTYPE html> ...

HTML5定义了一组新的语义化标记来描述元素的内容,如article、header、section、footer、aside等标签,明确表示网页的结构,这样搜索引擎就能轻易抓到网页的重点。

元素名称 说明
header 标记头部区域的内容
footer 标记脚部区域的内容
section 独立的文章内容
aside 相关内容或者引文
nav 导航类辅助内容
<!DOCTYPE html>
<meta charset="UTF-8"/>
<title>HTML5结构元素</title>
<style>
body{
	background-color:#cccccc;
	font-family:Geneva,Arial,Helvetica,sans-serif;	
	margin:0px auto;
	max-width:900px;
	border:solid;
	border-color:#FFFFFF;
	}
header{
	background-color:#F47D31;
	display:block;
	color:#FFFFFF;
	text-align:center;
	}
header h2{margin:0px;}
h1{
	font-size:72px;
	margin:0px;
}
h2{
	font-size:24px;
	margin:0px;
	text-align:center;
	color:#F47D31;
}
h3{
	font-size:18px;
	margin:0px;
	text-align:center;
	color:#F47D31;
}
h4{
	color:#F47D31;
	background-color:#FFFFFF;
	-webkit-box-shadow:2px 2px 20px #888;
	-webkit-transform:rotate(-45deg);
	-moz-box-shadow:2px 2px 20px #888;
	-moz-transform:rotate(-45deg);
	position:absolute;
	padding:0px 150px;	
	top:50px;
	left:-120px;
	text-align:center;
}
nav{
	display:block;
	width:25%;
	float:left;
}
nav a:link,nav a:visited{
	display:block;
	border-bottom:3px solid #fff;
	padding:10px;
	text-decoration:none;
	font-weight:bold;
	margin:5px;
	} nav h3{
	margin:15px;
	color:white;
}
#container{
	background-color:#888;

	}
section{
	display:block;
	width:50%;
	float:left;
}
article{
	background-color:#eee;
	display:block;
	margin:10px;
	padding:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	-webkit-box-shadow:2px 2px 20px #888;
	-webkit-transform:rotate(-10deg);
	-moz-box-shadow:2px 2px 20px #888;
	-mox-transform:rotate(-10deg);
}
article header{
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	padding:5px;
}
article footer{
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	padding:5px;
	}
article h1{
	font-size:18px;
}
aside{
	display:block;
	width:25%;
	float:left;
}
aside h3{
	margin:15px;
	color:white;
}
aside p{
	margin:15px;
	color:white;
	font-weight:bold;
	font-style:italic;
	}
footer{
	clear:both;
	display:block;
	background-color:#F47D31;
	color:#FFFFFF;
	text-align:center;
	padding:15px;
}
footer h2{
	font-size:14px;
	color:white;
}
a{
	color:#F47D31;
}
a:hover{
	text-decoration:underline;
}

</style>

<header>
	<h1>网页标题</h1>
	<h2>次级标题</h2>
	<h4>提示信息</h4>
</header>
<div id="container">
	<nav>
		<h3>导航</h3>
		<a href="#">链接1</a><a href="#">链接2</a><a href="#">链接3</a>
	</nav>
	<section>
		<article> <header> <h1>文章标题</h1> </header> <p>文章内容...... <footer> <h2>文章注脚</h2> </footer>
		</article>
	</section>
	<aside>
		<h3>相关内容</h3>
		<p>相关辅助信息或者服务......
	</aside>
	<footer>
		<h2>页脚</h2>
	</footer>
</div> 
  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170

运行效果:
在这里插入图片描述
谢谢阅读!

文章来源: blog.csdn.net,作者:WongKyunban,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/weixin_40763897/article/details/89319654

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。