Web-2-掌握HTML基础：快速编写简单网页

在学习 HTML 之前，我们要先知道一个概念
万维网联盟（ World Wide Web Consortium ），创建于 1994 年 10 月，主要工作是对 web 进行标准化。
万维网联盟（ World Wide Web Consortium 外语缩写：W3C）创建于 1994 年 10 月，w3c 不是某一个标准，而是对 web标准的集合。web 主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。

HTML:表示网页的结构(比如盖房子需要设计房子的地基)

CSS:表示网页的表现(比如盖房子需要每一间屋子的样式)

JavaScript：表示网页的行为(比如每一间屋子的功能)

知道基础知识以后现在就按照顺序了学习前端知识

HTML

1.1HTML 介绍和快速入门

1.1.1HTML 介绍

HTML（HyperText Markup Language）：超文本标记语言。

那么什么是超文本呢？

超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。

标记语言：由标签元素构成的语言

- **HTML 标签元素都是预定义好的**。例如：使用\<a\>展示超链接，使用\<img\>展示图片，\<video\>展示视频。<br>
- **HTML 代码直接在浏览器中运行，HTML 标签由浏览器解析**。<br>

提问：除了 HTML 你还知道那些标记语言？

1.1.2HTML 标签元素组成

标签
- 开始标签: <>
- 结束标签: </>
内容: 开始标签和结束标签包围的信息。
属性: 包含了一些额外信息，这些信息本身不应显现在内容中

属性只能添加到开始标签中。格式为：属性名=属性值
例如：\<h1\>标签，代表一级标题，align 属性，代表对齐方式。我们可以在开始标签中添加该属性，就能让内容在不同位置显示了

1.2 开发工具

用来写代码。可以是一个文本编辑器（如 Visual Studio Code、Sublime Text、Atom 、GNU Emacs 或者 VIM ），或一个混合编辑器（idea, Dreamweaver 或 WebStorm）。Office 文档不适合这种用途，因为它们依赖隐藏的元素，会干扰网络浏览器使用的渲染引擎,我现在选择的是IntelliJ IDEA

1.3 使用 IDEA 创建第一个 HTML 网页

创建一个 Maven 项目

2..在 resources 目录下创建 html 网页
3.在浏览器网页中的结果

1.4HTML 基础语法-文本标签

文本标签是用来建立基础文本页面结构和内容的，比如如果我们学习玩文本标签后就可以基本实现网页报纸内容编辑

文本标签有哪些呢？，都是用来修饰文本的，包括标题，段落，加粗等，具体需要学习的标签以及代表的含义如下表格所示：

标签	描述
\<h1\> ~ \<h6\>	定义标题，h1 最大，h6 最小
\<font\>	定义文本的字体、字体大小、字体颜色
\<b\>	定义粗体文本
\<i\>	定义斜体文本
\<u\>	定义文本下划线
\<center\>	定义文本居中
\<p\>	定义段落
\<br\>	定义折行
\<hr\>	定义水平线

1.4.1 标题标签

接下来我们需要通过 IDEA 开发工具来开发 html，演示上述标签的作用，首先我们给大家演示标题标签

第一步：在刚才创建好的项目的 resource 目录下创建 02_HTML-文本标签.html

第二步：然后我们首先需要学习的是标题标签\<h1\>定义最大的标题，\<h6\>定义最小的标题，代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>文本标签</title>
  </head>
  <body>

    <!--  文本标签-->
    <h1>H1标题标签</h1>
    <h2>H2标题标签</h2>
    <h3>H3标题标签</h3>
    <h4>H4标题标签</h4>
    <h5>H5标题标签</h5>
    <h6>H6标题标签</h6>


  </body>
</html>

结果如下

1.4.2 字体标签

我们经常在网页上可以看到五颜六色的文字，在 html 中，我们可以通过\<font\>标签来修饰，标签的具体含义和属性如下表所示(注意:字体标签已经过时，了解即可)：

标签	属性	描述
\<font\>		字体标签，修饰文本的颜色、大小、样式
	color	设置文本的颜色
	size	设置文本的大小，取值为 1-7，其中 1 最小，7 最大
	face	用来设置字体。如 "楷体"、"宋体"等

对于 color 属性取值有 3 种，分别是

英文单词：颜色的单词，例如 red,blue 等等，但是表示的颜色有限制
rgb(值 1,值 2,值 3)：三原色表示法，取值范围为 0-255 之间
#值 1 值 2 值 3：还是三原色表示法，上述的简写方式，取值是 16 进制法，所以在 00-FF 之间

我们可以添加如下代码：

<font style="color:red" size="6" face="楷体">HTML,字体标签</font>

浏览器打开效果如下：

<!--
HTML颜色描述:
1. 英文单词: red, green, blue
2. RGB(值1, 值2, 值3): 红色(0-255), 绿色(0-255), 蓝色(0-255) ---- 0-255  (不推荐)
3. #值1值2值3 : 红色(00-FF), 绿色(00-FF), 蓝色(00-FF) ----------- 00-FF (十六进制)
-->
<font style="color:red" size="6" face="楷体">HTML,字体标签</font>
<font style="color: rgb(0, 0, 255)" size="6" face="楷体">HTML,字体标签</font>
<font style="color: #00FF00" size="6" face="楷体">HTML,字体标签</font>

注意：
我在例子中没有使用下面格式

<font color="#00FF00" size="6" face="楷体">HTML,基础标签</font>

因为上面格式中会不生效

<font color=" rgb(0, 0, 255)" size="6" face="楷体">HTML,基础标签</font>

全部代码

    <!--
        HTML颜色描述:
            1. 英文单词: red, green, blue
            2. RGB(值1, 值2, 值3): 红色(0-255), 绿色(0-255), 蓝色(0-255) ---- 0-255  (不推荐)
            3. #值1值2值3 : 红色(00-FF), 绿色(00-FF), 蓝色(00-FF) ----------- 00-FF (十六进制)
     -->
    <font style="color:red" size="6" face="楷体">HTML,字体标签</font>
    <font style="color: rgb(0, 0, 255)" size="6" face="楷体">HTML,字体标签</font>
    <font style="color: #00FF00" size="6" face="楷体">HTML,字体标签</font>

    <font color=" rgb(0, 0, 255)" size="6" face="楷体">HTML,字体标签</font>

结果

思考:我们的标签使用了四个但是在网页显示中，全部都显示在了一行，我们怎么做才能让，结果和标签一样显示四行？

1.4.3 换行标签

可以通过\<br\>标签,进行换行，修改上述代码如下：

    <!--
        HTML颜色描述:
            1. 英文单词: red, green, blue
            2. RGB(值1, 值2, 值3): 红色(0-255), 绿色(0-255), 蓝色(0-255) ---- 0-255  (不推荐)
            3. #值1值2值3 : 红色(00-FF), 绿色(00-FF), 蓝色(00-FF) ----------- 00-FF (十六进制)
     -->
    <font style="color:red" size="6" face="楷体">HTML,字体标签</font> <br>
    <font style="color: rgb(0, 0, 255)" size="6" face="楷体">HTML,字体标签</font><br>
    <font style="color: #00FF00" size="6" face="楷体">HTML,字体标签</font><br>

    <font color=" rgb(0, 0, 255)" size="6" face="楷体">HTML,字体标签</font><br>

1.4.4 水平线标签

我们也会在网页中看到水平线，是通过\<hr\>标签来实现的，添加如下代码即可：

<hr>

浏览器打开呈现的效果如下图所示：

1.4.5 局中标签

有时候在网页中，我们想将文本内容居中，该怎么做？其实很简单就是使用一个\<center\>标签即可做到

    <center>center居中</center>
    <hr>

在浏览器中显示如下:

1.4.6 粗体、加粗、下划线标签

在网页中，我们也可以见到一些加粗、斜体或者有下划线的字体，可以使用一下标签实现：

标签	描述
\<b\>	加粗
\<i\>	斜体
\<u\>	下划线

代码如下:

    <b>加粗</b> <br>
    <i>斜体</i> <br>
    <u>下划线</u> <br>

浏览器中效果:

思考: 现在我需要一个急需要加粗，也需要斜体的内容我需要怎么做？

HTML 标签是可以嵌套的，所以可以使用加粗和斜体两个标签相互嵌套，来实现加粗斜体内容
代码如下:

<u><b><i>加粗斜体下划线</i></b></u> <br>

结构如下:

1.4.7 段落标签

假如在网页中添加以下内容:

据央视新闻客户端消息，会议认为，今年以来，在以习近平同志为核心的党中央坚强领导下，各地区各部门更好统筹国内国际两个大局，更好统筹疫情防控和经济社会发展，更好统筹发展和安全，国民经济持续恢复、总体回升向好，高质量发展扎实推进，产业升级厚积薄发，粮食能源安全得到有效保障，社会大局保持稳定，为实现全年经济社会发展目标打下了良好基础。<br>
会议指出，当前经济运行面临新的困难挑战，主要是国内需求不足，一些企业经营困难，重点领域风险隐患较多，外部环境复杂严峻。疫情防控平稳转段后，经济恢复是一个波浪式发展、曲折式前进的过程。我国经济具有巨大的发展韧性和潜力，长期向好的基本面没有改变。<br>
    <hr>

浏览器显结果如下:

大家有没有发现，使用换行标签，行和行之间很紧密，此时我们就可以使用\<p\>段落标签进行修饰段落，修改代码如下:

<p>据央视新闻客户端消息，会议认为，今年以来，在以习近平同志为核心的党中央坚强领导下，各地区各部门更好统筹国内国际两个大局，更好统筹疫情防控和经济社会发展，更好统筹发展和安全，国民经济持续恢复、总体回升向好，高质量发展扎实推进，产业升级厚积薄发，粮食能源安全得到有效保障，社会大局保持稳定，为实现全年经济社会发展目标打下了良好基础。
</p>
<p>会议指出，当前经济运行面临新的困难挑战，主要是国内需求不足，一些企业经营困难，重点领域风险隐患较多，外部环境复杂严峻。疫情防控平稳转段后，经济恢复是一个波浪式发展、曲折式前进的过程。我国经济具有巨大的发展韧性和潜力，长期向好的基本面没有改变。
</p>

结果如下:

文本标签结束，代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>文本标签</title>
  </head>
  <body>

    <!--  文本标签-->
    <h1 color="red">H1标题标签</h1>
    <h2 color="rgb(0, 0, 255)">H2标题标签</h2>
    <h3 color="#00FF00">H3标题标签</h3>
    <h4>H4标题标签</h4>
    <h5>H5标题标签</h5>
    <h6>H6标题标签</h6>

    <!--
    HTML颜色描述:
    1. 英文单词: red, green, blue
    2. RGB(值1, 值2, 值3): 红色(0-255), 绿色(0-255), 蓝色(0-255) ---- 0-255  (不推荐)
    3. #值1值2值3 : 红色(00-FF), 绿色(00-FF), 蓝色(00-FF) ----------- 00-FF (十六进制)
    -->
    <font style="color:red" size="6" face="楷体">HTML,字体标签</font> <br>
    <font style="color: rgb(0, 0, 255)" size="6" face="楷体">HTML,字体标签</font><br>
    <font style="color: #00FF00" size="6" face="楷体">HTML,字体标签</font><br>

    <font color=" rgb(0, 0, 255)" size="6" face="楷体">HTML,字体标签</font><br>


    <hr>

    <center>center居中</center>
    <hr>


    <b>加粗</b> <br>
    <i>斜体</i> <br>
    <u>下划线</u> <br>

    <u><b><i>加粗斜体下划线</i></b></u> <br>

    <p>据央视新闻客户端消息，会议认为，今年以来，在以习近平同志为核心的党中央坚强领导下，各地区各部门更好统筹国内国际两个大局，更好统筹疫情防控和经济社会发展，更好统筹发展和安全，国民经济持续恢复、总体回升向好，高质量发展扎实推进，产业升级厚积薄发，粮食能源安全得到有效保障，社会大局保持稳定，为实现全年经济社会发展目标打下了良好基础。<br>
    </p>
    <p>会议指出，当前经济运行面临新的困难挑战，主要是国内需求不足，一些企业经营困难，重点领域风险隐患较多，外部环境复杂严峻。疫情防控平稳转段后，经济恢复是一个波浪式发展、曲折式前进的过程。我国经济具有巨大的发展韧性和潜力，长期向好的基本面没有改变。<br>
    </p>
    <hr>
  </body>
</html>

1.5 图片音频和视频标签

我们在浏览网页的时候，除了见到文本内容以为，还能经常在网页中查看图片、音频和视频等，那么如何在网页中嵌套图片音频视频这些内容？这就是我们现在要学习的内容

标签	属性	描述
\<img\>		在页面上引入图片的
	height	用来定义图片的高度
	width	用来定义图片的宽度
	src	规定显示图像的 url（统一资源定位符）
\<audio\>		定义音频(支持 MP3、MAV、OGG)
	src	规定音频的 url
	controls	显示播放控件
\<video\>		定义视频(支持 MP4、WebM、OGG)
	src	规定视频的 url
	controls	显示播放控件

第一步：首先在 resources 目录下创建 02_img 文件夹，然后在其目录下创建存放视频、音频，图片的 video,audio,img 文件夹，然后讲资料提供的视频，音频，图片分别复制到对应的目录下，最后效果如下图所示：

然后我们编写标签，以及引用引入的资源，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片视频音频</title>
</head>
<body>



<!--
    路径:
        1. 绝对路径: 绝对磁盘路径 , 绝对网络路径
        2. 相对路径:
            当前路径: .     ./img/dinosaur.jpg  == img/dinosaur.jpg
            上级目录: ..    比如在例子中:..表示回到了和03_img同级目录
    尺寸单位:
        1. 像素 px
        2. 百分比 %
 -->
<!--    1.绝对路径-->
  <h2>绝对网络路径</h2>
  <img  height="200" width="300" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg">
  <h2>相对路径--当前路径 .</h2>
  <img  height="200" width="300" src="img/dinosaur.jpg">
  <h2>相对路径--上级目录 ..</h2>
  <img  height="200" width="300" src="../img/star.png">


<!--  注意:在HTML标签中，属性和属性值相同的时候，就可以省略属性值，只写属性
    比如: controls="controls"  就可以缩写成  controls
-->
  <audio  height="200" width="300" src="audio/viper.mp3" controls="controls"></audio>

  <video  height="200" width="300" src="video/rabbit320.mp4" controls height="200" width="300"></video>

</body>
</html>

第二步：使用浏览器打开后，呈现的完整效果如下：

注意:在 HTML 标签中，属性和属性值相同的时候，就可以省略属性值，只写属性比如: controls="controls" 就可以缩写成 controls

1.6 超链接标签

我们上网的时候，经常有些鼠标点击就跳转过去的效果，这就是超链接的效果，如下就是百度首页的超链接：

标签	作用	描述
\<a\>	超链接跳转页面功能	href 属性，表示超链接跳转指向的 url 地址
		target 属性，页面打开方式，\_self 当前页，\_blank 新标签页

<a href="https://www.baidu.com" target="_self">当前页面打开百度</a> <br>

<a href="https://www.baidu.com" target="_blank">空白页面打开百度</a>
<!--块级链接-->
<!--就像之前提到的那样，任何内容，甚至块级内容都可以作为链接出现。如果想让标题元素变为链接，就把它包裹在锚点元素（<a>）内，像这个代码段一样：-->
<a href="https://developer.mozilla.org/zh-CN/">
  <h1>MDN Web 文档</h1>
</a>

结果如下:

代码中，我们使用了一个块链接,发现是\<a\>标签中嵌套了一个\<h1\>,这也就符合了之前 1.4.6 段落中说的 HTML 标签可以嵌套

思考:如何在点击图片的时候，进行链接跳转

代码实现如下

<a href="https://www.baidu.com">
  <img src="img/baidu.png" alt="百度" />
</a>

浏览器结果如下:

1.7 表格标签

标签	属性	描述
\<table\>		定义表格
	broder	规定表格边框的粗细
	width	规定表格的宽度
	cellspacing	规定单元格之间的空白
\<tr\>		定义表格的行
	align	定义表格行的内容对齐方式
\<td\>		定义普通单元格
\<th\>		定义表头单元格，会有加粗居中的效果

要实现一下结果，代码该如何编写？

代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>表格</title>
  </head>
  <body>

    <table width="50%" border="1" cellspacing="0">
      <tr>
        <th>序号</th>
        <th>品牌Logo</th>
        <th>品牌名称</th>
        <th>企业名称</th>
      </tr>
      <tr align="center">
        <td>001</td>
        <td><img src="img/huawei.jpg" height="50" width="70"></td>
        <td>华为</td>
        <td>华为技术有限公司</td>
      </tr>
      <tr align="center">
        <td>002</td>
        <td><img src="img/alibaba.jpg" height="50" width="70"></td>
        <td>阿里</td>
        <td>阿里巴巴集团控股有限公司</td>
      </tr>
    </table>

  </body>
</html>

1.8 表格标签

如图所示页面我们经常会看到，很显然，这里用户填写的数据是要传输到后台程序，然后后台程序将这些数据保存到数据库中。

所以接下来要讲的知识点非常重要，因为这是前端和后台进行交互的一种手段，我们必须掌握**。这就是我们要学习的表单标签和表单项标签，此处我们先学习表单标签，下一小节，再学习表单项标签。
首先我们要学习的表单标签以及其含义如下表格所示：

标签	属性	描述
\<form\>		定义表单的
	action	定义表单数据提交的服务器地址
	method	定义表单数据提交的方式，一般有 get 和 post 这 2 种

表单项标签如下：

标签	属性	描述
\<input>		定义表单项，通过 type 属性控制输入形式,接受用户的信息
	type	定义 input 表单项的表现形式，例如：文本框，密码框等
\<select\>		定义下拉列表，\<option\>字标签定义选项
\<textarea\>		定义文本域

表单项标签和表单标签是配合在一起工作的，表单项标签必须书写在表单标签\<form\>中，他们之间的关系,举个例子：
假设我们需要寄快递，表单项标签就是需要寄出的物品，有文本域，密码框，然后这些物品需要打成一个包裹，就是表单标签\<form>
,包裹上面需要指明顺丰快递（请求的方式 method 属性）和寄出的地址(action 属性)
接下来，我们通过 IDEA 编写代码，来演示表单标签的作用

第一步：创建名为 05. HTML-表单标签.html 的文件：

第二步：编写如下代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>表单标签</title>
  </head>
  <body>
    <form>
      <input type="text" name="name"> <br>
      <input type="text" name="age">  <br>
      <input type="submit" value="提交"> <br>
    </form>
  </body>
</html>

第三步：浏览器打开，页面展示效果如下所示：

当我们点击提交时，我们数据提交到哪里去呢？以什么方式去提交呢？所以我们需要指定\<form\>表单标签的 action 属性和 method 属性，
此时我们没有服务器，action 属性值为空即可，参考代码如下：

<form action="" method="get">

第四步：然后我们编写内容，f12 打开浏览器开发者工具，此处建议使用谷歌浏览器，来到 network 标签页进行抓包

第五步：点击提交按钮，观察抓包的结果

此处需要注意，表单提交的方式如果是 get，那么提交表单时，参数会遵循 url?key=value&key=value 的格式跟在地址的后面，其中，value 就是用户填写的内容，自习观察 key，key 是表单项标签 name 的属性值。

第六步：然后我们修改\<form\>表单标签的 method 属性值为 post，然后再次提交表单，并且抓包，效果如下图所示：

此时我们发现，提交的方式是 post，但是地址的后面没有提交的参数了，我们可以去 Payload 页去查看 post 请求提交的参数：

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>表单标签</title>
  </head>
  <body>

    <!--
    action: 表单数据提交的url , 如果未指定, 默认提交到当前页面.

    表单项要想被提交必须指定name属性

    method: 表单提交方式 ;
    get: 默认值 , 表单数据在url后面拼接  ?username=java&age=22 ; url长度有限 .
    post
    -->
    <form>
      <input type="text" name="name"> <br>
      <input type="text" name="age">  <br>
      <input type="submit" value="提交"> <br>
    </form>

    <h1>POST请求</h1>

    <form method="post">
      <input type="text" name="name"> <br>
      <input type="text" name="age">  <br>
      <input type="submit" value="提交"> <br>
    </form>
  </body>
</html>

1.9 表单项标签

表单标签我们学习过了，接下来我们要学习表单标签中的表单项标签，如下表是我们要学习的表单项标签以及其含义：

标签	属性	描述
\<input\>		定义表单项，通过 type 属性控制输入形式,接受用户的信息
	type	定义 input 表单项的表现形式，例如：文本框，密码框等
\<select\>		定义下拉列表，\<option\>字标签定义选项
\<textarea\>		定义文本域

type 取值以及表现形式如下：

type 取值	描述描述	形式
text	默认值，定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
hidden	定义定义定义定义
submit	定义提交按钮，提交按钮会把表单数据发送到服务器端
reset	定义重置按钮，重置按钮会清除表单中的所有数据
button	定义可点击按钮

接下来，我们通过 IDEA 编写代码，来演示表单标签的作用

第一步：在 IDEA 中创建名为 07_HTML-表单项标签.html 的文件：

第二步：编写如下代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>表单项标签</title>
  </head>
  <body>
    <!-- value: 表单项提交的值 -->
    <form action="" method="post">
      姓名: <input type="text" name="name"> <br><br>

      密码: <input type="password" name="password">  <br><br>

      性别: <input type="radio" name="gender" value="1"> 男
      <input type="radio" name="gender" value="2"> 女  <br><br>

      爱好: <input type="checkbox" name="hobby" value="java"> java
      <input type="checkbox" name="hobby" value="game"> game
      <input type="checkbox" name="hobby" value="sing"> sing  <br><br>

      图像: <input type="file" name="image">  <br><br>

      学历: <select name="degree">
        <option value="">----------- 请选择 -----------</option>
        <option value="1">初中</option>
        <option value="2">高中</option>
        <option value="3">大专</option>
        <option value="4">本科</option>
        <option value="5">硕士</option>
        <option value="6">博士</option>
      </select>  <br><br>
      描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br>

      <input type="hidden" name="id" value="1">
      <!-- 表单常见按钮 -->
      <input type="submit" value="提交">
      <input type="reset" value="重置">
      <input type="button" value="按钮">  <br>
    </form>
  </body>
</html>

第三步：使用浏览器打开，页面展示效果如下：

数据提交的原始格式是：key=value&key=value，其中 key 是表单的 name 的属性值，value 就是表单提交的值。

本文由mdnice多平台发布

Web-2-掌握HTML基础：快速编写简单网页

HTML

1.1HTML 介绍和快速入门

1.1.1HTML 介绍

1.1.2HTML 标签元素组成

1.2 开发工具

1.3 使用 IDEA 创建第一个 HTML 网页

1.4HTML 基础语法-文本标签

1.4.1 标题标签

1.4.2 字体标签

1.4.3 换行标签

1.4.4 水平线标签

1.4.5 局中标签

1.4.6 粗体、加粗、下划线标签

1.4.7 段落标签

文本标签结束，代码如下：

1.5 图片音频和视频标签

1.6 超链接标签

思考:如何在点击图片的时候，进行链接跳转

1.7 表格标签

1.8 表格标签

1.9 表单项标签

springboot

引用和评论

再见 XShell！一款万能通用的终端工具，用完爱不释手！

Redis 持久化原理分析和使用建议

MyBatis-Plus结合Spring Boot实现数据权限

70k star，取代Postman！这款轻量级API工具，太香了！

大模型时代，后端程序员如何避免被AI卷死？

LSM-TREE从入门到入魔：从零开始实现一个高性能键值存储｜得物技术

C++ 中 VS 项目引入公共配置文件

Web-2-掌握HTML基础：快速编写简单网页

HTML

1.1HTML 介绍和快速入门

1.1.1HTML 介绍

1.1.2HTML 标签元素组成

1.2 开发工具

1.3 使用 IDEA 创建第一个 HTML 网页

1.4HTML 基础语法-文本标签

1.4.1 标题标签

1.4.2 字体标签

1.4.3 换行标签

1.4.4 水平线标签

1.4.5 局中标签

1.4.6 粗体、加粗、下划线标签

1.4.7 段落标签

文本标签结束，代码如下：

1.5 图片音频和视频标签

1.6 超链接标签

思考:如何在点击图片的时候，进行链接跳转

1.7 表格标签

1.8 表格标签

1.9 表单项标签

springboot

引用和评论

再见 XShell！一款万能通用的终端工具，用完爱不释手！

Redis 持久化原理分析和使用建议

MyBatis-Plus结合Spring Boot实现数据权限

70k star，取代Postman！这款轻量级API工具，太香了！

大模型时代，后端程序员如何避免被AI卷死？

LSM-TREE从入门到入魔：从零开始实现一个高性能键值存储 ｜ 得物技术

C++ 中 VS 项目引入公共配置文件

LSM-TREE从入门到入魔：从零开始实现一个高性能键值存储｜得物技术