Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 20180820HTML5新增语义标签和后台管理实战练习
Blogger Information
Blog 19
fans 0
comment 2
visits 18495
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
20180820HTML5新增语义标签和后台管理实战练习
乂汁的blog
Original
764 people have browsed it

一、概述

  这节课讲述了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部分就基本结束了，针对以上问题有待加强学习。

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post