前端系列笔记之HTML：002、标签

寒冰1307

已于 2022-05-28 08:03:04 修改

阅读量125

点赞数

分类专栏：前端系列笔记文章标签： html 前端

于 2022-05-27 20:29:57 首次发布

本文链接：https://blog.csdn.net/hanbing1307/article/details/125008464

版权

前端系列笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

内容：标签学习（排版标签、文本格式标签、媒体标签、链接标签、语义化标签）

一、标签

含义：HTML标签是HTML语言中最基本的单位，HTML标签是HTML（标准通用标记语言下的一个应用）最重要的组成部分。

HTML标签的大小写无关的，例如“主体”<body>跟<BODY>表示的意思是一样的，推荐使用小写。

二、排版标签（标题标签、段落标签、换行标签、水平线标签）

2.1、标题标签

1、应用场景：凸显文章主题的地方（例如新闻、文章等）

2、语义：分为1 ~ 6级标题，重要性依次递减

3、特点：文字都有加粗、变大、独占一行

4、代码：

<!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>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>
</body>
</html>

2.2、段落标签

1、应用场景：用于分段显示

2、语义:段落

3、特点:独占一行

4、代码：

<!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>
</body>
</html>

2.3、换行标签

1、应用场景：让文字强制换行显示

2、语义：换行

3、特点：单标签、让文字强制换行

4、代码：<br>

2.4、水平线标签

1、应用场景：分割不同主题内容的水平线

2、语义：主题的分割转换

3、特点:单标签、在页面中显示一条水平线

4、代码：<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>
    <div>这是测试换行标签<br>的文字</div>
    <hr>
    <div>上面一条直线测试水平线标签</div>
</body>
</html>

三、文本格式化标签

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

2、语义：突出重要性的强调语境

3、代码：

strong b 加粗

ins u 下划线

em i 倾斜

del s 删除线

<!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>
    <div>
        这是<b>一段</b>测试<strong>文本格式化</strong>的<u>标签</u>这是<ins>一段</ins>测试<em>文本</em>格式化的<i>标签</i>这是<del>一段</del>测试<s>文本格式</s>化的标签
    </div>   
</body>
</html>

四、媒体标签（图片标签、路径、音频标签、视频标签）

4.1、图片标签

1、应用场景：在网页中显示图片

2、特点：单标签、img标签需要展示对应的效果，需要借助标签的属性进行设置

3、代码： <img src="" alt="">

4、常见属性：

alt属性：图片加载失败时，才显示alt的文本内容

title属性：当鼠标悬停时，才显示的文本

width和height：宽度和高度（只设置一个时，会等比例缩放）

5、图像格式：

jpg:有损压缩，色彩丰富图片

GIF:无损压缩，简单动画，背景透明

PNG:无损压缩，透明，交错，动画

4.2、路径：

1、应用场景：页面需要加载图片，需要先找到对应的图片

2、路径分类：

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

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

分类：

同级目录：<img src="./目标图片" alt="">

下级目录：<img src="文件夹名字./目标图片" alt="">

上级目录：<img src="../目标图片" alt="">

4.3、音频标签

1、应用场景：在页面中插入音频

2、代码：<audio src=""></audio>

3、常见属性：

src 音频的路径

controls 显示播放的控件

autoplay 自动播放（部分浏览器不支持）

loop 循环播放

4、注意点：音频标签目前支持三种格式：MP3、Ogg、Wav(支持老版本浏览器，且自动播放 )

4.4、视频标签

1、应用场景：在页面中插入视频

2、代码：<video src=""></video>

3、常见属性：

src 音频的路径

controls 显示播放的控件

autoplay 自动播放（部分浏览器不支持）

loop 循环播放

4、注意点：视频标签目前支持三种格式：MP4、Ogg、Wav(支持老版本浏览器，且自动播放 )

五、链接标签

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

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

3、代码：<a href="">显示文字</a>

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

5、常见属性：

target:目标网页的打开方式

取值：_self 默认值，在当前窗口跳转（覆盖原网页）（外国常用）

_blank 在新窗口中跳转（打开新网页）（国内常用）

六、语义化标签

1、没有语义的布局标签：div和span

场景：实际开发网页时会大量频繁的使用到div和span这两个没有语义的布局标签

div：一行只显示一个（独占一行）

span：一行可以显示多个（行内元素）

<!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>
    <div>这是div标签</div><div>这是div标签</div>
    <span>这是span标签</span>  <span>这是span标签</span>
    <br>
</body>
</html>

2、有语义的布局标签

场景：html5新增，手机网页需要

标签：

header:网页头部

nav:网页导航

footer:网页底部

aside:网页侧边栏

section:网页区块

article:网页文章

注意点：

以上标签显示特点和div一致，但是比div多了不同的语义

寒冰1307

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端系列笔记之HTML：002、标签

内容：标签学习（排版标签、文本格式标签、媒体标签、链接标签）一、标签含义：HTML标签是HTML语言中最基本的单位，HTML标签是HTML（标准通用标记语言下的一个应用）最重要的组成部分。HTML标签的大小写无关的，例如“主体”<body>跟<BODY>表示的意思是一样的，推荐使用小写。二、排版标签（标题标签、段落标签、换行标签、水平线标签）2.1、标题标签1、应用场景：凸显文章主题的地方（例如新闻、文章等）2、语义：分为1 ~ 6级标题，重要性依次递减
复制链接

扫一扫

专栏目录