3.5 表格标签
什么是表格标签？
表格标签一般用来显示具有二维属性的数据。
表格涉及到的标签都有：table：它是用来创建表格的
thead：它表示表格的头部部分 tbody:他表示表格主体部分
tfoot:他表示表格底部
Thead,tbody,tfoot的优点：
- 如果使⽤了这三个标签，那么无论标签的顺序是怎样他都会按照 head,body,foot的顺序来显示
- 在页面加载的时候这三个标签会将数据分批显示，提高显示效率。
tr：它的作用是用来创建⼀个表格行
td：它的作用是用来创建⼀个行内的单元格
colspan：它是用来进行列的合并，合并的顺序是从左向右进行合并。
rowspan：它是用来进行行的合并，合并的顺序是从上到下
让我们来看看下面这几行代码
<table border="1" width = 600> <tr> <td>⽤户姓名</td> <td>⽤户id</td> <td>⽤户性别</td> <td>⽤户昵称</td> </tr>
HTML中的特殊字符：
注意：以运算符&开头，以分号运算符；结尾。重点记住   < >。HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体
border-collapse：设置行和单元格的边是否合并
概述：border-collapse是设置表格的行<tr>或<td>之间是否留有距离的样式，<tr>与<td>之间的距离，在表格里可以通过border="xxx"与 cellspacing="xxx"来实现。换句话说，当border-collapse设置为collapse时，表格自身的border与cellspacing属性便没有作用了。
语法：border-collapse : separate | collapse
取值：
separate : 默认值。边框独立（标准HTML）
collapse : 相邻边被合并
功能一
让 table 的 border 属性指定的边框看起来不那么粗大，在前面文章中已经介绍。
功能二
让 td 边框重合
cellpadding 是边框与其内容的间隙大小；
cellspacing 是边框与边框之间的间隙大小；
3.6 超链接标签（*）
超链接是HTML重要的组成之⼀，通过超链接可以跳转到其他⽹⻚。通常实现超连接的标签是a。
1、链式的语法格式
<a href="跳转目标链接" target="目标窗口的弹出方式"> 文本或图像 </a>
<a>标签里的a是单词anchor的的缩写，意为:锚。
- 文字超链接
| 属性 | 作用 |
| herf | 用于需要跳转的页面链接，（必须属性）当标签应用herf属性时，它就拥有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其中_self(当前页面打开)为默认值，_blank为在新窗口中的打开方式 |
- 锚链接
通过创建⼀个锚链接，可以实现跳转到对应id的标签位置（成为锚点）
页面内的锚链接
<a name="frist"></a> /*定义锚点名称frist*/ <a href="#frist"></a> /*跳转到frist位置*/
页面间的锚链接
例如：从Frist.html页面中转入Second.html页面中并且将位置定到second所在的位置。
先在second.html定义一个名为frist的锚点。
<a name="second"></a>
在Frist.html页面中设置锚链接。
<a href="Second.html#second"></a>
- 图片超链接
图⽚超链接就是在a标签中填写img标签，通过点击图⽚实现跳转的⽬的。
<a href="code.html" target="_blank">
<img src="1.jpg" alt=" ">
</a>
- 热区超链接（拓展）
在同⼀张图片上划分出多个区域 不同的区域指向不同的跳转链接。 通过map和area进行区域的划分，并在area的href填⼊要跳转的页面内的链接，从而实现跳转。
3.7 列表标签
- 有序列表ol
<html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>有序列表</h1> <!-- 有序列表通过 type属性进⾏ 列表序号的设置 有 1，a,A ,i,I --> <!-- 通过 start属性 来确定起始序号是什么数字 --> <!-- reversed是⼀个布尔型属性 控制列表的倒序输出 当起始序号⼩于⼦项的数⽬时，⽆论序号是什么 类型⼀旦⼩于零时序号将以数字的形式输出--> <ol type="a" start="1" reversed = "reversed"> <li>我是⼀个⼦项1</li> <li>我是⼀个⼦项2</li> <li>我是⼀个⼦项3</li> <li>我是⼀个⼦项4</li> <li>我是⼀个⼦项5</li> <li>我是⼀个⼦项6</li> </ol> </body> </html>
有序列表的作用
- 无序列表ul
无序列表使用标签ul创建 子项同样为li标签
<body> <h1>⽆序列表</h1> <!-- type⽤来控制序号形式，circle表示空⼼圆 disc表示实⼼圆 square表示⽅块 默认是disc--> <ul type="square"> <li>哈哈</li> <li>嘿嘿</li> <li>哈哈</li> </ul> </body>
- 数据列表dl
数据列表由dl标签创建，其中子项有dt和dd标签，dt表示标题，dd表示对应的子项
<body> <!-- 数据列表允许多个⼩标题的出现，并且跟ol和ul⼀样可以通过css来改写样式 --> <h1>数据列表</h1> <dl> <dt>热搜</dt> <dd>这是一个数据列表</dd> <dd>这是一个数据列表</dd> <dd>这是一个数据列表</dd> </dl> </body>
3.8表单标签
表单标签目前会学习三个标签 input，select，textarea，这三个标签写在form标签中。
一个表单有三个基本组成部分：
- 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
- 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
- 表单按钮：包括提交按钮、复位按钮和一般按钮
<body> <h1>用户注册</h1> <form action="url地址" method="get" name="表单名称" enctype=""> 用户姓名:<input type="text" name="username" id="6" value="cmy" ><br> 用户密码:<input type="password" name="username" id=""><br> 用户性别:<input type="radio" name="sex" id="" value="1" />男 <input type="radio" name="sex" id="" value="2" />女 <input type="radio" name="sex" id="" value="3" />跨性别<br> 用户爱好: <input type="checkbox" name="fav" id="" value="1" />唱 <input type="checkbox" name="fav" id="" value="1" />跳 <input type="checkbox" name="fav" id="" value="1" />rap 用户头像:<input type="file" name="avatar"><br> </form> </body>
1、action在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
2、method用于设置表单数据的提交方式，其取值为get或post。
Get 明文传输,数据量相对较少,不是很安全
Post 非明文传递,有请求体,数据量相对较大,较安全获取数据用get,发送数据用post
3、name用于指定表单的名称，以区分同一个页面中的多个表单。
input标签是⼀个输入型标签，他有20多种类型可供选择，每种类型对应不同的输⼊形式，是表单标签中最重 要的元素。 而select标签它是⼀个下拉框，供用户选择其中的子项，当multipule存在时它将以列表的形式出现。Textarea它是⼀个多行⽂本输⼊框，可以进行相对复杂的⽂本格式输入。
使用multiple属性，就可以不限制单次上传文件个数，实现下拉复选效果。
