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

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

语法:

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

怎么样,是不是很有趣 ~

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

  • 13
    点赞
  • 7
    收藏
  • 打赏
    打赏
  • 14
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:撸撸猫 设计师:马嘣嘣 返回首页
评论 14

打赏作者

哎呀是小张啊

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值