html5语义化布局元素/布局实战后台—2018年8月21日18时14分 - HTML/CSS 作业 - php中文网博客

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程

首页 > 博客列表 > html5语义化布局元素/布局实战后台—2018年8月21日18时14分

博主信息

博文 21

粉丝 0

评论 0

访问量 22261

专题推荐

更多>

相关推荐

热门教程

更多>

相关教程

热门推荐

最新课程

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

html5语义化布局元素/布局实战后台—2018年8月21日18时14分

耗子的博客

原创

688人浏览过

本讲学习了HTML5的语义化标签，以下是我的代码

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公司网站后台管理系统</title>
    <!--<link rel="stylesheet" href="./static/css/style.css">-->
    <style>
        body{
            background-color: #E3EBF2;

        }
        body,h3{
            margin: 0;
            padding: 0;
        }

        li{
            list-style: none;
        }
        .user_image{
            width:30px;
            height:30px;
            border-radius:50%;

        }
        a{
            text-decoration-line: none;/*去掉下划线*/
            color: #C3E1F9;
        }
        a:hover{
            color: #fff;
        }

        header{
            background-color: rgb(33,150,243);
            width: 100%;
            height: 60px;
            overflow: hidden;/*内容会被修剪，并且其余内容是不可见的*/
            /*border-bottom: 1px solid gray; !*边框设置*!*/
        }
        header div{             /*设置内容区*/
            width: 1200px;
            margin: auto;
        }
        .logo{
            float: left;
            margin-left: 0px;
            line-height: 60px;
            height: 60px;
        } 
        header h3{
            float: left;
            margin-left: 20px;
            line-height: 60px;
            font-weight: normal;
            line-height: 60px;
            color: white;

        }
        header nav{
            float: right;
            margin-right: 20px;
            /*line-height: 60px;*/
        }
        header nav ul li{
            float: left;
            padding-left: 30px;
            line-height: 60px;

        }


        main{
            width: 1000px;
            height: 700px;
            margin: 0 auto;
            padding-left: 200px;
            overflow: hidden;
        }
        main article{
            float: left;
            width: 100%;
            min-height: 100%;
        }
        main aside{
            float: left;
            background:linear-gradient(to bottom, rgb(33, 150, 243), #367dba);
            /*background-color: #16619D;*/
            /*border-right: 1px solid gray;*/
            width: 200px;
            min-height: 100%;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }

        iframe{
            min-width: 960px;
            min-height: 645px;
            margin: auto;
            border: none;
            background-color: #FCFEFF;
            margin: 10px 10px 0 10px;
            padding:10px 10px 0 10px;
        }
        aside nav ul li a{
            margin-top: 10px;
            display: block;
            width: 100%;
            /*background-color: #6E8297;*/
            line-height: 2rem;
        }

        footer{
            background-color: #FCFEFF;
            height: 30px;
            margin: 0 10px;
            padding: 0 10px;
        }
        footer p{
            text-align: center;
            font-family: 微软雅黑;
            font-size: 14px;
            line-height: 30px;
            margin-top: 2px;
            padding: 0;
            
        }
        footer p a{
            color: #000;
            font-size: 14px;
            /*background-color: #367dba;*/
            font-family: 微软雅黑;
        }
        footer p a:hover{
            color: red;
            font-size: 14px;
            font-family: 微软雅黑;
        }

    </style>
</head>
<body>
<header role="header">
    <div>
        <img src="http://www.php.cn/static/images/logo.png" class="logo" alt="PHP中文网">
        <h3>后台管理系统</h3>
        <nav role="user">
            <ul>

                <li><img src="https://img.php.cn/upload/avatar/000/001/120/5ad4492ab6d99770.jpg"  class="user_image" alt=""></li>
                <li style="color: #fff;">欢迎您:<strong>朱老师</strong></li>
                <li><a href="modify_pass.html" target="main">修改密码</a></li>
                <li><a href="http://www.php.cn" target="_blank">技术支持</a></li>
                <li><a href="welcome.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>
        <footer role="footer">
            <p><a href="http://www.php.cn">PHP中文网</a>©版权所有,<a href="http://www.php.cn">PHP中文网</a>提供技术支持</p>
        </footer>
    </article>
    <aside>
        <nav role="option">
            <ul>
                <li><a href="setting.html" target="main">系统设置</a></li>
                <li><a href="user.html" target="main">用户管理</a></li>
                <li><a href="article.html" target="main">文档管理</a></li>
                <li><a href="category.html" target="main">分类管理</a></li>
                <li><a href="product.html" target="main">产品管理</a></li>
                <li><a href="news.html" target="main">新闻管理</a></li>
                <li><a href="down.html" target="main">下载管理</a></li>
                <li><a href="evaluate.html" target="main">评论管理</a></li>
                <li><a href="company.html" target="main">企业信息</a></li>
            </ul>
        </nav>
    </aside>
</main>
</body>
</html>

<script>
    function logout() {
        if (window.confirm('是否退出?')) {
            window.location.href = 'login.html';
        } else {
            return false;
        }
    }
</script>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>系统后台登陆</title>
    <style>
        body{
            padding: 0;
            margin: 0;
            background: #fff;
        /*,#2DCCC4);*/
            /*background-color: red;*/
        }

        table{

            width: 600px;
            height: 300px;
            margin: auto;
            margin-top:200px;
            background:linear-gradient(to top,#2DCCC4,#2196F3);
            border-radius:3px;
            /*box-shadow:2px 2px 2px #fff;*/
        }
        table td:first-child{
            text-align: center;
            margin: 10px;
        }
        p{

            font-size: 1.5rem;
            color: #fff;
        }

        input[type]{
            width: 200px;
            height: 30px;
            border: 1px solid white;
            border-radius: 2px;
            padding-left: 15px;
        }
        caption{
            font-size: 1.5rem;
            margin-top:200px;
            margin-bottom: 10px;
            font-family: 微软雅黑;

        }

        table tr:last-child td:last-child{
            text-align: center;
        }

        input[type="submit"]{
            width: 217px;
            height: 36px;
            background-color: #2196F3;
            border:none;
            border-radius: 2px;
            color: #ffffff;
            font-size:16px;
        }
        input[type="submit"]:hover{
            width: 217px;
            height: 36px;
            background-color: #367dba;

            border-radius: 2px;
        }

    </style>
</head>
<body>

<form action="" method="post">
<table>
    <!--<caption>用户登录</caption>-->
    <ul>
        <tr>
            <td><p>企业网站后台登录</p></td>
        </tr>
        <tr>
            <td>
                <!--<lable>用户:</lable>-->
            <input type="text" name="user" placeholder="用户名" required>
            </td>
        </tr>

        <tr>
            <td>
            <!--<lable>密码:</lable>-->
            <input type="password" name="password" placeholder="密码" required>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" name="submit" value="登  录" onclick="alert('提交成功');location.href='index.html'">
            </td>
        </tr>

    </ul>
</table>
</form>

</body>
</html>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分类管理</title>
    <style>
        table, th, td {
            border: 1px solid black;
        }
        h2{
            text-align: center;
            padding: 0;
            margin: 0;
        }
        table caption {
            font-size: 1.5rem;
            font-weight: bolder;
            margin-bottom:5px;
        }

        table {
            width: 100%;
            margin: auto;
            border-collapse: collapse;
            text-align: center;
        }

        table{

            border-collapse: collapse;
        }

        td {
            padding: 10px;
            font-size: 14px;
            font-family: 微软雅黑;
        }
        a {
            text-decoration-line: none;
            color: #2196F3;
        }

        a:hover {
            color: red;
            text-decoration-line: underline;
        }

        tr:first-child {
            margin-top: 20px;
            background-color: #2196F3;
            color: #fff;
            font-weight: bold;
            font-size: 50px;
        }


        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 #2196F3;
            margin-left:2px;
            line-height: 24px;
            font-family: 微软雅黑;
            font-size: 14px;

        }

        /*当前页样式*/
        .active {
            background-color: #2196F3;
            color: white;
        }

        .more {
            border: none;
        }

    </style>
</head>
<body>
<!--<h2>分类管理</h2>-->
<form action="" method="post">
    <table>
        <caption>分类管理</caption>

        <tr>
            <td>序号</td>
            <td>方向</td>
            <td>分类</td>
            <td>类型</td>
            <td>难度</td>
            <td>维护</td>
        </tr>
        <tr>
            <td>1</td>
            <td>HTML/CSS</td>
            <td>HTML</td>
            <td>图文</td>
            <td>初级</td>
            <td><a href="">编辑</a> | <a href="">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>HTML/CSS</td>
            <td>HTML</td>
            <td>图文</td>
            <td>中级</td>
            <td><a href="">编辑</a> | <a href="">删除</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>HTML/CSS</td>
            <td>HTML</td>
            <td>图文</td>
            <td>高级</td>
            <td><a href="">编辑</a> | <a href="">删除</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td>HTML/CSS</td>
            <td>CSS</td>
            <td>图文</td>
            <td>初级</td>
            <td><a href="">编辑</a> | <a href="">删除</a></td>
        </tr>
        <tr>
            <td>5</td>
            <td>HTML/CSS</td>
            <td>CSS</td>
            <td>图文</td>
            <td>中级</td>
            <td><a href="">编辑</a> | <a href="">删除</a></td>
        </tr>
        <tr>
            <td>6</td>
            <td>HTML/CSS</td>
            <td>CSS</td>
            <td>图文</td>
            <td>高级</td>
            <td><a href="">编辑</a> | <a href="">删除</a></td>
        </tr>
        <tr>
            <td>7</td>
            <td>HTML/CSS</td>
            <td>HTML</td>
            <td>视频</td>
            <td>初级</td>
            <td><a href="">编辑</a> | <a href="">删除</a></td>
        </tr>
        <tr>
            <td>8</td>
            <td>HTML/CSS</td>
            <td>HTML</td>
            <td>视频</td>
            <td>中级</td>
            <td><a href="">编辑</a> | <a href="">删除</a></td>
        </tr>
        <tr>
            <td>9</td>
            <td>HTML/CSS</td>
            <td>HTML</td>
            <td>视频</td>
            <td>高级</td>
            <td><a href="">编辑</a> | <a href="">删除</a></td>
        </tr>
        <tr>
            <td>10</td>
            <td>HTML/CSS</td>
            <td>CSS</td>
            <td>视频</td>
            <td>初级</td>
            <td><a href="">编辑</a> | <a href="">删除</a></td>
        </tr>
        <tr>
            <td>5</td>
            <td>HTML/CSS</td>
            <td>CSS</td>
            <td>视频</td>
            <td>中级</td>
            <td><a href="">编辑</a> | <a href="">删除</a></td>
        </tr>
        <tr>
            <td>6</td>
            <td>HTML/CSS</td>
            <td>CSS</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="">5</a>
        <a href="">6</a>
        <a href="">7</a>
        <a href="" class="more">...</a>
        <a href="">尾页</a>
    </p>
</form>
</body>
</html>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>企业信息</title>
    <style>
        h2{
            text-align: center;
        }
        table,td{
            border: none;
            padding: 10px;
        }
        table{
            width: 600px;
            margin: auto;
        }
        table td:first-child{
            text-align: right;
        }
        input[type="text"]{
            width: 400px;
            height: 30px;
            border: 1px solid #E3EBF2;
            border-radius: 2px;
            padding-left: 15px;
        }
        textarea{
            width: 400px;
            height: 200px;
            border: 1px solid #E3EBF2;
            border-radius: 2px;
            padding-left: 15px;
            resize: none;
        }
        table tr:last-child td:last-child{
            text-align: center;
        }
        input[type="submit"]{
            width: 100px;
            height: 36px;
            background-color: #2196F3;
            border-radius: 2px;
            color: #fff;
        }

        input[type="submit"]:hover{
            width: 100px;
            height: 36px;
            background-color: #22baf3;
            border-radius: 2px;
            color: #fff;
        }
    </style>
</head>
<body>
<h2>企业信息</h2>
<form action="" method="post">
    <table>
        <tr>
            <td><lable for="name">公司简称:</lable></td>
            <td><input type="text" id="name" placeholder="请输入公司简称" required></td>
        </tr>
        <tr>
            <td><lable for="name_2">公司全称:</lable></td>
            <td><input type="text" id="name_2" placeholder="请输入公司全称" required></td>
        </tr>
        <tr>
            <td><lable for="tel">公司电话:</lable></td>
            <td><input type="text" id="tel" placeholder="请输入公司电话" required></td>
        </tr>
        <tr>
            <td><lable for="add">公司地址:</lable></td>
            <td><input type="text" id="add" placeholder="请输入公司地址" required></td>
        </tr>
        <tr>
            <td><lable for="about">公司简介:</lable></td>
            <td><textarea type="text" id="about" placeholder="请输入公司简介" required></textarea></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" value="提交" onclick="alert('提交成功')"></td>
        </tr>
    </table>

</form>
</body>
</html>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品管理</title>
<style>

    table, th, td {
        border: 1px solid black;
        font-family: 微软雅黑;
    }
    table tr td img{
        width: 100px;
        padding: 5px;
        border-radius: 10px;
    }


    table {
        width: 100%;
        margin: auto;
        border-collapse: collapse;
        text-align: center;
    }

    table{

        border-collapse: collapse;
    }

    td {
        padding: 10px;
        font-size: 14px;
        font-family: 微软雅黑;
    }
    a {
        text-decoration-line: none;
        color: #2196F3;
    }

    a:hover {
        color: red;
        text-decoration-line: underline;
    }

    tr:first-child {
        margin-top: 20px;
        background-color: #2196F3;
        color: #fff;
        font-weight: bold;
        font-size: 50px;
    }

    table caption {
        font-size: 1.5rem;
        font-weight: bolder;
        margin-bottom:5px;
    }

    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 #2196F3;
        margin-left:2px;
        line-height: 24px;
        font-family: 微软雅黑;
        font-size: 14px;

    }
    .active {
        background-color: #2196F3;
        color: white;
    }
    .more {
        border: none;
    }

</style>
</head>
<body>
<form action="" method="post">
    <table>
        <caption>产品管理</caption>
        <tr>
            <td>编号</td>
            <td>图片</td>
            <td>介绍</td>
            <td>难度</td>
            <td>章节数</td>
            <td>老师</td>
            <td>点击/次</td>
            <td>添加时间</td>
            <td>编辑</td>

        </tr>
        <tr>
            <td>1</td>
            <td><img src="https://img.php.cn/upload/course/000/000/003/5a713f5a02540434.jpg" alt=""></td>
            <td>最新ThinkPHP 5.1全球首发视频教程</td>
            <td>中级</td>
            <td>79</td>
            <td>PeterZhu</td>
            <td>178443</td>
            <td>2018-01-17 15:00</td>
            <td><a href="">编辑</a> | <a href="">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td><img src="https://img.php.cn/upload/course/000/069/489/5a580ffc4b2f7668.jpg" alt=""></td>
            <td>PHP实战天龙八部之仿爱奇艺电影网站</td>
            <td>中级</td>
            <td>49</td>
            <td>西门大官人</td>
            <td>94715</td>
            <td>2018-01-11 17:32</td>
            <td><a href="">编辑</a> | <a href="">删除</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td><img src="https://img.php.cn/upload/course/000/069/489/5a547786c6ebe172.jpg" alt=""></td>
            <td>PHP实战天龙八部之微信支付视频教程</td>
            <td>中级</td>
            <td>5</td>
            <td>西门大官人</td>
            <td>19403</td>
            <td>2018-01-09 16:05</td>
            <td><a href="">编辑</a> | <a href="">删除</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt=""></td>
            <td>2018前端入门_HTML5</td>
            <td>初级</td>
            <td>29</td>
            <td>灭绝师太</td>
            <td>55022</td>
            <td>2018-03-09 11:03</td>
            <td><a href="">编辑</a> | <a href="">删除</a></td>
        </tr>
        <tr>
            <td>5</td>
            <td><img src="https://img.php.cn/upload/course/000/000/003/5a713f5a02540434.jpg" alt=""></td>
            <td>[公益直播]PHP实战开发极速入门</td>
            <td>中级</td>
            <td>8</td>
            <td>欧阳克</td>
            <td>5880</td>
            <td>2018-06-05 20:49</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="">5</a>
        <a href="">6</a>
        <a href="">7</a>
        <a href="" class="more">...</a>
        <a href="">尾页</a>
    </p>
    </form>
</body>
</html>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档管理</title>
<style>

    table, th, td {
        border: 1px solid black;
        font-family: 微软雅黑;
    }
    table tr td img{
        width: 100px;
        padding: 5px;
        border-radius: 10px;
    }


    table {
        width: 100%;
        margin: auto;
        border-collapse: collapse;
        text-align: center;
    }

    table{

        border-collapse: collapse;
    }

    td {
        padding: 10px;
        font-size: 14px;
        font-family: 微软雅黑;
    }
    a {
        text-decoration-line: none;
        color: #2196F3;
    }

    a:hover {
        color: red;
        text-decoration-line: underline;
    }

    tr:first-child {
        margin-top: 20px;
        background-color: #2196F3;
        color: #fff;
        font-weight: bold;
        font-size: 50px;
    }

    table caption {
        font-size: 1.5rem;
        font-weight: bolder;
        margin-bottom:5px;
    }

    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 #2196F3;
        margin-left:2px;
        line-height: 24px;
        font-family: 微软雅黑;
        font-size: 14px;

    }
    .active {
        background-color: #2196F3;
        color: white;
    }
    .more {
        border: none;
    }

</style>
</head>
<body>
<form action="" method="post">
    <table>
        <caption>文档管理</caption>
        <tr>
            <td>编号</td>
            <td>分类</td>
            <td>标题</td>
            <td>大小</td>
            <td>下载次数</td>
            <td>推荐</td>
            <td>发布时间</td>
            <td>编辑</td>

        </tr>
        <tr>
            <td>1</td>
            <td>前端开发</td>
            <td>HTML中文手册</td>
            <td>5MB</td>
            <td>4294</td>
            <td>是</td>
            <td>2017-02-14</td>
            <td><a href="">编辑</a> | <a href="">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>前端开发</td>
            <td>HTML中文手册</td>
            <td>5MB</td>
            <td>4294</td>
            <td>是</td>
            <td>2017-02-14</td>
            <td><a href="">编辑</a> | <a href="">删除</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>前端开发</td>
            <td>jQuery1.7 中文手册</td>
            <td>18MB</td>
            <td>2693</td>
            <td>是</td>
            <td>2017-02-09</td>
            <td><a href="">编辑</a> | <a href="">删除</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td>前端开发</td>
            <td>JavaScript参考手册</td>
            <td>25MB</td>
            <td>5469</td>
            <td>是</td>
            <td>2017-02-14</td>
            <td><a href="">编辑</a> | <a href="">删除</a></td>
        </tr>
        <tr>
            <td>5</td>
            <td>前端开发</td>
            <td>CSS 3.0参考手册</td>
            <td>13MB</td>
            <td>2172</td>
            <td>是</td>
            <td>2017-02-14</td>
            <td><a href="">编辑</a> | <a href="">删除</a></td>
        </tr>
        <tr>
            <td>6</td>
            <td>前端开发</td>
            <td>W3CSchool手册</td>
            <td>3MB</td>
            <td>2243</td>
            <td>是</td>
            <td>2017-02-14</td>
            <td><a href="">编辑</a> | <a href="">删除</a></td>
        </tr>
        <tr>
            <td>7</td>
            <td>前端开发</td>
            <td>Bootstrap3参考手册</td>
            <td>123MB</td>
            <td>5421</td>
            <td>是</td>
            <td>2017-02-14</td>
            <td><a href="">编辑</a> | <a href="">删除</a></td>
        </tr>
        <tr>
            <td>8</td>
            <td>服务器端</td>
            <td>PHP手册下载（php7.2最新版）</td>
            <td>113MB</td>
            <td>2172</td>
            <td>是</td>
            <td>2017-02-14</td>
            <td><a href="">编辑</a> | <a href="">删除</a></td>
        </tr>
        <tr>
            <td>9</td>
            <td>服务器端</td>
            <td>php 5.6中文手册</td>
            <td>113MB</td>
            <td>21172</td>
            <td>是</td>
            <td>2017-02-14</td>
            <td><a href="">编辑</a> | <a href="">删除</a></td>
    </tr>
        <tr>
            <td>10</td>
            <td>服务器端</td>
            <td>JSON中文手册</td>
            <td>11MB</td>
            <td>21122</td>
            <td>是</td>
            <td>2017-02-14</td>
            <td><a href="">编辑</a> | <a href="">删除</a></td>
        </tr>
        <tr>
            <td>11</td>
            <td>数据库</td>
            <td>MySQL 5.1参考手册</td>
            <td>13MB</td>
            <td>21472</td>
            <td>是</td>
            <td>2017-02-14</td>
            <td><a href="">编辑</a> | <a href="">删除</a></td>
        </tr>
        <tr>
            <td>12</td>
            <td>移动端</td>
            <td>ionic参考手册</td>
            <td>113MB</td>
            <td>21272</td>
            <td>是</td>
            <td>2017-02-14</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="">5</a>
        <a href="">6</a>
        <a href="">7</a>
        <a href="" class="more">...</a>
        <a href="">尾页</a>
    </p>
</form>
</body>
</html>

运行实例 »

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

html5新增语义化布局标签

header页眉

footer页脚

nav导航

main主体

article文档

aside边栏

section区块

div自定义区块

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

HTML/CSS基础知识(标签\选择器)—2018年8月13日17时20分

2018-08-13 19:27:05

关于我们免责申明意见反馈讲师合作广告合作最新更新 English: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部

登录PHP中文网，和优秀的人一起学习！

全站2000+教程免费学