03 - HTML常用标签
1 标签语义
定义： 标签具有一定的语义，重点记住和标签的含义，明白这个标签是用来干啥的
根据标签的语义，在合适的地方给一个最为合理的标签， 可以让页面结构更清晰
1.1 语义化标签的具体使用
具有语义化标签的网页
没有语义化标签的网页
常用标签
1 标题标签
1.1 <h1> - <h6> 重要
为了使网页更具有语义化，我们经常会在页面中用到标题标签。 HTML 提供了 6 个等级的网页标题，即<h1> - <h6>
<!-- 标题标签 -->`<h1>一级标签</h1>`
h表示 单词 head 的缩写，意为头部、 标题。
标签语义： 作为标题使用， 并且依据重要性递减
1.2 特点
1 . 加了标题的文字会变的加粗， 字号也会依次变大。
2. 一个标题独占一行。
1.3 代码展示
<h1>标题一共六级选,</h1><h2>文字加粗一行显。 </h2><h3>由大到小依次减， </h3><h4>从重到轻随之变。 </h4><h5>语法规范书写后， </h5><h6>具体效果刷新见。 </h6>
1.4 浏览器效果
2 段落和换行标签（重要）
2.1 <p></p> 段落标签（重要）
2.2 为什么要使用段落标签
- 网页中的文本内容需要一段一段的有条理展示在页面上
- 文字分段显示
- HTML 标签中，
<p>标签用于定义段落 - 它可以将整个网页分为若干个段落。
2.3 段落标签的英文单词
单词 paragraph [ˈpærəgræf] 的缩写，意为段落。
标签语义： 可以把 HTML 文档分割为若干段落。
2.4 段落标签的特点
- 文本在一个段落中会根据浏览器窗口的大小自动换行。
- 段落和段落之间保有空隙。
2.5 代码演示
<!-- 标记该文档为最新的html5格式 --><!DOCTYPE html><!-- 语言格式为英文 --><html lang="en"><head><!-- 指定HTML文档的字符编码为UTF-8 --><meta charset="UTF-8"><!-- 设置视口，使页面在移动设备上正确显示 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 定义网页标题，显示在浏览器标签页上 --><title>第一个html</title><style>/* 这里是CSS样式表区域，用于添加样式定义 */</style></head><body><!-- 这里是HTML文档的主体内容区域，可以添加各种HTML元素 --><h1>“守护蓝色国土，我们责无旁贷”</h1><span>2025年09月01日 12:06 解放军报</span><span>原标题：“守护蓝色国土，我们责无旁贷”</span><span>■何铁城 贺跃民 张大禹 解放军报记者 钱晓虎栽种绿植，绘就南海岛礁全新底色</span><p>南海海面，阳光炽烈。岛礁一隅，木麻黄如忠诚卫士守望一块方形土地。官兵们将其一分为二，一半栽种新鲜蔬菜，各色瓜果蔬菜在此扎根，孕育果实；另一半则孕育苗木幼株，在海风轻拂下，抗风植物身姿矫健，奏响生命序曲。</p><p>“在岛礁种树比登天还难。”在南沙驻守20多年，海军南沙某守备部队二级军士长胡冬冬抚摸着一棵木麻黄的树干说道。岛礁官兵用数年时间探索，用木麻黄筑起防风屏障、在背风处育苗的方法，一点点摸索岛礁绿化新技术。</p><p>从第一株太阳花艰难扎根，到岛礁绿化全面铺开，再到如今在岛礁自主育苗，官兵积极探索绿化苗木“本土化”方法，砥砺前行数十载。</p><p>南沙岛礁有个传统，每次官兵探亲返礁，都会从家乡带来种子。没有泥土，他们趁换补时机，肩挑背扛，像燕子衔泥般，一点点从祖国各地运来；没有合适的土地，他们充分利用水杯、泡沫箱等工具装满泥土，将其当作培育生命的摇篮。</p><p>天南海北汇聚而来的种子，与守礁官兵一样顽强抗争恶劣环境。经过多次试种，终于，一朵顽强的太阳花在南海礁盘盛开。</p><p>从此，祖国最南端的岛礁有了绿色。</p></body></html>
2.6 浏览器效果
3 换行标签 <br />
3.1 <br> 换行标签（重要）
3.2 换行标签的作用
- 在 HTML 中，文字从左往右依次排列，直到浏览器窗口的右端才自动换行
- 段文本强制换行显示，就需要使用换行标签
3.3 换行标签的英文单词
单词 break 的缩写，意为打断、 换行。
标签语义： 强制换行。
3.4 换行标签的特点
是个单标签。
标签只是简单地开始新的一行， 跟段落不一样，段落之间会插入一些垂直的间距
3.5 代码展示
<body>百战沙场，攻无不克。陆军方队步履铿锵走来。<!-- 换行标签 --><br /><br />陆军是党最早建立和领导的武装力量，英勇杀敌寇，浴血筑长城，历经战火洗礼，建立不朽功勋。新时代的人民陆军正加快向全域作战型转变。</body>
3.6 浏览器效果
4 文本格式化标签
4.1 文本格式化标签定义
对文字进行设置 粗体、 斜体 或下划线等效果
标签语义: 突出重要性, 比普通文字更重要.
4.1.1 字符快速查询
4.2 标签及作用
<table border="1" cellpadding="10" cellspacing="0"><thead><tr><th>语义</th><th>标签</th><th>说明</th></tr></thead><tbody><tr><td>加粗</td><td><code><strong></strong></code>或者<code><b></b></code></td><td>更推荐使用<code><strong></code>标签加粗语义更强烈</td></tr><tr><td>倾斜</td><td><code><em></em></code>或者<code><i></i></code></td><td>更推荐使用<code><em></code>标签加粗语义更强烈</td></tr><tr><td>删除线</td><td><code><del></del></code>或者<code><s></s></code></td><td>更推荐使用<code><del></code>标签加粗语义更强烈</td></tr><tr><td>下划线</td><td><code><ins></ins></code>或者<code><u></u></code></td><td>更推荐使用<code><ins></code>标签加粗语义更强烈</td></tr></tbody></table>
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong></strong>或者 <b></b> | 更推荐使用<strong>标签加粗语义更强烈 |
| 倾斜 | <em></em>或者<i></i> | 更推荐使用<em>标签加粗语义更强烈 |
| 删除线 | <del></del>或者<s></s> | 更推荐使用<del>标签加粗语义更强烈 |
| 下划线 | <ins></ins>或者<u></u> | 更推荐使用<ins>标签加粗语义更强烈 |
重点记住 加粗 和 倾斜。
4.3 代码展示
<body><!-- 文本格式化标签 --><!-- 加粗 --><b>This is a bold text</b><!-- 粗体 更加具有语义和强调作用--><strong>This is a bold text</strong><!-- 斜体 --><i>This is an italic text</i><!-- 斜体 em更加具有语义和强调作用--><em>This is an italic text</em><!-- 下划线 --><u>This is an underlined text</u><ins>This is an inserted text</ins><!-- 删除线 --><del>This is a deleted text</del><!-- 删除线 --><strike>This is a strikethrough text</strike><s>This is a strikethrough text</s><!-- 引用类型文本 --><cite>This is a citation text</cite><!-- 缩写 --><abbr title="abbreviation">abbrddd</abbr><!-- 引用 --><q>This is a quotation text</q><!-- 斜体引用 --><blockquote><p>This is a blockquote with some text. <br> And this is the second line.</p></blockquote><!-- 超链接 --><a href="https://www.google.com">This is a link</a><!-- 换行 --><br><!-- 缩进 --><p>This is a paragraph with some text. <br> And this is the second line.</p><!-- 块引用 --><blockquote>This is a blockquote with some text. <br> And this is the second line.</blockquote><!-- 代码块 --><code>This is a code block with some text.</code><!-- 变量 --><var>x</var><!-- 计算机输出 --><samp>This is a computer output with some text.</samp><!-- 预格式化 --> <pre>This is a preformatted text with some text.</pre></body>
4.4 浏览器效果
5 盒子容器标签 <div>,<span>
5.1 容器标签
<div>一个容器盒子，装内容和标签 没有语义<span>一个容器盒子，装内容和标签 没有语义
5.2 容器盒子的英文单词
div 是 division 的缩写，表示分割、 分区。 span 意为跨度、跨距。
5.3 容器盒子的特点
<div>标签用来布局， 但是现在一行只能放一个<div>。 大盒子
2.<span>标签用来布局， 一行上可以多个<span>。小盒子
5.4 代码展示
<body><div><h1>This is a div</h1><p>This is a paragraph inside a divdiv 里边可以存放段落，span标签，还有其他标签</p><span>This is a span</span></div></body>
5.5 浏览器显示效果
5.6 特点
- div : 独占一行，大盒子 里边可以存放内容和标签
- span ：一行内容放多个，不占空间，小盒子
6 图像标签 <img />
6.1 定义
网页中的元素有文本，图像 音频视频等，所以 图像是网页的元素之一
6.2 标签 <img />(单标签 == 闭合标签)
<body><img src="图像URL" alt="图片加载失败时的提示语" title="图片加载成功时的提示语" longdesc="图片详细描述" width="宽度" height="高度" border="图像边框" />
</body>
6.3 图像标签的英文单词
单词 image 的缩写，意为图像。
src 是<img>标签的必须属性，其他属性没有无所谓，但是src必须得有，它用于指定图像文件的路径和文件名。
所谓属性：简单理解就是属于这个图像标签的特性。
6.4 表格格式快速预览
6.5 图像标签属性注意点
① 图像标签可以拥有多个属性， 必须写在标签名的后面。
② 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
③ 属性采取键值对的格式，即 key=“value" 的格式， 属性 =“属性值” 。
6.6 代码展示
<body><!-- <img src="图像URL" alt="图片加载失败时的提示语" title="图片加载成功时的提示语" longdesc="图片详细描述" width="宽度" height="高度" border="图像边框" /> --><!-- 没有src属性的图片标签，img标签也就没有任何意义，可以用alt属性来替代，当图片加载失败时，alt属性的内容会显示在图片的位置 --><img alt="猫咪图片"><!-- src :图片的路径，展示图片使用的属性 --><img src="maomi.png" width="200" height="300" alt="猫咪图片" /></body>
6.7 浏览器效果
7 图像路径
7.1 路径定义
在HTML中，路径是用来指定文件位置的地址
7.2 路径的前置知识点
- 目录文件夹和根目录
- VSCode 打开目录文件夹
7.2.1 目录文件夹和根目录:
实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们， 因此我们需要一个文件夹来管理他们。
-
目录文件夹： 就是普通文件夹， 里面只不过存放了我们做页面所需要的相关素材， 比如 html 文件、 图片等。
-
根目录： 打开目录文件夹的第一层就是根目录
7.2.2 (2) VSCode打开目录文件夹:
- 文件---- 打开文件夹 . 选择目录文件夹. 后期非常方便管理文件.
7.3 路径分类
页面中的图片会非常多， 通常我们会新建一个文件夹来存放这些图像文件（ images）， 这时再查找图像，就需要采用“路径” 的方式来指定图像文件的位置。
7.3.1 1. 绝对路径
7.3.1.1 定义：
- 从根目录开始的完整路径，或完整的URL地址
- 本地磁盘目录下的绝对位置，直接到达目标位置
7.3.1.2 示例：
本地磁盘下
<img src="D:/images/maomi.png" alt="猫咪图片">
外部链接
<img src="https://example.com/images/maomi.png" alt="猫咪图片">
7.3.2 相对路径
7.3.2.1 定义：
- 相对于当前文件位置的路径
- 以引用文件所在位置为参考基础，而建立出的目录路径
- 图片相对于 HTML 页面的位置
7.3.2.2 指明方向
相对路径是从代码所在的这个文件出发，去寻找目标文件的， 而我们这里所说的上一级 、 下一级和同一级就是图片相对于 HTML 页面的位置。
- 三种常见形式：
a) 同级目录：直接写文件名
html文件和img图片在同级目录下
<img src="maomi.png" alt="猫咪图片">
b) 下级目录：使用 / 或 \ 进入子目录
html文件在根目录下有一个叫 images目录 ，该目录下的img图片文件
html和images目录在同一级目录下
<img src="images/maomi.png" alt="猫咪图片">
c) 上级目录：使用 ../ 返回上一级目录
html文件在home目录下，images和Home文件在跟路径属于同一级，所以要找到图片，需要向上一级跳跃到images目录中才可以找到
<img src="../images/maomi.png" alt="猫咪图片">
7.4 代码
<body><!-- 绝对路径 : 以本地磁盘的盘符开始，直到图片处--><img src="E:\home\buou.jpg" alt="猫咪图片"><!-- src :图片的路径，展示图片使用的属性 --><img src="maomi.png" width="200" height="300" alt="猫咪图片" /><!-- 相对路径 ： 相对于当前页面的目录 --><img src="images/01.png" alt=""><img src="images/02.png" alt=""></body>
7.5 浏览器效果
7.6 vscode各个文件的位置
同级目录中，在home中的html想要找到 images中的图片，跳转到上一级，再找 images目录中的maomi.png
7.7 路径选择建议
- 同一网站内：优先使用相对路径
- 链接外部资源：使用绝对URL
- 确保路径正确，避免图片无法加载
8 超链接标签 <a></a>
8.1 超链接 a标签的定义
在HTML（HyperText Markup Language）中，超链接是一种允许用户从一个页面跳转到另一个页面的方式。超链接是通过<a>标签（锚点标签）来实现的。
8.2 链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式"></a>
8.3 超链接的英文单词
单词 anchor [ˈæŋkə®] 的缩写，意为： 锚。
8.4 使用<a>标签创建超链接的基本方法：
8.4.1 外部链接到另一个网页
要链接到另一个网页，你需要将href属性设置为那个页面的URL。
<a href="https://www.example.com">访问Example网站</a>
8.4.2 内部链接到同一网站内的页面
- 如果你想要链接到同一网站内的另一个页面，只需将href属性设置为相对路径。
- 网站内部页面之间的相互链接. 直接链接内部页面名称即可
<a href="about.html">关于我们</a>
8.4.3 空链接:
如果当时没有确定链接目标时 。
< a href="#"> 首页 </a >
8.4.4 下载链接:
如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
<!-- download属性用于指定下载文件名 --><a href="maomi.png" download="maomi.png">下载猫咪图片</a>
8.4.5 链接到网站内的锚点
锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.
4.9 超链接标签 (重点）
在链接文本的 href 属性中，设置属性值为 #名字 的形式， 如 第2集
找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如： <h3 id="two">第2集介绍</h3>
如果你想要链接到页面内的某个部分（例如，页面的特定标题或段落），你可以使用锚点。首先，你需要在目标位置使用id属性来标识该位置。
<!-- 目标位置 -->
<h2 id="section1">第一节</h2>
...
<!-- 链接到锚点 -->
<a href="#section1">跳转到第一节</a>
8.4.6 打开链接在新标签页中
默认情况下，点击超链接会在当前标签页中打开目标页面_self。如果你想要在新标签页中打开链接，可以添加target="_blank"属性。
<a href="https://www.example.com" target="_blank">在新标签页中访问Example网站</a>
8.4.7 使用JavaScript函数作为链接目标
你也可以将href属性设置为一个JavaScript函数，这样点击链接时会触发该函数。
<a href="javascript:alert('Hello, World!');">点击我</a>
8.4.8 或者使用onclick事件：
<a href="#" onclick="alert('Hello, World!'); return false;">点击我</a>注意使用href="#"和return false;是为了防止页面跳转。
8.4.9 使用mailto:创建电子邮件链接
要创建一个发送电子邮件的链接，可以使用mailto:协议。
<a href="mailto:example@example.com">发送邮件</a>
8.4.10 使用tel:创建电话拨号链接
要创建一个拨打电话的链接，可以使用tel:协议。
<a href="tel:+1234567890">拨打电话</a>
以上就是在HTML中使用超链接的基本方法。通过这些方法，你可以轻松地在你的网页中添加导航和交互性。
常用标签总结
