search

博客列表 >20180820HTML5新增语义标签和后台管理实战练习

20180820HTML5新增语义标签和后台管理实战练习

乂汁的blog
乂汁的blog原创
2018年08月22日 18:32:01763浏览

一、概述

  这节课讲述了HTML5新增的语义标签，比如<header><footer><nav><aside><main><article>等。后用HTML5来做了后台管理一个小系统，跟着手打了一遍暴露了很多问题。

二、作业

  1. article.html


    实例

    <!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><img src="./static/img/dldl.jpg" alt="" width="50"></td>
        <td><a href="">斗罗大陆2：绝世唐门漫画单行本25（漫画版）</a></td>
        <td>漫画</td>
        <td><a href="">编辑</a> | <a href="">删除</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td><img src="./static/img/songci.jpg" alt="" width="50"></td>
        <td><a href="">最美宋词：宋词的玲珑六面</a></td>
        <td>小说</td>
        <td><a href="">编辑</a> | <a href="">删除</a></td>
    </tr>
    <tr>
        <td>3</td>
        <td><img src="./static/img/mz.jpg" alt="" width="50"></td>
        <td><a href="">4册正版原著大字本四大名着水浒传三国演义红楼梦西游记</a></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: 780px;
        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;
    }

</style>

    运行实例 »

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

    结果图：

    hw1.png


  2. category.html


    实例

    <!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>

    运行实例 »

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

    结果图：

    hw2.png


  3. product.html

    实例

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Product</title>
</head>
<body>
<table>
    <caption>产品管理</caption>
    <tr>
        <td>ID</td>
        <td>图片</td>
        <td>型号</td>
        <td>价格</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>1</td>
        <td><img src="./static/img/dldl.jpg" alt="" width="50"></td>
        <td>斗罗大陆</td>
        <td>88</td>
        <td><a href="">编辑</a> | <a href="">删除</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td><img src="./static/img/songci.jpg" alt="" width="50"></td>
        <td>最美宋词</td>
        <td>88</td>
        <td><a href="">编辑</a> | <a href="">删除</a></td>
    </tr>
    <tr>
        <td>3</td>
        <td><img src="./static/img/mz.jpg" alt="" width="50"></td>
        <td>四大名著</td>
        <td>500</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;
    }

</style>

    运行实例 »

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

    结果图：

    hw3.png

  4. 手写

    hw4.jpg

三、总结

    index,html login.html user.html welcome.html手打下来了一遍，中间出现了很多的问题：

  1. 圣杯布局还是不理解很透彻，还需要研究

  2. 拼写错误严重，比如padding写成了padiing，table写成了tabel，页面显示和老师不一样，查找很久才可以找出问题所在。在编辑器中可以通过字体颜色、字体来识别自己的问题所在。

  3. 所学知识不能融会贯通，比如之前课程学习的px、em、rem具体放在浏览器里面到底是多大，我想要的是100px还是150px，认知不准确。

  4. HTML部分就基本结束了，针对以上问题有待加强学习。

上一条：php基础 关于php变量的那些事下一条：PHP工作原理以及环境搭建和变量的定义规则——2018年8月22日17:49:56
HTML5新增语义标签和后台管理实战练习
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多