HTML常用标签（一）_目录html标签-CSDN博客

本文链接：https://blog.csdn.net/weixin_52851967/article/details/128270041

HTML 元素参考 - HTML（超文本标记语言） | MDN (mozilla.org)

1、标题标签

场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题
代码：h系列标签

语义： 1~6 级标题，重要程度依次递减

特点：

文字都有加粗
文字都有变大，并且从h1 → h6文字逐渐减小
独占一行

注意点：h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分

2、段落标签

场景：在新闻和文章的页面中，用于分段显示

代码：<p>我是一段文字</p>

语义：段落

特点：

段落之间存在间隙
独占一行

3、换行标签

场景：让文字强制换行显示

代码：<br>

语义：换行

特点：

单标签
让文字强制换行

4、水平线标签

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

代码：<hr>

语义：主题的分割转换

特点：

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

5、文本格式化标签的介绍

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

代码：

标签	说明
b	加粗
u	下划线
i	倾斜
s	删除

标签	说明
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>Document</title>
</head>
<body>
    <b>加粗</b>
    <strong>加粗</strong>
    <u>下划线</u>
    <ins>下划线</ins>
    <i>倾斜</i>
    <em>倾斜</em>
    <s>删除线</s>
    <del>删除线</del>
</body>
</html>

语义：突出重要性的强调语境，strong 、 ins 、 em 、 del ，表示的强调语义更强烈

strong元素：内容加粗、强调；
- 通常加粗会使用css样式来完成；
- 开发中很偶尔会使用一下；
i元素：内容倾斜；
- 通常斜体会使用css样式来完成；
- 开发中偶尔会用它来做字体图标（因为看起来像是icon的缩写）；
code元素：用于显示代码
- 偶尔会使用用来显示等宽字体；
br元素：换行元素
- 开发中已经不使用；
更多元素详解，查看MDN文档：HTML 元素参考 - HTML（超文本标记语言） | MDN (mozilla.org)

6、图片标签的介绍

场景：在网页中显示图片

代码： <img src="" alt="" title="" >

特点：

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

标签的完整结构图：

属性注意点：

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

（1）图片标签的 src 属性

属性名： src
属性值：目标图片的路径
注意点：
- 当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）
- 路径的情况有很多，稍后会详细介绍

（2）图片标签的 alt 属性

属性名： alt

属性值：替换文本

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

（3）图片标签的 title 属性

属性名： title

属性值：提示文本

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

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

（4）图片标签的 width 和 height 属性

属性名： width 和 height

属性值：宽度和高度（数字）

注意点：

如果只设置 width 或 height 中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
如果同时设置了 width 和 height 两个，若设置不当此时图片可能会变形

总结：

7、路径的介绍

路径可分为：

绝对路径（了解）
相对路径（常用）

7.1、绝对路径（了解）

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

例如：

盘符开头： D: day01 images 1.jpg
完整的网络地址： https://www.itcast.cn/2018czgw/images/logo.gif

7.2、相对路径（常用）

概念普及：

当前文件：当前的 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>Document</title>
</head>
<body>
    <img src="cat.gif" alt="">
    <img src="./cat.gif" alt="">
</body>
</html>

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

（2）相对路径下级目录

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

（3）相对路径上级目录

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

8、音频标签的介绍

场景：在页面中插入音频

常见属性：

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

注意点：音频标签目前支持三种格式： MP3 、 Wav 、 Ogg

9、视频标签的介绍

场景：在页面中插入视频

常见属性：

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

注意点：视频标签目前支持三种格式： MP4 、 WebM 、 Ogg

10、链接标签的介绍

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

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

特点：

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

10.1、链接标签的 href 属性

属性名： href

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

10.2、链接标签的显示特点（了解）

显示特点：

a 标签默认文字有下划线
a 标签从未点击过，默认文字显示蓝色
a 标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）

10.3、链接标签的 target 属性

属性名： target

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

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

10.4、空链接

功能：

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

10.5、a元素 - 锚点链接

锚点链接可以实现：跳转到网页中的具体位置

锚点链接有两个重要步骤：

在要跳到的元素上定义一个id属性；
定义a元素，并且a元素的href指向对应的id；

10.6、a元素 - 图片链接

在很多网站我们会发现图片也是可以点击进行跳转的

img元素跟a元素一起使用，可以实现图片链接；

实现思路：

a元素中不存放文字，而是存放一个img元素；
也就是img元素是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>
  
  <a href="http://www.mi.com">
    <img src="./images/xiaomi_01.jpeg" alt="">
  </a>

</body>
</html>

11、iframe元素

利用iframe元素可以实现：在一个HTML文档中嵌入其他HTML文档

frameborder属性

用于规定是否显示边框
- 1：显示
- 0：不显示

a元素target的其他值:

_parent：在父窗口中打开URL
_top：在顶层窗口中打开URL

<!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>
  <style>
    iframe {
      width: 100%;
      height: 400px;
    }
  </style>
</head>
<body>
  
  <!-- <iframe src="https://www.taobao.com"  frameborder="1"></iframe>
  <iframe src="http://www.baidu.com" frameborder="1"></iframe>
  <iframe src="http://www.kaola.com" frameborder="1"></iframe> -->
  <iframe src="./12_a元素和img元素.html" frameborder="1"></iframe>

</body>
</html>

12、HTML全局属性

我们发现某些属性只能设置在特定的元素中：

比如img元素的src、a元素的href；

也有一些属性是所有HTML都可以设置和拥有的，这样的属性我们称之为 “全局属性（Global Attributes）”

全局属性有很多：全局属性 - HTML（超文本标记语言） | MDN

常见的全局属性如下：

id：定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样式（使用 CSS）时标识元素。
class：一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器或者DOM方法来选择和访问特定的元素；
style：给元素添加内联样式；
title：包含表示与其所属元素相关信息的文本。这些信息通常可以作为提示呈现给用户，但不是必须的。