【Java Web】速通HTML

news2025/6/2 0:12:32

参考笔记： JavaWeb 速通HTML_java html页面-CSDN博客

一、前言

1.网页组成

1° 结构

2° 表现

3° 行为

2.HTML入门

1° 基本介绍

2° 基本结构

3. HTML标签

1° 基本说明

2° 注意事项

4. HTML概念名词解释

二、HTML常用标签汇总 + 案例演示

1. 字体标签 font

（1）定义

（2）案例

2. 字符实体

（1）定义

（2）案例

3. 标题标签 h

（1）定义

（2）案例

4. 超链接标签 a

（1）定义

（2）案例

5. 列表标签

5.1 无序列表 ul

（1）定义

（2）案例

5.2 有序列表 ol

（1）定义

（2）案例

6. 图像标签 img

（1）定义

（2）案例

7.表格标签 table ⭐⭐

（1）定义

（2）案例

8. 表单标签 form ⭐⭐⭐⭐

（1）定义

（2）常用的表单项标签

（3）关于表单提交数据

（4）get请求和post请求的区别

9. p标签

（1）定义

（2）案例

10. 布局相关标签 div 和 span

（1）定义

（2）案例

三、总结

一、前言

1.网页组成

1° 结构

HTML 是网页内容的载体。"网页内容"就是指网页制作者放在页面上想要让用户浏览的信息，包括文字，图片，视频等。如下就是基础的没有任何 CSS 样式的 HTML 页面

2° 表现

CSS 样式是表现，就像网页的外衣。例如：标题字体，颜色变化，或为标题加入背景图片，边框等。所有这些用来改变内容外观的东西称之为表现。如下就是在上面的 HTML 页面中加入了 CSS 样式，使得页面更加好看

3° 行为

JavaScript 是用来实现网页上的特效效果。例如: 鼠标滑过就弹出下拉菜单；或点击某个按钮页面就发生跳转；亦或者购物网站中图片的轮换。一般地，有动画，有交互的需求都是用 JavaScript 来实现的。如下所示：

2.HTML入门

1° 基本介绍

① HTML，全称 HyperText Mark-up Language ，即超文本标记语言。HTML 文本是由 HTML 标签组成的文本，可以包括文字，图形，动画，声音，表格，链接等。HTML 的结构主要包括头 Head 和身体 Body 两大部分，其中头部 Head 用于描述浏览器所需的信息，而身体 Body 则包含所要说明的具体内容

② HTML 文件不需要编译，直接由浏览器进行解析执行

2° 基本结构

HTML 的基本结构如下图所示：

3. HTML标签

1° 基本说明

① HTML 标签使用一对尖括号 <> 括起来；

② HTML 标签一般都是双标签，如 <a></a>，前一个标签是起始标签，后一个标签是结束标签

③ HTML 中也有单标签，单独使用就能完整地表述信息。例如：换行标签 、水平线标签 <hr/>

④ 起始标签 <> 内部的内容，称为标签的属性，属性值要用双引号 "" 引起来。例如：
 你好，我是小马 
上面代码中的 color 即为标签 的属性，表示设置字体颜色

2° 注意事项

  ① 标签不能交叉嵌套，必须始末对应

  ② 标签必须正确关闭

  ③ 注释不能嵌套

  ④ HTML 语法不严谨（不同浏览器的解析方式不尽相同，因此不能太严谨）。有时候标签不闭合，属性值不带 "" 也不会报错

4. HTML概念名词解释

① 标签：这个前面解释过了

② 属性：起始标签 <> 内部的内容，称为标签的属性，属性值要用双引号 "" 引起来。例如：
你好,我叫小马
上面代码中，id、 color 即为标签 的属性

 ③ 文本：双标签中间的文字内容，包含空格换行等结构

 ④ 元素：经过浏览器解析后，每一个完整的标签（标签 + 属性 + 文本）可以称之为一个元素

二、HTML常用标签汇总 + 案例演示

1. 字体标签 font

（1）定义

font 是字体标签，它可以用户修改文本的字体、颜色，大小。其中：

face 属性：修改字体的样式

color 属性：修改字体的颜色

size 属性：修改字体的大小

PS : ① 标签中的属性没有顺序要求
② font 标签已经过时，一般使用 CSS 来代替

（2）案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <font face = "consolas" color = "blue" size = "16px">show your content</font>
    </body>
</html>

运行效果：

2. 字符实体

（1）定义

在网页上显示的一些特殊符号，称为字符实体，也叫符号实体

 常见特殊字符如下 :

 ①   —— 空格（每输入一个，显示一个空格)

 ② < —— 左尖括号 <

 ③ > —— 右尖括号 >

常用的字符实体表如下：

（2）案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>字符实体演示</title>
    </head>
    <body>
        &lt;hr/&gt;
        <hr/><!--水平线标签-->
        <font color = "blue" size = "16px">
            小马&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;okk
        </font>
    </body>
</html>

运行效果：