【前端学习】HTML基础 (入门)

Trigger0215

于 2024-07-17 10:30:21 发布

阅读量380

点赞数 8

文章标签：学习 html 前端

本文链接：https://blog.csdn.net/LZwarning0215/article/details/140469590

版权

前言

本人其实已经书写前端页面的代码有接近2年了... 但是于近期才想到写博客 0.0 一来是希望可以将自己所学到的知识记录下来并且加以巩固，二来也是可以分享给其他程序猿们如果我的内容有错误或者大家有不同见解，很欢迎来批评指正哈😄

HTML 概述

本文既然是讲HTML基础，也就不再赘述一些网页、网站、浏览器内核等的定义了。（不过需要记住前端最常用的浏览器是谷歌 (Chrome )浏览器奥！）

大家只用知道，HTML 并不是编程语言，它只是一种标记语言。全名叫超文本标记语言(HyperText Markup Language)。

HTML 标签

HTML 中有双标签和单标签，在这里我们只做这个分类，也就不细分结构标签之类的了。

首先所谓HTML 标签，就是用尖括号< >包围的单词，例如<a>、<div>等就叫HTML 标签。

HTML 双标签

HTML 双标签，那就是有两个用尖括号包围的单词组成起来，就叫双标签。在HTML 中，绝大多数的标签都是双标签，单标签的数量并不多。例如下方均为双标签。

<html></html>
<head></head>
<body></body>
<div></div>
<a></a>
<p></p>
<span></span>

由上图你不难看出，双标签的后一个标签内会有一个斜杠" / " ，这个斜杠便可以认为是该标签的结束。简单来说，双标签想做到有始有终，在这里开始就一定会在那里结束。必须成对出现。

HTML 单标签

HTML 单标签，即是只有一个尖括号包围起来的标签。它们不需要有始有终，单独一个标签就可以在页面中发挥自己的作用。单标签的数量不多，下面稍微举几个单标签的例子。

<hr />
<br />
<img />
<input />
<meta />

由上图你也一定能轻松看出，双标签中的后一个标签的斜杠" / " 在单标签中合二为一了！所以在单标签中，它自己就可以完成开始与结束，无需其他标签的介入。

Tips：以VSCode 与Chrome 为例，即使单标签中不加斜杠其功能是不会出现问题的。但是为了书写更加标准，加上斜杠是更好的。

页面基本结构

首先通过介绍页面的基本结构来引起大家的兴趣。其实前端学习有最好的一点就是当你做出什么内容时，你可以及时的看到它的效果，这对人心中的成就感和满足感是大于后端的。所以通过将代码转换为自己可以看到的页面，学习欲望从某种程度上来说也可以大大增强。

下图便先介绍页面的基本结构。

<html>
    <head>
        <meta charset="utf-8" />
        <title> Hello! </title>
    </head>
    <body>
        First page.
    </body>
</html>

页面就像人一样，要有自己的头和身体，其中也各有其所包含的内容。头和身体组成了一整个人，那也就是一整个页面，所以：html 双标签包裹了网页的头和身体，即head 标签和body 标签。在head 标签内，必不可少的标签是title 双标签。title 内的内容决定了你的页面在浏览器上方显示的内容，也就是你网页的标题。例如上方title 内的内容是"Hello!"，那么在浏览器上就会显示如下：

从上图代码块中我们还能发现一个meta 单标签中带有一个属性，叫charset。这个属性我们简单理解为避免中文乱码，utf-8 便是中文字符串所使用的编码。

同时我们也能发现"First page." 是写在body 双标签中的，所以它显示在了浏览器网页的主页面中。所以页面的所有内容是全部放在body 双标签内的。

快捷创建HTML 结构

众所周知，程序员应该是众人群类最懒的一类人了(bushi) ，为了快速创建骨架避免手敲，我们在VSCode 中可以直接快捷创建骨架。具体的方法便是输入一个英文字符的 ! 。

随后按下回车或者Tab 键，即可直接生成一个基本骨架在你的文件中，如下图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

目前对于新手小白来说，其实并不需要知道其中的lang、name、content 等具体的用途，第一行的 <!DOCTYPE html> 的作用便是声明该文件为HTML 文件。title 默认给了Document(文档)的名字。上文也已经说过，title 双标签是必不可少的。

HTML 基本标签

介绍完HTML 文件的骨架，接下来就要介绍一些常用的基本的标签了。

Tips：本章只介绍最基础最基础的标签，其中包括一些列表、表格、表单等标签会在之后的文章提及！

1. <html></html>

html 双标签是整个HTML 文件内最大的标签。所有的其它标签均需要被html 标签包裹。故你可以这么认为：html 标签是网页内辈分最大的。

2. <head></head>

head 双标签内包含着该网页的一些信息、编码方式、网站标题，包括以后会学到用到的外联样式文件、行为文件以及内联样式 style 双标签等均会放在head 双标签里。

3. <body></body>

body 双标签内的所有代码均会以各种方式显示在网页上。简单来说，所有你想展示在网页上的代码均需要写在body 双标签内。

4. <h1></h1>~<h6></h6>

h1～h6 这6对双标签的作用便是标题(title)。写在这些双标签内的内容的基本样式会与你直接写在页面上的内容不同。具体示例代码与演示如下：

<!-- 只展示body部分 -->
<body>
    你好
    <h1>你好</h1>
    <h2>你好</h2>
    <h3>你好</h3>
    <h4>你好</h4>
    <h5>你好</h5>
    <h6>你好</h6>
</body>

从演示中不难看出，h标签的主要样式是会加粗其标签内的文字，并且一个h标签会独占一行(这个有关块级元素和行内元素，以后会提到) 。

Tips：想作为标题的文字一定要输入在h双标签内！如果输入在双标签外则显示的效果会和第一行的“你好” 一样。

5. <div></div>

div 双标签按理来说，应该是HTML 文件中最最常用的标签了。div 标签的英文是division ，意为分开、分离。在这里我们可以直接将div 理解成一个盒子，无论是文字、图片、表格、列表(这些标签日后均会提及)或是其他的内容，全部可以放在这个盒子里，并且盒子里可以套盒子(这也是以后页面布局的核心思想)。div 双标签虽然描述的很抽象，但是目前我们将其认定为一个什么都可以放的盒子就可以。具体演示代码与示例如下：

<!-- 只展示body部分 -->
<body>
    我在页面中
    <h2>我在h2标签中</h2>
    <div>我在div标签中</div>
</body>

从上图不难看出，div 双标签内的内容样式貌似和直接写在body 标签内的并没有区别。没错，它们就是没有区别！但是通过以后逐渐的学习，你便可以知道写在div 内的内容是可以千变万化的，并且每一个div 显示的内容均可以多种多样(目前知道div是个盒子可以装内容就可以) ！

同时，div 双标签默认情况下也会独占一行 (块级元素)。

6. <p></p>

p双标签的名字叫做段落标签(paragraph)，当我们有一大段文字的时候便可以将内容丢在p双标签中，有好几段长文字的时候便可以将其分别丢入一对p标签内。其显示样式也于直接写在body 标签下是不一样的。示例如下：

<!-- 只展示body部分 -->
<body>
    我的内容是李白的将进酒
    我的内容是李白的将进酒
    <p>
        我的内容是李白的将进酒
    </p>
    我的内容是李白的将进酒
</body>

从示例可以看出，p标签内的文字会默认有一个上下边距，而连续写在body 标签内的文字没有边距并且直接连到了一起 (代码内我们虽然回车换了行，但是在页面内并没有生效)。

所以由此可见，当你有大段文字需要显示在页面内时，用p 双标签包裹起来是最好的选择。同时，p标签也是块级元素，会独占一行。

7. <span></span>

span 双标签中的span 的英文意思名为跨度。其在HTML文件中的作用其实也相当于是一个盒子。但是span 这个盒子与div 最大的差别便是span 标签不会独占一行，简单来说，一行可以容纳多个span 标签。具体的示例如下：

<!-- 只展示body部分 -->
<body>
    <div>我是div标签 我独占一行</div>
    <div>我是div标签 我独占一行</div>
    <span>我是span标签</span>
    <span>我是span标签</span>
    <span>我是span标签</span>
</body>

从代码中不难看出，每个标签我们均做了换行处理，但是在页面中显示的情况便是三个span 标签均在同一行；这是因为span 标签是行内元素。

Tips：后文会告诉大家想要实现换行，不是通过代码内的回车，而是通过一个单标签来实现换行。

8. <br />

br标签的英文是break ，是打断的意思。其实在学C语言等等语言的循环中，经常会见到break 这个单词，意思便为跳出循环。在HTML 文件中的br 标签便意思着换行。由于它是单标签，自己一个标签便可以完成它自己的效果，故想换多少行，便可以用多少个br 标签。具体的示例如下：

<!-- 只展示body部分 -->
<body>
    <span>我是span标签</span>
    <span>我是span标签</span>
    <br />
    <span>我是span标签</span>
    <span>我是span标签</span>
    <br />
    <br />
    <br />
    <span>我是span标签</span>
    <span>我是span标签</span>
</body>

由效果图不难看出，通过一个br 单标签实现了span 双标签的换行效果；而多个br 标签则直接换了多行，以至于页面中出现了空行。在有些时候制作页面或者表单时，用br 标签换行是非常简单快捷的。

9. <hr />

hr 标签用的并不多，因为它的功能是在页面上显示一条分割线。由于后期大多数的分割线会用边框属性来做，所以hr 的应用场景并不多，但它也是一个少见的单标签。具体效果如下：

<!-- 只展示body部分 -->
<body>
    <div>我是内容1</div>
    <hr />
    <div>我是内容2</div>
</body>

由上图可以看出，hr 制作的分割线占据了整整一行。在以后学习到边框之后，可以通过修改边框的属性来制作对应长度和需求的分割线。

本章小结

本章内容讲解了HTML的基本框架与最基础的HTML标签。但是例如a 双标签、img 单标签等，虽然它们也是基础标签，但由于它们在使用时需要在标签内加入对应的属性才能正确显示和使用，故没有在这里介绍(留在下章！)。

首先大家要了解HTML 的基本框架，并且知晓在VSCode 中可以通过 ! (英文字符的感叹号) 来快速创建HTML 的框架；同时也要熟练知晓html 双标签、head 双标签、title 双标签和body 双标签之间的层级关系（它们四个标签构成了最基本的页面）；并且一定要熟练掌握div 双标签、p双标签、h的各级双标签、span 双标签、br 单标签的用法。

在本章的最后想告诉大家，代码只有多敲多练，才能越发熟练的运用与掌握。看懂了解明白只是学习的第一步，尝试运用实际使用才能进一步加深印象，直至最后熟能生巧，拥有跃然纸上、一气呵成的感觉！

文章的最后也是再次复述一遍哈～如果我的内容有错误或者大家有不同见解，很欢迎来批评指正奥！