【JavaEE初阶】前端第二节.HTML基础（下篇）

未央.303

已于 2023-04-03 11:38:44 修改

阅读量344

点赞数 10

分类专栏： JavaEE初阶文章标签： java-ee html java

于 2023-03-29 21:21:19 首次发布

本文链接：https://blog.csdn.net/qq_64861334/article/details/128720186

版权

JavaEE初阶专栏收录该内容

29 篇文章 6 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

3.10.4 textarea标签多行编辑框

前言

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

链接：前端第一节.HTML 基础(上篇)

3.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" ，然后就会出现这个效果了；

代码示例：

显示：

3.8 表格标签

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

如：

table标签，表示整个表格；

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

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

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

快捷键：

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

1.比如说：标签名 * 数量，可以快速生成多个相同标签：（打完按回车）

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

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

代码示例：

<!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，这个在后面会介绍；

3.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>

显示：

说明：关于自定义列表标签，暂时不做过多介绍；

3.10 表单标签

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

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

3.10.1 form标签

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

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

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

3.10.2 input标签（重要）

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

3.10.2.1 单行输入框

<input type="text"> 是单行输入框;

演示：

3.10.2.2 密码框

<input type="password"> 是密码框（输入的内容不显示出来，而是 ****** 的方式隐藏）：

演示：

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

3.10.2.3 单选框

<input type="radio"> + 内容是单选框：

演示：

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

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

演示：

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

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

代码示例：

演示：

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

代码示例：

演示：

3.10.2.4 复选框

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

<input type="checkbox"> + 内容就是用来显示复选框的；

代码示例：

演示：

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

代码示例;

演示：

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

示例：

演示：

3.10.2.5 按钮

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

代码示例：

演示：

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

说明：

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

3.10.2.6 文件选择器

作用：

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

代码示例：

演示：

3.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"）即可：

3.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>

演示：