☕导航小助手☕
🍚写在前面
🍰🍰2.8 表格标签
🎂🎂2.9 列表标签
🥣🥣🥣🥣2.10.2.1 单行输入框
🍝🍝🍝🍝2.10.2.2 密码框
🦪🦪🦪🦪2.10.2.3 单选框
🍲🍲🍲🍲2.10.2.4 复选框
🥩🥩🥩🥩2.10.2.5 按钮
🧀🧀🧀🧀2.10.2.6 文件选择器
写在前面
本篇博客是仅仅承接与上一篇博客的内容,若要学习完整的 HTML 内容,可移步至上一篇博客,依次学习 ~
2.7 超链接标签
超链接标签,即 a标签 ~
点击 超链接(a标签),就会触发 浏览器 的页面跳转 ~
超链接:就类似于快捷方式,跳转的范围贼大,刷的一下就可以跳转到另外一个页面 ~
语法:
<a href=""> </a>
--其中,href属性 后面的 " " 中写的是:需要跳转的页面的链接;
--两个尖括号的内容是:所显示在页面上的超链接的内容
示例:
<!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>
<a href="https://www.sogou.com">这是一个跳往搜狗的超链接</a>
</body>
</html>
演示:
注意(下面是了解即可):
a标签 中的 href属性 有很多种的写法:
可以是一个完整的网址,可以跳转到任意的网站 ~
还可以只写一个 文件名/相对路径,则表示在当前网站内部跳转:
还可以写成 #,表示不进行任何跳转~
还可以写成其他类型的文件(不一定是 html文件),这个时候会触发浏览器的下载功能 ~
其实,上面的 超链接标签 都是 新的页面 替换了 原有的页面(不过,上面没有截的到,嘿嘿,没关系,大家知道就可以了)~
而在大家平常上网的时候,点击链接之后,都是又出现了一个新的页面,而没有将原来的页面替换掉,这其实是要在 a标签中 添加一个属性 target="_blank" ,然后就会出现这个效果了~
2.8 表格标签
表格标签,其实是有一组标签,通过这一组标签来构成一个表格 ~
如:
table标签,表示整个表格 ~
tr标签,表示表格中的一行 ~
td标签,表示表格中的一个单元格 ~
th标签,也表示表格中的一个单元格(用来表示 表头 的单元格,字体更粗,文字会居中)~
快捷键:
这里有很多的方法技巧,可以提高开发效率 ~
比如说:标签名 * 数量,可以快速生成多个相同标签:
比如说,想要快速列出一行多列的表格:
当然,也可以快速写出多个标签:
示例:
<!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>
<!-- 第一行 -->
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<!-- 第二行 -->
<tr>
<td>张三</td>
<td>男</td>
<td>110</td>
</tr>
<!-- 第三行 -->
<tr>
<td>李四</td>
<td>女</td>
<td>119</td>
</tr>
<!-- 第四行 -->
<tr>
<td>王五</td>
<td>男</td>
<td>120</td>
</tr>
</table>
</body>
</html>
演示:
如果想要让表格出现边框,那么就需要再作出一些调整:使得 table标签 加上 border属性~
如果想要调整表格的尺寸,也需要做出一些调整:使得 table标签 加上 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="1px" width ="500px" height = "300px">
<!-- 第一行 -->
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<!-- 第二行 -->
<tr>
<td>张三</td>
<td>男</td>
<td>110</td>
</tr>
<!-- 第三行 -->
<tr>
<td>李四</td>
<td>女</td>
<td>119</td>
</tr>
<!-- 第四行 -->
<tr>
<td>王五</td>
<td>男</td>
<td>120</td>
</tr>
</table>
</body>
</html>
演示:
如果想要把边框只留一层,那么 就可以在 table标签 加上 cellspacing属性,并置为 0;
示例:
<!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="1px" width ="500px" height = "300px" cellspacing = "0">
<!-- 第一行 -->
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<!-- 第二行 -->
<tr>
<td>张三</td>
<td>男</td>
<td>110</td>
</tr>
<!-- 第三行 -->
<tr>
<td>李四</td>
<td>女</td>
<td>119</td>
</tr>
<!-- 第四行 -->
<tr>
<td>王五</td>
<td>男</td>
<td>120</td>
</tr>
</table>
</body>
</html>
演示:
如果想要表格里面的元素 居中,那么现阶段使用 纯html 暂时是做不到的,需要搭配 CSS,这个在后面会介绍 ~
2.9 列表标签
列表标签 主要分为三类:有序列表、无序列表、自定义列表 ~
其中,有序列表 用 ol标签 来表示; 无序列表 用 ul标签 来表示;
在使用列表的时候,使用 li标签 来表示一个 "列表项" ~
ol:ordered list,"有序的列表" 的意思;
ul:unordered list,"无序的列表" 的意思;
li:list item,表示 "列表项" ~
示例:
<!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标签 表示 列表项 -->
<li>咬人猫</li>
<li>兔总裁</li>
<li>阿叶君</li>
<li>咝小喵</li>
</ol>
<!-- 无序列表 -->
<ul>
<!-- li标签 表示 列表项 -->
<li>咬人猫</li>
<li>兔总裁</li>
<li>阿叶君</li>
<li>咝小喵</li>
</ul>
</body>
</html>
演示:
关于 自定义列表标签,暂时不做过多介绍 ~
2.10 表单标签
表单标签,可以理解为 如果有一个网页,这个网页上需要填写一些相关的信息并提交,而这个填写信息并提交 的操作,就是通过表单标签来实现的 ~
同时,表单标签 并不是只有一个标签,而是有很多很多的标签 ~
2.10.1 form标签
form标签 的功能是:进行前后端交互 ~
描述了 提交给谁,如何提交 等交互细节 ~
由于博主现阶段还没有学习到 服务器,所以先不展开介绍 ~
2.10.2 input标签(重要)
input标签 有很多种形态,这些形态就对应了不同的输入方式 ~
2.10.2.1 单行输入框
比如说,<input type="text"> 是单行输入框:
2.10.2.2 密码框
比如说,<input type="password"> 是 密码框(输入的内容不显示出来,而是 ****** 的方式隐藏):
当然,密码框也可以看见(右边有一个小眼睛)~
2.10.2.3 单选框
比如说,<input type="radio"> + 内容 是单选框:
显然,作为一个单选框,不应该选择两个选项 ~
那么 可以使用 name属性 使得单选框具有 "排他性"(只要把 name属性 赋予的值 设为相同值即可):
如果说,想要把 文字 和 单选框 绑定在一起,那么就需要使用 label标签(以 id属性 为媒介):
id属性 是 html 元素的身份标识,一个页面中的 id 的值是唯一的 ~
示例:
演示:
我们可以看到,上面的一刷新就是未选中的状态, 如果想要一开始加载的时候,就自动选中一个选项,那么就可以使用 checked属性:checked = "checked" :
如:
示例:
演示:
2.10.2.4 复选框
既然有单选框,那么就一定会有 复选框 —— 可以选择多个选项:
<input type="checkbox"> + 内容 就是用来显示复选框的,如:
示例:
演示:
当然,复选框也可以通过 checked属性 来决定默认选中:checked = "checked":
如:
示例:
演示:
当然,也是可以搭配 label标签的:
如:
示例:
演示:
其实,单选框和复选框 都是差不多的 ~
2.10.2.5 按钮
input标签 不仅仅可以用作 输入框,还可以用作 按钮 ~
示例:
演示:
点击 按钮,就可以触发一个 "点击事件",在 JS 中就可以处理点击事件 ~
当然,除了这种普通的按钮,还可以使用 "提交按钮"(能够触发表单提交),需要搭配 form 来使用(这个后面在进行介绍)~
2.10.2.6 文件选择器
允许用户选择一个本地的文件,进一步的上传到服务器上 ~‘
示例:
’
演示:
2.10.3 select标签 下拉菜单
表单标签 除了有 input标签,还有 select标签 ~
select标签 的主要作用是:下拉菜单 ~
示例:
<!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>
<h3>选择城市</h3>
<!-- 下拉菜单 -->
<select>
<!-- 使用 option标签 表示选项 -->
<option>北京</option>
<option>上海</option>
<option>深圳</option>
<option>广州</option>
<option>杭州</option>
<option>安徽</option>
</select>
</body>
</html>
演示:
当然,如果想要默认选中,那么只要加上 slected属性(selected = "select") 即可:
演示:
2.10.4 textarea标签 多行编辑框
示例:
<!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>
<!-- 多行编辑框 -->
<!-- cols属性 和 rows属性 分别表示输入框的 列数 和 行数 -->
<textarea cols="30" rows="10"></textarea>
</body>
</html>
演示:
2.11 无语义标签:div/span
在上面所介绍的标签,如:h1、a、p、u、img、input 等等标签,都是 "有语义标签",标签都是有一个特定的功能和场景的 ~
因为在早期时候,html 初心是用来表示报纸和杂志的,但是 随着时间的推移,人们的生活越来越丰富,网页不仅仅表示报纸和杂志了,固定的标签就可能不够用了;这个时候 就需要用到 "无语义标签" 来表示更多的标签 ~
所谓无语义标签,就是没有特定的应用场景的标签,换句话说,就是 可以适用于大部分场景的标签(上面所介绍的标签,除了 input标签 无法替代,剩下的基本上都可以使用 div/span 来替代)~
div 和 span 都是无语义标签 ~
简单理解:
- div 是一个 "大的盒子",块级元素,独占一行
- span 是一个 "小的盒子",行内元素,不独占一行
当然,上面所介绍的 html标签 只是一些比较常见的标签,可不是全部的标签 ~
现在只需要去掌握这些常见的 heml标签 即可 ~
三、一颗小彩蛋
当我们忘记了密码的时候,可以打开 开发者工具,然后点击小图标之后,找到密码框那一部分代码,将 <input type="text"> 中的 "text" 改为 "password" 即可 ~
前提:浏览器记住密码,然后你忘了这个密码 ~
当然,这个技巧也不是 100% 都有效(希望不要加过密就好)~
四、HTML案例
4.1 简历格式案例
目标样例:
代码示例:
<!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>个人简历</title>
</head>
<body>
<h1>"哎呀是小张啊"的简历</h1>
<h2>基本信息</h2>
<img src="image/皮卡丘.png" alt="照片" width="300px">
<p>姓名: 哎呀是小张啊</p>
<p>年龄: XXXX</p>
<P>性别: XXXX</P>
<p>求职意向: XXX工程师,XXX开发,XXX测开</p>
<p>联系电话: 12345678910</p>
<p>QQ邮箱:12345678910@qq.com</p>
<a href="https://github.com"> github: 我的github链接</a>
<!-- br标签 和 div标签 都可以起到换行的效果 -->
<br>
<div>
<a href="https://www.csdn.net/"> CSDN: 我的CSDN链接</a>
</div>
<h2>教育背景</h2>
<ol>
<li>XXXX ~ XXXX: 幼儿园 XXX</li>
<li>XXXX ~ XXXX: 小学 XXX</li>
<li>XXXX ~ XXXX: 中学 XXX</li>
<li>XXXX ~ XXXX: 高中 XXX</li>
<li>XXXX ~ XXXX: 大学 XXX</li>
</ol>
<h2>专业技能</h2>
<ul>
<li>熟练掌握 Java 的基本语法,熟悉面向对象程序设计</li>
<li>熟悉掌握常用的数据结构,如:顺序表、链表、二叉树、栈、队列、哈希表 等</li>
<li>熟练掌握 MySQL数据库,可以使用 SQL 语句完成基本的增删改查</li>
<li>熟悉进程和线程的基本概念,熟练掌握多线程编程,理解线程安全的相关问题和解决方案</li>
<li>树立网络原理和网络编程,尤其是对于 TCP/IP/HTTP 等重要协议有所理解</li>
<li>......</li>
</ul>
<h2>项目经历</h2>
<ol>
<li>
<h3>留言墙</h3>
<p>开发时间:XXXX-XX-XX 到 XXXX-XX-XX</p>
<P>功能介绍:</P>
<ul>
<li>支持留言发布</li>
<li>支持匿名留言</li>
</ul>
</li>
<li>
<h3>学习小助手</h3>
<p>开发时间:XXXX-XX-XX 到 XXXX-XX-XX</p>
<P>功能介绍:</P>
<ul>
<li>支持错题检索</li>
<li>支持同学讨论</li>
</ul>
</li>
</ol>
</body>
</html>
4.2 简历填写案例
目标样例:
代码示例:
<!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>个人简历</title>
</head>
<body>
<h1>请填写简历信息</h1>
<table width = "500px">
<tr>
<td>姓名</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name = "a"> <img src="image/男.png" width="22px"> 男
<input type="radio" name = "a"> <img src="image/女.png" width="22px"> 女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<select >
<option>--请选择年份--</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
</select>
<select >
<option>--请选择月份--</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select >
<option>--请选择日期--</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
</td>
</tr>
<tr>
<td>就读学校</td>
<td><input type="text"></td>
</tr>
<tr>
<td>应聘岗位</td>
<td>
<input type="checkbox">前端开发
<input type="checkbox">后端开发
<input type="checkbox">测试开发
<input type="checkbox">运维开发
</td>
</tr>
<tr>
<td>掌握的技能</td>
<td>
<textarea cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td>项目经历</td>
<td>
<textarea cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox">我已阅读了公司的招聘要求
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#">查看我的状态</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h3>请应聘者确认:</h3>
<ul>
<li>以上信息真实有效</li>
<li>能够尽早去公司确认</li>
<li>能够接受公司的加班文化</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
好了,关于 HTML 的知识点就介绍到这里了 ~
怎么样,是不是很有趣 ~
如果感觉这一篇博客对你有帮助的话,可以一键三连走一波,非常非常感谢啦 ~