前端-html+CSS基础到高级(四)html标签介绍-优快云博客

本文链接：https://blog.youkuaiyun.com/kong7906928/article/details/149745309

HTML标签分四类学习：排版标签。文本格式化标签。媒体标签。链接标签。

一、排版标签

1.1 标题标签

场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题。
代码：h系列标签。
语义：1~6级标题，重要程度依次递减。

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

特点：
         文字都有加粗。
         文字都有变大，并且从h1 → h6文字逐渐减小。
         独占一行。
注意点：h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分。

1.2 段落标签

场景：在新闻和文章的页面中，用于分段显示。
➢ 代码：
➢ 语义：段落。

  <p>我是一段文字</p>

➢ 特点：
• 段落之间存在间隙。
• 独占一行。

1.3 换行标签

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

➢ 代码：

➢ 语义：换行。

<br>

➢ 特点：

单标签。

让文字强制换行。

1.4水平线标签

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

➢ 代码：

➢ 语义：主题的分割转换.

<hr>

➢ 特点：

• 单标签。

• 在页面中显示一条水平线。

二、文本格式化标签

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

➢ 代码：

➢ 语义：突出重要性的强调语境。

    <b>加粗</b>
    <strong>加粗</strong>
    <u>下划线</u>
    <ins>下划线</ins>
    <i>倾斜</i>
    <em>倾斜</em>
    <s>删除线</s>
    <del>删除线</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>

➢ 实际项目开发中选择标签的原则：标签语义化：
         即：根据语义选择对应正确的标签。
         如：需要写标题，就使用h系列标签。
         如：需要写段落，就使用p标签。
         ……
➢ 好处：
         对人：好理解，好记忆。
         对机器：有利于机器解析，对搜索引擎（SEO）有帮助。
➢ 推荐：
         strong、ins、em、del，表示的强调语义更强烈！

  文字加粗用什么标签？
         strong标签。
文字下划线用什么标签？
         ins标签。
文字倾斜用的什么标签？
         em标签。
文字删除线用什么标签？
         del标签。

三、媒体标签

3.1 图片标签

场景：在网页中显示图片。
➢ 代码：
➢ 特点：
• 单标签。
• img标签需要展示对应的效果，需要借助标签的属性进行设置！

标签的完整结构图：


    <img src="cat.gif" alt="这是一只猫" title="这是title文字, 鼠标悬停的时候显示" width="200" height="800">

属性注意点：
1. 标签的属性写在开始标签内部。
2. 标签上可以同时存在多个属性。
3. 属性之间以空格隔开。
4. 标签名与属性之间必须以空格隔开。
5. 属性之间没有顺序之分。

图片标签属性：

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

2.属性名：alt。
➢ 属性值：替换文本
当图片加载失败时，才显示alt的文本。
当图片加载成功时，不会显示alt的文本。

3.属性名：title。

➢ 属性值：提示文本。

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

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

4.属性名：width和height。

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

➢ 注意点：

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

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

3.2 路径

➢场景：页面需要加载图片，需要先找到对应的图片。

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

➢ 同理：页面需要找到图片，也是需要通过路径才能找到。

➢ 路径可分为：

绝对路径（了解）

相对路径（常用）

3.2.1 绝对路径

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

➢ 例如：

盘符开头：D:\day01\images\1.jpg。

完整的网络地址：https://www.baidu.com/2018gw/images/logo.gif（了解）。

    <img src="C:\Users\Desktop\code\images\dog.gif" alt="">

3.2.2 相对路径

➢ 概念普及：

当前文件：当前的html网页。

目标文件：要找到的图片。

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

➢ 相对路径分类：

同级目录。

下级目录。

上级目录。

➢相对路径-同级目录：当前文件和目标文件在同一目录中。

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

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

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

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

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

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

    <img src="cat.gif" alt="">
    <img src="./cat.gif" alt="">

➢ 相对路径-下级目录：目标文件在下级目录中。

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

1. 先知道你去了哪一个房间 → 房间名：卧室。

2. 进入这个房间 → 进入。

3. 此时又独处一室 → 直接喊你名字。

➢ 代码步骤：

1. 先知道在哪个文件夹里面 → 文件夹名字。

2. 进入这个文件夹 → /。

3. 此时看到目标文件直接喊她 → 直接写目标文件名字。

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

   <img src="images/dog.gif" alt="">

➢ 相对路径-上级目录：目标文件在上级目录中。

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

1. 先要出卧室，来到大厅 → 出去。

2. 此时又独处一室 → 直接喊你名字。

➢ 代码步骤：

1. 先出当前文件夹，到上一级目录 → ../。

2. 此时看到目标文件直接喊她 → 直接写目标文件。

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

    <img src="../image数据库/dog.gif" alt="">

3.3 音频标签

➢ 场景：在页面中插入音频。audio标签。

➢ 代码：

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

➢ 常见属性：

src：音频路径。

controls：音频控件。

autoplay：自动播放。

loop：循环播放。

➢ 注意点：

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

3.4 视频标签

➢ 场景：在页面中插入视频。

➢ 代码：

    <video src="./video.mp4" controls autoplay muted loop></video>

➢ 常见属性：

src：视频路径。

controls：视频控件。

autoplay：自动播放 → 谷歌浏览器中可以配合muted属性实现自动静音播放。

loop：循环播放。

➢ 注意点：

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

前端-html+CSS基础到高级(四)html标签介绍

一、排版标签

1.1 标题标签

1.2 段落标签

1.3 换行标签

1.4水平线标签

二、 文本格式化标签

三、 媒体标签

3.1 图片标签

3.2 路径

3.2.1 绝对路径

3.2.2 相对路径

3.3 音频标签

3.4 视频标签

二、文本格式化标签

三、媒体标签