css-1 |

表格
　　table th tr td
列表
　　ul ol dl

表单
　　form input

        <table border="1" width="200px" height="100px" align="center" cellspacing="0">
            <caption>个人信息表</caption>
            <tr>
                <th>姓名</th>加粗居中
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>tzh</td>
                <td>18</td>
                <td>man</td>
            </tr>
        </table>

        <table border="1" width="200px" height="100px" align="center" cellspacing="0">
            <caption>个人信息表</caption>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>tzh</td>
                <td rowspan="2">18</td>合并
                <td>man</td>
            </tr>
            <tr>
                <td>wdv</td>
                <td>woman</td>
            </tr>
        </table>

        <dl>
            <dt>江苏</dt>
            <dd>连云港</dd>
            <dd>南京</dd>
            <dd>无锡</dd>
        </dl>

男<input type="radio" name="sex" /> 女<input type="radio" name="sex" checked="checked" />

        <form action="#" method="get" name="form1">
            <input type="text" name="username><br>
            <input type="submit">
        </form>

        <table>
            <caption>*********</caption>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="sex"/>男
                    <input type="radio" name="sex" />女
                </td>
            </tr>
            <tr>
                <td>生日</td>
                <td>
                    <select name="year" id="">
                        <option value="">1995</option>
                        <option value="">1996</option>
                        <option value="">1997</option>
                    </select>
                     <select name="year" id="">
                         <option value="">1995</option>
                         <option value="">1996</option>
                         <option value="">1997</option>
                     </select>
                      <select name="year" id="">
                          <option value="">1995</option>
                          <option value="">1996</option>
                          <option value="">1997</option>
                      </select>
                </td>
            </tr>
        </table>

css的3种样式

<h1 style="color: red;font-size: 18px;">sadasd</h1>

<style>
    h1 {
        color:red;
        font-size:18px
    }
</style>
</head>
<body>
    <div>
        <h1 style="color:red;font-size: 18px;">sadasd</h1>
    </div>
</body>

<link rel="stylesheet" href="" type="text/css">

    .title{
        font:italic bold 20px "微软雅黑"
    }

后代选择器
<style>
    .nav a{
        color: red;
    }
    .main a{
        color:green;
    }
</style>
</head>
<body>
        <div class="nav">
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
        </div>
        <div class="main">
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#">6</a>
        </div>
</body>

子元素(亲儿子)选择器
<style>
    div>strong{
        color: red;
    }
</style>
</head>
<body>
        <div>
            <strong>1</strong>
            <strong>2</strong>
            <strong>3</strong>
        </div>
        <div>
            <p>
                <strong>4</strong>
                <strong>5</strong>
                <strong>6</strong>
            </p>
        </div>
</body>

交集选择器
<style>
    p.red{
        color: red;
    }
</style>
</head>
<body>
        <p class="red">1</p>
        <p class="red">2</p>
        <p class="red">3</p>
        <div class="red">4</div>
        <div class="red">5</div>
        <div class="red">6</div>
        <p>7</p>
        <p>8</p>
        <p>9</p>
</body>

并集选择器
<style>
    p,span{
        color:red;
    }
</style>
</head>
<body>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <span>4</span>
        <span>5</span>
        <span>6</span>
</body>

伪链接类选择器
按照lvha的顺序写
<style type="text/css">
    a :link{
        color:red;
    }
    a :visited{
        color: rgb(37, 37, 37);
    }
    a :hover{
        color : rgb(111, 54, 204);
    }
    a :active{
        color: green;
    }
</style>
</head>
<body>
    <div>
        <a href="www.baidu.com">百度一下</a>
    </div>
</body>

块级元素
一行一个且可以设置宽高

<style>

div{

background-color: red;

}

ul{

background-color: green;

}

li{

background-color: blue;

}

background-color:black;

}

h1{

background-color: orange;

}

</style>

</head>

<body>

<ul>

</ul>

</body>

行内元素
一行可以放多个且不可以设置宽高
span a

行内块元素
在一行显示且可以设置宽高
<style>
    span{
        display: block;
        width: 200px;
        height: 100px;
        background-color: green;
    }
    div{
        /*行内元素 不能设置宽高*/
        display: inline;
        background-color: rgb(0, 23, 128);
    }
    a{
        display: inline-block;
        width: 200px;
        height: 50px;
        background-color:green;
    }
</style>
</head>
<body>
    <span>1</span>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <a href="#">123</a>
</body>