HTML基础标签二

本章重点讲了一些在HTML中使用到的表单，表格和列表的使用

目录

本章重点讲了一些在HTML中使用到的表单，表格和列表的使用

列表

有序列表ol li type 前面的数 start 设置初始值 reversed 倒序

无序列表 type disc 实心圆 circle 空心圆 square 实心方框

自定义列表dl dl-dt是标题 标题顶头 dl-dd是标题下面的

表格

表格 table里面套tr-th 标题 tr-td 表格内容

表单

表单 action 提交地址

input 文本框 默认值 type=text text是任意字符

密码 type=password 显示为........

数字框 type=number 数字框只能输入数字 有箭头

单选按钮 type=radio name属性相同的选项为一组

多选按钮 

下拉框

文本域

邮箱框

地址框

选择小日历

时间框

日期时间框

选择年月

选择年周

搜索

提交

---

列表

有序列表ol li type 前面的数 start 设置初始值 reversed 倒序

    <ol type="1" start="5" reversed>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>

无序列表 type disc 实心圆 circle 空心圆 square 实心方框

ul和ol下只能用li li里面可以套用任意标签

    <ul type="disc">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

自定义列表dl dl-dt是标题 标题顶头 dl-dd是标题下面的

    <dl>
       <dt>jky</dt>
       <dd>1</dd> 
       <dd>2</dd> 
       <dd>3</dd> 
       <dd>4</dd> 
    </dl>

表格

表格 table里面套tr-th 标题 tr-td 表格内容

tr定义行 th定义标题 td定义列 标题th默认居中

border 值越大外层越重

合并行是竖的 合并列是横的

行合并是rowspan=num 值为几 对应几行删掉

列合并是colspan=num 值为几 对应几列删掉  -->

给任意一行高 那么这一行都会被撑开

给任意一列宽 那么这一列都会被撑开

如果有冲突 按最大值撑开

    <table border="1">
        <tr>
            <th width="105" rowspan="3">标题</th>
            <th>标题</th> 
            <th>标题</th>
        </tr>
        <tr>
            <td colspan="2">1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>

表单

表单 action 提交地址

name属性:传数据时，让我们知道传的是谁的数据 value:值

<form action="地址">

input 文本框 默认值 type=text text是任意字符

        <label for="username">
            用户名
            <input type="text" id="username" value="" name="username">
        </label>

密码 type=password 显示为........

        <label for="password">
            密码
            <input type="password" id="password" value="" name="password">
        </label>

数字框 type=number 数字框只能输入数字 有箭头

min最小值 max最大值 step步长 value默认值

        <label for="number">
            数字框
            <input type="number" id="number" value="" name="number">
            <input type="number" min="1" max="100" step="5" value="0">
        </label>

单选按钮 type=radio name属性相同的选项为一组

        <span>
            性别:
        </span>
        <label for="男">
            <input type="radio" id="男" value="男" name="sex" checked>
            男
        </label>
        <label for="女">
            <input type="radio" id="女" value="女" name="sex">
            女
        </label>
        <label for="其他">
            <input type="radio" id="其他" value="其他" name="sex">
            其他
        </label>

多选按钮 

        <span>
            爱好:
        </span>
        <label for="吃">
            <input type="checkbox" id="吃" value="吃" name="like" checked>
        </label>
        <label for="喝">
            <input type="checkbox" id="喝" value="喝" name="like">
        </label>
        <label for="睡">
            <input type="checkbox" id="睡" value="睡" name="like" checked>
        </label>
        <label for="玩">
            <input type="checkbox" id="玩" value="玩" name="like">
        </label>
        <label for="学">
            <input type="checkbox" id="学" value="学" name="like" checked>
        </label>

下拉框

        <span>
            城市
        </span>
         <select name="城市">
            <option value="" selected name=""></option>
            <option value="1" name="北京">北京</option>
            <option value="2" name="上海">上海</option>
            <option value="3" name="杭州">杭州</option> 
            <option value="4" name="太原">太原</option>
         </select>

文本域

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

邮箱框

需要输入完整的邮箱

<input type="email">

地址框

需要输入完整的网址

<input type="url">

选择小日历

每个浏览器样式不一样

<input type="date">

时间框

默认是当前时间 但是不显示

<input type="time">

日期时间框

<input type="datetime-local">

选择年月

<input type="month">

选择年周

<input type="week">

搜索

<input type="search">

提交

<input type="submit">