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

【JavaEE进阶】-- HTML

article 2025/3/17 9:05:13

文章目录

1. HTML
- 1.1 HTML基础
- - 1.1.1 什么是HTML
  - 1.1.2 认识HTML标签
  - 1.1.3 HTML 文件基本结构
  - 1.1.4 标签层次结构
- 1.2 HTML快速入门
- - 1.2.1 开发工具
- 1.3 HTML常见标签
- - 1.3.1 标题标签h1~h6
  - 1.3.2 段落标签：p
  - 1.3.3 换行标签：br
  - 1.3.4 图片标签：img
  - 1.3.5 超链接：a
- 1.4 表格标签
- 1.5 表单标签
- - 1.5.1 form标签
  - 1.5.2 input标签
  - 1.5.3 select标签（下拉菜单）
  - 1.5.4 textarea标签（文本域）
- 1.6 无语义标签：div & span（重中之重）
- 1.7 综合练习：用户注册

1. HTML

1.1 HTML基础

1.1.1 什么是HTML

HTML(HyperTextMarkupLanguage),超文本标记语言。

**超文本：**比文本要强大.通过链接和交互式方式来组织和呈现信息的文本形式.不仅仅有文本，还可能包含图片，音频，或者自已经审阅过它的学者所加的评注、补充或脚注等等。

**标记语言：**由标签构成的语言。

HTML的标签都是提前定义好的，使用不同的标签，表示不同的内容，类似word文档：

如果选中文本，点击标题1，就会使用标题1的样式来显示文本，上述标题1就是一个"标签”。

1.1.2 认识HTML标签

标签名(body)放到<>中
大部分标签成对出现．< h1 > 为开始标签，< /h1 >为结束标签
少数标签只有开始标签，称为“单标签”
开始标签和结束标签之间，写的是标签的内容
开始标签中可能会带有“属性".id属性相当于给这个标签设置了一个唯一的标识符(身份证号码).

<h3 id="myId">我是三级标题</h3>

1.1.3 HTML 文件基本结构

<html>
	<head>
	    <title>第一个页面</title>
	</head>
	<body>
	    hello word
	</body>
</html>

html标签是整个html文件的根标签（最顶层标签）
head标签中写页面的属性
body标签中写的是页面上显示的内容
title标签中写的是页面的标题

1.1.4 标签层次结构

在这里插入图片描述

标签的关系

父子关系 html 和head, html 和body, head和title 就是父子关系
兄弟关系系head和body就是兄弟关系

问：为什么上面的heml代码并不符合html文件的基本结构，却能在浏览器中正常运行并显示？
答：这是因为浏览器的鲁棒性（可以理解为面对粗鲁，表现得很好）非常好。

1.2 HTML快速入门

1.2.1 开发工具

我这里使用得是Visual Studio Code.
在这里插入图片描述
在VS Code中创建文件×××.html，直接输入！, 按Enter或tab 键,此时能自动生成代码的主体框架.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

在这里插入图片描述
在标签中,任意书写文字,按Ctrl+s 保持文件,通过浏览器访问即可.如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    第一个HTML页面
</body>
</html>

浏览器运行结果如下：
在这里插入图片描述

可以通过快捷键查看前端网页的前端代码F12。

1.3 HTML常见标签

1.3.1 标题标签h1~h6

从h1-h6.数字越大，则字体越小.

<h1>hello</h1>
 <h2>hello</h2>
 <h3>hello</h3>
 <h4>hello</h4>
 <h5>hello</h5>
 <h6>hello</h6>

快捷键：Shift + Alt + ⬆（快速复制上面一行）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习HTML标签</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>一级标题</h2>
    <h3>一级标题</h3>
    <h4>一级标题</h4>
    <h5>一级标题</h5>
    <h6>一级标题</h6>
</body>
</html>

浏览器输出结果：
在这里插入图片描述

虽然浏览器鲁棒性很好，但是我们还是要按照标准的写法，如果页面比较复杂，可能会出错。

1.3.2 段落标签：p

在HTML中，段落，换行符，空格都会失效，，需要使用专门的标签.

p 标签表示一个段落

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习HTML标签</title>
</head>
<body>
    我是一个段落
    我是一个段落
</body>
</html>

在这里插入图片描述
我们发现换行和空格都会变成一个空格，如果需要分成段落。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习HTML标签</title>
</head>
<body>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
</body>
</html>

浏览器输出结果：
在这里插入图片描述

p标签描述的段落，前面没有缩进.(CSS会学)
自动根据浏览器宽度来决定排版，
html内容首尾处的换行，空格均无效
在html中文字之间输入的多个空格只相当于一个空格
html中直接输入换行不会真的换行，而是相当于一个空格

1.3.3 换行标签：br

想要完成换行的话，也可以通过
标签来实现.
br是break的缩写.表示换行.

br是一个单标签（不需要结束标签）
br标签不像p标签那样带有一个很大的空隙
<br/>是规范写法.不建议写成<br>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习HTML标签</title>
</head>
<body>
    这是一个br标签<br/>
    这是一个br标签<br/>
    这是一个br标签<br/>
</body>
</html>

浏览器输出结果：
在这里插入图片描述
观察
标签和

标签的区别
在这里插入图片描述

1.3.4 图片标签：img

img标签必须带有src属性.表示图片的路径.

 <img src="rose.jpg">

其中src表示的是图片路径：可以是相对路径、绝对路径、网络路径。

网络路径
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习HTML标签</title>
</head>
<body>
    <img src="https://img1.baidu.com/it/u=2172818577,3783888802&fm=253" alt="">
</body>
</html>

浏览器输出结果：
在这里插入图片描述
还可以给图片设置属性：

<img src="https://img1.baidu.com/it/u=2172818577,3783888802&fm=253" alt="" width="500px">

浏览器输出结果：
在这里插入图片描述
如果宽度和高度只设置了一个，图片会按照设置的那个等比例进行缩放。

如果同时设置了高度和宽度，图片会按照设置的大小进行展示。

px(像素)：是一个长度单位，像素是相对于屏幕分辨率而言的。
以我的电脑的分辨率为例：相当于将电脑屏幕的长分为2560份，宽分为1600份.那么一个小格子就是一个分辨率。但是分辨率和像素并不是相等的，只是有一定的关系。
那么可能同样的1像素，在不同的显示器上显示的是不一样的。

<img src="https://img1.baidu.com/it/u=2172818577,3783888802&fm=253" title="我是title" width="500px">

浏览器输出结果：
在这里插入图片描述

当光标放在图片上静止时，就会出现我是title的提示

下面我要将这个图片的网络地址改成一个无效的地址：

<img src="/it/u=2172818577,3783888802&fm=253" alt="我是alt" width="500px">

浏览器输出结果：
在这里插入图片描述
在当图片出现异常无法显示的时候，显示alt属性。

绝对路径

这是我的目录情况：

<img src="D:\code\前端代码\pic\p3.gif" alt="我是alt" width="500px">

绝对地址就是从根目录开始的路径。

浏览器输出结果：
在这里插入图片描述
相对路径
还是上面那张图片，那张图片相对于该html文件的路径：

我的图片存放在html文件的父目录的子目录里面。

<img src="../前端代码/pic/p3.gif" alt="我是alt" width="500px">

浏览器输出结果：
在这里插入图片描述

注意：

属性可以有多个，不能写到标签之前
属性之间用空格分割，可以是多个空格，也可以是换行
属性之间不分先后顺序
属性使用“键值对”的格式来表示

1.3.5 超链接：a

在一些网页中，我们点击默写字就跳转到另一个页面，这个就是超链接的一种形式。

外部链接

<a href="https://www.baidu.com/">这是百度首页</a>

浏览器输出结果：
在这里插入图片描述
我们发现这是在原网页上直接跳转的，并没有新开一个网页，这样可能会有点不太方便，我们可以使用target属性来进行设置。

在这里插入图片描述

<a href="https://www.baidu.com/" target="_blank">这是百度首页</a>

浏览器输出结果：
在这里插入图片描述
这样就实现了另开一个网页的效果。

内部链接

下面是我的文件目录：

<a href="demo02.html">跳转到demo02文件</a>

这里实现是使用的相对路径。

浏览器输出结果：
在这里插入图片描述
空链接

<a href="#">这是一个空链接</a>

浏览器输出结果：
在这里插入图片描述
文件链接

<a href="../1.zip">1.zip</a>

浏览器输出结果：
在这里插入图片描述
可以看到当鼠标点击了这个文件超链接，就会弹出一个下载的提示，所以文件链接会达到一个下载的作用。

1.4 表格标签

table标签：表示整个表格
tr:表示表格的一行
td:表示一个单元格
thead：表格的头部区域
tbody:表格的主体区域
table包含tr，tr包含td

需求：画一个三行两列的表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习HTML标签</title>
</head>
<body>
    <table>
       <tr>
        <td></td>
        <td></td>
       </tr> 
       <tr>
        <td></td>
        <td></td>
       </tr> 
       <tr>
        <td></td>
        <td></td>
       </tr>
    </table>
</body>
</html>

浏览器输出结果：
在这里插入图片描述
浏览器上显示的是空白的，但是并不是因为我们并没有画出来表格。我们可以按F12来观察一下。

给表格中添加值

<table>
   <tr>
    <td>111</td>
    <td>222</td>
   </tr> 
   <tr>
    <td>333</td>
    <td>444</td>
   </tr> 
   <tr>
    <td>555</td>
    <td>666</td>
   </tr>
</table>

浏览器输出结果：
在这里插入图片描述
但是这个表格中并没有边框，在html中这个边框是要画的，使用border属性来设置边框的粗细。

<table border="1px">
   <tr>
    <td>111</td>
    <td>222</td>
   </tr> 
   <tr>
    <td>333</td>
    <td>444</td>
   </tr> 
   <tr>
    <td>555</td>
    <td>666</td>
   </tr>
</table>

浏览器输出结果：
在这里插入图片描述
但是此时这个边框丑丑的🤔谁家的边框这么漏风🤷‍♀️

表格标签有一些属性，可以用于设置大小边框等.但是一般使用CSS方式来设置。
这些属性都要放到table标签中

align是表格相对于周围元素的对齐方式
align=“center”（不是内部元素的对齐方式）
border表示边框.1表示有边框（数字越大，边框越粗)，""表示没边框cellpadding:内容距离边框的距离，默认1像素
cellspacing:单元格之间的距离.默认为2像素
width/height:设置尺寸.

<table border="1px" cellpadding = "0" cellspacing = "0" width = "500px" height = "200px" align="center" style="text-align: center;">
   <tr>
    <td>111</td>
    <td>222</td>
   </tr> 
   <tr>
    <td>333</td>
    <td>444</td>
   </tr> 
   <tr>
    <td>555</td>
    <td>666</td>
   </tr>
</table>

浏览器输出结果：
在这里插入图片描述
上面设置的那些属性从border开始就已经属于CSS内容了。html表示页面有什么内容，css表示内容长什么样。

合并单元格

需求：将第二列的第二行和第三行的单元格进行合并

rowspan：合并行
colspan：合并列

行的合并

<table border="1px" cellpadding = "0" cellspacing = "0" width = "500px" height = "200px" align="center" style="text-align: center;">
   <tr>
    <td>111</td>
    <td>222</td>
   </tr> 
   <tr>
    <td>333</td>
    <td rowspan="2">444</td>
   </tr> 
   <tr>
    <td>555</td>
   </tr>
</table>

浏览器输出结果：
在这里插入图片描述

列的合并

需求：合并第一行的两列

<table border="1px" cellpadding = "0" cellspacing = "0" width = "500px" height = "200px" align="center" style="text-align: center;">
   <tr>
    <td colspan="2">111</td>
   </tr> 
   <tr>
    <td>333</td>
    <td rowspan="2">444</td>
   </tr> 
   <tr>
    <td>555</td>
   </tr>
</table>

浏览器输出结果：
在这里插入图片描述

vscode快捷键：生成一个三行两列的表格

1.5 表单标签

表单是让用户输入信息的重要途径。
分成两个部分：

表单域：包含表单元素的区域.重点是form标签
表单控件：输入框，提交按钮等.重点是input标签

1.5.1 form标签

<form action="test.html">
    ... [form 的内容]
</form>

描述了要把数据按照什么方式，提交到哪个页面中。

1.5.2 input标签

type(必须有),取值种类很多,button, checkbox,text,file, image, password, radio 等.
name:给input起了个名字.尤其是对于单选按钮，具有相同的name才能多选一.
value:input中的默认值.
checked：默认被选中.(用于单选按钮和多选按钮）

1. 文本框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习表单控件</title>
</head>
<body>
    文本框：<input type="text">
</body>
</html>

浏览器输出结果：
在这里插入图片描述

2. 密码框

密码：<input type="password">

浏览器输出结果：
在这里插入图片描述

3. 单选框

单选框：<input type="radio">

浏览器输出结果：
在这里插入图片描述

性别：<input type="radio">男<input type="radio">女

浏览器输出结果：
在这里插入图片描述
问题来了，为什么两个都能选，而不是只能选一个？
此时，这两个单选框是独立的，它们并不知道自己和谁是一组的，我们就可以通过name来进行标记。

性别：<input type="radio" name="gender">男<input type="radio" name="gender">女

浏览器输出结果：
在这里插入图片描述

需求：希望在点击想要选择的文字时就可以自动勾选上对应的单选框。

性别：<input type="radio" name="gender" id="male"><label for="male">男</label>
    <input type="radio" name="gender" id="female"><label for="female">女</label>

浏览器输出结果：
在这里插入图片描述
其中的id是唯一的，id是前端用的，name是后端用的，当将用户输入的内容提交到后端，这个name就是参数的名称。

4. 复选框

复选框：兴趣爱好： <input type="checkbox" name="name3"> 排球
                 <input type="checkbox" name="name3"> 羽毛球
                 <input type="checkbox" name="name3"> 篮球
                 <input type="checkbox" name="name3"> 啦啦操

浏览器输出结果：
在这里插入图片描述

** 5. 普通按钮**

<input type="button" value="提交">

浏览器输出结果：
在这里插入图片描述

6. 提交按钮

<!-- 表示提交到demo02这个文件中 -->
<!-- method表示提交方式 -->
<form action="demo02.html" method="get">
    文本框：<input type="text"><br>
    单选框：<input type="radio"><br>
    性别：<input type="radio" name="gender" id="male"><label for="male">男</label>
         <input type="radio" name="gender" id="female"><label for="female">女</label><br>

    <!-- 提交在form标签中，提交按钮前的内容 -->
    按钮：<input type="submit" value="提交">
</form>

浏览器输出结果：

在这里插入图片描述
这里的提交方式我们选用的get是为了便于观察：

我们可以在网址中看到参数，只有在html代码中有name的才会显示。
但是显示的gender=on是什么意思呢？它只是知道我们选择了值，但是不知道值是什么，这就需要我们给它们加上value属性。

<form action="demo02.html" method="get">
    文本框：<input type="text"><br>
    单选框：<input type="radio"><br>
    性别：<input type="radio" name="gender" id="male" value="0"><label for="male">男</label>
         <input type="radio" name="gender" id="female" value="1"><label for="female">女</label><br>

    <!-- 提交在form标签中，提交按钮前的内容 -->
    按钮：<input type="submit" value="提交">
</form>

浏览器输出结果:
在这里插入图片描述

此时就知道我们提交的值是什么了。

1.5.3 select标签（下拉菜单）

option 中定义selected = "selected"表示默认选中。

<select>
    <option>请选择省份</option>
    <option>北京</option>
    <option>上海</option>
    <option>广东</option>
    <option>广西</option>
</select>

浏览器输出结果：
在这里插入图片描述
如果要实现提交的话：

<form action="demo02.html" method="get">
    <select name="name1">
        <option value="">请选择省份</option>
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">广东</option>
        <option value="4">广西</option>
        按钮：<input type="submit" value="提交"
    </select>
</form>

浏览器输出结果：
在这里插入图片描述

在这里插入图片描述

1.5.4 textarea标签（文本域）

空格和换行在文本域中是有效的。

<textarea rows="10" cols="20"></textarea>

浏览器输出结果：
在这里插入图片描述

1.6 无语义标签：div & span（重中之重）

div 标签,division 的缩写,含义是分割
span标签,含义是跨度；就是两个盒子.用于网页布局

div是独占一行的，是一个大盒子
span不独占一行，是一个小盒子

<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>

浏览器输出结果：
在这里插入图片描述
div独占一行，span不独占一行。

1.7 综合练习：用户注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
</head>
<body>
    <div>
        <h1>用户注册</h1>
    </div>
    <div>
        <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" placeholder="请输入用户名"></td>
            </tr>
            <tr>
                <td>手机号</td>
                <td><input type="text" placeholder="请输入手机号"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="text" placeholder="请输入密码"></td>
            </tr>
        </table>
    </div>
    <div>
        <input type="submit" value="注册"><span>已有账号</span>?<a href="#">登陆</a>
    </div>
</body>
</html>