HTML+CSS学习笔记----第二章

一.表格标签

1.1表格的作用：用于显示、展示数据，不是用来布局页面的（CSS）。

1.2表格的基本语法

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

1.<table></table>是用于定义表格的标签。
2.<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。
3.<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

1.3表头单元格标签

<th> 标签：表示HTML表格的表头部分，表头单元格里面的文本内容加粗居中显示。

1.4表格属性（记住单词，后面通过CSS来设置）

属性名	属性值	描述
align	left center right	规定表格相对周围元素的对齐方式
border	1 或 “”	规定表格单元是否拥有边框，默认为“”，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度

1.5表格结构标签

<thead></thead>标签：表格的头部区域。<thead>内部必须拥有<tr>标签。一般位于第一行。
<tbody></tbody>标签：表格的主体区域，主要用于方数据本体。
以上标签都是放在<table></table>标签中。

1.6合并单元格

合并单元格的方法：

• 跨行合并：rowspan=“合并单元格的个数”
• 跨列合并：colspan=“合并单元格的个数”

目标单元格：（写合并代码）

• 跨行：最上侧单元格为目标单元格，写合并代码。
• 跨列：最左侧单元格为目标单元格，写合并代码。

合并单元格三部曲：
①.先确定是跨行还是跨列合并。
②.找到目标单元格，写上合并方式=合并的单元格数量。如：<td colspan=“2”></td>。
③.删除多余的单元格。

合并前：

合并后：

二.列表标签

2.1列表的作用

表格是用来显示数据的，列表是用来布局的。
列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由方便。
列表可以分为三大类：无序列表，有序列表和自定义列表。

2.2 无序列表

• <ul></ul>标签用于定义无序列表，<li></li>标签嵌套在<ul></ul>标签中，用于描述具体的列表项。每对<ul></ul>中至少应包含一对<li></li>。
• <ul></ul>标签中只能嵌套<li></li>标签，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
• <li></li>之间相当于一个容器，可以容纳所有元素。
• 无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。

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

2.3 有序列表

• <ol></ol>标签用于定义有序列表，<li>定义列表项。
• start属性可以更改列表编号的起始值。
• reversed属性表示是否对列表进行反向排序，默认值为true。

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

2.4 自定义列表（重点）

<dl>自定义列表常用于对术语或名词进行解释和描述，定义列表的<dt>标签列表项前没有任何项目符号。<dd>(描述每一个项目/名字)

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

三.表单标签

目的：收集用户信息。

3.1 表单的组成

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

3.2 表单域

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

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

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

3.3表单控件（表单元素）

input输入表单元素、select下拉表单元素、textarea文本域元素

3.3.1<input>表单元素

<input>标签用于收集用户信息。
在<input>标签中，包含一个type属性值，输入字段拥有很多种方式（可以是文本、字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

<input type="属性值" />

• <input>标签为单标签。
• type属性设置不同的属性值用来指定不同的控件类型。

type属性值：

属性值	描述
button	定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox	定义复选框
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重复按钮，重复按钮会清除表单中的所有数据
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

<input>标签其他常用属性：

属性	属性值	描述
name	由用户自定义	定义input元素的名称
value	由用户自定义	规定input元素的值
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

• name和value是每个表单元素都有的属性值，主要给后台人员使用
• name 表单元素的名字，要求单选按钮和复选按钮要有相同的name值，name的主要作用就是用于区别不同的表单
• 单选按钮和复选按钮可以设置checked属性，当页面打开的时候就可以默认选中这个按钮。