前端基础 有序 无序列表 表格 表单

有序列表

  <!-- 有序列表
    type：1 A a l i
    reversed：倒叙
    start：初始值 -->
    <ol type="a" reversed start="5" >
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>
1
2
3
4
5
6
7
8
9
10
11

无序列表

 <!-- 无序列表
    type:disc 默认
        circle 空心圆 
        square 实心方框
     -->
     <ul type="square">
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
     </ul>
1
2
3
4
5
6
7
8
9
10
11
12

自定义列表

<dl>
        <dt>列表标题</dt>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
     </dl>
1
2
3
4
5
6
7
8

表格

 <!-- 表格
        table > 定义表格
        tr    > 定义行
        th    > 定义标题
        td    > 定义列
        rowspan：合并行  使用时：值为几，就把对应几行的td删掉
        colspan：合并列  使用时：值为几，就删除本行后的几个td
        bgcolor：背景颜色

        给一行中任意一个列加高(height)属性，整行都是一个高，如果有冲突，按最大支撑开；
        给一列中任意一个行加宽(width)属性，整列都是一个款，如果有冲突，按最大值撑开；

-->
1
2
3
4
5
6
7
8
9
10
11
12
13

<table border="1" align="center" width="600">
        <tr>
            <th bgcolor="pink" height="30">表格标题</th>
            <th height="60">表格标题</th>
            <th>表格标题</th>
        </tr>
        <tr align="center">
            <td rowspan="3">第一行第一列</td>
            <td colspan="2">第一行第二列</td>
            <!-- <td>第一行第三列</td> -->
        </tr>
        <tr align="center">
            <!-- <td>第二行第一列</td> -->
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
        <tr align="center">
            <td>第三行第一列</td>
            <td>第三行第二列</td>
            <!-- <td>第三行第三列</td> -->
        </tr>
    </table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

文本框

      <!--type
    text:任意字符 文本框 
    password：输入密码：显示为 ···
    number：只能输入数字
 
    radio：单选
        name属性 name属性相同时，魏同一组单选选项组
        checked 默认选中，选多个时，就是多个都选中  
    checked：复选
        name属性 name属性相同时，为同一组复选选项组
        checked 默认选中，选多个是，就是多个都选中
        
        name属性：传输数据时，让接收方知道我们传的是谁的数据。值是什么
        value属性值：值
    submit：提交按钮
    form：action：提交地址
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<form action="dome02.html">
姓名:<input type="text" name="username" value="扬"><br>
    密码:<input type="password" name="number"><br>
    <!-- 单选按钮 -->
    <input type="radio" name="sex" value="nan">男
    <input type="radio" name="sex" value="nv">女
    <input type="radio" name="sex" checked value="qita">其他<br>
    <!--多选按钮  -->
    <input type="checkbox" name="a" value="chi">吃
    <input type="checkbox" name="a" value="he">喝
    <input type="checkbox" name="a" value="wan">玩
    <input type="checkbox" name="a" value="le">乐
    <input type="checkbox" name="a" value="xuexi">学习
    <!-- 下拉框 
            select——option--选项
                  —— value:选项值
            -->
    下拉框：
    <select name="地区" id="">
        <option value="" selected></option>
        <option value="1" >北京</option>
        <option value="" >上海</option>
        <option value="" >重庆</option>
        <option value="" >山西</option>
    </select>       
    文本域：
    <textarea name="备注" id="" cols="80" rows="10"></textarea>
    提交：
    <input type="submit">
    <input type="file">
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31