作业1：HTML5 新增语义化布局标签
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html5新增的语义化标签</title> <meta name="description" content="php 教程 视频"> <meta name="keywords" content="免费PHP PHP社区 PHP培*训"> <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="shortcut icon" type="images/x-icon" href="icon.png"> </head> <body> <!--用新的HTML5标签布局--> <header role="top"> <!--代表网页或section的页眉，通常包含h1-h6元素--> <h1>this is header</h1> <h3>这是小头</h3> </header> <nav> <!--导航链接容器--> <ul> <li><a href="#">搜狐</a></li> <li><a href="">新浪</a></li> <li><a href="">阿里巴巴</a></li> <li><a href="">PHP中文网</a></li> </ul> </nav> <main><!--主题内容部分，一个web页面只有一个，不能被其他表现（body除外）包裹--> <article role="article"> <!--见下文p--> <h1>秋天的元素</h1> <section> <p>秋雨连绵</p> <p>台风肆虐</p> </section> <section> <!--section一般有两个作用，1.定义文档中的节，和div类似。2.定义文章，这时一般带有标题--> <p>代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。 例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。 一般来说，article会有标题部分（通常包含在header内）， 有时也会包含footer。 </p> </section> </article> <aside> <!--定义页面的侧边栏内容--> <ul> <li>用户管理</li> <li>文章管理</li> <li>产品管理</li> </ul> </aside> </main> <footer> <!--定义了页脚，不只是页面的最底部，也可以在文档中，在底部一部是版权信息，站点信息--> <address>合肥.安徽.中国</address> <span>Copyright</span>©<span>2018</span> </footer> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手写截图:
作业2：用户管理页面
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户设置</title>
<style>
table,th,td{/*为毛没有tr 也可以，tr是row行*/
border:1px solid;
border-collapse: collapse;
padding: 15px;
}
h2{
text-align: center;
}
table{
width: 650px;
text-align: center;
margin: auto;
}
table tr:first-child{
margin-top: 20px;
background-color: bisque;/*给th上个色*/
}
p{
text-align: center;
}
a{
text-decoration-line: none; /*该属性控制线条的位置，本语句是清除a的下划线*/
}
a:hover{
color: brown;
text-decoration-line: underline;/*在下面添加下划线*/
}
</style>
</head>
<body>
<h2>用户管理</h2>
<form action=""method="get">
<table>
<tr>
<th>ID</th>
<th>用户名</th>
<th>邮箱</th>
<th>角色</th>
<th>管理</th>
</tr>
<tr>
<td>1</td>
<td>admin</td>
<td>admin@php.cn</td>
<td>superman</td>
<td><a href="">编辑</a></td>
</tr>
<tr>
<td>2</td>
<td>peter</td>
<td>peter@php.cn</td>
<td>teacher</td>
<td><a href="">编辑</a> | <a href="">删除 </td>
</tr>
<tr>
<td>3</td>
<td>小师太</td>
<td>pure.girl@php.cn</td>
<td>teacher</td>
<td><a href="">编辑</a> | <a href="">删除> </td>
</tr>
<tr>
<td>4</td>
<td>猪哥</td>
<td>pig@php.cn</td>
<td>boss</td>
<td><a href="">编辑</a> | <a href="">删除 </td>
</tr>
</table>
<p> <!--href 可以跳转到本页面标记位置-->
<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>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
本地运行效果图：
作业3：文档管理页面实现
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table,th,td{
border: 1px solid gray;
border-collapse: collapse;
padding: 10px;
}
table{
margin: auto;
text-align: center;
width: 700px;
}
caption{
font-size: 30px;
font-weight: bolder;
margin-bottom: 20px;
}
tr:first-child{
background-color: lightgreen;
}
p{
text-align: center;
}
p a{
display: inline-block;
width: 28px;
height: 24px;
border:1px solid green;
margin-left: 2px;
line-height: 24px;
border-radius: 50%;
box-shadow: 3px 3px gray;
}
p a:first-child{
width: 50px;
border-radius: 5px;
}
p a:last-child{
width: 80px;
border-radius: 5px;
}
a{
text-decoration-line: none;
color: green;
}
a:hover{
color: brown;
text-decoration-line: underline;
}
</style>
</head>
<body>
<table>
<caption>文章管理</caption>
<tr>
<th>编号</th>
<th>作者</th>
<th>标题</th>
<th>所属分类</th>
<th>操作</th>
</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>时论</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="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">…</a>
<a href="">最后一页</a>
</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
本地运行效果图：
作业4：分类管理页面实现
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分类管理</title>
<style>
table,th,td{
border: 1px solid gray;
border-collapse: collapse;
padding: 10px;
}
table{
margin: auto;
text-align: center;
width: 700px;
}
caption{
font-size: 30px;
font-weight: bolder;
margin-bottom: 20px;
}
tr:first-child{
background-color: lightblue;
}
p{
text-align: center;
}
p a{
display: inline-block;
width: 28px;
height: 24px;
border:1px solid green;
margin-left: 2px;
line-height: 24px;
border-radius: 50%;
box-shadow: 3px 3px gray;
}
p a:first-child{
width: 50px;
border-radius: 5px;
}
p a:last-child{
width: 80px;
border-radius: 5px;
}
a{
text-decoration-line: none;
color: green;
}
a:hover{
background-color: black;
color: white;
text-decoration-line: underline;
}
#disable{
font-weight: bolder;
color: red;
}
</style>
</head>
<body>
<table>
<caption>分类管理</caption>
<tr>
<th>编号</th>
<th>类别</th>
<th>层级</th>
<th>是否启用</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>手机架</td>
<td>3级</td>
<td>生*产</td>
<td><a href="#">编辑</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>笔记本电脑</td>
<td>1级</td>
<td>预备</td>
<td><a href="#">编辑</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>打印机</td>
<td>2级</td>
<td>启用</td>
<td><a href="#">编辑</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>显示器</td>
<td>顶级</td>
<td id="disable">禁用</td>
<td><a href="#">编辑</a>|<a href="#">删除</a></td>
</tr>
</table>
<p>
<a href="">首页</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">…</a>
<a href="">最后一页</a>
</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
本地运行效果图：
作业5：产品管理页面实现
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>产品管理</title>
<style>
table,th,td{
border: 1px solid gray;
border-collapse: collapse;
padding: 10px;
}
table{
margin: auto;
text-align: center;
width: 700px;
}
caption{
font-size: 30px;
font-weight: bolder;
margin-bottom: 20px;
}
tr:first-child{
background-color: lightgreen;
}
table tr td img{
width: 80px;
height: 60px;
border-radius: 10px;
box-shadow: 2px 2px gray;
}
p{
text-align: center;
}
p a{
display: inline-block;
width: 28px;
height: 24px;
border:1px solid green;
margin-left: 2px;
line-height: 24px;
border-radius: 50%;
box-shadow: 3px 3px gray;
}
p a:first-child{
width: 50px;
border-radius: 5px;
}
p a:last-child{
width: 80px;
border-radius: 5px;
}
a{
text-decoration-line: none;
color: green;
}
a:hover{
color: brown;
text-decoration-line: underline;
}
</style>
</head>
<body>
<table>
<caption>产品管理</caption>
<tr>
<th>编号</th>
<th>图片</th>
<th>型号</th>
<th>价格</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td><img src="static/images/iPhonex.png" alt="iphonex"></td>
<td>iPhoneX</td>
<td>7888</td>
<td><a href="#">编辑</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>2</td>
<td><img src="static/images/p20.png" alt="HuaweiP20 Pro"></td>
<td>P20Pro</td>
<td>8888</td>
<td><a href="#">编辑</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>3</td>
<td><img src="static/images/mi8.png" alt="mi8"></td>
<td>小米8</td>
<td>5999</td>
<td><a href="#">编辑</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>4</td>
<td><img src="static/images/R17.png" alt="R17"></td>
<td>R17兰博基尼</td>
<td>10888</td>
<td><a href="#">编辑</a>|<a href="#">删除</a></td>
</tr>
</table>
<p>
<a href="">首页</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">…</a>
<a href="">最后一页</a>
</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
本地效果图：
总结：
1：HTML5 新增的语义化标签，对于布局带来了便利，对搜索引擎更友好，利于人工智能的分析
2：HTML 和CSS 学习告一段路，只有勤练习标签才不会忘记，才会孰能生巧
3：遇到的一个问题：价格栏的数字可以通过CSS直接转换成货币样式吗？？？
