简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

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

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

耗子的博客
耗子的博客原创
2018年08月21日 18:30:51554浏览

本讲学习了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>

运行实例 »

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

111.jpg

html5新增语义化布局标签

header页眉

footer页脚

nav导航

main主体

article文档

aside边栏

section区块

div自定义区块



上一条：语义化布局标签及HTML页实战—2018年08月20日作业下一条：html和css基础知识之实战训练（产品管理）—2018年8月21日17:59:07
html5语义化
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多