• 【JavaEE初阶】前端篇：HTML（下篇）

    ☕导航小助手☕

      🍚写在前面

             🍔🍔2.7 超链接标签

             🍰🍰2.8 表格标签

             🎂🎂2.9 列表标签

             🥮🥮2.10 表单标签

                       🍣🍣🍣2.10.1 form标签

                       🍤🍤🍤2.10.2 input标签（重要）

                                       🥣🥣🥣🥣2.10.2.1 单行输入框

                                       🍝🍝🍝🍝2.10.2.2 密码框 

                                       🦪🦪🦪🦪2.10.2.3 单选框

                                       🍲🍲🍲🍲2.10.2.4 复选框 

                                       🥩🥩🥩🥩2.10.2.5 按钮

                                       🧀🧀🧀🧀2.10.2.6 文件选择器

                       🍞🍞🍞2.10.3 select标签 下拉菜单

                       🧇🧇🧇2.10.4 textarea标签 多行编辑框

             🥡🥡2.11 无语义标签：div/span

        🍜三、一颗小彩蛋 

        🍱四、HTML案例

             🍨🍨4.1 简历格式案例

             🥐🥐4.2 简历填写案例

    写在前面

    本篇博客是仅仅承接与上一篇博客的内容，若要学习完整的 HTML 内容，可移步至上一篇博客，依次学习 ~

    🚪传送门🚪【JavaEE初阶】前端篇：HTML（上篇）

    2.7 超链接标签

    超链接标签，即 a标签 ~

    点击 超链接(a标签)，就会触发 浏览器 的页面跳转 ~

    超链接：就类似于快捷方式，跳转的范围贼大，刷的一下就可以跳转到另外一个页面 ~

    语法：

    1. <a href=""> a>
    2. --其中，href属性 后面的 " " 中写的是：需要跳转的页面的链接;
    3. --两个尖括号的内容是：所显示在页面上的超链接的内容

     示例：

    1. html>   
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <a href="https://www.sogou.com">这是一个跳往搜狗的超链接a>
    11. body>
    12. html>

    演示：

    注意（下面是了解即可）：

    a标签 中的 href属性 有很多种的写法：

    可以是一个完整的网址，可以跳转到任意的网站 ~

    还可以只写一个 文件名/相对路径，则表示在当前网站内部跳转：

     

    还可以写成 #，表示不进行任何跳转~

    还可以写成其他类型的文件（不一定是 html文件），这个时候会触发浏览器的下载功能 ~

    其实，上面的 超链接标签 都是 新的页面 替换了 原有的页面（不过，上面没有截的到，嘿嘿，没关系，大家知道就可以了）~

    而在大家平常上网的时候，点击链接之后，都是又出现了一个新的页面，而没有将原来的页面替换掉，这其实是要在 a标签中 添加一个属性 target="_blank" ，然后就会出现这个效果了~

    2.8 表格标签

    表格标签，其实是有一组标签，通过这一组标签来构成一个表格 ~

    如：

    table标签，表示整个表格 ~

    tr标签，表示表格中的一行 ~

    td标签，表示表格中的一个单元格 ~

    th标签，也表示表格中的一个单元格（用来表示 表头 的单元格，字体更粗，文字会居中）～

    快捷键：

    这里有很多的方法技巧，可以提高开发效率 ~

    比如说：标签名 * 数量，可以快速生成多个相同标签：

    比如说，想要快速列出一行多列的表格：

    当然，也可以快速写出多个标签：

    示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8. </head>
    9. <body>
    10.     <!-- 整个表格 -->
    11.     <table>
    12.         <!-- 第一行 -->
    13.         <tr>
    14.             <th>姓名</th>
    15.             <th>性别</th>
    16.             <th>电话</th>
    17.         </tr>
    18.         <!-- 第二行 -->
    19.         <tr>
    20.             <td>张三</td>
    21.             <td>男</td>
    22.             <td>110</td>
    23.         </tr>
    24.         <!-- 第三行 -->
    25.         <tr>
    26.             <td>李四</td>
    27.             <td>女</td>
    28.             <td>119</td>
    29.         </tr>
    30.         <!-- 第四行 -->
    31.         <tr>
    32.             <td>王五</td>
    33.             <td>男</td>
    34.             <td>120</td>
    35.         </tr>
    36.         
    37.     </table>
    38. </body>
    39. </html>

    演示：

    如果想要让表格出现边框，那么就需要再作出一些调整：使得 table标签 加上 border属性~

    如果想要调整表格的尺寸，也需要做出一些调整：使得 table标签 加上 width/height属性 ~

    示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8. </head>
    9. <body>
    10.     <!-- 整个表格 -->
    11.     <table border="1px" width ="500px" height = "300px">
    12.         <!-- 第一行 -->
    13.         <tr>
    14.             <th>姓名</th>
    15.             <th>性别</th>
    16.             <th>电话</th>
    17.         </tr>
    18.         <!-- 第二行 -->
    19.         <tr>
    20.             <td>张三</td>
    21.             <td>男</td>
    22.             <td>110</td>
    23.         </tr>
    24.         <!-- 第三行 -->
    25.         <tr>
    26.             <td>李四</td>
    27.             <td>女</td>
    28.             <td>119</td>
    29.         </tr>
    30.         <!-- 第四行 -->
    31.         <tr>
    32.             <td>王五</td>
    33.             <td>男</td>
    34.             <td>120</td>
    35.         </tr>
    36.         
    37.     </table>
    38. </body>
    39. </html>

    演示：

    如果想要把边框只留一层，那么 就可以在 table标签 加上 cellspacing属性，并置为 0；

    示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8. </head>
    9. <body>
    10.     <!-- 整个表格 -->
    11.     <table border="1px" width ="500px" height = "300px" cellspacing = "0">
    12.         <!-- 第一行 -->
    13.         <tr>
    14.             <th>姓名</th>
    15.             <th>性别</th>
    16.             <th>电话</th>
    17.         </tr>
    18.         <!-- 第二行 -->
    19.         <tr>
    20.             <td>张三</td>
    21.             <td>男</td>
    22.             <td>110</td>
    23.         </tr>
    24.         <!-- 第三行 -->
    25.         <tr>
    26.             <td>李四</td>
    27.             <td>女</td>
    28.             <td>119</td>
    29.         </tr>
    30.         <!-- 第四行 -->
    31.         <tr>
    32.             <td>王五</td>
    33.             <td>男</td>
    34.             <td>120</td>
    35.         </tr>
    36.         
    37.     </table>
    38. </body>
    39. </html>

    演示：

    如果想要表格里面的元素 居中，那么现阶段使用 纯html 暂时是做不到的，需要搭配 CSS，这个在后面会介绍 ~

    2.9 列表标签

    列表标签 主要分为三类：有序列表、无序列表、自定义列表 ~

    其中，有序列表 用 ol标签 来表示； 无序列表 用 ul标签 来表示；

    在使用列表的时候，使用 li标签 来表示一个 "列表项" ~

    ol：ordered list，"有序的列表" 的意思；

    ul：unordered list，"无序的列表" 的意思；

    li：list item，表示 "列表项" ~

    示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8. </head>
    9. <body>
    10.     <!-- 列表标签 -->
    11.  
    12.     <!-- 有序列表 -->
    13.     <ol>
    14.         <!-- li标签 表示 列表项 -->
    15.         <li>咬人猫</li>
    16.         <li>兔总裁</li>
    17.         <li>阿叶君</li>
    18.         <li>咝小喵</li>
    19.     </ol>
    20.  
    21.     <!-- 无序列表 -->
    22.     <ul>
    23.          <!-- li标签 表示 列表项 -->
    24.          <li>咬人猫</li>
    25.          <li>兔总裁</li>
    26.          <li>阿叶君</li>
    27.          <li>咝小喵</li>
    28.     </ul>
    29.     
    30. </body>
    31. </html>

    演示：

    关于 自定义列表标签，暂时不做过多介绍 ~ 

    2.10 表单标签

    表单标签，可以理解为 如果有一个网页，这个网页上需要填写一些相关的信息并提交，而这个填写信息并提交 的操作，就是通过表单标签来实现的 ~

    同时，表单标签 并不是只有一个标签，而是有很多很多的标签 ~

    2.10.1 form标签

    form标签 的功能是：进行前后端交互 ~

    描述了 提交给谁，如何提交 等交互细节 ~

    由于博主现阶段还没有学习到 服务器，所以先不展开介绍 ~

      

    2.10.2 input标签（重要）

    input标签 有很多种形态，这些形态就对应了不同的输入方式 ~

    2.10.2.1 单行输入框

    比如说， 是单行输入框：

    2.10.2.2 密码框 

    比如说， 是 密码框（输入的内容不显示出来，而是 ****** 的方式隐藏）：

    当然，密码框也可以看见（右边有一个小眼睛）~

    2.10.2.3 单选框

    比如说， + 内容 是单选框：

    显然，作为一个单选框，不应该选择两个选项 ~

    那么 可以使用 name属性 使得单选框具有 "排他性"（只要把 name属性 赋予的值 设为相同值即可）：

    如果说，想要把 文字 和 单选框 绑定在一起，那么就需要使用 label标签（以 id属性 为媒介）：

    id属性 是 html 元素的身份标识，一个页面中的 id 的值是唯一的 ~

    示例：

     

    演示： 

    我们可以看到，上面的一刷新就是未选中的状态， 如果想要一开始加载的时候，就自动选中一个选项，那么就可以使用 checked属性：checked = "checked" ：

    如：

    示例：

    演示：

    2.10.2.4 复选框 

    既然有单选框，那么就一定会有 复选框 —— 可以选择多个选项：

    + 内容 就是用来显示复选框的，如：

    示例：

    演示：

    当然，复选框也可以通过 checked属性 来决定默认选中：checked = "checked"：

    如：

    示例：

    演示：

    当然，也是可以搭配 label标签的：

    如：

    示例：

    演示：

    其实，单选框和复选框 都是差不多的 ~

    2.10.2.5 按钮

    input标签 不仅仅可以用作 输入框，还可以用作 按钮 ~

    示例：

    演示：

    点击 按钮，就可以触发一个 "点击事件"，在 JS 中就可以处理点击事件 ~

    当然，除了这种普通的按钮，还可以使用 "提交按钮"（能够触发表单提交），需要搭配 form 来使用（这个后面在进行介绍）~

    2.10.2.6 文件选择器

    允许用户选择一个本地的文件，进一步的上传到服务器上 ~‘

    示例：

    ’

    演示：

    2.10.3 select标签 下拉菜单

    表单标签 除了有 input标签，还有 select标签 ~

    select标签 的主要作用是：下拉菜单 ~

    示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8. </head>
    9. <body>
    10.     <h3>选择城市</h3>
    11.     <!-- 下拉菜单 -->
    12.     <select>
    13.         <!-- 使用 option标签 表示选项 -->
    14.         <option>北京</option>
    15.         <option>上海</option>
    16.         <option>深圳</option>
    17.         <option>广州</option>
    18.         <option>杭州</option>
    19.         <option>安徽</option>
    20.     </select>
    21. </body>
    22. </html>

    演示：

    当然，如果想要默认选中，那么只要加上 slected属性（selected = "select"） 即可：

    演示：

    2.10.4 textarea标签 多行编辑框

     示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8. </head>
    9. <body>
    10.     <!-- 多行编辑框 -->
    11.     <!-- cols属性 和 rows属性 分别表示输入框的 列数 和 行数 -->
    12.     <textarea cols="30" rows="10"></textarea>
    13. </body>
    14. </html>

    演示：

       

    2.11 无语义标签：div/span

    在上面所介绍的标签，如：h1、a、p、u、img、input 等等标签，都是 "有语义标签"，标签都是有一个特定的功能和场景的 ~

    因为在早期时候，html 初心是用来表示报纸和杂志的，但是 随着时间的推移，人们的生活越来越丰富，网页不仅仅表示报纸和杂志了，固定的标签就可能不够用了；这个时候 就需要用到 "无语义标签" 来表示更多的标签 ~

    所谓无语义标签，就是没有特定的应用场景的标签，换句话说，就是 可以适用于大部分场景的标签（上面所介绍的标签，除了 input标签 无法替代，剩下的基本上都可以使用 div/span 来替代）~

    div 和 span 都是无语义标签 ~

    简单理解：

    • div 是一个 "大的盒子"，块级元素，独占一行
    • span 是一个 "小的盒子"，行内元素，不独占一行

    当然，上面所介绍的 html标签 只是一些比较常见的标签，可不是全部的标签 ~

    现在只需要去掌握这些常见的 heml标签 即可 ~

    三、一颗小彩蛋 

    当我们忘记了密码的时候，可以打开 开发者工具，然后点击小图标之后，找到密码框那一部分代码，将  中的 "text" 改为 "password" 即可 ~

    前提：浏览器记住密码，然后你忘了这个密码 ~

    当然，这个技巧也不是 100% 都有效（希望不要加过密就好）~

    四、HTML案例

    4.1 简历格式案例

    目标样例：

    代码示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>个人简历</title>
    8. </head>
    9. <body>
    10.     <h1>"哎呀是小张啊"的简历</h1>
    11.     <h2>基本信息</h2>
    12.     <img src="image/皮卡丘.png" alt="照片" width="300px">
    13.     <p>姓名: 哎呀是小张啊</p>
    14.     <p>年龄: XXXX</p>
    15.     <P>性别: XXXX</P>
    16.     <p>求职意向: XXX工程师,XXX开发,XXX测开</p>
    17.     <p>联系电话: 12345678910</p>
    18.     <p>QQ邮箱:12345678910@qq.com</p>
    19.     <a href="https://github.com"> github: 我的github链接</a>
    20.     <!-- br标签 和 div标签 都可以起到换行的效果 -->
    21.     <br>
    22.     <div>
    23.         <a href="https://www.csdn.net/"> CSDN: 我的CSDN链接</a>
    24.     </div>
    25.     <h2>教育背景</h2>
    26.     <ol>
    27.         <li>XXXX ~ XXXX: 幼儿园 XXX</li>
    28.         <li>XXXX ~ XXXX: 小学 XXX</li>
    29.         <li>XXXX ~ XXXX: 中学 XXX</li>
    30.         <li>XXXX ~ XXXX: 高中 XXX</li>
    31.         <li>XXXX ~ XXXX: 大学 XXX</li>
    32.     </ol>
    33.  
    34.     <h2>专业技能</h2>
    35.     <ul>
    36.         <li>熟练掌握 Java 的基本语法，熟悉面向对象程序设计</li>
    37.         <li>熟悉掌握常用的数据结构，如：顺序表、链表、二叉树、栈、队列、哈希表 等</li>
    38.         <li>熟练掌握 MySQL数据库,可以使用 SQL 语句完成基本的增删改查</li>
    39.         <li>熟悉进程和线程的基本概念，熟练掌握多线程编程，理解线程安全的相关问题和解决方案</li>
    40.         <li>树立网络原理和网络编程，尤其是对于 TCP/IP/HTTP 等重要协议有所理解</li>
    41.         <li>......</li>
    42.     </ul>
    43.  
    44.     <h2>项目经历</h2>
    45.     <ol>
    46.         <li>
    47.             <h3>留言墙</h3>
    48.             <p>开发时间:XXXX-XX-XX 到 XXXX-XX-XX</p>
    49.             <P>功能介绍：</P>
    50.             <ul>
    51.                 <li>支持留言发布</li>
    52.                 <li>支持匿名留言</li>
    53.             </ul>
    54.         </li>
    55.         <li>
    56.             <h3>学习小助手</h3>
    57.             <p>开发时间:XXXX-XX-XX 到 XXXX-XX-XX</p>
    58.             <P>功能介绍：</P>
    59.             <ul>
    60.                 <li>支持错题检索</li>
    61.                 <li>支持同学讨论</li>
    62.             </ul>
    63.         </li>
    64.     </ol>
    65. </body>
    66. </html>

    4.2 简历填写案例

    目标样例：

    代码示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>个人简历</title>
    8. </head>
    9. <body>
    10.     <h1>请填写简历信息</h1>
    11.     <table width = "500px">
    12.         <tr>
    13.             <td>姓名</td>
    14.             <td>
    15.                 <input type="text">
    16.             </td>
    17.         </tr>
    18.         <tr>
    19.             <td>性别</td>
    20.             <td>
    21.                 <input type="radio" name = "a"> <img src="image/男.png" width="22px"> 男
    22.                 <input type="radio" name = "a"> <img src="image/女.png" width="22px"> 女
    23.             </td>
    24.         </tr>
    25.         <tr>
    26.             <td>出生日期</td>
    27.             <td>
    28.                 <select >
    29.                     <option>--请选择年份--</option>
    30.                     <option>1995</option>
    31.                     <option>1996</option>
    32.                     <option>1997</option>
    33.                     <option>1998</option>
    34.                     <option>1999</option>
    35.                     <option>2000</option>
    36.                 </select>
    37.     
    38.                 <select >
    39.                     <option>--请选择月份--</option>
    40.                     <option>01</option>
    41.                     <option>02</option>
    42.                     <option>03</option>
    43.                     <option>04</option>
    44.                     <option>05</option>
    45.                     <option>06</option>
    46.                     <option>07</option>
    47.                     <option>08</option>
    48.                     <option>09</option>
    49.                     <option>10</option>
    50.                     <option>11</option>
    51.                     <option>12</option>
    52.                 </select>
    53.     
    54.                 <select >
    55.                     <option>--请选择日期--</option>
    56.                     <option>01</option>
    57.                     <option>02</option>
    58.                     <option>03</option>
    59.                     <option>04</option>
    60.                     <option>05</option>
    61.                     <option>06</option>
    62.                     <option>07</option>
    63.                     <option>08</option>
    64.                     <option>09</option>
    65.                     <option>10</option>
    66.                     <option>11</option>
    67.                     <option>12</option>
    68.                     <option>13</option>
    69.                     <option>14</option>
    70.                     <option>15</option>
    71.                     <option>16</option>
    72.                     <option>17</option>
    73.                     <option>18</option>
    74.                     <option>19</option>
    75.                     <option>20</option>
    76.                     <option>21</option>
    77.                     <option>22</option>
    78.                     <option>23</option>
    79.                     <option>24</option>
    80.                     <option>26</option>
    81.                     <option>27</option>
    82.                     <option>28</option>
    83.                     <option>29</option>
    84.                     <option>30</option>
    85.                     <option>31</option>
    86.                 </select>
    87.             </td>
    88.         </tr>
    89.  
    90.         <tr>
    91.             <td>就读学校</td>
    92.             <td><input type="text"></td>
    93.         </tr>
    94.  
    95.         <tr>
    96.             <td>应聘岗位</td>
    97.             <td>
    98.                 <input type="checkbox">前端开发
    99.                 <input type="checkbox">后端开发
    100.                 <input type="checkbox">测试开发
    101.                 <input type="checkbox">运维开发
    102.             </td>
    103.         </tr>
    104.  
    105.         <tr>
    106.             <td>掌握的技能</td>
    107.             <td>
    108.                 <textarea cols="30" rows="10"></textarea>
    109.             </td>
    110.         </tr>
    111.  
    112.         <tr>
    113.             <td>项目经历</td>
    114.             <td>
    115.                 <textarea cols="30" rows="10"></textarea>
    116.             </td>
    117.         </tr>
    118.  
    119.         <tr>
    120.             <td></td>
    121.             <td>
    122.                 <input type="checkbox">我已阅读了公司的招聘要求
    123.             </td>
    124.         </tr>
    125.  
    126.         <tr>
    127.             <td></td>
    128.             <td>
    129.                 <a href="#">查看我的状态</a>
    130.             </td>
    131.         </tr>
    132.  
    133.         <tr>
    134.             <td></td>
    135.             <td>
    136.                 <h3>请应聘者确认：</h3>
    137.                 <ul>
    138.                     <li>以上信息真实有效</li>
    139.                     <li>能够尽早去公司确认</li>
    140.                     <li>能够接受公司的加班文化</li>
    141.                 </ul>
    142.             </td>
    143.         </tr>
    144.     </table>
    145. </body>
    146. </html>
    147.  
    148.  
    149.

    好了，关于 HTML 的知识点就介绍到这里了 ~

    怎么样，是不是很有趣 ~

    如果感觉这一篇博客对你有帮助的话，可以一键三连走一波，非常非常感谢啦 ~

  • 相关阅读:
    956. 最高的广告牌
    猿创征文 | Java 泛型&类库&枚举&反射机制 要点
    SpringBoot+Vue项目旅游信息推荐系统【源码开源】
    Ubuntu 24.04 屏蔽snap包
    顾客点餐系统-----操作菜品JDBC代码的编写(1)
    tracker-sotre CPU占用率过高
    Linux系统权限和用户相关操作
    全国职业院校技能大赛 - ruijie网络模块 - 样卷一解析
    sdk工程添加mfc控件
    部署LVS-NAT群集实验
  • 原文地址：https://blog.csdn.net/qq_53362595/article/details/126962996