HTML讲解（一）body部分

1.什么是HTML

2.HTML基本框架

3.标题声明

4.修改标题位置

小心！VS2022不可直接接触，否则！没这个必要，方源面色淡然一把抓住！顷刻炼化！

1.什么是HTML

HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

HTML 指的是超文本标记语言: HyperText Markup Language

HTML 不是一种编程语言，而是一种标记语言

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

HTML 文档包含了HTML 标签及文本内容

HTML文档也叫做 web 页面

2.HTML基本框架

html 复制代码

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">

</head>
<body>

</body>
</html>

声明讲解：

<!DOCTYPE html> 声明为 HTML5 文档

**<html>**表示页面是HTML根元素

**<body>**表示页面的可见内容

<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8（ 由于在大部分浏览器中直接输出中文会出现乱码，所以要在头部将字符声明为UTF-8**）**

基本框架此时运行是什么都不显示的，这只是一个html的框架，我们并没有让其输出内容

3.标题声明

在HTML中，标题1-6用<h1>-<h6>来定义，并且<h1>-<h6>是在<body>里实现的，属于内容标题

在标题内部我们可以定义自己想输出的内容

html 复制代码

<h1> </h1>

示例如下：

html 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

</head>
<body>
 
<h1>2024.9.15</h1>
<h2>这是标题 2</h2>
<h3>2024.9.16</h3>
<h4>这是标题 4</h4>
<h5>2025.10.11</h5>
<h6>这是标题 6</h6>
 
</body>
</html>

图例如下：

4.修改标题位置

在HTML中，我们可以修改标题的位置，可以让它居中或者偏左偏右，语言如下：

html 复制代码

<h1 align="对齐方式"></h1>
<!--对齐方式有三种，挑一种写 left/center/right -->

这里h1-h6均可实现

示例如下：

5.段落声明

在HTML中，段落用<p>来表示，每一次使用新的<p>都会跳过一行，与<h1>-<h6>一样，我们可以定义自己想输出的内容

html 复制代码

<p> </p>

示例如下：

cpp 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

</head>
<body>
 
<p>段落1</p>
<p>段落2</p>
<p>同样，我们可以输出自己想输出的内容</p>
 
</body>
</html>

图例如下：

6.修改段落位置

在HTML中，我们可以修改段落的位置，可以让它居中或者偏左偏右，语言如下：

html 复制代码

<p align="对齐方式"></p>
<!--对齐方式有三种，挑一种写 left/center/right -->

示例如下：

7.超链接访问

在HTML中，我们可以使用<a>来实现跨网址的访问，也叫做超链接

html 复制代码

<a href=""> </a>

示例如下：

html 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

</head>
<body>
 
<a href = "https://blog.csdn.net/2301_80349538?type=blog">访问博客 </a>
 
</body>
</html>

在使用超链接访问时，我们需要加上href来实现，因为这个链接使用了href属性

同时，我们还需要在定义完链结构加一些文字，否则就算可以实现超链接访问，也没有入口进行超链接

图例如下：

当我们点击这里的访问博客，就会跳转到其他页面，跳转结果如下：

8.图像访问

使用HTML进行图像访问，我们需要使用<img>来实现的

注意： 图像的名称和尺寸是以属性的形式提供的

示例如下：

html 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

</head>
<body>
 
<img src="D:\html.img\2.jpg" width="800" height="640" />
 
</body>
</html>

这里需要详细讲解，首先，width可以决定图片的宽度，height可以决定图片的高度

html 复制代码

<img src=" " width=" " height=" " />

D:\html.img\2.jpg 表示的是图片的路径，示例如下：

可以像我，打开一个图片的文件夹，然后我们就可以看到图片，之后右键图片

点击复制路径，就可以实现图片路径的复制

9.改变网页背景及文本颜色

在HTML中，我们可以通过body实现改变网页背景及文本颜色

html 复制代码

<body bgcolor=" " text=" ">

这里未填写的内容可以为颜色的十六进制，也可以为颜色的英文名

示例如下：

html 复制代码

<!DOCTYPE html>
<html>
<head>

</head>
<body bgcolor="#99ff66" text = "red">
方源！你到底干了什么！
</body>
</html>

这里推荐一个颜色十六进制的网址：HTML 取色器/拾色器 | 菜鸟教程 (runoob.com)

大家也可以直接搜 HTML取色器

10.添加网页背景图

使用HTML添加网页背景图，我们的格式如下：

html 复制代码

<body background=" ">

html 复制代码

<!DOCTYPE html>
<html>
<head>

</head>
<body background="D:\html.img\2.jpg">
方源！你到底干了什么！
</body>
</html>

在这里我添加了一个图片为背景图，background内加的是图片的路径（下一节有说方法）

效果如下：

11.超链接改变颜色

在我们访问超链接时，我们可以改变点击超链接后，超链接的颜色

我们有两种方法来实现，分别是：

html 复制代码

<body alink="green">

代码如下：

html 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

</head>
<body alink="#4d88ff">
 
<a href = "https://blog.csdn.net/2301_80349538?type=blog">访问博客 </a>
 
</body>
</html>

图示例如下：

点击前：

点击后：

12.设置网页边距

在HTML中，我们可以设置网页的边距：

什么是网页的边距？网页的边距就是我们可以利用的网页的大小

规格如下:

html 复制代码

<body leftmargin="" rightmargin="" topmargin="" bottommargin="">

这里的意义分别为左边距，右边距，上边距，下边距

我们拿网页举例：

此时我们未修改任何代码，但我们注意"访问博客"的位置

更改代码及图例如下：

html 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

</head>
<body leftmargin="30" rightmargin="30" topmargin="30" bottommargin="30">
 
<a href = "https://blog.csdn.net/2301_80349538?type=blog">访问博客 </a>
 
</body>
</html>

我们发现，在更改了边距后，我们内容的位置发生了变化，这个因为我们缩小了可用的内容范围

所以"访问博客"的位置也随之改变了