1：语义化标签
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html5新增语义化布局标签</title> </head> <body> <header role="header">页眉</header> <footer>页脚</footer> <nav>导航</nav> <main>主体</main> <article>文档</article> <aside>边栏</aside> <section>区块</section> <div>自定义区块</div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2：简单后台登录页面
A：主页面
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color:#efefef;
}
/*头部的样式*/
li{
list-style-type: none;
}
a{
color:green;
text-decoration-line: none;
}
a:hover{
color:brown;
text-decoration-line: underline ;
}
header{
width:100%;
background:linear-gradient(to top,lightseagreen,#efefef);
border-bottom: 1px solid gray;
overflow: hidden;
height:60px;
}
header div{
width:1200px;
margin: auto;
}
header div h1{
float:left;
font-weight: lighter;
line-height: 60px;
margin-left: 20px;
}
header div nav{
float:right;
margin-right: 20px;
}
header div nav ul li{
float: left;
line-height: 60px;
padding-left: 20px;
}
/*主体的样式, 使用的圣杯布局*/
main{
width:1000px;
height: 800px;
margin: 0 auto;
/*将右侧菜单的区域通过padding挤出来*/
padding-left: 200px;
overflow: hidden;/*这里让父容器可以保住子区块*/
/*background:lightcoral;*/
}
/*右侧区域*/
main article{
float:left;
width: 100%;
min-height: 100%;
/*background-color: lightcyan;*/
}
main article iframe{
min-width:100%;
min-height: 650px;
margin:auto;
border:none;
/*background-color:lightsalmon ;*/
}
main article footer p{
text-align: center;
}
/*左侧菜单*/
main aside{
float:left;
/*background-color: #ff3578;*/
width: 200px;
min-height: 100%;
margin-left:-100%;
position: relative;
left:-200px;
text-align: center;
background:linear-gradient(to left,lightseagreen,#efefef);
border-right: 1px solid #c6ff21 ;
}
main aside nav {
padding:20px 30px;
}
main aside nav li{
line-height: 2rem;
height: 2rem;
}
</style>
</head>
<body>
<header role="header">
<div><!-- 这里的div防止内部的padding撑开父级元素的盒子-->
<h1>后台管理系统</h1>
<nav>
<ul>
<li>欢迎管理员: <strong>admin</strong></li>
<li><a href="">修改密码</a></li>
<li><a href="">退出登录</a></li>
</ul>
</nav>
</div>
</header>
<!--主体使用圣杯布局来实现-->
<main role="main">
<!--主体的内嵌框架-->
<article role="content">
<iframe src="welcome.html" name="main"></iframe>
<footer role="copyright">
<p><a href="http://www.baidu.com">xiaoming</a>©版权所有</p>
</footer>
</article>
<!--左侧的导航-->
<aside role="menu">
<nav>
<ul>
<li><a href="setting.html" target="main">系统设置</a></li>
<li><a href="user.html" target="main">用户管理</a></li>
<li><a href="article.html" target="main">文档管理</a></li>
<li><a href="category.html" target="main">分类管理</a></li>
<li><a href="product.html" target="main">产品管理</a></li>
</ul>
</nav>
</aside>
</main>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
B.重要的页面，类似布局
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分类管理</title>
</head>
<body>
<table>
<caption>分类管理</caption>
<tr>
<td>ID</td>
<td>分类名称</td>
<td>层级</td>
<td>是否启用</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>手机</td>
<td>顶级</td>
<td>启用</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>笔记本电脑</td>
<td>顶级</td>
<td class="disable">禁用</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>打印机</td>
<td>顶级</td>
<td>启用</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>显示器</td>
<td>顶级</td>
<td>禁用</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
</table>
<!--分页-->
<p>
<a href="">首页</a>
<a href="" class="active">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="" class="more">...</a>
<a href="">尾页</a>
</p>
</body>
</html>
<style>
table, th, td {
border: 1px solid black;
}
table {
width: 650px;
margin: auto;
border-collapse: collapse;
text-align: center;
}
td {
padding: 10px;
}
a {
text-decoration-line: none;
color: green;
}
a:hover {
color: brown;
text-decoration-line: underline;
}
tr:first-child {
margin-top: 20px;
background-color: lightblue;
}
table caption {
font-size: 1.5rem;
font-weight: bolder;
margin-bottom: 20px;
}
p {
text-align: center;
}
/*首页样式*/
p a:first-child {
width: 56px;
}
p a:last-child {
width: 56px;
}
p a {
display: inline-block;
width: 28px;
height: 24px;
border: 1px solid green;
margin-left:2px;
line-height: 24px;
}
/*当前页样式*/
.active {
background-color: green;
color: white;
}
.more {
border: none;
}
.disable {
color: red;
}
</style>运行实例 »
点击 "运行实例" 按钮查看在线实例
3：HTML5标签的意义
