当前位置： 首页 > news >正文

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

news 来源：原创 2024/5/19 23:46:04

☕导航小助手☕

  🍚写在前面

         🍔🍔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标签)，就会触发 浏览器 的页面跳转 ~

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

语法：

<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 的知识点就介绍到这里了 ~

怎么样，是不是很有趣 ~

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

相关文章：

  • 中国青年报APP设备注册
  • Nginx基本介绍
  • 使用python把普通图片生成ico图标
  • python04- 函数、time
  • 【乳腺癌诊断】基于聚类和遗传模糊算法乳腺癌（诊断）分析（Matlab代码实现）
  • 【优化算法】最小均值 (LMF) 和最小均方 (LMS) 算法【含Matlab源码 2134期】
  • 本地Pycharm连接远程服务器详细配置过程（直接在本地使用服务器显卡，很棒）
  • 大数据技术之HBase+Redis详解
  • 技术分享 | 客户说 insert 慢，我该怎么办
  • 58%数据泄漏由内部引起，防泄密系统助力企业数据安全管理防泄露
  • 2022年高新技术企业优惠政策
  • 如何用AR Engine开发一个虚拟形象表情包？
  • helm 简介与入门
  • 思维模型丨看先辈是如何学习的？
  • linux 终端美化教程
  • 【mysql】环境安装、服务启动、密码设置
  • 【跃迁之路】【733天】程序员高效学习方法论探索系列（实验阶段490-2019.2.23）...
  • CentOS 7 防火墙操作
  • ES6之路之模块详解
  • gulp 教程
  • Java的Interrupt与线程中断
  • leetcode98. Validate Binary Search Tree
  • Mybatis初体验
  • MySQL主从复制读写分离及奇怪的问题
  • PhantomJS 安装
  • Python进阶细节
  • react-native 安卓真机环境搭建
  • Redis提升并发能力 | 从0开始构建SpringCloud微服务(2)
  • Stream流与Lambda表达式（三） 静态工厂类Collectors
  • 阿里云ubuntu14.04 Nginx反向代理Nodejs
  • 爱情 北京女病人
  • 第十八天-企业应用架构模式-基本模式
  • 全栈开发——Linux
  • 微信公众号开发小记——5.python微信红包
  • 应用生命周期终极 DevOps 工具包
  • 如何在招聘中考核.NET架构师
  • ​Linux Ubuntu环境下使用docker构建spark运行环境（超级详细）
  • ​七周四次课（5月9日)iptables filter表案例、iptables nat表应用
  • ＃在线报价接单​再坚持一下 明天是真的周六.出现货 实单来谈
  • $.ajax,axios,fetch三种ajax请求的区别
  • (01)ORB-SLAM2源码无死角解析-(66) BA优化(g2o)→闭环线程:Optimizer::GlobalBundleAdjustemnt→全局优化
  • (07)Hive——窗口函数详解
  • （11）MSP430F5529 定时器B
  • (C++)八皇后问题
  • （C语言）逆序输出字符串
  • （附源码）ssm学生管理系统 毕业设计 141543
  • （附源码）计算机毕业设计SSM基于java的云顶博客系统
  • (转)C语言家族扩展收藏 (转)C语言家族扩展
  • （转）淘淘商城系列——使用Spring来管理Redis单机版和集群版
  • (转载)CentOS查看系统信息|CentOS查看命令
  • .Net CoreRabbitMQ消息存储可靠机制
  • .NET Framework 3.5中序列化成JSON数据及JSON数据的反序列化，以及jQuery的调用JSON
  • .Net Memory Profiler的使用举例
  • .NET3.5下用Lambda简化跨线程访问窗体控件,避免繁复的delegate,Invoke(转)
  • .Net组件程序设计之线程、并发管理（一）