HTML5——标签我正在参加[码上掘金挑战赛]详情请看：码上掘金挑战赛来了！标签——div,p,h,em,ins,kbd

我正在参加[码上掘金挑战赛]详情请看：码上掘金挑战赛来了！

col-xs-3 col-sm-3 col-md-3 col-lg-3：

col:column列(共有12列)，xs:超小屏，手机；sm:小屏，平板；md:中等屏，桌面显示器；lg:大屏，大桌面显示器
row：行，.container固定宽度；container-fluid满屏
栅格系统要用container包裹。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <!--搭建bootstrap环境-->
    <link rel="stylesheet" href="dis/css/bootstrap.css">
    <script src="jquery/jquery-3.4.1.min.js"></script><!--引入js文件-->
     <script src="dis/css/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-lg-push-9">

                <div class="thumbnail">
                    <img src="#" alt="...">
                    <div class="caption">
                        <h3 class="text-center"><a href="#">优站精选</a></h3>
                        <p>1234567890qwertyuiopasdfghjklzxcvbnmwertyui
                            zxcvbnmasdfghjkerty1234567890</p>
                        <p><a href="#" class="btn btn-primary" role="button">Button</a></p>
                    </div>
                </div>
                
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">

                <div class="thumbnail">
                    <img src="#" alt="...">
                    <div class="caption">
                        <h3 class="text-center"><a href="#">优站精选</a></h3>
                        <p>1234567890qwertyuiopasdfghjklzxcvbnmwertyui
                            zxcvbnmasdfghjkerty1234567890</p>
                        <p><a href="#" class="btn btn-primary" role="button">Button</a></p>
                    </div>
                </div>
                
            </div>


            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">

                <div class="thumbnail">
                    <img src="#" alt="...">
                    <div class="caption">
                        <h3 class="text-center"><a href="#">优站精选</a></h3>
                        <p>1234567890qwertyuiopasdfghjklzxcvbnmwertyui
                            zxcvbnmasdfghjkerty1234567890</p>
                        <p><a href="#" class="btn btn-primary" role="button">Button</a></p>
                    
                    </div>
                
                </div>
            </div>

href:css路径
nav:导航（bs3-navbar:responsive）, class="navbar navbar-default" role="navigation:
corasel:轮播图（bs3-carousel）,

排版

<body>
    <h1>hello <small>hello</small></h1>
    <h2>hello</h2>
    <h3>hello</h3>
    <h4>hello</h4>
    <p>hehehehehe<mark>hhe</mark></p>
    <p>asasasas<del>dfdffdfd<strong>fggfgfffg</strong>dfdfdd</del><mark>hehe</mark></p>
    <p>jaskdf<em>sdfg</em>asdfgh</p>
    <ins>zxcvb</ins>
    <p>zxcvbnm</p>
    <blockqute>qwertyu</blockqute>
    qw er tyu oijj sd <kbd>cd</kbd>followed nj sxxxz jijn nh .n<br>
    asdfg zxc bnm ,hjk n <kbd><kbd>ctrl</kbd>+<kbd>,</kbd></kbd>
    <pre>&lt;p&gt;Sample text here...&lt;/p&gt</pre>
</body>

small:副标题
mark：突出显示
del:删除
strong:加粗
em:斜体
ins:插入，下划线
blockqute：引用
kbd：标记用户通过键盘输入的内容
pre:预格式
var：标记变量

表单

 <body>
    <div class="container">
        <table class="table">
        <thead>
            <tr>
                <th>asdfgh</th>
                <th>asdfgh</th>
                <th>asdfgh</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>aaa</td>
                <td>aaa</td>
                <td>aaa</td>
            </tr>
        </tbody>

    </div>
</body>

thead：表头
tr:行
th:表头，加粗
tbody：表里内容
一个tr是一行，一个td是一列。上面为一行3列。
tr class="info":info:蓝色 warning:黄色 danger:红色
响应式表格：

中class="table-responsive"