html5样式初始化，你值得拥有！！

/*万能清除法*/

    *{padding:0;margin:0;}

    li{list-style: none;}

    img{vertical-align:top;border: 0;}

    a{text-decoration: none;}

    .cl:after{content: "";display: block;clear: both;height: 0;overflow: hidden;visibility: hidden;}

    .cl{zoom:1;}

    /*外部样式*/

    <link rel="stylesheet" href="../css/ .css">

    /*初始化*/

    body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,input{padding: 0;margin: 0;}

    li{list-style: none;}

    a{text-decoration: none;}

    img{vertical-align: top;border: 0;}

    html{font-family: "微软雅黑";font-size: 12px;color: #333;}

    .cl:after{content: "";display: block;clear: both;height: 0;overflow: hidden；visibility: hidden;}

    .cl{zoom: 1;}

    .fl{float: left;}

    .fr{float: right;}

    /*响应式布局*/

    @media screen and (min- 320px) and (max- 480px){

    body{}

    }

    @media screen and (min- 481px) and (max- 768px){

    body{background-color: #ff0;}

    }

    @media screen and (min- 769px) and (max- 1200px){

    body{background-color: #0f0;}

    }

    @media screen and (min- 1201px) {

    body{background-color: #999;}

    }

 响应式初始化

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    /*去掉点击时的外边框*/

    input:focus,textarea,select{outline: none;}

    textarea{resize:none;}

    button{cursor:pointer;}

    

    /*伪类选择器 */

    :nth-child(){}

：nth-of-type(1) 出现的次数

    .a div:nth-child(2){color: red;}

    .a p:nth-child(5){color: red;}

    ul li:nth-child(even){}

    ul li:nth-child(odd){}

    ul li:first-child{}

    ul li:last-child{}

    /* 过渡*/

     transition：s

 

    /*html5格式*/

    <header>

        网页上面公共的头部

    </header>

    <div>

        ssssss

    </div>

    <footer>网页上面公共的底部</footer>

    <nav>

        <ul>

            <li></li>

        </ul>

    </nav>

    <section>区块</section>

    <aside>侧边栏</aside>

    <article>文章</article>

    <mark>高亮显示(行内标签)</mark>

    <canvas>画布</canvas>

    <input type="text" list="a">

    <datalist id="a">

        <option value="111">

        <option value="112">

        <option value="113">

        <option value="aa">

        <option value="ad">

        <option value="cc">

        <option value="cr">

    </datalist>

    <!-- novalidate取消验证 -->

    <form novalidate>

        <!-- required必填字段 -->

        <!-- autofocus自动获取焦点 -->

        *<input type="number" required autofocus>

        <input type="search">

        <input type="range">

        <input type="color">

        <input type="date">

        <input type="email">

        <input type="url">

        <textarea name="" id="" cols="30" rows="10"></textarea>

        <input type="submit">

        <button type="submit"></button>

    </form>

    <!-- video必须添加自动播放属性 -->

    <!-- 网页所支持的视频格式 webm/ogg/mp4 -->

    <!-- loop循环播放 -->

    <video src="../video/movie.webm" autoplay controls>对不起，你的浏览器版本太低，</video>

    <audio src="../video/zhoujie.mp3" autoplay loop></audio>

    /*列表*/

    .t{ 100%;height: 400px;border:1px solid red;border-collapse:collapse;table-layout:fixed;}

    .t th,td{border: 1px solid red;}

<table class="t" cellspacing="0" cellpadding="0">

        <caption>课程表</caption>

        <thead>

            <tr>

                <th class="a1">aaaaaaaaaaaaaaaaaaaaa</th>

                <th>星期一</th>

                <th>星期一</th>

                <th>星期一</th>

                <th>星期一</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>111</td>

                <td>111</td>

                <td>111</td>

                <td>111</td>

                <td>111</td>

            </tr>

        </tbody>

        <tfoot>

            <tr>

                <td>111</td>

                <td>111</td>

                <td>111</td>

                <td>111</td>

                <td>111</td>

            </tr>

        </tfoot>

    </table>

第一种

<table width="624" height="362" bgcolor="#eeeeee" border="1" cellspacing="0" cellpadding="0" align="center" bordercolor="pink">

　　<tr align="center">

　　　　<td valign="bottom" width="101">会员姓名</td>

　　　　<td width="205">111</td>

　　　　<td width="103">111</td>

　　　　<td width="205">111</td>

　　</tr>

　　<tr align="center">

　　　　<td>&nbsp;</td>

　　　　<td colspan="3"></td>

　　</tr>

　　<tr align="center">

　　　　<td>111</td>

　　　　<td colspan="3"></td>

　　</tr>

</table>

 

第二种

.t{ 100%;height: 400px;border:1px solid red;border-collapse:collapse;table-layout:fixed;}

.t th,td{border: 1px solid red;}

<table class="t" cellspacing="0" cellpadding="0">

　　<caption>课程表</caption>

　　<thead>

　　<tr>

　　　　<th class="a1">aaaaaaaaaaaaaaaaaaaaa</th>

　　　　<th>星期一</th>

　　　　<th>星期一</th>

　　　　<th>星期一</th>

　　　　<th>星期一</th>

　　</tr>

　　</thead>

　　<tbody>

　　<tr>

　　　　<td>111</td>

　　　　<td>111</td>

　　　　<td>111</td>

　　　　<td>111</td>

　　　　<td>111</td>

　　</tr>

　　</tbody>

</table>