HTML标签笔记3

HTML标签笔记

接着上篇文章

表格 table(会使用)

创建表格

在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：

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

在上面的语法中包含三对HTML标签，分别为 <table></table>、<tr></tr>、<td></td>，他们是创建表格的基本

1.table用于定义一个表格。

2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。

3.td /td：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格）。

表格属性（图片来自菜鸟教程）

表头标签

表头单元格一般位于表格的第一行或第一列，其文本加粗居中，设置表头非常简单，只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。

表格结构（了解）

<thead></thead>：用于定义表格的头部。

必须位于<table></table> 标签中


<tbody></tbody>：用于定义表格的主体。

位于<table></table>标签中

表格标题

表格的标题： caption

定义和用法

<table>
   <caption>我是表格标题</caption>
</table>

caption 标签必须紧随 table 标签之后。

只存在 表格里面

只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

合并单元格(难点)

跨行合并：rowspan 跨列合并：colspan

合并单元格的思想：

将多个内容合并的时候，就会有多余的东西，把它删除。 例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。

​公式： 删除的个数 = 合并的个数 - 1

合并的顺序 先上 后下 先左 后右

1. 先确定是跨行还是跨列合并
2. 根据 先上 后下 先左 后右的原则找到目标单元格
3. 删除单元格 删除的个数 = 合并的个数 - 1

表单标签(掌握)

input 控件(重点)

input 输入的意思

在上面的语法中，<input />;标签为单标签，type属性为其最基本的属性 类型 ，其取值有多种，用于指定不同的控件类型。除了type属性之外，<input />标签还可以定义很多其他的属性，其常用属性如下表所示。

type 说明了属于那种表单

radio 如果是一组，我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦
(图片来自菜鸟教程)

label标签(理解)

label 标签为 input 元素定义标注（标签）。

作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

for 属性规定 label 与哪个表单元素绑定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea控件(文本域)

text 文本框 只能写一行文本

textarea 文本域

如果需要输入大量的信息，就需要用到<textarea></textarea>标签。

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

下拉菜单

使用select控件定义下拉菜单的基本语法格式如下 select 选择

<select>
  <option>选项1</option>
  <option selected="selected">选项2</option>
  <option>选项3</option>
  ...
</select>

注意：

1. <select></select>中至少应包含一对<option></option>。
2. 在option 中定义selected =" selected "时，当前项即为默认选中项。

表单域

创建表单的基本语法格式如下：

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

<form>标签的属性如下表：（来自菜鸟教程）

当<form></form>标签与<input />标签一起使用用于上传文件时，<form></form>标签的enctype属性值应设置为multipart/form-data.