02——HTML基础标签学习-Toy模板网

这篇具有很好参考价值的文章主要介绍了02——HTML基础标签学习。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

HTML基础标签

标题 h1-6

场景

在新闻和文章的页面中，都离不开标题，它用来突出显示文章主题，标题显得尤为重要。

用法

标题（Heading）是通过 <h1> → <h6>标签进行定义的。
<h1> 定义最大的标题。 <h6> 定义最小的标题。

语义

1~6级标题，重要程度依次递减。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题标签</title>
</head>
<body>
    <!-- ctrl + D ：先双击选定内容，然后按下 ctrl + d 可以往下依次（再次按下ctrl + d）选择相同的内容。这样同时修改相同的内容就非常方便-->
    <h1>1级标题</h1>
    <h1>1级标题</h1>
    <h1>1级标题</h1>

    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>

</body>
</html>

效果图

html空行,Web基础,html,学习,搜索引擎

特点

文字都有加粗
文字都有变大，并且从h1→h6文字逐渐减小
浏览器会自动地在标题的前后添加空行，独占一行（块级元素）
默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

重要性

h1标签对于网页尤为重要，搜索引擎使用标题为我们网页的结构和内容编制索引，让用户可以通过标题来快速浏览网页，所以用标题来呈现文档结构是很重要的。开发中有特定的使用场景，如：新闻的标题、网页的logo部分（在h1标签里面嵌套比较重要的信息，如logo图片，标题文字等）等，涉及到搜索引擎优化(SEO)知识。
请确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题，请使用其它标签或 CSS 代替。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

搜索引擎优化（SEO）

概念

SEO（搜索引擎优化）是一种通过改进网站结构和内容，从而提高网站在搜索引擎中排名的技术和方法。SEO 旨在优化网站的排名，以便它们在搜索引擎结果页面（SERP）上获得更高的曝光度和点击率，从而吸引更多的流量和潜在客户。

目标

SEO 的主要目标是提高网站在搜索引擎的自然排名，也称为有机排名。这与通过付费广告获得的排名不同，后者被称为付费搜索或搜索引擎营销（SEM）。SEO 的主要工作包括关键词研究、网站结构优化、网站内容优化、内部链接、外部链接等。

策略

SEO 是一项长期的工作，需要持续的努力和耐心。由于搜索引擎算法的不断更新和变化，SEO 策略也需要不断调整和优化。然而，通过正确的 SEO 策略和实践，网站可以获得更好的排名和更多的有机流量，从而增加其在网上的曝光度和业务成功的机会。

常见的 SEO 概念和技术

关键词研究：关键词是用户在搜索引擎中输入的短语或单词，因此关键词研究是确定您的网站应该针对哪些关键词进行优化的过程。
网站结构优化：这包括通过优化网站的结构和导航来提高用户体验和搜索引擎的可读性。例如，为您的网站创建易于使用和导航的网站地图。
网站内容优化：这是通过创建高质量、有用的内容来增加搜索引擎的可读性和用户体验。这包括优化您的页面标题、元描述和内容中的关键词密度等。
内部链接：这是通过在网站中链接到其他相关页面来增加网站的内部链接结构。这可以帮助搜索引擎更好地了解您网站的结构和内容，从而提高您的排名。
外部链接：这是通过链接到其他网站来增加您网站的外部链接结构。外部链接可以帮助提高您的网站的声誉和权威性，从而提高您的排名。
移动优化：随着移动设备的流行，移动优化变得越来越重要。这包括优化您的网站的响应式设计和加载速度，以适应各种设备和网络条件。

总之，SEO 是一项复杂的工作，需要对搜索引擎的算法和用户行为有深入的了解。通过合理的 SEO 策略和实践，您的网站可以获得更好的排名和更多的有机流量，从而增加业务成功的机会。

段落 p

场景

HTML 可以将文档分割为若干段落，如在新闻和文章的页面中，可用于分段显示。

用法

段落（paragraph）是通过 <p> 标签定义的。

语义

表示一个段落。

实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>段落</title>
  </head>
  <body>
    <p>这是第一个段落。</p>
    <p>这是第二个段落。</p>
    <p>这是第三个段落。</p>
  </body>
</html>

效果图

html空行,Web基础,html,学习,搜索引擎

特点

段落之间存在间隙
浏览器会自动地在段落的前后添加空行，独占一行（块级元素）

不要忘记结束标签

前面我们提过，即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML，如下：

<p>这是一个段落
<p>这是一个段落

以上实例在浏览器中也能正常显示，因为关闭标签是可选的。

但不要依赖这种做法，忘记使用结束标签会产生不可预料的结果或错误。在未来的 HTML 版本中，不允许省略结束标签。

提示：通过结束标签来关闭 HTML 是一种经得起未来考验的 HTML 编写方法。清楚地标记某个元素在何处开始，并在何处结束，不论对您还是对浏览器来说，都会使代码更容易理解。

换行 br

场景

让文字强制换行显示。

用法

换行（拆行）是通过单标签 <br > 或 <br />定义的。建议使用 <br /> 表示

语义

如果希望在不产生一个新段落的情况下进行换行（新行），就使用 <br />标签。

实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>分行</title>
  </head>
  <body>
    <p>这个<br />段落<br />演示了分行的效果</p>
  </body>
</html>

效果图

html空行,Web基础,html,学习,搜索引擎

特点

单标签，<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
让文字强制换行

注意

使用空的段落标记<p></p>去插入一个空行是个坏习惯。用 <br /> 标签代替它！（但是不要用 <br /> 标签去创建列表，列表后面讲解）。
您也许发现 <br> 与 <br /> 很相似。前面我们提过，在 XHTML、XML 以及未来的 HTML 版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。即使 <br> 在所有浏览器中的显示都没有问题，使用 <br /> 也是更长远的保障。

水平线 hr

场景

分割不同主题内容的水平线

用法

使用<hr>或<hr />标签进行表示，建议使用 <hr /> 标签

语义

主题的分割转换

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平线</title>
</head>
<body>
    <h1>这是文章标题</h1>
    <hr>
    <p>阿卡贝拉（意大利：Acappella )即无伴奏合唱。 <br>  其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》</p>
    <p>“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带来不一样的风格。视频示例： 有一种悲伤（翻唱）-《A Kind of Sorrow》</p>
</body>
</html>

效果图

特点

单标签
在页面中显示一条水平线

提示

使用水平线（<hr> 标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。

VS code自动换行

从上面的代码例子中我们可以看到段落的文字比较多，这时我们可以使用VS code提供的自动换行功能。开启这个功能后，它会根据VS code界面窗口的大小进行文字自动换行展示，方便我们编辑对应的文字，此操作不会影响页面的展示效果。

点击查看 -> 自动换行即可，或使用快捷键 Alt + Z：

html空行,Web基础,html,学习,搜索引擎

在最大化的VS code界面中：

html空行,Web基础,html,学习,搜索引擎

下面我们均开启自动换行功能，并将vs code的窗口变小，请注意段落中文字的显示变化：随着窗口的大小变化，段落里面的文字在一排展示的效果也随之发生了变化。

html空行,Web基础,html,学习,搜索引擎

预格式文本 pre

场景

我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。

对于 HTML，无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

实例1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>预格式文本标签</title>
</head>
<body>
    <h1>春晓</h1>

    <p>春眠不觉晓， 
        处处闻啼鸟。
        夜来风雨声，
        花落知多少。</p>

    <p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p>
</body>
</html>

效果图

html空行,Web基础,html,学习,搜索引擎

可以看到，源代码中的排版被忽略了，页面显示并没有按照像源代码中段落标签中的间隔那样将句子隔开。

解决办法

使用预格式文本标签<pre>

实例2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>预格式文本标签</title>
  </head>
  <body>
    <pre>
        <P>我是嵌套在pre里面的p标签      看看我</P>
    </pre>
      
    <pre>
    这是
预格式文本。
    它保留了      空格
    和换行。
</pre>

    <p>pre 标签很适合显示计算机代码：</p>

    <pre>
for i = 1 to 10
     print i
next i
</pre>
  </body>
</html>

效果图

html空行,Web基础,html,学习,搜索引擎

实例3

利用<pre>标签写一首有排版格式的古诗。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>预格式文本标签</title>
  </head>
  <body>
      <h1>春晓</h1>

<pre>
春眠不觉晓， 
处处闻啼鸟。
夜来风雨声，
花落知多少。
</pre>

    <p>
      上述标签用的是pre，就不会忽略掉多余的空格，后续学了css，也可以用：white-space:pre;
    </p>
  </body>
</html>

效果图

html空行,Web基础,html,学习,搜索引擎

从以上两个例子可以看出用pre标签显示的文字样式与P标签有所不同，但是会保留多余的空格字符和回车字符，后期这些样式可以用css进行修改，只需要知道这个标签可以保留文本中的多余空格即可。

文本格式化 1

场景

需要让文字加粗、下划线、倾斜、~~删除线~~等效果。

用法

第一套标签：

标签	说明
b (bold)	加粗
u (underline) （不建议使用）	下划线
i (italic)	倾斜
s (strikethrough)（不建议使用）	~~删除线~~
strike (html5 中不建议使用)	~~删除线~~

第二套标签：

标签	说明
strong	定义加重语气
ins	定义插入字
em	定义着重文字
del	~~定义删除字~~

语义

第二套标签突出重要性的强调语境中使用，两套标签视觉效果都一样! ! !

实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文本格式化标签</title>
  </head>
  <body>
    <p>
      我是p标签里面的文字，请对比记忆，请注意我是块级标签，浏览器会让我独占一行！
    </p>

    <!-- 请注意，下面这些标签是行内标签，相邻行内标签在一行上 -->
    <b>这个文本是加粗的</b><strong>这个文本是加粗的</strong> <br />

    <u>这个文本具有下划线</u>
      <!-- 我在这里进行了手动回车，让两个标签分别两行展示，请注意看浏览器界面，会自动解析成一个空格 -->
    <ins>这个文本具有下划线</ins> <br />

    <i>这个文本是斜体的</i>
    <em>这个文本是斜体的</em> <br />

    <s>这个文本具有删除线</s>
    <del>这个文本具有删除线</del> <br />

    <!-- HTML5 中不支持<strike> 标签;在 HTML 4 中用于定义删除线文本。
        不建议使用strike标签，VScode会标红提示!!! -->
    <strike>这个文本具有删除线</strike>
</html>

效果图

html空行,Web基础,html,学习,搜索引擎

标签语义化

实际项目开发中选择标签的原则：标签语义化

即：根据语义选择对应正确的标签
如：需要写标题，就使用h系列标签
如：需要写段落，就使用p标签

好处

对人：好理解，好记忆

对机器：有利于机器解析，对搜索引擎(SEO)有帮助

注意

一些老式的浏览器会把删除文本和下划线文本显示为普通文本。

文本格式化 2

场景

需要定义大号、小号、上标、下标等样式的文本

用法

标签	说明
big	定义大号字
small	定义小号字
sup (superscript)	定义上标字
sub (subscript)	定义下标字

巧记

p：圆圈在右上方，就是上标
b：圆圈在右下方，就是下标

实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>
      我是p标签里面的文字，请对比记忆，请注意我是块级标签，浏览器会让我独占一行！
    </p>

    <!-- 请注意，下面这些标签是行内标签，相邻行内标签在一行上 -->

    <!-- HTML5 中不支持<big> 标签;在 HTML 4 中用于定义更大的文本。 -->
    <big>这个文本字体放大</big><small>这个文本是缩小的</small> <br />

    <!-- 手动换行，注意显示区别：两句话之间会多解析成一个空格 -->
    <big>这个文本字体放大</big>
    <small>这个文本是缩小的</small> <br />


    这个文本包含<sub>下标</sub> <br />
    这个文本包含<sup>上标</sup>
  </body>
</html>

效果图

html空行,Web基础,html,学习,搜索引擎

计算机输出

用法

标签	描述
code	定义计算机代码
kbd	定义键盘码
samp	定义计算机代码样本
tt	定义打字机代码
var	定义变量

实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>计算机输出标签</title>
  </head>
  <body>
    <!-- 了解即可，用得少 -->

    <code>计算机输出</code>
    <br />

    <kbd>键盘输入</kbd>
    <br />
    <tt>打字机文本</tt>
    <br />

    <samp>计算机代码样本</samp>
    <br />

    <var>计算机变量</var>
    <br />

    <p><b>注释：</b>这些标签常用于显示计算机/编程代码。</p>
  </body>
</html>

效果图

html空行,Web基础,html,学习,搜索引擎

文字和首字母缩写 abbr

用法

标签	描述
abbr	定义缩写
acronym（HTML5 中不支持,用abbr代替）	定义首字母缩写

<abbr> 标签指示简称或缩写，比如 “WWW” 或 “NATO”。

通过对缩写进行标记，能够为浏览器、拼写检查和搜索引擎提供有用的信息。

<abbr> 标签最初是在 HTML 4.0 中引入的，表示它所包含的文本是一个更长的单词或短语的缩写形式。

可以在 <abbr> 标签中使用全局的 title 属性，这样就能够在鼠标指针移动到 <abbr> 元素上时显示出简称/缩写的完整版本。

实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文字首字母缩写</title>
  </head>
  <body>
    <!-- 鼠标放上去观察显示效果，后期学习图片img，也有类似效果 -->
    <abbr title="键盘敲烂，月薪过万！">键盘敲烂.</abbr>
    <br />

    <acronym title="World Wide Web">WWW</acronym>

    <p>
      在某些浏览器中，当您把鼠标移至缩略词语上时，title可用于展示表达的完整版本。
    </p>

    <p>仅对于 IE 5 中的 acronym 元素有效。</p>

    <p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
  </body>
</html>

效果图

html空行,Web基础,html,学习,搜索引擎

鼠标悬浮后：

html空行,Web基础,html,学习,搜索引擎

文字方向 bdo

用法

标签	描述
bdo	定义文字方向，bdo 元素可覆盖默认的文本方向

属性

dir

rtl ：right to left ：文字右到左显示
ltr ：left to right ：文字左到右显示

实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文字方向</title>
  </head>
  <body>
    <p>
      如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出
      (rtl)；
    </p>

    <!--  right to left ：右到左-->
    <bdo dir="rtl"> Here is some Hebrew text </bdo>
      
    <br />
      
    <!--  left to right ：左到右-->
    <bdo dir="ltr"> Here is some Hebrew text </bdo>
  </body>
</html>

效果图

html空行,Web基础,html,学习,搜索引擎

地址 address

用法

标签	描述
address	定义地址

<address> 标签定义文档或文章的作者/拥有者的联系信息。
如果 <address> 元素位于 <body> 元素内，则它表示文档联系信息。
如果 <address> 元素位于 <article> 元素内，则它表示文章的联系信息。
<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。
<address> 标签不应该用于描述通讯地址，除非它是联系信息的一部分。
<address> 元素通常连同其他信息被包含在 <footer> 元素中。

实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <address>
      Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br />
      Visit us at:<br />
      Example.com<br />
      Box 564, Disneyland<br />
      USA
    </address>
  </body>
</html>

效果图

html空行,Web基础,html,学习,搜索引擎

引用 q

用法

标签	描述
blockquote	定义长的引用
q	定义短的引用语
cite	定义引用、引证定义引用
dfn	定义一个定义项目

<blockquote> 标签定义块引用。

<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。

属性：cite规定引用的来源。

<q> 标签定义短的引用。浏览器经常在引用的内容周围添加引号。

<q> 标签在本质上与 <blockquote> 是一样的。不同之处在于它们的显示和应用。<q> 标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分（通常显示为缩进的块），请使用 <blockquote> 标签。

可使用cite标签对参考文献的引用进行定义，比如书籍或杂志的标题。

实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
      
    <!-- 属性：cite规定引用的来源。 -->
    <blockquote cite="www.baidi.com">
      这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用，这是长引用。
    </blockquote>

      
    <!-- 短引用，会添加引号 -->
    <p>
      世界自然基金会的目标是:
      <q>建设一个人与自然和谐相处的未来。</q>
      我们希望他们成功。
    </p>

      
    <!-- 行标签 -->
    <cite>
      可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。
    </cite>

      
    <!-- 行标签 ，不会自动成为一行-->
    <dfn>
      定义一个项目
    </dfn>
  </body>
</html>

效果图

html空行,Web基础,html,学习,搜索引擎

路径

场景：页面需要加载图片、音频或视频等，需要先找到对应的媒体文件

类似于：生活中两个人，我要去找你，需要通过一定的路径才能找到！

同理：页面需要找到这些媒体文件，也是需要通过路径才能找到的

绝对路径

指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径。

例如：

盘符开头：C:\Users\thanks\Desktop\code\images\dog.gif

完整的网络地址： https://gitee.com/Thank-ks/general-img/raw/master/202303081658468.png（了解）

相对路径

相对路径：从当前文件开始出发找目标文件的过程。

同级目录

当前文件和目标文件在同一目录中。

html空行,Web基础,html,学习,搜索引擎

类似于：我（当前文件）和你（目标文件) 都在大厅（一个文件夹中)

生活中：两个人独处一室，我想找你，直接喊名字即可!

代码步骤：直接写目标文件的名字即可

方法一: <img src="目标图片.gif">

方法二: <img src="./目标图片.gif">

vs Code快捷操作：直接敲./后，会自动提示同级目录中有哪些文件，直接选择即可！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="cat.gif" alt="">

    <!-- 手动打下./，vscode会进行提示显示 -->
    <img src="./cat.gif" alt="">
</body>
</html>

下级目录

html空行,Web基础,html,学习,搜索引擎

类似于：我在大厅，你累了去卧室休息了，我现在要找到你！

先知道你去了哪一个房间→房间名：卧室
进入这个房间→进入
此时又独处一室→直接喊你名字

代码步骤:

先知道在哪个文件夹里面→文件夹名字
进入这个文件夹
此时看到目标文件直接喊她→直接写目标文件名字

Vs Code快捷操作：直接敲./后，会自动提示当前目录下有哪些文件夹，直接一层层选择即可!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 先进入images文件夹，在找到想要的文件 -->
    <img src="images/dog.gif" alt="">

    <!-- 可以使用./获得vscode的提示，./表示当前文件目录 -->
    <img src="./images/dog.gif" alt="">
</body>
</html>

上级目录

html空行,Web基础,html,学习,搜索引擎

方法：

<img src="../目标图片.gif">

类似于：乾坤大挪移，我在卧室，你还在大厅，我现在要找到你！

先要出卧室，来到大厅→出去
此时又独处一室→直接喊你名字

实现步骤：

先出当前文件夹，到上一级目录→…/
此时看到目标文件直接喊她→直接写目标文件

vs Code快捷操作：直接敲…/后，会自动提示上级目录下有文件，直接选择即可!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="../cat.gif" alt="">

    <!-- 直接敲../后，会自动提示上级目录下有文件，直接选择即可! -->
    <img src="../images/map.jpg" alt="">
</body>
</html>

总结

同级目录：直接写：目标文件名字!
下级目录：直接写：文件夹名/目标文件名字!
上级目录:直接下: …/目标文件名字!

vscode中的快捷操作

同级和下级目录: ./之后选择即可。 ./就是当前路径的意思，可写可不写！
上级目录: …/之后选择即可
上上级目录: …/…/之后选择即可（返回上级几个级别就用几个…/）

图片 img

上面在学习路径的时候，经常出现的img其实就是用于展示图片的标签。

img是一个单标签
img标签需要展示对应的效果，需要借助标签的属性进行设置！

html空行,Web基础,html,学习,搜索引擎

标签的属性写在开始标签内部
标签上可以同时存在多个属性
属性之间以空格隔开
标签名与属性之间必须以空格隔开
属性之间没有顺序之分

src属性

目标图片的路径，上述已做详细介绍。

alt属性

用于替换文本

当图片加载失败时，才显示alt的文本
当图片加载成功时，不会显示alt的文本

html空行,Web基础,html,学习,搜索引擎

title属性

提示文本，当鼠标悬停时，才显示的文本

主意点：title属性不仅仅可以用于图片标签，还可以用于其他标签

html空行,Web基础,html,学习,搜索引擎

width和height属性

宽度和高度（数字）

如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形)

如果同时设置了width和height两个，若设置不当此时图片可能会变形（失真）

html空行,Web基础,html,学习,搜索引擎

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- alt : 替换文本, 当图片不显示的时候显示的文字 -->
    <!-- width和height属性只需要给出一个值, 另一个等比例缩放 -- 好处就是图片不变形 -->
    <!-- 属性可以多个，空格隔开，无顺序 -->
    <!-- ./表示当前路径，可写可不写，直接写路径就行，直接敲./后，会自动提示 -->
    
    <img src="./cat.gif" alt="这是一只猫" title="这是title文字, 鼠标悬停的时候显示，图片变形了" width="200" height="800">
    <img src="cat.gif" alt="这是一只猫" title="这是title文字, 鼠标悬停的时候显示，图片没变形" width="200" >

</body>
</html>

音频audio

src	音频的路径
controls	显示播放的控件（必要属性）
autoplay	自动播放（部分浏览器不支持)
loop	循环播放

HTML5的<audio>标签支持多种音频格式，包括：

MP3（MPEG 音频层3），是一种广泛使用的音频格式，支持压缩音频数据以减小文件大小。
WAV（Waveform Audio File Format），是一种无损的音频格式，通常用于音频录制和编辑。
OGG（Ogg Vorbis），是一种开放、免费、无损和无版权的音频格式，使用了一种高效的压缩算法。
AAC（Advanced Audio Coding），是一种高级音频编码格式，通常用于音乐和视频文件中。
FLAC（Free Lossless Audio Codec），是一种无损的音频格式，可以压缩音频数据而不损失任何信息。

需要注意的是，不同浏览器和操作系统的<audio>标签支持的音频格式可能有所不同。因此，在实际应用中，需要测试和确定所要支持的音频格式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!-- 
src：音频的路径
controls：显示播放的控件
autoplay：自动播放（部分浏览器不支持)
loop：循环播放 -->

    <audio src="./music.mp3" controls autoplay loop></audio>
</body>
</html>

视频video

src	视频的路径
controls	显示播放的控件（必要属性）
autoplay	自动播放（谷歌浏览器中需配合muted实现静音播放))
loop	循环播放

HTML5的<video>标签支持多种视频格式，包括：

MP4（MPEG-4 Part 14），是一种广泛使用的视频格式，支持压缩视频数据以减小文件大小。
WebM，是一种开放、免费、无损和无版权的视频格式，使用了一种高效的压缩算法。
Ogg（Ogg Theora），是一种开放、免费、无损和无版权的视频格式，使用了一种高效的压缩算法。

需要注意的是，不同浏览器和操作系统的<video>标签支持的视频格式可能有所不同。因此，在实际应用中，需要测试和确定所要支持的视频格式。此外，还可以通过在<video>标签中指定多个视频源，以兼容不同的浏览器和操作系统。例如：

    <video controls>
      <source src="movie.mp4" type="video/mp4" />
      <source src="movie.webm" type="video/webm" />
      <source src="movie.ogg" type="video/ogg" />
      Your browser does not support the video tag.
    </video>

在这个例子中，<video>标签包含了三个<source>子元素，分别指定了MP4、WebM和Ogg格式的视频源。如果浏览器支持其中任何一种格式，就会自动播放该格式的视频。如果浏览器都不支持这些格式，就会显示后备内容 “Your browser does not support the video tag.”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 谷歌浏览器可以让视频自动播放, 但是必须是静音状态muted -->
    <!-- 如果不加 静音状态muted 不会自动播放-->
    <video src="./video.mp4" controls autoplay muted loop></video>
</body>
</html>

超链接a

场景：点击之后，从一个页面跳转到另一个页面

称呼：a标签、超链接、锚链接

代码：

<a href="./目标网页.html">超链接</a>

特点:

双标签，内部可以包裹内容
如果需要a标签点击之后去指定页面，需要设置a标签的href属性

href属性

属性值：href

属性值：点击之后跳转去哪一个网页（目标网页的路径)

外部链接：

<a href="https ://www.baidu.com/">百度一下</a>

内部链接：

<a href="./目标网页.html">目标网页</a>

开发中不确定该链接最终跳转位置，用空链接(#)占个位置

显示特点

a标签默认文字有下划线

a标签从未点击过，默认文字显示蓝色

a标签点击时，默认文字显示红色

a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色)

颜色不重要，后期CSS美化！！！

target属性

属性名：target

属性值：目标网页的打开形式

取值	效果
_self	默认值，在当前窗口中跳转（覆盖原网页)
_blank	在新窗口中跳转（保留原网页)

空链接

<a href="#">空链接</a>

点击之后回到网页顶部
开发中不确定该链接最终跳转位置，用空链接占个位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- href : 跳转地址  ；_blank：新窗口打开 ， 默认自身打开：_self-->
    <a href="https://www.baidu.com/" target="_blank" name="top1">跳转到百度</a>
    <a href="" id="top2"></a>

    <br>

    <a href="./01-标题标签.html/">点我呀, 点了就去01-标题标签</a>

    <!-- 当开发网站初期, 我们还不知道跳转地址的时候, href的值书写#(空链接) -->

    <br>

    <a href="#">空链接, 不知道跳到哪里去</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    
    <!-- 抛锚跳转：回到网页顶部。后面用js实现更方便，这个还是有一定的局限性，不能返回最顶端！ -->
    <a href="#top1">点我回到顶部</a>
    <a href="#top2">我也可以回到顶部</a>
</body>
</html>

基本的注意事项

注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href=“http://www.thanks.com.cn/html”，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=“http://www.thanks.com.cn/html/”。

提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。

提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。文章来源地址https://www.toymoban.com/news/detail-736920.html

到了这里，关于02——HTML基础标签学习的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

02——HTML基础标签学习

HTML基础标签

标题 h1-6

场景

用法

语义

实例

效果图

特点

重要性

搜索引擎优化（SEO）

概念

目标

策略

常见的 SEO 概念和技术

段落 p

场景

用法

语义

实例

效果图

特点

不要忘记结束标签

换行 br

场景

用法

语义

实例

效果图

特点

注意

水平线 hr

场景

用法

语义

实例

效果图

特点

提示

VS code自动换行

预格式文本 pre

场景

实例1

效果图

解决办法

实例2

效果图

实例3

效果图

文本格式化 1

场景

用法

语义

实例

效果图

标签语义化

好处

推荐

注意

文本格式化 2

场景

用法

巧记

实例

效果图

计算机输出

用法

实例

效果图

文字和首字母缩写 abbr

用法

实例

效果图

文字方向 bdo

用法

属性

dir

实例

效果图

地址 address