html语义化标签 例子,0820作业：HTML5新增语义化标签及实战总结

作业1：HTML5 新增语义化布局标签

实例

html>

html5新增的语义化标签

initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

this is header

这是小头

• 搜狐
• 新浪
• 阿里巴巴
• PHP中文网

秋天的元素

秋雨连绵

台风肆虐

代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。

例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。

一般来说，article会有标题部分(通常包含在header内)，

有时也会包含footer。

• 用户管理
• 文章管理
• 产品管理

合肥.安徽.中国

Copyright©2018

运行实例 »

点击 "运行实例" 按钮查看在线实例

手写截图:

作业2：用户管理页面

实例

html>

用户设置

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;/*在下面添加下划线*/

}

用户管理

ID	用户名	邮箱	角色	管理
1	admin	admin@php.cn	superman	编辑
2	peter	peter@php.cn	teacher	编辑 | 删除
3	小师太	pure.girl@php.cn	teacher	编辑 | 删除>
4	猪哥	pig@php.cn	boss	编辑 | 删除

首页

1

2

3

4

...

尾页

运行实例 »

点击 "运行实例" 按钮查看在线实例

本地运行效果图：

作业3：文档管理页面实现

实例

html>

Title

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;

}

文章管理

编号	作者	标题	所属分类	操作
1	梁实秋	《故宫边上的容么么》	游记	编辑|删除
2	梁启超	《少年说》	时论	编辑|删除
3	朱自清	《背影》	纪实散文	编辑|删除
4	徐秋雨	《文化苦旅》	散文	编辑|删除

首页

2

3

4

…

最后一页

运行实例 »

点击 "运行实例" 按钮查看在线实例

本地运行效果图：

作业4：分类管理页面实现

实例

html>

分类管理

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;

}

分类管理

编号	类别	层级	是否启用	操作
1	手机架	3级	生*产	编辑|删除
2	笔记本电脑	1级	预备	编辑|删除
3	打印机	2级	启用	编辑|删除
4	显示器	顶级	禁用	编辑|删除

首页

2

3

4

…

最后一页

运行实例 »

点击 "运行实例" 按钮查看在线实例

本地运行效果图：

作业5：产品管理页面实现

实例

html>

产品管理

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;

}

产品管理

编号	图片	型号	价格	操作
1		iPhoneX	7888	编辑|删除
2		P20Pro	8888	编辑|删除
3		小米8	5999	编辑|删除
4		R17兰博基尼	10888	编辑|删除

首页

2

3

4

…

最后一页

运行实例 »

点击 "运行实例" 按钮查看在线实例

本地效果图：

总结：

1：HTML5 新增的语义化标签，对于布局带来了便利，对搜索引擎更友好，利于人工智能的分析

2：HTML 和CSS 学习告一段路，只有勤练习标签才不会忘记，才会孰能生巧

3：遇到的一个问题：价格栏的数字可以通过CSS直接转换成货币样式吗？？？