【前端修炼场】 — HTML常用的标志语言

在这里插入图片描述

此文为【前端修炼场】第三篇，上一篇文章链接：上一篇

文章目录

前言
标志语言
- 基本结构介绍
- - 声明介绍
  - 标签修饰
  - 编码形式
- 常用HTML标签
- - 标题标签
  - 段落标签
  - 换行标识
  - 水平线标识
  - 加粗标识
  - 倾斜标识
  - 删除线标识
  - 下划线标识
  - 上标 / 下标标识
总结

前言

之前我们使用过的那些标志语言，都没有具体讲解过，这一篇我将带诸位详细学习一下！

标志语言

我相信大家能来学习前端，对于基础的编程语言肯定有涉猎，就像是c语言一样我们都会有头文件，函数声明等等。

当然我们的html也是会有文档声明，大家肯定有疑问，为什么前面我们使用的时候没有声明也没有报错，那么下面我们先介绍一下声明是什么后，来回答这个问题！

基本结构介绍

声明介绍

先在我们的文件夹中新建一个文件，用于这篇的学习使用
首先我们在VSCode中输入！后会出现如下提示，然后右键即可

在这里插入图片描述

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

此时我们可以看看到出现一大堆东西，我们也就认识html，head，body，title这些我们前面接触过的东西。

那么开头这个< !DOCTYPE html >是什么？

1.这就是大名鼎鼎的文档声明！DOCTYPE是文档声明标签，声明什么呢？声明我们使用的html使用的格式或者说准则，因为在此之前准则太多了，当然目前我们使用的都是HTML5准则。
2.而且我们看到< !DOCTYPE html >也没有涉及具体准则表示数字呀，因为这种格式默认使用最新准则也就是HTML5。

标签修饰

不知各位道友是否记得，在此之前我们提及过，标志语内可以加修饰，就是高亮字体里面可以加修饰。如代码第二行< html lang=“en” >。这个里面的lang="en"就是我们添加的修饰部分，修饰html。

那么这个修饰词是什么意思？lang 是 language（语言）的缩写，en 是” english“（英文）的缩写，意思就是我们这段html代码所以的语言是英文。
”zh-CN“是中文

那么，这个代码有什么意义呢？我相信大家在日常浏览一些软件的官网时，由于厂商是国外的，所以都是外文，这时，我们的网页会弹出询问，是否要翻译为中文，如下图所示：

在这里插入图片描述

这时候不免会疑问，为什么是浏览器知道我们需要翻译，他是如何做到的？我们可以打开任意一个外文网站的源码，可以看到第一行如下图：

在这里插入图片描述

他有我们上面讲过的 lang=“en”，这就相当于告诉网站我们的内容是英文的，那么我们浏览器的插件就会识别到我们这个内容与我们本地系统语言不一致，从而提示我们可以进行转换。

效果展示：

<!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>

此时我在body 也就是内容里面打上hello word ，上方语言设定为英文

网页：

在这里插入图片描述
可以看到百度翻译提示我可以翻译文字

那如果我将代码中的语言设定为中文呢？

<!DOCTYPE html>
<html lang="zh-CN">
<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> 我爱中国！</center>
</body>
</html>

网页：

在这里插入图片描述
此时没有提示我需要翻译，因为本身就是中文

我相信肯定有道友就会问，那我内容写英文，前面语言设定是中文，会是什么结果？结果是还会弹出提示框，可以翻译网页。因为我们浏览器的插件会检测出来语言不匹配。

所以我们需要注意的是，只要我们将内容和我们设定的语言种类保持一致即可！我们网页用的中文那么我们就令lang=“zh-CN”

编码形式

 <meta charset="UTF-8">

可以看到上面这一行代码，那么他是干啥的呢？他是用来告诉浏览器需要用什么方式去解码，通俗的来讲，就像是我们用秘法进行通讯，那么收信人也需要特定手法打开进行，这个meta 加上后面的修饰词的目的就是为了告诉计算机我们的编程是用上面形式进行的，这样浏览器就可以进行解码。

在此说明，大家以后都用UTF-8，俗称万国码，只要是世界上存在的都可以被编译出来。

常用HTML标签

接下来，我带着各位道友正式介绍HTML标签啦！

标题标签

首先我将各级标签写在下方：

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

我们将其在放在前面的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>
    <h1>女朋友是老大</h1>
        <p>
            要爱护她，保护她
        </p>
        <p>
            一生一世在一起！
        </p>

</body>
</html>