devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML自主学习 - 2_自定义列表
标签中,
标签用于?
标签用于?

作者：AllinToyou | 2024-03-28 08:07:50

赞

踩

自定义列表
标签中,
标签用于?
标签用于?

目录

一、表格

基本语法 

表头单元格标签

表格相关属性

 表格结构标签

 合并单元格

表格示例一

二、列表 

无序列表

有序列表

自定义列表 

列表示例一

三、表单控件（表单元素）

表单组成

表单基本语法

input表单控件

label标签

select表单控件 

文本域标签 

表单控件示例一 

一、表格

基本语法 

  1. <table>
  2.  
  3.     <tr>
  4.         <td>单元格内容1</td>
  5.         <td>单元格内容2</td>
  6.         <td>单元格内容3</td>
  7.     </tr>
  8.  
  9. </table>

1、<table> </table>标签用于定义表格

2、<tr> </tr>标签用于定义表格的行，需嵌套在<table> </table>标签中

3、<td> </td>标签用于定义表格的单元格，需嵌套在<tr> </tr>标签中

4、td指table data

表头单元格标签

表头单元格标签即<th> </th>

表头单元格一般位于表格的第一行或第一列

使用<th> </th>标签可使文本内容加粗居中显示

表格相关属性

align： 规定表格的对齐方式

border： 规定表格单元格是否有边框

cellpadding： 规定表格单元格边沿和其内容之间的空白大小

cellspacing： 规定表格单元格之间的空白大小

width： 规定表格的宽度

height： 规定表格的高度

 表格结构标签

表格可能很长，可将表格划分为表格头部和表格主体两大部分

<thead> </thead>标签包含表格头部，<tbody> </tbody>标签包含表格主体

 合并单元格

合并单元格的方式

1、跨行合并：rowspan = "合并单元格的个数"

2、跨列合并：colspan = "合并单元格的个数"

目标单元格

应将合并单元格代码写在目标单元格内

1、跨行合并：最上侧单元格为目标单元格

2、跨列合并：最左侧单元格为目标单元格

合并单元格的步骤

1、确定合并单元格的方式

2、确定目标单元格，将合并单元格代码写在目标单元格内

3、删除冗余单元格

表格示例一

  1. <!DOCTYPE html>
  2.  
  3. <html lang="en">
  4.  
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>表格测试</title>
  8. </head>
  9.  
  10. <body>
  11.     <table align="center" border="1" cellpadding="6" cellspacing="0" width="50">
  12.  
  13.         <thead>
  14.              <tr>
  15.                 <th>姓名</th>
  16.                 <th>性别</th>
  17.                 <th>班级</th>
  18.                 <th>学号</th>
  19.                 <th>成绩</th>
  20.              </tr>
  21.         </thead>
  22.        
  23.         <tbody>
  24.              <tr>
  25.                 <td>小刚</td>
  26.                 <td>男</td>
  27.                 <td>1809</td>
  28.                 <td>18123456</td>
  29.                 <td>86</td>
  30.             </tr>
  31.              <tr>
  32.                 <td>小红</td>
  33.                 <td>女</td>
  34.                 <td>1706</td>
  35.                 <td>17123465</td>
  36.                 <td>88</td>
  37.             </tr>
  38.         </tbody>
  39.  
  40.     </table>
  41. </body>
  42.  
  43. </html>

  

二、列表 

无序列表

基本语法

  1. <ul>
  2.     
  3.     <li>列表项1</li>
  4.     <li>列表项2</li>
  5.     <li>列表项3</li>
  6.     
  7. </ul>

1、无序列表的各个列表项是并列的，没有高低级别之分 

2、<ul> </ul>标签中只能嵌套<li> </li>标签，<li> </li>标签中可以嵌套其他标签

有序列表

基础语法

  1. <ol>
  2.  
  3.     <li>列表项1</li>
  4.     <li>列表项2</li>
  5.     <li>列表项3</li>
  6.     
  7. </ol>

<ol> </ol>标签中只能嵌套<li> </li>标签，<li> </li>标签中可以嵌套其他标签 

自定义列表 

基本语法

  1. <dl>
  2.  
  3.     <dt>名词1</dt>
  4.     <dd>名词1解释1</dd>
  5.     <dd>名词1解释2</dd>
  6.     <dd>名词1解释3</dd>
  7.     
  8.     <dt>名词2</dt>
  9.     <dd>名词2解释1</dd>
  10.     <dd>名词2解释2</dd>
  11.     <dd>名词2解释3</dd>
  12.  
  13. </dl>

1、自定义列表常用于对术语或名词进行解释或描述

2、<dl> </dl>标签中只能嵌套<dt> </dt>标签和<dd> </dd>标签

3、<dt> </dt>标签和<dd> </dd>标签中可以嵌套其他标签 

4、<dt> </dt>标签和<dd> </dd>标签的个数没有限制，通常是一个dt对应多个dd

列表示例一

  1. <!DOCTYPE html>
  2.  
  3. <html lang="en">
  4.  
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>列表测试</title>
  8. </head>
  9.  
  10. <body>
  11.  
  12.     <h3>今日事务</h3>
  13.     <ul>
  14.         <li>接见顾客</li>
  15.         <li>参加会议</li>
  16.         <li>修改项目</li>
  17.     </ul>
  18.  
  19.     <h3>今日安排</h3>
  20.     <ol>
  21.         <li>起床</li>
  22.         <li>跑步</li>
  23.         <li>洗漱</li>
  24.         <li>早餐</li>
  25.         <li>英语</li>
  26.         <li>数学</li>
  27.         <li>中餐</li>
  28.         <li>中休</li>
  29.     </ol>
  30.  
  31.     <dl>
  32.         <dt>联系我们</dt>
  33.         <dd>发送邮件</dd>
  34.         <dd>发送短信</dd>
  35.         <dd>拨打电话</dd>
  36.         <dd>关注公众号</dd>
  37.     </dl>
  38.  
  39. </body>
  40.  
  41. </html>

 

三、表单控件（表单元素）

表单组成

表单通常由表单域、表单控件（也称为表单元素）和提示信息三部分组成

表单基本语法

  1. <form action="url地址" method="提交方式" name="表单域名称">
  2.  
  3.     各种表单控件
  4.  
  5. </form>
  6.  
  7. <!--
  8. 1、action用于指定接收并处理表单数据的服务器程序的url地址
  9. 2、提交方式method有两个取值，即get和post
  10. -->

input表单控件

基本语法

  1. <form action="url地址" method="提交方式" name="表单域名称">
  2.  
  3.     <input type="控件类型" name="input表单元素的名称" value="值" />
  4.  
  5. </form>
  6.  
  7. <!--
  8. 控件类型
  10. text：文本框
  11. password：密码框
  12. radio：单选按钮
  13. checkbox：复选框
  14. submit：提交按钮
  15. reset：重置按钮
  16. file：文件域
  17. button：可点击按钮（结合JS使用）
  18. -->
  19.  
  20. <!--
  21. 部分属性说明
  23. 1、name和value是每个表单元素都有的属性，主要给后台人员使用
  24. 2、使用单选按钮和复选框时，要求input表单元素的名称相同
  25. 3、使用单选按钮和复选框时，可以设置checked属性，表示默认选中该项
  26. 4、使用文本框时，可以设置maxlength属性，该属性用于规定字符的最大长度
  27. -->

label标签

基本语法

  1. <form action="url地址" method="提交方式" name="表单域名称">
  2.  
  3.     <label for="sex">男</label>
  4.     <input type="radio" name="gender" value="male" id="sex" />
  5.  
  6. </form>
  7.  
  8. <!--
  9. label标签说明
  11. 1、<label> </label>标签用于绑定表单控件
  12. 2、当点击<label> </label>标签内的文本时，浏览器会选中与之绑定的表单控件，用户体验更佳
  13. 3、注意！for属性的值应和id属性的值相同
  14. -->

select表单控件 

基本语法

  1. <form action="url地址" method="提交方式" name="表单域名称">
  2.  
  3.     <select>
  4.         <option>选项1</option>
  5.         <option>选项2</option>
  6.         <option>选项3</option>
  7.         <option>选项4</option>
  8.         <option selected="selected">选项5</option>
  9.     </select>
  10.  
  11. </form>
  12.  
  13. <!--
  14. select表单控件说明
  16. 1、使用select表单控件可以有效节省页面空间
  17. 2、<select> </select>标签中至少包含一个选项
  18. 3、<option selected="selected">选项5</option>表示默认选中选项5
  19. -->

文本域标签 

基本语法

  1. <form action="url地址" method="提交方式" name="表单域名称">
  2.  
  3.     <textarea cols="60" rows="6">
  4.         此处可以书写默认显示内容
  5.     </textarea>
  6.  
  7. </form>
  8.  
  9. <!--
  10. textarea文本域标签说明
  12. 1、<textarea> </textarea>标签可以创建多行文本输入框
  13. 2、cols="60"表示每行可以输入60个字符
  14. 3、rows="6"表示输入框显示6行
  15. -->

表单控件示例一 

  1. <!DOCTYPE html>
  2.  
  3. <html lang="en">
  4.  
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>表单控件测试</title>
  8. </head>
  9.  
  10. <body>
  11.     <h3>模拟APP注册界面</h3>
  12.     <table>
  13.         <tr>
  14.             <td> <h5>昵称</h5> </td> <td> <input type="text"> </td>
  15.         </tr>
  16.         <tr>
  17.             <td> <h5>年龄</h5> </td> <td> <input type="text"> </td>
  18.         </tr>
  19.         <tr>
  20.             <td> <h5>绑定手机</h5> </td> <td> <input type="text"> </td>
  21.         </tr>
  22.         <tr>
  23.             <td> <h5>设置密码</h5> </td> <td> <input type="password"> </td>
  24.         </tr>
  25.         <tr>
  26.             <td> <h5>性别</h5> </td> <td> <label for="male">男</label> <input type="radio" name="sex" id="male"> <label for="female">女</label> <input type="radio" name="sex" id="female"> </td>
  27.         </tr>
  28.         <tr>
  29.             <td> <h5>家乡</h5> </td>
  30.             <td>
  31.                 <select>
  32.                     <option>请选择家乡</option>
  33.                     <option>湖南</option> <option>湖北</option>
  34.                     <option>河北</option> <option>山西</option> <option>黑龙江</option> <option>吉林</option>
  35.                     <option>辽宁</option> <option>江苏</option> <option>浙江</option> <option>安徽</option>
  36.                     <option>福建</option> <option>江西</option> <option>山东</option> <option>河南</option>
  37.                     <option>广东</option> <option>海南</option> <option>四川</option> <option>贵州</option>
  38.                     <option>云南</option> <option>陕西</option> <option>甘肃</option> <option>青海</option>
  39.                     <option>台湾</option> <option>内蒙古</option> <option>广西</option> <option>西藏</option>
  40.                     <option>宁夏</option> <option>新疆</option> <option>北京</option> <option>天津</option>
  41.                     <option>上海</option> <option>重庆</option> <option>香港</option> <option>澳门</option>
  42.                 </select>
  43.             </td>
  44.         </tr>
  45.         <tr>
  46.             <td> <h5>兴趣</h5> </td>
  47.             <td>
  48.                 穿搭 <input type="checkbox" name="interest">
  49.                 美食 <input type="checkbox" name="interest">
  50.                 手工 <input type="checkbox" name="interest">
  51.                 读书 <input type="checkbox" name="interest">
  52.                 科技 <input type="checkbox" name="interest">
  53.                 军事 <input type="checkbox" name="interest">
  54.                 音乐 <input type="checkbox" name="interest">
  55.                 绘画 <input type="checkbox" name="interest">
  56.                 护肤 <input type="checkbox" name="interest">
  57.                 摄影 <input type="checkbox" name="interest">
  58.                 学习 <input type="checkbox" name="interest">
  59.                 旅行 <input type="checkbox" name="interest">
  60.                 情感 <input type="checkbox" name="interest">
  61.                 影视 <input type="checkbox" name="interest">
  62.             </td>
  63.         </tr>
  64.         <tr>
  65.             <td> <h5>自我简介</h5> </td>
  66.             <td> <textarea cols="90" rows="6">让大家认识一下你吧！</textarea> </td>
  67.         </tr>
  68.         <tr>
  69.             <td> <input type="reset" value="重置信息"> </td>
  70.             <td> <input type="submit" value="免费注册"> </td>
  71.         </tr>
  72.     </table>
  73. </body>
  74.  
  75. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/328770
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号