作业一：手写html5新增语义化标签含义及用法
作业二：网站后台管理系统实战
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后台模板—首页</title>
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<header role="header">
<div>
<h1>南通税企通后台管理系统</h1>
<nav role="user">
<ul>
<li>欢迎回来:<strong>管理员</strong></li>
<li><a href="password_fixed.html" target="main">修改密码</a></li>
<li><a href="javascript:void(0);" onclick="logout()">退出登录</a></li>
</ul>
</nav>
</div>
</header>
<main role="main">
<article role="content">
<iframe src="welcome.html" name="main"></iframe>
</article>
<aside>
<nav role="option">
<ul>
<li><a href="file.html" target="main">文档管理</a></li>
<li><a href="product.html" target="main">产品管理</a></li>
<li><a href="train.html" target="main">培训预约</a></li>
<li><a href="user.html" target="main">用户管理</a></li>
<li><a href="system.html" target="main">系统设置</a></li>
</ul>
</nav>
</aside>
</main>
<footer role="copyright">
<dl>
<dd>
南通税企通©版权所有 <a href="">回到首页</a>
</dd>
</dl>
</footer>
</body>
</html>
<script>
function logout() {
if (window.confirm('是否退出?')) {
window.location.href = 'login.html';
} else {
return false;
}
}
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
小结：越语义化则越精简，布局全局化是越来越普遍的需求，不仅仅意味着效率的提升，更是将编程这个工种朝着智能化的方向在前行，一步步踏实的学习换来的不仅仅是熟能生巧，更有着对全局运算思考方式的不断变化的理解。