致自己：HTML学习笔记一_html 的自我修养-CSDN博客

本文链接：https://blog.csdn.net/sinat_42285508/article/details/123238642

本文介绍了网页的基础知识，包括网页的组成、五大浏览器及其内核、Web标准的重要性。接着详细讲解了HTML的基本结构，如标题标签（h1-h6）、段落标签（p）、换行标签（br）、水平线标签（hr）、文本格式化标签（如strong, em, del等）、媒体标签（img, audio, video）以及超链接标签（a）。内容涵盖了这些标签的使用场景、代码示例及特点，帮助读者理解并掌握网页基本元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、基础认识

1、认识网页

1、网页的组成：文字、图片、视频、音频、超链接等等。

2、网页的本质：前端程序员写的代码。

3、前端代码如何转变为用户眼中的页面：通过浏览器的解析渲染。

2、五大浏览器和渲染引擎

浏览器	内核	备注
IE	Trident	IE、360极速浏览器、百度浏览器等的内核
FireFox	Gecko	火狐浏览器内核
Safari	Webkit	苹果浏览器内核
Chrome	Blink	Blink是Webkit的分支
Opera	Blink	Blink是Webkit的分支

3、Web标准

1、因为不同浏览器的渲染引擎不同，对于相同的代码解析效果存在差异，为了同一个网页在不同的浏览器显示效果相同，需要一个统一的标准。

2、Web标准：即让不同的浏览器按照相同的标准显示结果，让其显示效果统一。

3、Web标准的构成

构成	语言	说明
结构	HTML	网页元素和内容
表现	CSS	网页元素的外观和位置等样式，如大小、颜色
行为	JavaScript	网页模型的定义与页面交互

4、网页的基本骨架结构

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>网页标题</title>
    </head>
    <body>
        网页的主体内容
    </body>
</html>

二、网页的标签学习

1、排版标签

####1.1、标题标签

1.1、使用场景：在新闻和文章页面中使用，突出显示文章标题

1.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>
    <h1>1级标题</h1>
    <h1>2级标题</h1>
    <h1>3级标题</h1>
    <h1>4级标题</h1>
    <h1>5级标题</h1>
    <h1>6级标题</h1>
</body>
</html>

1.3、特点：

文字有加粗效果
文字字号比较大，并且从h1到h6逐渐减小
都独占一行

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

1.2、段落标签

2.1、使用场景：在新闻和文章页面中用于分段显示内容

2.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>
    <p>段落标签</p>
</body>
</html>

2.3、特点：

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

1.3、换行标签

3.1、使用场景：让文字换行显示

3.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>
    <br />
</body>
</html>

3.3、特点：

是单标签
让文字强制换行

1.4、水平线标签

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

4.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>
    <hr />
</body>
</html>

4.3、特点：

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

2、文本格式化标签

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

2、标签：

标签	说明	标签	说明
strong	加粗、推荐	b	加粗
ins	下划线、推荐	u	下划线
em	倾斜、推荐	i	倾斜
del	删除线、推荐	s	删除线

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>
    <strong>加粗</strong>
    <b>加粗</b>
    <em>倾斜</em>
    <i>倾斜</i>
    <del>删除线</del>
    <s>删除线</s>
</body>
</html>

3、媒体标签

3.1、图片标签

1.1、使用场景：在页面中显示图片

1.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>
    <img src="图片路径" alt="">
</body>
</html>

1.3、特点：

是单标签
对于展示效果，需要使用img的属性进行设置

1.4、属性：

属性	说明
src	图片路径，可以是绝对路径，也可以是相对路径
alt	当图片无法显示的时候显示的文本，是给搜索引擎看的
title	当鼠标悬停在图片上时显示的文本，是给用户看的，title属性也适用于其他标签
width	设置图片的宽度
height	设置图片的高度

3.2、音频标签

2.1、使用场景：在页面中插入音频

2.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>
    <audio src="" controls autoplay loop></audio>
</body>
</html>

2.3、属性：

属性	说明
src	音频路径
controls	音频播放控件
autoplay	设置自动播放
loop	设置循环播放

####3.3、视频标签

3.1、使用场景：在页面中插入视频

3.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>
    <video src="" controls autoplay loop muted></video>
</body>
</html>

3.3、属性：

属性	说明
src	视频路径
controls	视频播放控件
autoplay	设置自动播放
loop	设置循环播放
muted	设置静音播放（谷歌浏览器）

3.4、超链接标签

4.1、使用场景：点击之后，需要跳转到另一个页面

4.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>
    <a href="https://www.baidu.com" target="_blank">外部链接</a>
    <a href="./目标网页.html" target="_self">内部链接</a>
    <!--空链接，点击之后跳转到页面顶部 -->
    <a href="#">空链接</a>
</body>
</html>