HTML零基础入门教程（1）

最新推荐文章于 2023-12-04 09:17:20 发布

小7in

最新推荐文章于 2023-12-04 09:17:20 发布

阅读量196

点赞数 2

文章标签： html 前端 html5

本文链接：https://blog.csdn.net/qq_72778976/article/details/128721434

版权

教程说明

提示：由于本教程涉及内容较多，所以会分批发布

文章目录

教程说明
前言
一、HTML是什么？
二、关于编辑器
三、HTML基本知识

前言

本教程内将讲解博主认为重要的内容，对于那些无关细节将不过多描述。

提示：以下是本篇文章正文内容

一、HTML是什么？

说起HTML，很多没有接触过的朋友们都以为它是一门编程语言，但实际上HTML不是一门编程语言，它是一种超文本标记语言，是一门运用于网页开发的语言，它通过一系列标签来创建出我们想要的网页，不过一个完整的网站并不是由HTML独立开发，其中涉及许多复杂的内容，这里就不过多描述。

二、关于编辑器

常用的编辑器有vscode、dw等，关于编辑器的下载与安装，由于站内已有很多下载教程，这里就不再演示如何下载，大家可以自行搜索相关教程下载。

三、HTML基本知识

1.html标签

在HTML中，标签分为两种，一种是双标签，一种是单标签。双标签由头部与尾部组成，而单标签仅仅有一个头部，我们的html标签就是一个双标签。

代码如下（示例）：

<html>
	内容
	内容
	内容
</html>

html标签很重要，因为后续的css、js文件都将写在其内的head标签里面,而代码的编写则是在其内的body标签里面。

2.head标签

在HTML中，标签之间可以进行嵌套，以便用于实现复杂功能，head标签就是嵌套在html标签内的一个标签，其作用有很多，例如：css、js的引入，选择编码格式等。代码实现如下：

<html>
	<head>
		内容
		内容
		内容
	</head>
</html>

可以看到，head标签也是一个双标签，有头部以及尾部。

3.body标签

body标签是嵌套在html标签内的一个标签，也是一个双标签，之后我们的实现功能的代码将编写在其内。代码实现如下：

<html>
	<head>
		内容
		内容
		内容
	</head>
	<body>
		内容
		内容
		内容
	</body>
</html>

4.center标签

在学习了html标签以及head、body标签后，我们就可以进行简单的代码编写了，首先我们来实现一下在网页中显示 “hello world” 。代码实现如下：

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

按下运行键后，我们便可以在浏览器中看到效果了。

效果如下：

在这里插入图片描述

可以看到，我们成功在网页中显示了hello world，但是我们显示出来的hello world显示在网页最左边，比较影响美观，如果我们想要让它显示在屏幕正中间，能不能做到呢？答案肯定是可以的，只不过我们需要借助一个HTML标签——center标签，center标签的作用就是将里面的文字、图像内容居中显示，它的格式如下：

	<center>内容</center>

接下来怎么使hello world居中呢？很简单，只需要将hello world放进center标签中即可，因为center标签会将其内容居中显示。代码实现如下：

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

再次运行后，效果如下：

在这里插入图片描述

这样我们便实现了 hello world 居中显示。

5.emsp特殊符号

前面我们实现了 hello wolrd 的居中显示，那么我们可不可以利用我们目前所学知识写一篇文章呢？答案是可以的，代码实现如下：

<!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>
   <center>hello world</center>
   其实，人生的道路从来都不平坦，谁都会遭遇各种各样的坎。. 要像刘翔那样勇往直前，你就能飞跃一道又一道坎，你的人生就充满灿烂和喜悦。让那些孤独的孩子和我们一样茁壮成长吧，他们是祖国的花朵，是初升的太阳，祖国未来的宏图也有属于他们构造的一部分。母爱 是一种无私的感情，母爱像温暖的阳光，洒落在我们心田，虽然悄声无息，但它让一棵棵 生命 的幼苗感受到了雨后的温暖。秋天的落叶落英缤纷，层林尽染，就连诗人龚自珍也说：“落红不是无情物，化作春泥更护花。”我爱秋天，我更爱秋天的落叶！
</body>
</html>

运行效果如下：

在这里插入图片描述

这样我们便完成了一篇小文章，可是我们仔细观察就会发现，这篇文字段落开头部分没有缩进，这是不符号文章要求的，那么有没有什么办法让其缩进两个字符呢？答案肯定是有的，那就是利用HTML的特殊字符——emsp，emsp是HTML中的特殊字符之一，它的作用是在网页中生成一个空格，使内容排版更加赏心悦目，通过使用 emsp 我们便可以完成对于文章的缩进，代码实现如下：

<!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>
   <center>hello world</center>
   &emsp;&emsp;其实，人生的道路从来都不平坦，谁都会遭遇各种各样的坎。. 要像刘翔那样勇往直前，你就能飞跃一道又一道坎，你的人生就充满灿烂和喜悦。让那些孤独的孩子和我们一样茁壮成长吧，他们是祖国的花朵，是初升的太阳，祖国未来的宏图也有属于他们构造的一部分。母爱 是一种无私的感情，母爱像温暖的阳光，洒落在我们心田，虽然悄声无息，但它让一棵棵 生命 的幼苗感受到了雨后的温暖。秋天的落叶落英缤纷，层林尽染，就连诗人龚自珍也说：“落红不是无情物，化作春泥更护花。”我爱秋天，我更爱秋天的落叶！
</body>
</html>

一个emsp生成一个空格，由于这里我们需要缩进两个字符（空格），所以我们使用两次emsp，让我们来看看运行后的效果吧！

在这里插入图片描述

可以看到，我们的文章缩进了两个字符（空格）

6.br标签

前面我们实现了在网页中显示一篇小文章，并且段落开头缩进了两个字符，但是还是有缺陷，那就是换行功能，在平时所浏览的有关于文章的网页中，基本上都存在换行，那么，我们能不能做到呢？答案肯定是可以的，我们只需要借助br标签即可完成这一操作，br标签是HTML标签之一，其作用是换行，在其之后出现的内容将于下一行显示，也就是这样：

在这里插入图片描述

其代码如下：

<!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>
    <center>
        hello
        <br/>
        world
    </center>
</body>
</html>

需要注意的是，br标签是一个单标签，也就是说它仅由一个头部组成。在上面的代码以及效果图中我们可以看到，br标签后面的world内容在下一行显示，而不是紧跟hello后面显示，这便是br标签的作用，使其后的内容下一行显示，也就是说我们常说的换行，知道了br标签的作用后，我们便可以在我们所写的文章中任意位置进行换行，从而达到我们所想要的效果，再配合上emsp，我们便可以实现以下效果：

在这里插入图片描述

代码如下：

<!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>
   <center>hello world</center>
   &emsp;&emsp;其实，人生的道路从来都不平坦，谁都会遭遇各种各样的坎<br/>。. 要像刘翔那样勇往直前，你就能飞跃一道又一道坎，你的人生就充满灿烂和喜悦。让那些孤独的孩子和我们一样茁壮成长吧，他们是祖国的花朵，是初升的太阳<br/>，祖国未来的宏图也有属于他们构造的一部分。<br/>母爱 是一种无私的感情，母爱像温暖的阳光，洒落在我们心田，虽然悄声无息，但它让一棵棵 生命 的幼苗感受到了雨后的温暖。秋天的落叶落英缤纷，层林尽染，就连诗人龚自珍也说：“落红不是无情物，化作春泥更护花。”我爱秋天，我更爱秋天的落叶！
</body>
</html>