HTML标签（下）

HTML与CSS学习第二天

记录了表格标签，列表标签，表单标签的使用方法。

 

表格标签

• 表格标签的作用

表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好，能够把繁杂的数据表现得很有条理。主要用来展示数据。

• 表格标签的基本语法

<table>
    <tr>
        <td>单元格中的文字</td>
    </tr>
</table>

1. <table> </table>是用于定义表格的标签。

2. <tr> </tr>标签用于定义表格中的行，必须嵌套在 标签中。

3. <td> </td>用于定义表格中的单元格，必须嵌套在标签中，主要存放数据单元格的内容，即表格数据。

• 表头单元格标签

1. 语法：<th> </th>，嵌套在<tr> </tr>标签中，一般表头单元格位于表格的第一行或第一列

2. 作用：表格会加粗，内容会居中显示

• 表格属性

例如 <table align="center" border="1"> <tr></tr> </table>

注意表格属性要写到table里

• 表格结构标签

1. <thead> </thead>：用于定义表格的头部。<thead>内部必须拥有<tr>标签。一般是位于第一行。

2. <tbody> </tbody>：用于定义表格的主体，主要用于放数据本体 。

3. 以上标签都是放在<table></table>标签中。 

  <table>
      <thead>表格头部区域</thead>
      <tbody>表格主体部分</tbody>
  </table>

• 合并单元格

1.合并单元格的方式

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

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

2.合并单元格的步骤

• 先确定是跨行合并还是跨列合并

• 找到目标单元格，写上合并方式=“合并单元格的数量”

例<td colspan= "2"> </td>

• 删除多余的单元格

 

列表标签

列表是用来布局的。 列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。

根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

• 无序列表

语法格式

  <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
  </ul>

1. 无序列表的每个列表项之间没有顺序级别的分别，是并列的

2. <ul>里只能放<li>标签，不允许放其他文字或标签

3. 但<li>里可以放任何标签

• 有序列表

语法格式

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

1. <ol>里只允许<li>标签,不允许放其他文字或标签

2. 但<li>里可以放任何标签

• 自定义列表

在 HTML 标签中，<dl>标签用于定义描述列表（或定义列表），该标签会与 <dt>（定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用。就是围绕着表头<dt>来解释说明。

语法格式

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

注意事项：

<dl>里只能有<dt>和<dd>

一个自定义列表里可以有多个<dt>

 

表单标签

在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。

• 表单域

在 HTML 标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。<form>会把它范围内的表单元素信息提交给服务器

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

 

• 表单控件

控件元素种类：

1. input输入表单元素

2. select下拉表单元素

3. textarea文本域元素

---

• input输入表单元素

在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

语法格式：

  <input type="属性值" />

1. <input />标签为单标签

2. type属性设置不同值来指定不同控件类型

3. type属性值

4. input的其他属性

---

• select下拉表单元素

使用场景: 在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表。

语法格式：

<form>
  <select>
    <option>男</option>
    <option>女</option>
    <option>机器人</option>
  </select>
</form>

1. select 至少包含一对 option

2. option里属性selected="selected"当前项为默认项

---

• textarea文本域元素

1. 使用场景: 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签。

2. 在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。

3. 使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

语法：

<form>
  <textarea>
  默认显示的内容
  </textarea>
<form>

cols=“每行中的字符数”

rows=“显示的行数”，