1.5 超链接标签
在网页中可以看到很多超链接标签，如下
上图红框中的都是超链接，当我们点击这些超链接时会跳转到其他的页面或者资源。而超链接使用的是 a 标签。
a 标签属性：
href：指定访问资源的URL
target：指定打开资源的方式
_self：默认值，在当前页面打开
_blank：在空白页面打开
代码演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="https://www.itcast.cn" target="_self">点我有惊喜</a> </body> </html>
效果图示：
当我们将 target 属性值设置为 _blank，效果图示：
1.6 列表标签
HTML 中列表分为
有序列表
如下图，页面效果中是有标号对每一项进行标记的。
无序列表
如下图，页面效果中没有标号对每一项进行标记，而是使用 点 进行标记。
标签说明：
有序列表中的 type 属性用来指定标记的标号的类型（数字、字母、罗马数字等）
无序列表中的 type 属性用来指定标记的形状
代码演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ol type="A"> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ol> <ul type="circle"> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul> </body> </html>
1.7 表格标签
如上图就是一个表格，表格可以使用如下标签定义
table ：定义表格
border：规定表格边框的宽度
width ：规定表格的宽度
cellspacing：规定单元格之间的空白
tr ：定义行
align：定义表格行的内容对齐方式
td ：定义单元格
rowspan:规定单元格可横跨的行数
colspan:规定单元格可横跨的列数
th：定义表头单元格
代码演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1" cellspacing="0" width="500"> <tr> <th>序号</th> <th>品牌logo</th> <th>品牌名称</th> <th>企业名称</th> </tr> <tr align="center"> <td>010</td> <td><img src="../img/三只松鼠.png" width="60" height="50"></td> <td>三只松鼠</td> <td>三只松鼠</td> </tr> <tr align="center"> <td>009</td> <td><img src="../img/优衣库.png" width="60" height="50"></td> <td>优衣库</td> <td>优衣库</td> </tr> <tr align="center"> <td>008</td> <td><img src="../img/小米.png" width="60" height="50"></td> <td>小米</td> <td>小米科技有限公司</td> </tr> </table> </body> </html>
1.8 布局标签
这两个标签，一般都是和css结合到一块使用来实现页面的布局。
div标签 在浏览器上会有换行的效果，而 span 标签在浏览器上没有换行效果。
代码演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div>我是div</div> <div>我是div</div> <span>我是span</span> <span>我是span</span> </body> </html>
浏览器效果如下：
1.9 表单标签
表单标签效果大家其实都不陌生，像登陆页面、注册页面等都是表单。
像这样的表单就是用来采集用户输入的数据，然后将数据发送到服务端，服务端会对数据库进行操作，比如注册就是将数据保存到数据库中，而登陆就是根据用户名和密码进行数据库的查询操作。
表单是很重要的标签，需要大家重点来学习。
1.9.1 表单标签概述
表单：在网页中主要负责数据采集功能，使用标签定义表单
表单项(元素)：不同类型的 input 元素、下拉列表、文本域等
form 是表单标签，它在页面上没有任何展示的效果。需要借助于表单项标签来展示不同的效果。如下图就是不同的表单项标签展示出来的效果。
1.9.2 form标签属性
action：规定当提交表单时向何处发送表单数据，该属性值就是URL
以后会将数据提交到服务端，该属性需要书写服务端的URL。而今天我们可以书写 # ，表示提交到当前页面来看效果。
method ：规定用于发送表单数据的方式
method取值有如下两种：
get：默认值。如果不设置method属性则默认就是该值
请求参数会拼接在URL后边
url的长度有限制 4KB
post：
浏览器会将数据放到http请求消息体中
请求参数无限制的
1.9.3 代码演示
由于表单标签在页面上没有任何展示的效果，所以在演示的过程是会先使用 input 这个表单项标签展示输入框效果。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form> <input type="text"> <input type="submit"> </form> </body> </html>
浏览器展示效果如下：
从效果可以看到页面有一个输入框，用户可以在数据框中输入自己想输入的内容，点击提交按钮以后会将数据发送到服务端，当然现在肯定不能实现。现在我们可以将 form 标签的 action 属性值设置为 # ，将其将数据提交到当前页面。还需要注意一点，要想提交数据，input 输入框必须设置 name 属性。代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="#"> <input type="text" name="username"> <input type="submit"> </form> </body> </html>
浏览器展示效果如下：
在输入框输入 hehe ，然后点击 提交 按钮，就能看到如下效果
我们可以看到在浏览器的地址栏的URL后拼接了我们提交的数据。username 就是输入框 name 属性值，而 hehe 就是我们在输入框输入的内容。
接下来我们来聊 method 属性，默认是 method = 'get'，所以该取值就会将数据拼接到URL的后面。那我们将 method 属性值设置为 post，浏览器的效果如下：
从上图可以看出数据并没有拼接到 URL 后，那怎么看提交的数据呢？我们可以使用浏览器的开发者工具来查看（注：可以直接按F12）
按照如上步骤操作能看到如下页面
重新提交数据后，可以看到提交的数据，如下图
