HTML标签（下）（表格table、列表ul、ol、表单input标签以及表格和注册页面案例）

程序员文章站 2022-04-29 18:30:25

...

1.表格标签：展示数据

table标签标示一个表格；tr（table row）标签表示一行；td标签表示一个单元格
th（table head）表头单元格标签，内容加粗居中显示
表格属性：（属性要写到表格标签table里面去）
align:表格相对周围元素的对齐方式，有left、center、right；
border：设置表格单元是否有边框，默认为""没有边框，设置为1加边框
cellpadding：单元格中文字距离边框的距离，默认为1像素
cellspacing:单元格与单元格之间的距离，默认为1像素
width和height：设置单元格宽和高
表格结构标签：（将表格分为头部thead和主体tbody两个部分,使结构更明确）

    <table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="250">
        <thead>
        <tr><td>姓名</td> <td>性别</td> <td>年龄</td></tr>
        <tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
    </thead>
    <tbody>
        <tr><td>zyy</td> <td>女</td> <td>21</td></tr>
        <tr><td>ccf</td> <td>女</td> <td>21</td></tr>
        <tr><td>hfz</td> <td>女</td> <td>21</td></tr>
        <tr><td>lf</td> <td>女</td> <td>21</td></tr>
        <tr><td>wx</td> <td>女</td> <td>20</td></tr>
    </tbody>
    </table>

HTML标签（下）（表格table、列表ul、ol、表单input标签以及表格和注册页面案例）

合并单元格：
跨行合并：rowspan=“合并单元格的个数”，将最上侧单元格作为目标单元格
跨列合并：colspan=“合并单元格的个数”，将最左侧单元格作为目标单元格
步骤：
1.确定合并方式；
2.找到目标单元格，写上合并方式=合并单元格的数量；
3.删除多余的单元格!!!

    <table border="1" cellpadding="20" cellspacing="0" width="400">
    <tr>
        <td></td>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

2.列表标签（用于布局，整齐简洁有序），分为无序列表、有序列表、和自定义列表

无序列表：各个列表项之间没有顺序级别之分，是并列的；ul里只能放li，li里可以放任意标签。样式使用CSS设置。

   <h4>你喜欢的食物？</h4>
    <ul>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
    </ul>

有序列表：各个列表项会按照一定的顺序排列定义；ol里只能放li，li里可以放任意标签。样式使用CSS设置。

    <h4>粉丝排行榜</h4>
    <ol>
        <li>ldh 10000</li>
        <li>lry 1000</li>
        <li>zyy 1</li>
    </ol>

自定义列表：用于对术语或名词进行解释和描述，列表项前面没有任何项目符号（注意表格用于展示数据，列表用于布局）
dl里面只能有dt和dd，dt和dd个数没有限制，一般是一个dt对应多个dd
```
    <dl>
    <dt>关注我们</dt>
    <dd>新浪微博</dd>
    <dd>官方微信</dd>
    <dd>联系我们</dd>
</dl>
```

3.表单标签：收集用户信息

表单标签由表单域、表单元素和提示信息组成。
表单域：form会把它范围内的表单元素信息提交给服务器
表单元素：

input表单元素（用于收集用户信息，与用户进行交互）为单标签：

type属性设置不同的属性值用来指定不同的控件类型；
1)text：文本框用户可以在里面输入任何文字；
2)password：密码框用户看不见输入的密码；
3)radio：单选按钮(要加上name=1的属性) 可以实现单选；
4)checkbox：复选框可以实现多选(也要加上name=1的属性) ；
单选按钮和复选按钮可以设置check属性，当页面打开的时候可以默认选中这个按钮
5)submit提交属性，当点击这个按钮时将表单域form的表单元素全部提交给服务器后台；
6)reset重置属性，可以还原表单元素的默认状态；
7)button：普通按钮，后期结合js搭配使用；
8)file：文件域，上传文件使用。
name属性用于区分很多不同的表单元素，注意单选按钮和复选框中的元素必须要有相同的名字；
value设置表单元素值（一般在文本框中默认显示）。
其中name和value是每个表单元素都有的属性值，主要给后台人员使用。

    <form action="xxx.php" method="get" name="name1">
        <!-- text 文本框 用户可以在里面输入任何文字 -->
        <!-- maxlength设置最大输入字符数 -->
        用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"><br />
        <!-- password 密码框 用户看不见输入的密码 -->
        密码：<input type="password" name="pwd"><br />
        <!-- radio单选按钮(要加上name=1的属性) 可以实现单选 -->
        <!-- 单选按钮和复选按钮可以设置check属性，当页面打开的时候可以默认选中这个按钮 -->
        性别：男 <input type="radio" name="gender" value="男"> 女 <input type="radio" name="gender" value="女" checked><br />
        <!-- checkbox 复选框 可以实现多选 -->
        爱好：吃饭<input type="checkbox" name="hobby" value="吃饭"> 睡觉<input type="checkbox" name="hobby" value="睡觉"> 打豆豆<input
            type="checkbox" name="hobby" value="打豆豆" checked> <br />
        <!-- submit提交属性，当点击这个按钮时将表单域form的表单元素全部提交给服务器后台；reset重置属性，可以还原表单元素的默认状态-->
        <input type="submit" value="免费注册">
        <input type="reset" value="重新填写">
        <!-- 普通按钮 button，后期结合js搭配使用-->
        <input type="button" value="获取短信验证码"><br />
        <!-- 文件域 使用场景：上传文件使用 -->
        上传头像：<input type="file"><br />
     </form>

label标签：用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将焦点转到表单元素上，增加用户体验。其中label标签中的for属性要与相关元素的id属性相同。

  <form action="xxx.php" method="get" name="name1">
      <label for="text">用户名:</label> <input type="text" id="text"><br />
      <label for="man">男</label> <input type="radio" id="man" name="gender">
      <label for="woman">女</label> <input type="radio" id="woman" name="gender"><br />
  </form>

select下拉表单元素

    <form>
       籍贯：
       <select>
           <option>湖南</option>
           <option>湖北</option>
           <option>北京</option>
           <option>四川</option>
           <option>地球</option>
           <option selected>火星</option>
       </select>
   </form>

textarea文本域表单元素

    <form>
       今日反馈：
       <textarea cols="50" rows="5">我知道这个反馈留言是textarea来做的</textarea>
   </form>

4. 表格案例

首先制作表格结构：
1.第一行是th表头单元格
2.第二行开始是td普通单元格
3.单元格里面可以是任何元素，文字链接图片都可以

然后设置表格属性
1.表格在页面居中对齐align
2.单元格宽度、高度、边框和cellpadding、cellspacing

<body>
<!-- 首先制作表格结构：
1.第一行是th表头单元格
2.第二行开始是td普通单元格
3.单元格里面可以是任何元素，文字链接图片都可以
然后设置表格属性
1.表格在页面居中对齐align
2.单元格宽度、高度、边框和cellpadding、cellspacing -->
<table align="center" border="1" cellpadding="10" cellspacing="0">
    <tr><th>排名</th> <th>关键词</th> <th>趋势</th> <th>今日搜索</th> <th>最近七日</th> <th>相关链接</th> </tr>
    <tr><td>1</td> <td>鬼吹灯</td> <td><img src="image/上.png" height="20"></td> <td>345</td> <td>123</td> <td><a href="https://tieba.baidu.com/f?kw=%B9%ED%B4%B5%B5%C6&fr=ala0&loc=rec" target="_blank">贴吧</a> <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin" target="_blank">百科</a></td> </tr>
    <tr><td>2</td> <td>盗墓笔记</td> <td><img src="image/下.png" height="20"></td> <td>124</td> <td>377382</td> <td><a href="https://tieba.baidu.com/f?kw=%B9%ED%B4%B5%B5%C6&fr=ala0&loc=rec" target="_blank">贴吧</a> <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin" target="_blank">百科</a></td> </tr>
    <tr><td>3</td> <td>西游记</td> <td><img src="image/上.png" height="20"></td> <td>32142</td> <td>372622</td> <td><a href="https://tieba.baidu.com/f?kw=%B9%ED%B4%B5%B5%C6&fr=ala0&loc=rec" target="_blank">贴吧</a> <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin" target="_blank">百科</a></td> </tr>
    <tr><td>4</td> <td>甄嬛传</td> <td><img src="image/上.png" height="20"></td> <td>37282</td> <td>1283</td> <td><a href="https://tieba.baidu.com/f?kw=%B9%ED%B4%B5%B5%C6&fr=ala0&loc=rec" target="_blank">贴吧</a> <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin" target="_blank">百科</a></td> </tr>
    <tr><td>5</td> <td>水浒传</td> <td><img src="image/下.png" height="20"></td> <td>2122</td> <td>12833</td> <td><a href="https://tieba.baidu.com/f?kw=%B9%ED%B4%B5%B5%C6&fr=ala0&loc=rec" target="_blank">贴吧</a> <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin" target="_blank">百科</a></td> </tr>
    <tr><td>6</td> <td>三国演义</td> <td><img src="image/下.png" height="20"></td> <td>28299</td> <td>39283</td> <td><a href="https://tieba.baidu.com/f?kw=%B9%ED%B4%B5%B5%C6&fr=ala0&loc=rec" target="_blank">贴吧</a> <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin" target="_blank">百科</a></td> </tr>
    <tr><td>7</td> <td>红楼梦</td> <td><img src="image/上.png" height="20"></td> <td>28923</td> <td>3849</td> <td><a href="https://tieba.baidu.com/f?kw=%B9%ED%B4%B5%B5%C6&fr=ala0&loc=rec" target="_blank">贴吧</a> <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin" target="_blank">百科</a></td> </tr>
</table>
</body>

5.注册页面案例

<body>
    <!-- 表单嵌套在table表格中 -->
    <form>
    <h2>青春不常在，抓紧谈恋爱</h2>
    <table width="500" cellpadding="10">
        <tr>
            <td>性别</td>
            <td>
                <label for="gender1">男</label> <input type="radio" name="gender" id="gender1">
                <label for="gender2">女</label><input type="radio" name="gender" id="gender2"><br />
            </td>
        </tr>
        <tr>
            <td>生日</td>
            <td>
                <select>
                    <option>--请选择年--</option>
                    <option>1997</option>
                    <option>1998</option>
                    <option>1999</option>
                    <option>2000</option>
                    <option>2000</option>
                    <option>2002</option>
                </select>
                <select>
                    <option>--请选择月--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
                <select>
                    <option>--请选择日--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                    <option>14</option>
                    <option>15</option>
                    <option>16</option>
                    <option>17</option>
                    <option>18</option>
                    <option>19</option>
                    <option>20</option>
                    <option>21</option>
                    <option>22</option>
                    <option>23</option>
                    <option>24</option>
                    <option>25</option>
                    <option>26</option>
                    <option>27</option>
                    <option>28</option>
                    <option>29</option>
                    <option>30</option>
                    <option>31</option>
                </select><br />
            </td>
        </tr>
        <tr>
            <td>所在地区</td>
            <td>
                <select>
                    <option>--请选择--</option>
                    <option>湖南</option>
                    <option>湖北</option>
                    <option>北京</option>
                    <option>四川</option>
                    <option>广东</option>
                    <option>浙江</option>
                </select><br />
            </td>
        </tr>
        <tr>
            <td>婚姻状况</td>
            <td>
                <label for="no">未婚</label><input type="radio" id="no" name="marriage">
                <label for="yes">已婚</label><input type="radio" id="yes" name="marriage">
                <label for="break">离婚</label><input type="radio" id="break" name="marriage"><br />
            </td>
        </tr>
        <tr>
            <td>学历</td>
            <td>
                <select>
                    <option>幼儿园</option>
                    <option>小学</option>
                    <option>初中</option>
                    <option>高中</option>
                    <option>本科</option>
                    <option>硕士</option>
                    <option>博士</option>
                </select><br />
            </td>
        </tr>
        <tr>
            <td>喜欢的类型</td>
            <td>
                <label for="1">妩媚的</label><input type="checkbox" id="1" name="like">
                <label for="2">可爱的</label><input type="checkbox" id="2" name="like">
                <label for="3">小鲜肉</label><input type="checkbox" id="3" name="like">
                <label for="4">老腊肉</label><input type="checkbox" id="4" name="like">
                <label for="5">都喜欢</label><input type="checkbox" id="5" name="like"><br />
            </td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td>
                <textarea cols="50" rows="2">自我介绍</textarea><br />
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" value="免费注册"><br />
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" id="agree"><label for="agree">我同意注册条款和会员加入标准</label><br />
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <a href="http://baidu.com">我是会员，立即登录</a>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h4>我承诺</h4>
                <ul>
                    <li>年满18岁、单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>
    </table>
</form>
</body>

更详细语法可以查看HTML教程