前端学习Day2

五.标签

7.列表标签之无序列表

用圆点进行标记
<ul type="disc"> <ul type="circle"><ul type="square"><ul type="none">四种不同的标号方法

快捷键：ul>li*5

<ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
</ul>

8.标签之表格

表格：<table>
行：<tr>
列：<td>
快捷键：table>tr4>td3{单元格}

    <table border="1" width="400px" height="400px">
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>

border=“1”:表格线
width：宽
height：高

六.表格单元格合并

水平合并：colspan
垂直合并：rowspan

<p>
        合并单元格6,7:colspan
    </p>
    <p>合并单元格15,20:rowspan</p>
    <p>水平合并保留左边删除右边</p>
    <p>垂直合并保留上边删除下边</p>
    <table border="1" width="600px" weigth="400px">
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
            <td>单元格4</td>
            <td>单元格5</td>
        </tr>
        <tr>
            <td colspan="2">单元格6单元格7</td>
            <td>单元格8</td>
            <td>单元格9</td>
            <td>单元格10</td>
        </tr>
        <tr>
            <td>单元格11</td>
            <td>单元格12</td>
            <td rowspan="3">单元格13、18、23</td>
            <td>单元格14</td>
            <td rowspan="2">单元格15、20</td>
        </tr>
        <tr>
            <td>单元格16</td>
            <td>单元格17</td>
            <td>单元格19</td>  
        </tr>
        <tr>
            <td>单元格21</td>
            <td>单元格22</td>
            <td>单元格24</td>
            <td>单元格25</td>
        </tr>
    </table>

七.Form 表单

表单元素：
表单标签、表单域、表单按钮

<form>
        <input type="text">
        <input type="submit">  
</form>

文本框、密码框、提交按钮

<form action="">
        用户名：<input type="text">
        密码:<input type="password">
        <input type="submit" value="登录">
</form>

八.块元素和行元素

常见的块级元素（上下摆放会换行）：div、form、h1~h6、hr、p、table、ul等
常见行内元素（占一行，不能识别宽高）：a、b、em、i、span、strong等
行内块级元素（特点：不换行、能够识别宽高）：button、img、input等

<h1>标题</h1>
<p>段落</p>
<ul>
    <li>列表1</li>
    <li>列表2</li>
</ul>
<a href="#">超链接</a>
<span>内容</span>
<em>注重语气</em>
<img src="..\image\4.jpg" alt="" width="400px">