【超详细讲解】HTML详细教程

超级苦力怕

发布于 2025-12-24 08:56:12

2290

前言

在这一篇文章，我将采用图文的方法，介绍知识点、使用方法、使用效果及拓展，帮助更好的理解文章的内容，并以思维导图的方式，将核心内容放置开头，便于复习。

注：这篇文章用了嵌入了众多HTML，如目录由超链接标签制作。

概览速查图

1. HTML简介及HTML文档（了解)

1.1 什么是 HTML?

超文本标记语言（HTML）是用于描述网页结构与语义的标记语言。现代 HTML 采用活标准（WHATWG），各浏览器会持续更新实现。

拓充知识点：

标记称为标签（元素），通常由开始/结束标签与内容组成；也有空元素（如 <img>、<br>）不需要结束标签。
标签名大小写不敏感，但实务中统一使用小写；属性值建议使用双引号包裹。
HTML 负责结构与语义，样式与交互分别交给 CSS 与 JavaScript（结构、表现、行为分离）。
“HTML5”常用来指代现代 HTML 的一组新能力（语义元素、表单增强、多媒体、API 等）。

1.2 标签语法

标签组成： <h1>标签内容</h1>

符号：标签用<>尖括号表示组成：开始标签、结束标签和内容别称：标签也称为元素

标签分类：

大部分都是双标签,如<h1></h1> 少数单标签，如<hr>

基础案例：苦力怕

展现效果

我们可以看到，在<body>部分，我写了<h1>、<p>、<a>、<img>等标签，这种常见标签作用及含义如下：

标签	介绍	作用
<h></h>	HTML标题	通过<h1> - <h6>等标签进行定义,改变文字大小
<p></p>	HTML段落	通过<p>标签进行定义，改变段落大小的文字
<a></a>	HTML链接	通过<a>进行定义，点击文字可以跳转其他页面
<img>	HTML图像	通过<img>标签进行定义，存放图片，可以通过属性设置大小

1.3 HTML文档(拓展)

在编辑器中，我们输入 ! 会生成这么一串代码

他们对应着以下内容

文档类型：<!DOCTYPE html> HTML5的文档类型声明，告诉浏览器当前页面是使用HTML5规范编写的。

html元素：<html> 这个元素包裹页面所有内容，有时被称为根元素，在HTML中，lang用于说明页面的主要语言，如en代表英语，zh-CN代表中文

head元素：<head> 头部元素，包含了文档元数据，提供机器处理的信息，非人类可读。

字符集：<meta charset="UTF-8"> 该文档的字符集设置为 UTF-8,UTF-8 包括绝大多数人类书面语言的大多数字符。有了这个设置，页面现在可以处理它可能包含的任何文本内容，如果不加这句话可能会引起乱码。`

移动端页面适配：<meta name="viewport" content="width=device-widthinitial scale=1.0" 开发者能确保网页在移动设备上以最佳状态呈现，提升用户浏览体验。

title元素：<title> 设置了页面标题，出现在页面加载的浏览器标签中的内容

body元素<body> 包含了所有显示在页面上的内容，包含文本、图片、音视频、游戏等内容

2.标签合集

2.1 为什么要学习标签

标签决定着以后的页面布局乱不乱，如图所示。

其中，三种不同的商品形成了并列的关系，每个白盒子里有着图片标题价格等，形成了嵌套关系。

并列关系典型:<h1></h1><p></p> 嵌套关系典型：<head><title></title></head>

典型案例：三层嵌套

<body>
    <div>
        <p>
            <span>文字</span>
        </p>
    </div>
</body>

2.2 标题和段落标签

标题标签：<h1>~<h6> 使用说明：标题分为h1~h6六个等级，会加粗显示，每行只显示一个 使用方法:<h1>实例标题</h1>

拓：最好只对每个页面使用一次<h1>，如新闻的标题、网页的Logo 在现有六个标题层次中，除非觉得有必要，否则争取每页使用不超过三个

段落标签:<p> 使用说明:每行只显示一个段落，文字显示不开会自动换行，相关样式使用CSS设置。 使用方法：<p>实例段落文本</p>

拓：在实际情景中，我们要对其语义化，根据内容结构和含义选择恰当的HTML元素。这样做有着更清晰的代码结构、同时有对搜索引擎更友好、更好的可访问性等优点。

示例:

演示效果：

2.3 强调与重要性标签

示例标签：<strong>、<em>、<ins>、<del> 使用说明：加粗、倾斜、下划线、~~删除线~~ 使用方法：<strong>加粗文字</strong>、<em>倾斜文字</em>、<ins>下划线</ins>、<del>删除线</del>

拓：除了上述写法，还有着<b>、<i>、<u>、<s>等写法，对应着办公软件中Ctrl+快捷键(除删除)的方式，即加粗、倾斜、下划线、删除线。

注释标签： 快捷键 ctrl+ / 使用说明：注释内容不会显示在网页上、可以跨越多行、常用于代码说明与留言

示例：

<body>
  <h2>有语义强调与重要性标签</h2>
  加粗： <strong>加粗文字</strong>
  倾斜: <em>倾斜文字</em>
  下划线： <ins>下划线</ins>
  删除线： <del>删除线</del>

  <h2>无语义强调与重要性标签</h2>
  加粗： <b>加粗文字</b>
  倾斜： <i>倾斜文字</i>
  下划线： <u>下划线</u>
  删除线: <s>删除线</s>

  <h2>注释标签</h2>
  <!-- 这段文字是看不见的 -->
  <!-- 这段文字
   是的发送到发阿斯蒂芬阿斯蒂芬
  是看不见的 
  -->
</body>

演示效果：

2.4 块级元素和内联元素

在HTML中由两种元素类别：块级元素和内联元素，分类不同决定着展现形式不同

块级元素有着独占一行、可嵌套其他元素等特点，常见的如p、h、div等。内联元素有着可一行放多个、通常不能嵌套块级元素、可嵌套其他内联元素的特点，常见的有strong、em等，常与文本一起使用。

注意事项：

段落p标签里不要放其他块级元素。段落里面主要放文字相关，如内联元素。但元素分类不是不可更改的，后面的css可以通过display改变显示模式。

2.5 图像标签

图像标签：<img> 使用说明：图像标签是单标签，默认包含src和alt两个属性

src属性：插入到页面的图像地址 alt属性：备选文本，用于在图片无法显示或者因为网速慢情况下显示的文字

使用方法：<img src="" alt="">,如<img src="creeper.jpg" alt="苦力怕">

拓：1.属性采取键值对形式。属性=“值” 2.属性之间没有必要的先后顺序 3.属性之间必须有空格分隔

示例：

演示效果：

在代码中我们通过属性去更改了宽高，使用方法如下

属性	说明
width	设置图片宽度（建议css修改)
height	设置图片高度 (建议css修改)
title	图像标题,鼠标悬停显示文本

拓:1.水属性采取键值对的形式.属性=“值” 2.属性之间没有必要先后顺序,但属性间必须有空格

拓展内容:常见的图片格式

拓展内容：路径在HTML中，路径用于指定文件(如图像、其他网页)的位置，路径分为相对路径和绝对路径

相对路径：相对于当前文件位置的路径

在同一目录下，可以直接引用文件名(./表示当前文件夹)，如pig.jpg 在下级子目录下，我们可以使用目录名/文件名,如img/pig.jpg 在上级目录下，我们可以使用…/返回上一级,如../pig.jpg

绝对路径：从根目录开始的完整目录或带协议的完整地址，如E:/HTML5/代码/pig.png 或https://ts3.tc.mm.bing.net/th/id/OIP-C.e74nnQ1DjyXWSKHxLMxVQgHaEo?cb=12&rs=1&pid=ImgDetMain&o=7&rm=3

2.6 音视频标签

音视频标签：<video> 使用说明：音视频标签是双标签，默认包含src和controls属性

src属性：插入到页面的视频地址 controls属性：显示浏览器自带播放控件，可通过width和height调整宽高

使用方法：<video src="video.mp4" controls width="300"></video>

拓：如果属性键和值相同，则可以省略值，如controls="controls"可变为controls

视频标签其他属性

属性	说明
autoplay	自动播放
loop	循环播放
muted	静音
poster	预览图像

拓展内容：视频标签兼容性写法

浏览器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES(从 Opera 25起)	YES	YES

写法示例：

1.将src属性单独放在几个<source>元素中，这些元素分别指向各自资源 2.浏览器会检查<source>元素，播放第一个与其自身相匹配的媒体 3.每个 <source> 元素都含有 type 属性，浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。如果你没有添加 type 属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，但是这样会消耗掉大量的时间和资源。

使用效果：

2.7 超链接标签

超链接标签：<a href=""></a> 使用说明：超链接是我们能够将我们的文档链接到任何其他文档(或资源)，也可以链接到文档的指定部分。

href属性(也称为超文本引用或目标，它将包含一个网址)来创建一个基本链接链接可以包含除了自身之外的其他元素，如文字、标题、图片、视频等

使用方法：<a href="www.baidu.com"></a>

写法示例：

使用效果：

在使用中，展示了内部链接，外部链接，空连接，下载链接和邮件链接，他们分别代表以下含义

内部链接：填写自己所放页面的地址，方便跳转外部链接：填写外部网址，方便点击跳转到网站空连接：在HTML中，空链接通常指没有实际指向目标的超链接，符号是# 下载链接：如果是exe或压缩包，点击直接下载邮件链接：多为个人使用，可以供别人发邮件，这里mailto:是固定写法，后面跟自己邮箱

链接标签其他属性

属性	说明
title	鼠标悬停的提示文字
target	打开页面的方式

target普遍有两种方式 _self：当前窗口打开(默认) _blank 新窗口打开注：还支持_parent、_top和命名的浏览上下文等，作了解即可

拓展内容：锚点链接

锚点链接允许用户在同一个页面内跳转到指定位置，非常适合长页面导航

使用方法

1.使用id属性创建锚点目标,如<h2 id="1">第一部分</h2> 2.使用**#**标记锚点目标，如<a href="#1">跳转到第一部分</a>

写法示例：

使用效果：点击即可跳转

该文章的目录也是使用该方法制作

2.8 布局标签

常见布局标签

网站结构标签：网页的外观多种多样，但是都大概包括页眉、导航栏、主内容、侧边栏、页脚等无语义标签：没有合适语义标签时，在进行一些布局可以选择div和span标签列表标签：HTML列表是网页内容组织的重要元素。可以让我们显示内容更加整齐有序

网站结构标签：主要包括页眉、导航栏、主内容、侧边栏、页脚等

双标签	作用
<header>	网页页眉(头部)
<main>	网页内容。每个页面只能有一个
<nav>	导航栏
<article>	文章相关
<section>	分块
<aside>	侧边栏
<footer>	页面页脚(底部)

网页设计效果图

这些标签受浏览器兼容性问题影响，PC段根据公司需求，移动端放心使用

无语义标签：

div标签(特点)	span标签(特点)
块级元素：默认独占一行，前后会自动换行	行内元素：不会换行，仅包裹内容的一部分
通常用于布局结构，作为其他元素的容器	用于对文本或行内元素的局部样式或操作
可以包含其他块级或行内元素	可以包含行内元素,不建议包含块级元素
默认没有语义	默认没有语义

2.9 列表标签

列表标签分为无序列表 ul、有序列表 ol、描述列表 dl三种标签

无序列表：顺序无关紧要的列表,常用于一些整齐对齐的模板使用有序列表：顺序有关紧要的列表，常用于描述列表：标记一组项目及相关描述

无序列表

写法示例：

<ul>
	<li>猪爸爸</li>
	<li>猪妈妈</li>
	<li>佩奇</li>
	<li>乔治</li>	
</ul>

li的数量没有限制,他会在默认前面有小黑点显示 <ul>是定义列表的容器，只能包含<li>元素 <li>是定义列表的选项，也可以放其他的html元素

展示效果：

有序列表 有序列表在布局中较少，了解即可。实际开发中即使有顺序，一般也用其他代替。

写法示例：

<ol>
	<li>看视频</li>
	<li>写代码</li>
	<li>做笔记</li>
	<li>多复习</li>	
</ol>

<ol>是定义列表的容器，只能包含<li>元素 <li>定义列表的选项，里面可以放其他的html元素

展示效果:

描述列表 描述列表在我们布局中主要是在页面底部。

写法示例：

<dl>
	<dt>家电</dt>
	<dd>电视</dd>
	<dd>冰箱</dd>
	<dd>空调</dd>
	<dd>烟灶</dd>	
</dl>

<dl>定义列表的容器·，只能包含<dt>和<dd>元素 <dt>定义被描述的术语，通常显示为左对齐或加粗，一个<dt>可以对应多个<dd> <dd>包含术语的定义或描述，通常显示为缩进形式，可以包含段落、图片、连接等其他HTML元素

展示效果:

2.10 表格标签

表格作用：以结构化方式展示行列数据，使信息清晰、易读且便于对比网页场景：主要用于数据展示或者后台管理系统的信息展示

表格基本组成：

标签	作用
<table>	表格容器标签
<tr>	行标签
<td>	单元格标签
<th>	表头单元格

用table套所有，用tr套td作为一行。实际就和大盒子套小盒子没区别，同时美化表格是CSS工作，这时并不用着急

写法示例：

演示效果：

表格结构标签 增强表格语义，让表格结构更加清晰

标签	作用
<thead>	定义表格的头部区域
<tbody>	定义表格的主体内容
<tfoot>	定义表格的底部区域

写法示例：

演示效果：

合并单元格 表格开发中很少用合并，会导致表格难以维护，并影响响应式适配

原理： 1.确定似乎跨行(rowspan)还是跨列合并(colspan) 2.找到目标单元格(左上原则)，写合并数量 3.删除多余单元格

使用示例：

展示效果：

2.11 表单容器

表单：用于收集用户输入数据，并将数据提交到后端进行处理

表单核心标签三要素

表单容器<form>：定义表单的容器，包裹所有表单控件，默认包含action属性。 表单控件：包含<input>通用输入控件，<textarea>多段文本输入框，<select>下拉选择框，<button>：自定义按钮等。 辅助标签<label>：关联输入控件的文本标签，提升可访问性(点击标签可聚焦输入框)，更好的他提高表单的用户体验

导航页：

表单容器
表单控件
辅助标签

表单容器部分

form标签 作用：定义表单的容器，包裹所有表单控件使用方法：<form action=" "></form>

action 属性定义了在提交表单时，应该把所收集的数据送给谁(URL)去处理,在后续会学到。

名称	作用
input 表单	通用输入控件，包含输入框、单选框、复选框等
textarea 表单	多行文本输入框
select 下拉表单	下拉选择框
button 按钮	自定义按钮

表单控件部分

这里展示以下场景

单行文本框和密码框
单选框和复选框
文件域
文本域
下拉选择
按钮

单行文本框和密码框

使用示例：

展示效果：

拓展方法：

其他属性	说明
placeholder	提示信息
name	元素的名称
maxlength	允许的最大字符数
accesskey	使元素获得焦点的快捷键
autocomplete	用于控制表单的自动填充行为，帮助浏览器决定是否根据用户历史输入自动填充字段值取值 on / off

单选框和复选框

input标签 作用：输入标签<input>是常用的表单元素之一，他可以创建文本输入框、密码框、单选框、复选框等。type属性定义了输入框的类型使用方法：<input type="text">

type属性值	说明
text	单行文本框
password	密码框
radio	单选框
checkbox	复选框
file	文件域

使用示例：

展示效果：

拓展方法：

其他属性	说明
name	表单名称实现分组
value	表单值
checked	是否默认选中

文件域 这里仍旧是<input>标签，主要用了以下方法

其他属性	说明
multiple	允许选择多个文件
accept	规定选择的文件类型，多个类型中间用逗号分割

使用示例：

展示效果：

文本域 <textarea>HTML元素是一个多行纯文本编辑控件，适用于允许用户输入大量自由格式文本的场景，例如评论或反馈表单。textarea多行文本框也成为文本域 使用方法：<textarea></textarea>

常见属性	说明
name	表单名称
placeholder	提示信息
rows	文本行数，正整数，默认为2
cols	文本列数，正整数，默认20

使用示例：

展示效果：

文本域textarea利用CSS来设定样式，比如宽高边框等

表单控件-select HTML<select>元素表示一个提供选项菜单的控件

使用方法：<select></select>

使用示例：

<select>元素是容器，<option>是每一个选项标签，每个选项都要跟一个值(value省略时提交值为<option>文本内容) 要想默认选中一个选项，可以添加selected属性。

展示效果：

select很难修改为好看的效果，大部分下拉列表可以通过其他标签模拟实现

表单控件-button <button>标签定义一个按钮，元素内部可以放置内容，比如文本或图像 使用方法：<button></button> 使用示例：

      <li>
        <button disabled>注册</button>
      </li>

展现效果：

disabled属性可以禁用按钮，无法点击

辅助标签-label <label>表示用户界面中某个元素的说明，提升可访问性(点击标签可聚焦输入框)

通常由两种使用方式

方式一：利用for和id相关联(分离写法)

<label for="man">男</label>
<input type="radio" id="man" name="sex">

方式二：直接包含(将要点击的范围包进label)

<label>男
	<input type="radio" name="sex">
</label>

2.12 字符实体【拓】

字符实体是一段以连字号（&）开头、以分号（;）结尾的文本（字符串）。常用于显示保留字符和不可见的字符（如“不换行空格”)

字符	实体	说明
&	&	解析为实体或字符引用的开头
<	<	解析为 tag 的开头
>	>	解析为 tag 的结尾
"	"	解析为 attribute 的值的开头和结尾
		解析为不换行空格
–	–	解析为短破折号（等于 em 单位的一半宽度）
—	—	解析为长破折号（等于 “m” 字符的宽度）
©	©	解析为版权符号
®	®	解析为注册商标符号
™	™	解析为商标符号
≈	≈	解析为近似等于符号
≠	≠	解析为不等于符号
£	£	解析为英镑符号
€	€	解析为欧元符号
°	°	解析为度符号

演示代码：

<body>
  特殊字符：
  <div>
    &nbsp; 空格
    <br>
    &lt; 小于号
    <br>
    &gt; 大于号
    <br>
    &copy; 版权符号
    <br>
    &reg; 注册商标
    <br>
    &yen; 人民币符号
    <br>
    &cent; 分
    <br>
    &pound; 英镑符号
    <br>
    &euro; 欧元符号
    <br>
    &amp; 与符号
    <br>
    &quot; 双引号
    <br>
  </div>
  测试&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格
  <br>
  &lt;p&gt;是一个段落标签
</body>

演示效果：

3.综合案例：水果小店

不妨试试自己通过水果小店这个综合案例，去巩固所学知识，通过效果图和资料去完成这个案例吧。

图片资料：

苹果：https://pngimg.com/uploads/apple/small/apple_PNG12507.png
香蕉：https://pngimg.com/uploads/banana/small/banana_PNG838.png
蓝莓：https://pngimg.com/uploads/blueberries/small/blueberries_PNG74.png 
橙子：https://pngimg.com/uploads/orange/small/orange_PNG752.png 
梨：https://pngimg.com/uploads/pear/small/pear_PNG3466.png 
视频：https://assets.mixkit.co/videos/10419/10419-720.mp4

效果实现图：

标准答案

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-widthinitial-scale=1.0">
    <title>水果小店</title>
  </head>
  <body>
    <header>
      <h1>水果小店</h1>
      <nav aria-label="站点导航">
        <a href="#promo">宣传视频</a> |
        <a href="#goods">商品</a> |
        <a href="#about">关于</a> |
        <a href="#order">订购咨询</a>
      </nav>
      <hr>
    </header>

    <main>
      <section>
        <h2 id="promo">宣传视频</h2>
        <p>水珠慢动作短片（苹果、柠檬），用于营造新鲜氛围：</p>
        <video src="https://assets.mixkit.co/videos/10419/10419-720.mp4" controls width="600" poster="https://pngimg.com/uploads/apple/small/apple_PNG12507.png"></video>
      </section>

      <article>
        <h2 id="goods">本周上新</h2>
        <p>全部为新鲜到店水果，支持线下自提与快递配送。</p>

        <section aria-labelledby="list-title">
          <h3 id="list-title">商品列表</h3>
          <p>快速跳转：
            <a href="#p-apple">苹果</a> ·
            <a href="#p-banana">香蕉</a> ·
            <a href="#p-blueberry">蓝莓</a> ·
            <a href="#p-orange">橙子</a> ·
            <a href="#p-pear">梨</a>
          </p>
          <table border="1" cellpadding="8" cellspacing="0">
            <thead>
              <tr>
                <th>图片</th>
                <th>名称</th>
                <th>简介</th>
                <th>单价</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr id="p-apple">
                <td><img src="https://pngimg.com/uploads/apple/small/apple_PNG12507.png" alt="苹果" width="100" height="100"></td>
                <td>苹果</td>
                <td>甜脆可口</td>
                <td>&yen;6/个</td>
                <td><a href="#order">购买意向</a></td>
              </tr>
              <tr id="p-banana">
                <td><img src="https://pngimg.com/uploads/banana/small/banana_PNG838.png" alt="香蕉" width="100" height="100"></td>
                <td>香蕉</td>
                <td>软糯香甜</td>
                <td>&yen;5/根</td>
                <td><a href="#order">购买意向</a></td>
              </tr>
              <tr id="p-blueberry">
                <td><img src="https://pngimg.com/uploads/blueberries/small/blueberries_PNG74.png" alt="蓝莓" width="100" height="100"></td>
                <td>蓝莓</td>
                <td>进口果，果香浓郁</td>
                <td>&yen;25/盒</td>
                <td><a href="#order">购买意向</a></td>
              </tr>
              <tr id="p-orange">
                <td><img src="https://pngimg.com/uploads/orange/small/orange_PNG752.png" alt="橙子" width="100" height="100"></td>
                <td>橙子</td>
                <td>清甜多汁</td>
                <td>&yen;8/个</td>
                <td><a href="#order">购买意向</a></td>
              </tr>
              <tr id="p-pear">
                <td><img src="https://pngimg.com/uploads/pear/small/pear_PNG3466.png" alt="梨" width="100" height="100"></td>
                <td>梨</td>
                <td>清甜水润</td>
                <td>&yen;7/个</td>
                <td><a href="#order">购买意向</a></td>
              </tr>
            </tbody>
          </table>
        </section>

        <section aria-labelledby="about">
          <h3 id="about">关于门店</h3>
          <p>我们坚持当季采摘，产地直发。以下为运输与发票信息：</p>
          <table border="1" cellpadding="6" cellspacing="0">
            <thead>
              <tr>
                <th>项目</th>
                <th>说明</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>发货地</td>
                <td>湖南/广西/山东 等地</td>
              </tr>
              <tr>
                <td>配送</td>
                <td>全国快递(生鲜优先)；本地可自提</td>
              </tr>
              <tr>
                <td>发票</td>
                <td>支持电子普通发票</td>
              </tr>
            </tbody>
          </table>
        </section>
      </article>

      <aside>
        <h3 id="order">订购咨询</h3>
        <form action="/submit">
          <p>
            <label for="fruit">选择水果：</label>
            <select id="fruit" name="fruit">
              <option value="apple">苹果</option>
              <option value="banana">香蕉</option>
              <option value="blueberry">蓝莓</option>
              <option value="orange">橙子</option>
              <option value="pear">梨</option>
            </select>
          </p>
          <p>
            <label for="qty">意向数量：</label>
            <input id="qty" name="qty" type="number" value="1">
          </p>
          <p>
            <label for="name">联系人：</label>
            <input id="name" name="name" type="text" placeholder="您的姓名" required>
          </p>
          <p>
            <label for="note">备注：</label>
            <textarea id="note" name="note" rows="3" cols="30" placeholder="口味偏好/配送说明"></textarea>
          </p>
          <p>
            <button type="submit">提交意向</button>
          </p>
        </form>
      </aside>
    </main>

    <footer>
      <p>图片来源：
        <a href="https://pngimg.com/uploads/apple/small/apple_PNG12507.png">苹果</a>、
        <a href="https://pngimg.com/uploads/banana/small/banana_PNG838.png">香蕉</a>、
        <a href="https://pngimg.com/uploads/blueberries/small/blueberries_PNG74.png">蓝莓</a>、
        <a href="https://pngimg.com/uploads/orange/small/orange_PNG752.png">橙子</a>、
        <a href="https://pngimg.com/uploads/pear/small/pear_PNG3466.png">梨</a>
      </p>
      <p><a href="#goods">回到商品列表</a></p>
    </footer>
  </body>
  </html>

结语

感谢您看到这里，如果觉得本篇内容还不错，赏个评论+点赞+收藏。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-11-02，如有侵权请联系 [email protected] 删除

表单

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 [email protected] 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！