HTML讲解（一）body部分
目录
小心！VS2022不可直接接触，否则！没这个必要，方源面色淡然一把抓住！顷刻炼化！
1.什么是HTML
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
2.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>里实现的，属于内容标题
在标题内部我们可以定义自己想输出的内容
<h1> </h1>示例如下：
<!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中，我们可以修改标题的位置，可以让它居中或者偏左偏右，语言如下：
<h1 align="对齐方式"></h1>
<!--对齐方式有三种，挑一种写 left/center/right -->这里h1-h6均可实现
示例如下：
5.段落声明
在HTML中，段落用<p>来表示，每一次使用新的<p>都会跳过一行，与<h1>-<h6>一样，我们可以定义自己想输出的内容
<p> </p>示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<p>同样，我们可以输出自己想输出的内容</p>
</body>
</html>图例如下：
6.修改段落位置
在HTML中，我们可以修改段落的位置，可以让它居中或者偏左偏右，语言如下：
<p align="对齐方式"></p>
<!--对齐方式有三种，挑一种写 left/center/right -->示例如下：
7.超链接访问
在HTML中，我们可以使用<a>来实现跨网址的访问，也叫做超链接
<a href=""> </a>示例如下：
<!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>来实现的
注意： 图像的名称和尺寸是以属性的形式提供的
示例如下：
<!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可以决定图片的高度
<img src=" " width=" " height=" " />D:\html.img\2.jpg 表示的是图片的路径，示例如下：
可以像我，打开一个图片的文件夹，然后我们就可以看到图片，之后右键图片
点击复制路径，就可以实现图片路径的复制
9.改变网页背景及文本颜色
在HTML中，我们可以通过body实现改变网页背景及文本颜色
<body bgcolor=" " text=" ">这里未填写的内容可以为颜色的十六进制，也可以为颜色的英文名
示例如下：
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor="#99ff66" text = "red">
方源！你到底干了什么！
</body>
</html>
这里推荐一个颜色十六进制的网址：HTML 取色器/拾色器 | 菜鸟教程 (runoob.com)
大家也可以直接搜 HTML取色器
10.添加网页背景图
使用HTML添加网页背景图，我们的格式如下：
<body background=" "><!DOCTYPE html>
<html>
<head>
</head>
<body background="D:\html.img\2.jpg">
方源！你到底干了什么！
</body>
</html>
在这里我添加了一个图片为背景图，background内加的是图片的路径（下一节有说方法）
效果如下：
11.超链接改变颜色
在我们访问超链接时，我们可以改变点击超链接后，超链接的颜色
我们有两种方法来实现，分别是：
<body alink="green">代码如下：
<!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中，我们可以设置网页的边距：
什么是网页的边距？网页的边距就是我们可以利用的网页的大小
规格如下:
<body leftmargin="" rightmargin="" topmargin="" bottommargin="">
这里的意义分别为左边距，右边距，上边距，下边距
我们拿网页举例：
此时我们未修改任何代码，但我们注意“访问博客”的位置
更改代码及图例如下：
<!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>
我们发现，在更改了边距后，我们内容的位置发生了变化，这个因为我们缩小了可用的内容范围
所以“访问博客”的位置也随之改变了
原文地址：https://blog.csdn.net/2301_80349538/article/details/142285569
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！