Python学习笔记---前端（1）认识html

-初阳-

于 2024-08-05 13:22:08 发布

阅读量451

点赞数 6

文章标签：前端学习 html python

本文链接：https://blog.csdn.net/F19950920/article/details/140918418

版权

一、什么是html

html的英文全称是Hypertext Marked Language，中文译为超文本标记语言，主要用来构建网页的基础结构。

网站是由一个或多个网页组成的，每一个网页又是由三部分组成，分别是网页结构（html）、外观美化（css）、行为控制（JavaScript简写为js）。可以把构建网页的过程理解为盖房子，需要先建造房子的框架、硬装修和软装修。通过html构建一个网页的框架，使网页具有必要的内容；通过css对网页进行美化，使网页具有好看的外观；通过js对网页进行调控，使网页可以与用户进行交互。至此，一个网页的基本雏形就构建完成了。接下来我们了解一下，html是如何构建网页框架的。

二、html的基本框架

我是在PyCharm中进行html文件编辑的，新建一个html的文件，会发现新建的文件中已经具备了一些基础的代码内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

我们来看一下这些代码表示什么意思。

<!DOCTYPE html>

这句代码的意思是：声明了文档类型是html。DOCTYPE是document type文档类型的简写，放在第一句就是为了声明这篇代码是html类型的代码。

<html lang="en">

这句代码的意思是：声明 html 文档的语言是英语。lang是language的简写，en是English的简写。

<meta charset="UTF-8">

这句代码的意思是：声明 html 文档的编码类型为 UTF-8 。在该种编码模式下，可以正确的显示中文字符而不会乱码。

<title>Title</title>

这句话的意思是：在此为文档书写标题。这个标题会显示在浏览器的窗口栏里。

看到这里可能会有同学提出疑问，为什么有的单词是成对出现的呢？就比如下面这些单词都是成对出现的：

<html lang="en">

<head>
    <title>认识html</title>
</head>  

<body>
</body>

</html>

这就引入了下一个需要了解的内容：html 的标签。

三、html 的标签

我们在编辑一个网页的时候，就像是在写一篇word文档，需要写标题、写段落、插入表格、插入图片、换行书写等一系列的操作。网页进行渲染时如何能够知道我们写的哪一行代码是标题、哪一行代码是普通内容、哪一行代码是插入表格等操作的呢。由此，引入了html的标签，通过标签对文本内容进行分类，这样当我们进行网页渲染时就可以把我们的文本内容进行对应的渲染操作，我们写出的代码呈现在网页上就可以分门别类的进行展示。

标签有成对出现的，也有单独出现的。我们先来了解一些基本的成对出现的标签都有哪些，具有什么意义，体会一下标签的作用。

1、<html>标签

我们书写的所有 html 文档代码都应该在<html>和</html>这两个标签之间，其中<html>表示开始，</html>表示结束，不难发现结束标签比开始标签多了一个反斜杠“/”。能够看到，除了第一行的文本声明之外，其余内容都在<html>标签之内。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html标签</title>
</head>
<body>

</body>
</html>

可能有同学又发现了一个问题，lang = ' en ' ，不是在开始标签和结束标签之间的，它是在开始标签里面的。非常好，这个问题我们将会随后讨论，这里将会涉及属性的概念。我们先理解为标签控制的内容是在开始标签和结束标签之间的，也就是说开始标签和结束标签之间都是标签的控制范围，只要是在此范围的都是标签的控制对象，渲染时都会按照标签的要求进行显示。至于处于标签内部的属性，那是协助标签对内容进行控制的，是标签的小助理。

2、<head>标签

head 是一个英文单词，翻译成中文为：头，顶部。顾名思义，这是 html 文档的开始部位，文档执行时按照先后顺序先执行这里。我们一般在这里进行文档编码格式、文档标题以及后续的css代码的书写。它的控制范围也是开始标签和结束标签之间的范围，因此我们需要把先渲染的部分写在<head>和</head>之间。

3、<title>标签

title 是一个英文单词，翻译成中文为：标题。我们用<html>标签声明了一个 html 文档，在<title>标签里为这个文档起一个名字，也就是为文档定义一个标题。

4、<body>标签

body 是一个英文单词，翻译成中文为：（建筑物、文件等的）主体，主要部分。很显然了，我们要书写的 html 文档的主要内容就应该在<body>和</body>之间。告诉计算机，这里是我的文档的主要内容，你快点进行渲染吧。

以上介绍的 html 文档最最基本的三个标签。分别是<html>标签，这个标签控制了所处于其内部的代码是 html 代码，即声明了我们所写的代码是 html 文档；<head>标签，这个标签控制了所处于其内部的代码是 html 代码的头部；<title>标签里为这个文档起一个名字；<body> 标签，这个标签控制了所处于其内部的代码是 html 代码的主体部分。它们的功能分别是声明 html 文档，定义文档的头部并在文档头部为文档定义标题，随后声明文档的主体以便我们为文档增加内容。

5、<h1>~<h6>标签---定义标题

我们在创建文档后利用了<title>标签给文档命名，当我们在文档内部书写文本内容时也应当为文本内容增加标题。就像我们创建一个 word 文档，首先是创建一个空白文档，然后为空白文档命名。书写word文档时也需要书写一级标题、二级标题、三级标题等。 html 允许我们创建6个等级的标题，同样需要使用标签进行管理，告诉计算机我写的是标题而不是普通文本。

进行标题管理的标签为<h1>、<h2>、<h3>、<h4>、<h5>、<h6>， h 是 headline的缩写，意思是标题。 h 后面的数字代表着标题的等级，<h1>表示一级标题、<h2>表示二级标题……以此类推。下面我们进行演示（需要注意，我们这里书写的内容已经属于 html 文档的主体部分了，应该写在<body>和</body>标签之间）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> h1~h6标签 </title>
</head>
<body>

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

</body>
</html>

渲染之后的效果如图所示：

从代码中能够看到，被标签控制的内容是放在这类标签的开始和结束中间的，从渲染截图中能够看到文本内容被正确渲染了，不同等级的标题也显示出来了。

ps：这里提一个小提示，当我们在PyCharm里书写标签时，例如书写<h1>标签，只需要写h1然后按一下Tab键，PyCharm会自动添加尖括号以及补全结束标签，同学们可以尝试一下，这是一个很便捷的方法。

6、<P>标签---定义段落

会写标题了只是书写文本的开始，接下来就要书写文本的段落啦，对文本正确分段是文本书写的基本要求。使用<p>标签可以定义一个段落，下面我们进行演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 定义段落 </title>
</head>
<body>

<h1>一级标题</h1>
<p>第一个段落</p><p>第二个段落</p><p>第三个段落</p>

</body>
</html>

渲染之后的效果如图所示：

从代码中我们可以看到一共使用了三次<p>标签，定义了三个段落。即使我们在书写代码时，三个<p>标签是紧紧相连的，渲染之后的文本内容仍然是按照三个段落而存在的。也就是说，计算机只会按照标签的功能对文本进行渲染，而不会受到代码格式的影响。为了便于我们书写代码时更加的简洁易读，我们也可以调整一下代码的分布，例如可以将上面的代码进行如下的调整：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 定义段落 </title>
</head>
<body>

<h1>一级标题</h1>

<p>
    第一个段落
</p>

<p>
    第二个段落
</p>

<p>
    第三个段落
</p>

</body>
</html>

当然，同学们也可以按照自己习惯的方式对代码进行布局。但需要注意，主体内容一定要书写在<body>标签之间，段落内容一定要书写在对应的<p>标签之间。

7、<br>标签---插入换行符

有了段落之后，我们就可以尽情的书写文本内容啦。但是会有这样一个问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 定义段落 </title>
</head>
<body>

<h1>一级标题</h1>

<p>
    《春泥》
漫天的话语纷乱落在耳际
你我沉默不回应
牵你的手 你却哭红了眼睛
路途漫长无止尽
多想提起勇气 好好地呵护你
不让你受委屈 苦也愿意
那些痛的记忆 落在春的泥土里
滋养了大地 开出下一个花季
风中你的泪滴 滴滴落在回忆里
让我们取名叫做珍惜
迷雾散尽 一切终于变清晰
爱与痛都成回忆
遗忘过去 繁花灿烂在天际
等待已有了结局
我会提起勇气 好好地呵护你
不让你受委屈 苦也愿意
那些痛的记忆 落在春的泥土里
滋养了大地 开出下一个花季
风中你的泪滴 滴滴落在回忆里
让我们取名叫做珍惜
</p>


</body>
</html>

我在代码里书写了《春泥》这首歌的歌词，并且分好了行，现在我对这些代码进行渲染：

从效果图可以看到，所有的文本都是紧密衔接的，并没有分行。这是因为在段落标签里，直接书写的内容是不会自动分行的，因为计算机不知道该在哪里分行，所以就会全部显示出来，知道把屏幕的这一行写满，才会换到下一行进行显示。

这时我们就需要用到<br>标签，这个标签就是告诉计算机，当你运行到我这里时就需要换行啦。现在我们对上面的代码进行改写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 定义段落 </title>
</head>
<body>

<h1>一级标题</h1>

<p>
    《春泥》
漫天的话语纷乱落在耳际<br>
你我沉默不回应<br>
牵你的手 你却哭红了眼睛<br>
路途漫长无止尽<br>
多想提起勇气 好好地呵护你<br>
不让你受委屈 苦也愿意<br>
那些痛的记忆 落在春的泥土里<br>
滋养了大地 开出下一个花季<br>
风中你的泪滴 滴滴落在回忆里<br>
让我们取名叫做珍惜<br>
迷雾散尽 一切终于变清晰<br>
爱与痛都成回忆<br>
遗忘过去 繁花灿烂在天际<br>
等待已有了结局<br>
我会提起勇气 好好地呵护你<br>
不让你受委屈 苦也愿意<br>
那些痛的记忆 落在春的泥土里<br>
滋养了大地 开出下一个花季<br>
风中你的泪滴 滴滴落在回忆里<br>
让我们取名叫做珍惜<br>
</p>


</body>
</html>

我们对上述代码进行渲染：

这时我们就可以看到，渲染出来的文本已经按照我们添加的换行符进行换行了。

可能有同学发现了一个不同点，那就是<br>标签没有带反斜杠的结束标签，这个标签和我们前面用的标签有点不太一样。我们用一种简单的方式去理解它，凡是有开始有结束的标签，一般都是用来控制标签之间的内容。而<br>标签没有需要控制的内容，它更像是一个提示符，告诉计算机，当你运行到我这里时就得换一行。我们还会在后面接触这种形式的标签，同学们先进行简单的理解。

8、标签---添加注释

在书写代码时，我们应该养成书写注释的好习惯。拥有注释的代码，不仅可以方便他人阅读，也方便我们后期对代码进行修改和管理。

在PyCharm中，我们可以通过快捷键 Shift + Ctrl+ / 快速打出注释标签，通过这种方式打出的注释标签是单独存在的，我们可以在标签内部书写我们想要注释的信息，例如下图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 定义段落 </title>
</head>
<body>

<!-- 这是定义标题的标签 -->
<h1>一级标题</h1>

<!-- 这是定义段落的标签 -->
<p align="center">
    《春泥》
漫天的话语纷乱落在耳际<br>  <!-- 这是换行标签 -->
你我沉默不回应<br>
牵你的手 你却哭红了眼睛<br>
路途漫长无止尽<br>
多想提起勇气 好好地呵护你<br>
不让你受委屈 苦也愿意<br>
那些痛的记忆 落在春的泥土里<br>
滋养了大地 开出下一个花季<br>
风中你的泪滴 滴滴落在回忆里<br>
让我们取名叫做珍惜<br>
迷雾散尽 一切终于变清晰<br>
爱与痛都成回忆<br>
遗忘过去 繁花灿烂在天际<br>
等待已有了结局<br>
我会提起勇气 好好地呵护你<br>
不让你受委屈 苦也愿意<br>
那些痛的记忆 落在春的泥土里<br>
滋养了大地 开出下一个花季<br>
风中你的泪滴 滴滴落在回忆里<br>
让我们取名叫做珍惜<br>
</p>

<!---->

</body>
</html>

需要注意的是，注释的信息必须写在四个短横的中间，写在别的位置是不可以的。这种方式是用来添加注释的。

如果我们想要将某些代码注释掉，可以先选择这些代码所在的行，然后再通过快捷键 Ctrl+/ 将选中行注释掉。如需回复代码，再次操作一遍即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 定义段落 </title>
</head>
<body>

<!-- 这是定义标题的标签 -->
<h1>一级标题</h1>

<!-- 这是定义段落的标签 -->
<p align="center">
    《春泥》
漫天的话语纷乱落在耳际<br>  <!-- 这是换行标签 -->
你我沉默不回应<br>
牵你的手 你却哭红了眼睛<br>
路途漫长无止尽<br>
多想提起勇气 好好地呵护你<br>
不让你受委屈 苦也愿意<br>
那些痛的记忆 落在春的泥土里<br>
<!--滋养了大地 开出下一个花季<br>-->
<!--风中你的泪滴 滴滴落在回忆里<br>-->
<!--让我们取名叫做珍惜<br>-->
<!--迷雾散尽 一切终于变清晰<br>-->
<!--爱与痛都成回忆<br>-->
<!--遗忘过去 繁花灿烂在天际<br>-->
<!--等待已有了结局<br>-->
<!--我会提起勇气 好好地呵护你<br>-->
<!--不让你受委屈 苦也愿意<br>-->
<!--那些痛的记忆 落在春的泥土里<br>-->
<!--滋养了大地 开出下一个花季<br>-->
<!--风中你的泪滴 滴滴落在回忆里<br>-->
<!--让我们取名叫做珍惜<br>-->
</p>

<!---->

</body>
</html>

ps：需要说明的是，被注释掉的代码是不会内计算机渲染的，所添加的注释只有我们能看到，计算机是看不见的。

以上对html进行了简单的介绍，在框架的构建过程中我们多是通过标签来实现相应功能的。先对标签进行理解，我将会稍后更新更多常用标签的介绍。

--------------------------------------------------------------------------------------------------------------------------------

本文为作者的学习笔记分享，希望能对新入门的同学起到帮助，其中难免有表述错误之后，还望给与批评指正。------初阳