小白前端04-HTML的三个表

---

• HTML的三个表：表格、列表和表单。
  • 表格：用来显示数据。让数据显示的更整齐规范。
  • 列表：用来布局。是页面布局更整齐规范。
  • 表单：用来收集用户信息。

---

1.表格标签

• 1.创建表格的基本语法：

<table>
  <tr>
    <td>单元格内的数据</td>
    ... ...
  </tr>
  ... ...
</table>

• 2.标签的含义：
  • table标签：用来定义一个表格标签。
  • tr标签：定义表格的行，必须嵌套在table标签中。
  • td标签：定义表格的单元格，必须嵌套在tr标签中。
• 3.表格的属性：（重点是cellspacing cellpadding）
  • border：设置表格的边框（默认border="0",无边框）。
  • cellspacing：外边距，设置单元格与单元格之间的空白间距（默认2像素）。
  • cellpadding：内边距，设置单元格内容与单元格边框之间的空白间距（默认1像素）。
  • width：设置表格的宽度。
  • height：设置表格的高度。
    以上单位都是像素
  • align：设置表格在网页中的水平对齐方式。left、right 、center。
• 4.表头单元格标签
  • 作用：表头单元格标签位于表格的第一行或第一列，且文本加粗居中。
  • 语法：用<th></th>代替相应的单元格标签<td></td>即可。
• 5.表格标题标签
  • 作用：定义表格标题，这个标题会显示在表格之上且加粗居中。
  • 语法：<table><caption>表格标题<caption>... ...<table>

注意：caption标签必须且只能紧跟在table标签之后。

• 6.合并单元格
  • 跨行合并：rowspan="合并单元格的个数"
  • 跨列合并：`colspan="合并单元格的个数"
  • 合并单元格的步骤：
    1.先去确定是跨行合并还是跨列合并；
    2.根据先上 后下、先左 后右 的顺序找到目标单元格，写上合并方式和合并数量。<td rowspan="2"></td>
    3.删除多余的单元格
• 7.表格结构划分
  • 三部分：题头、正文和脚注。
  • 语法：对应的分别是<thead></thead>、<tbody></tbody> 、<tfoot></tfoot> 。
  • 作用：方便以后用CSS来进行设置。

---

2.列表标签

• 1.无序列表
  • 作用：各个列表项之间没有顺序级别之分，是并列的。
  • 语法：列表项前有小圆点 （unordered list）

<ul>
  <li>列表项1</li>
  <li>列表项1</li>
  <li>列表项1</li>
  ... ...
</ul>

1.<ul></ul>中只能嵌套<li></li>，其他标签不能直接嵌套在ul标签中。
2.<li>与</li>之间相当于一个容器，可以容纳所有元素。

• 2.有序列表
  • 作用：各个列表项按照一定的顺序排列定义的。
  • 语法：列表项前有数字（ordered list）

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ... ...
</ol>

• 3.定义列表
  • 作用：通常对术语或名词进行解释和描述
  • 语法：列表项前没有任何项目符号（definition list、definition description）

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ... ...
 <dt>名词2</dt>
  ... ... 
</dl>

• 4.应用场景
  • 无序列表：最常用。新闻列表、商品列表、导航条。
  • 有序列表：很少用。
  • 定义列表：网页底部的描述信息。

---

3.表单标签

• 1.基本内容
  作用：收集用户信息
  结构：一个完整的表单由表单控件（表单元素）、提示信息和表单域组成。
  • 表单控件：包含了具体的表单功能项，如文本输入框、密码输入框、单选/复选框、提交/重置按钮。
  • 提示信息：一些说明性文字，提示用户进行填写和操作。
  • 表单域：相当于一个容器，容纳所有的表单控件和提示信息，同时通过它定义将数据提交给服务器的方法。不定义表单域，无法将数据提交给服务器。
• 2.input控件（单）
  • 语法：<input type="属性值" value="预显示内容" />
    • 通过定义type属性的不同属性值，来指定不同的控件类型。
    • 除了type属性还有其他属性。
  • type属性的属性值：
    • text：单行文本输入框。
    • password：密码输入框。
    • radio：单选按钮。
    • checkbox：复选框。
    • button：普通按钮。
    • submit：提交按钮
    • reset：重置按钮。
    • image：以图像形式提交按钮。
    • file：文件域。上传文件用的（一点击，会从本地选择文件上传）
  • 其他属性：
    • name：控件的名称，由用户自己定义。
    • value：input控件默认的文本值，由用户自己定义。
    • size：正整数，input控件在页面中显示的宽度。
    • checked：checked，定义选择控件默认被选中的项。
    • maxlength：正整数，控件允许输入的最多字符数。
  • checked属性：
    • 默认选中的状态，常见于 单选按钮和复选按钮。

    <input type="checkbox" name="hb" checked="checked">苹果
    <input type="checkbox" name="hb" >梨
    <input type="checkbox" name="hb" >香蕉
    

    上面的代码默认选择了苹果。
  • name属性：
    • name属性值是由用户自己定义的，方便后台通过name属性名找到这个表单，name主要作用就是用来区分实现不同目的的表单的。
      -radio如果是一组，必须给他们命名相同的name属性值，这样就可以只选中多个中的一个了。

  <input type="radio" name="sex">男
  <input type="radio" name="sex">女
  

• 3.label标签：
  • 作用：用于绑定一个表单元素，当点击label标签时，被绑定的表单元素会获得输入点。
  • 如何绑定：
    • 方法1：用label标签直接包裹input表单。

    <label>用户名：<input type="text" ></label>
    

    • 方法2：用for属性规定label与哪个表单元素（id名）绑定。

    <label for="sex">男</label>
    <input type="radio" id="sex">
    

• 4.文本域标签:（不常用）
  • 作用：通过textarea控件可以创建多行文本输入框。
  • 语法：

  <textarea cols="每行的字符数" rows="显示的行数">
  默认的内容
  </textarea>
  ···
  

注意：cols和rows不再使用，这个文本域的大小通过CSS来设置。
文本框和文本域是由区别的。

• 5.下拉列表（基本不用了）
  • 作用：有多个选项选择，使用select控件来节省空间。
  • 语法：

  <select >
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ... ...
  </select>
  

  语法注意：
  • 在selection标签中至少包含一对option标签。
  • 在option标签中定义selected属性时，当前项即为默认选中项。

注意：现在开发一般不再用select标签，因为在不同浏览器显示的效果不一样，同时很难修改其样式。

• 6.表单域：

  • 作用：form标签用来定义表单域，来实现用户信息的收集和传递，form标签中的所有内容会被提交给服务器。
  • 语法：

  <form action="URL地址" method="提交方式" name="表单名称">
  各种表单控件
  </form>
  

  • 常用属性：

  属性	属性值	作用
  action	URL地址	指定接收并处理表单数据的服务器程序的URL地址
  method	get/post	设置表单数据的提交方式
  name	名称	指定表单名称，以区分同一个页面中的多个表单