博主：冰小九，新人博主一只，欢迎大佬前来指导 冰小九的主页 喜欢请给个三连加关注呀，谢谢 🌷 🌷 🌷 三连加关注，追文不迷路，你们的支持就是我最大的动力！！！
前言：在上篇我们讲到五个板块的内容，了解了HTML一半的入门基础，接下来我们跟寻文章的步伐，继续学习剩下的四个板块
HTML学习
⑥链接标签
又称：a标签，超链接；代码样式：
<a href=" ">链接描述</a>
我们一个一个来分析，链接标签里的href中填入跳转地址，跳转地址可以是我们平时所见的网站网址，也可以是本地路径里的文件地址，而链接描述即为超链接显示的文字（默认加下划线）
<a href="https://www.baidu.com/">跳转到百度</a>
<a href="./视频标签.html">点我去视频</a>
显示效果：
我们点击这个文字，就可以跳转到我们想要显示的内容了
在开发网站的初期，我们可能不知道要跳转到哪里，这时我们href的值就可以写#，代表空链接。
链接标签的属性
属性：target
属性值：_self _blank, _self为默认值，不填写与填写该属性时使用效果一样，在当前页面跳转，覆盖掉现在的画面；_blank则是在新窗口跳转，也就是在点击连接时会新开一个窗口。
<a href="./视频标签.html" target="_blank">点我去视频</a>
⑦列表标签
存在三种列表
无序列表：
<!DOCTYPE html> <html lang="en"> <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> <ul> <li>榴莲</li> <li>香蕉</li> <li>苹果</li> </ul> </body> </html>
有序列表：
<!DOCTYPE html> <html lang="en"> <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> <ol> <li>100</li> <li>90</li> <li>80</li> </ol> </body> </html>
自定义列表：
<!DOCTYPE html> <html lang="en"> <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> <dl> <dt>用户中心</dt> <dd>个人主页</dd> <dd>修改密码</dd> <dd>退出登录</dd> </dl> </body> </html>
显示效果可以自己尝试一下，看看三者有什么不同。
⑧表格标签
table标签：表格整体，包裹多个tr或者包裹一个th和多个tr
tr标签：表格每行，包裹td
td标签：表格单元格，包裹内容
th标签：表头单元格（表格的第一行单元格，字体默认加粗）
caption标签：表格大标题
table标签的属性：
border |
边框宽度 |
width |
表格宽度 |
height |
表格高度 |
示例：
<!DOCTYPE html> <html lang="en"> <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> <table border="1" width="300" heigth="400"> <caption><strong>学生成绩单</strong></caption> <tr> <th>姓名</th> <th>成绩</th> <th>评语</th> </tr> <tr> <td>张三</td> <td>100</td> <td>第一名</td> </tr> <tr> <td>李四</td> <td>99</td> <td>第二名</td> </tr> <tr> <td>总结</td> <td>郎才女貌</td> <td>真棒，相亲成功</td> </tr> </table> </body> </html>
表格结构
当然为了提高代码效率，还可以给表格进行划分，可分成thead：表格头部；tbody：表格尾部；tfoot：表格底部。但其实实际视觉效果并无变化，仅为了提高代码效率。
<!DOCTYPE html> <html lang="en"> <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> <table border="1"> <caption><strong>学生成绩单</strong></caption> <thead> <tr> <th>姓名</th> <th>成绩</th> <th>评语</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>100</td> <td>第一名</td> </tr> <tr> <td>李四</td> <td>99</td> <td>第二名</td> </tr> </tbody> <tfoot> <tr> <td>总结</td> <td>郎才女貌</td> <td>真棒，相亲成功</td> </tr> </tfoot> </table> </body> </html>
合并单元格
合并单元格遵循左上原则（保留最上方或最左方的元素）
- rowspan垂直合并
- colspan 水平合并
只给合并时要保留的那个单元格设置
<!DOCTYPE html> <html lang="en"> <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> <table border="1"> <caption><strong>学生成绩单</strong></caption> <thead> <tr> <th>姓名</th> <th>成绩</th> <th>评语</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td rowspan="2">100</td> <!--跨行垂直合并2个单元格--> <td>第一名</td> </tr> <tr> <td>李四</td> <!-- 只保留最上方的单元格100，所以<td>99</td>删除 --> <td>第二名</td> </tr> </tbody> <tfoot> <tr> <td>总结</td> <td colspan="2">郎才女貌</td> <!--跨列水平合并2个单元格--> <!-- 只保留左边单元格郎才女貌，所以删除<td>真棒，相亲成功</td> --> </tr> </tfoot> </table> </body> </html>
注：不能跨结构合并（thead，tbody，tfoot）
⑨表单标签
input系列
input标签可通过type属性值不同，展示不同效果
type属性
text |
文本框，用于输入单行文本 |
|
password |
密码框，用于输入密码 |
|
radio |
单选框 |
name属性：相同name属性值的单选框为一组，一组中只能选择一个 checked属性：默认选中此框 |
checkbox |
多选框 |
|
file |
文件选择，用于之后上传文件 |
multiple属性：上传多个文件，无此属性时只能选择一个文件 |
submit |
提交按钮 |
|
reset |
重置按钮 |
|
button |
普通按钮 |
|
placeholder |
占位符 |
在框内显示设定的文本 提升用户输入 |
注：上面的功能需用form框住才能使按钮生效，没有按钮时可以不用form
<!DOCTYPE html> <html lang="en"> <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> <!-- action是提交地址,把数据提交到某个地方 --> <form action=""> 用户名: <input type="text"> 密码: <input type="password"> <!-- 表单按钮必须要用form括住这里面的整体,才能对里面的数据就行操作, 例如,reset重置放在form外头,则无法清除用户名和密码里填写的字,要包在一起才能实现 --> <input type="submit" value="免费注册"> <input type="reset"> <!-- value用来显示按钮上的文字 --> <input type="button" value="普通按钮"> </form> </body> </html>
button系列
button标签不同于input标签，button标签为双标签，且在谷歌浏览器中，若不给button设置属性，则button按钮默认为提交按钮
select下拉菜单标签
标签：
- select：下拉菜单整体
- option：菜单的每一项（常见属性：selected默认选中）
textarea文本域标签
可用于输入多行文本的表单控件（右下角可以拖拽改变大小）
属性：cols 可见宽度；rows 可见行数
label标签
作用，增大按钮点击范围，点击按钮的文字也可以选择按钮
<!DOCTYPE html> <html lang="en"> <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> <!-- label标签可以实现点对应的文字也可以选择选项,共有两种方法 --> <!-- 其一 :label包裹文字,并在for中设置与按钮相同的id--> <input type="radio" name="1" id="nan"><label for="nan">男</label> <!-- 其二 :将按钮和文字都置于label中,并把label里的for删去--> <label><input type="radio" name="1" id="nv">女</label> </body> </html>
这里演示效果就由我们的朋友自己亲手探索吧
谢谢阅读，记得三连呐！
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)
