HTML基础（一）

一、概述

HTML（超文本标记语言，Hyper Text Markup Language）是构建 Web 页面的标准标记语言。它不是一种像 Python 那样的编程语言（没有变量、循环或条件判断），而是一种结构化语言。它的主要作用是告诉浏览器应该如何组织和呈现页面上的内容。

无论是排版一篇条理清晰的技术博客文章，还是为底层的数据管理系统搭建一个可视化的用户界面，HTML 都是最核心的基础。

核心工作原理：
HTML 通过使用各种标记（Tags）来"包裹"内容，从而赋予内容特定的含义或结构。例如，你可以使用标签将一段文字标记为标题、段落、列表或者链接。

标签（Tags） ：通常成对出现，由尖括号包围。例如 <p> 是开始标签，</p> 是结束标签。
元素（Elements）：指的是从开始标签到结束标签的全部内容（包含标签本身和内部的内容）。
属性（Attributes） ：写在开始标签中，用于为元素提供额外的信息。例如 <a href="[https://google.com](https://google.com)"> 中的 href 就是一个属性，指定了链接的跳转地址。

标准的 HTML 文档结构
每一个标准的 HTML 页面都遵循一个固定的树状层级结构：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的主页</h1>
    <p>这是一个段落的内容。</p>
    
    <ul>
        <li>列表项 1</li>
        <li>列表项 2</li>
    </ul>
</body>
</html>

<!DOCTYPE html>：声明这是一个 HTML5 文档。
<html>：页面的根元素，所有其他元素都嵌套在其中。
<head>：包含了页面的"元数据"（关于数据的数据），这些内容不会直接显示在浏览器窗口中，比如网页标题（）、字符集声明以及引入的样式表等。
<body>：包含了用户在浏览器中能看到的所有可见内容，如文本、图片、按钮、表格等。

HTML 在完整 Web 开发中的角色
在实际的软件架构中，HTML 构成了系统的"骨架"和展示层：

前端展示：浏览器解析 HTML 代码并将其渲染成用户可视化的页面。通常还会结合 CSS（负责美化样式）和 JavaScript（负责动态交互）一起使用。
与后端交互：当用户在界面的表单中填写信息或点击按钮时，页面会向后端的 API 接口发起请求。
数据绑定：后端服务处理完复杂的业务逻辑并从关系型数据库中提取出数据后，会将这些数据返回给前端，前端再将这些真实的数据动态填充到 HTML 结构中展示给用户。

基础语法

标题标签

在 HTML 中，标题标签（Heading Tags）可以说是整个网页的"骨架"和"导航图"。标题标签的核心价值在于定义网页的语义结构（Document Outline）。

HTML 提供了 6 个等级的标题标签，从大到小依次是：

<h1> (一级标题)：网页的绝对核心主题。
<h2> (二级标题)：页面的主要区块或章节。
<h3> (三级标题)：章节内的子级分类。
<h4> 到 <h6> (四至六级标题)：更深层次的细节划分（在实际开发中，<h5> 和 <h6> 使用频率较低，通常只有极其复杂的长篇文档或技术手册才会用到）。

代码示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
</head>
<body>
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>
</body>
</html>

段落标签

<p> (Paragraph) 代表文章中的一个段落。在语义上，它表示一个完整且独立的主题思想集合。它独占一行，段落间有缝隙。

html 复制代码

<p>段落</p>

示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落标签</title>
</head>
<body>
    <p>这是第一个段落</p>
    <p>这是第二个段落</p>
</body>
</html>

换行和水平线

这两个都是没有内容的"单标签"（自闭合标签）。

换行：它只应该用于语义上必须换行的地方。最典型的例子是：写一首诗、写一个邮政地址。在这些场景中，即使换行了，它们依然属于同一个段落 <p>。如果你只是想让两段话分开，请使用两个 <p>。
水平线：HTML5 之前，它只是在页面上画一条物理的横线。但在现代 HTML5 中，它有了深刻的语义：段落级别的主题转换（Thematic Break）。

示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>换行标签</title>
</head>
<body>
    你好<br>
    HTML
    <hr>
</body>
</html>

文本格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。

标签名	效果
strong	加粗
em	倾斜
ins	下划线
del	删除线

标签名	效果
b	加粗
i	倾斜
u	下划线
s	删除线

示例：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>格式化标签演示</title>
</head>
<body>

<h2>第一组：语义化标签</h2>
<p>效果演示：<strong>加粗 (strong)</strong></p>
<p>效果演示：<em>倾斜 (em)</em></p>
<p>效果演示：<ins>下划线 (ins)</ins></p>
<p>效果演示：<del>删除线 (del)</del></p>

<hr>

<h2>第二组：纯视觉标签</h2>
<p>效果演示：<b>加粗 (b)</b></p>
<p>效果演示：<i>倾斜 (i)</i></p>
<p>效果演示：<u>下划线 (u)</u></p>
<p>效果演示：<s>删除线 (s)</s></p>

</body>
</html>

图像标签

机制：行内替换元素（单标签）。浏览器根据 src 下载图片并替换该标签占据的物理空间。

属性：

属性	作用	说明
alt	替换文本	图片无法显示的时候显示的文字
title	提示文本	鼠标悬停在图片上面的时候显示的文字
width	图片的宽度	值为数字，没有单位
height	图片的高度	值为数字，没有单位

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
    <!--../代表回到上一级目录-->
    <!--./代表到当前目录-->
    <!--alt表示当图片显示不出来的时候显示出来-->
    <img src="../img/logo.png" alt="这是一个图片" loading="lazy">
    <img src="./img/logo.png" alt="该图片显示不出来" >

</body>
</html>

属性语法：

属性名="属性值"
属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

路径

概念：路径指的是查找文件时，从起点到终点经历的路线。

路径分类：

相对路径：从当前文件位置出发查找目标文件
绝对路径：从盘符出发查找目标文件
- Windows 电脑从盘符出发
- Mac 电脑从根目录出发

相对路径

查找方式：从当前文件位置出发查找目标文件

特殊符号：

/ 表示进入某个文件夹里面 → 文件夹名/
. 表示当前文件所在文件夹 → ./
... 表示当前文件的上一级文件夹 → .../

绝对路径

查找方式：Windows 电脑从盘符出发；Mac 电脑从根目录（/）出发

超链接标签

<a> 标签代表 Anchor（锚）。正是因为它，网页才变成了"万维网"（World Wide Web）。超链接标签能够点击跳转到其他页面。
href 属性值是跳转地址，是超链接的必须属性。

超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现新窗口打开页面。

拓展：开发初期，不确定跳转地址，则 href 属性值写为 #，表示空链接，页面不会跳转，在当前页面刷新一次。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
    <a href="https://www.baidu.com">超链接</a>
    <br>
    <a href="https://www.csdn.net" target="_blank">超链接</a>
    <br>
    <a href="#">超链接</a>
</body>
</html>

音频标签

语法：

bash 复制代码

<audio src="音频的 URL"></audio>

常用的属性

属性	作用	特殊说明
src (必须属性)	音频 URL	支持格式：MP3、Ogg、Wav
controls	显示音频控制面板
loop	循环播放
autoplay	自动播放	为了提升用户体验，浏览器一般会禁用自动播放功能

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <audio src="#" controls loop autoplay></audio>
</body>
</html>

视频标签

常用属性：

属性	作用	特殊说明
src (必须属性)	视频 URL	支持格式：MP4、WebM、Ogg
controls	显示视频控制面板
loop	循环播放
muted	静音播放
autoplay	自动播放	为了提升用户体验，浏览器支持在静音状态自动播放

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<video src="#" controls loop muted autoplay></video>
</body>
</html>