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

Posted 2023-03-29 一碗黄豆酱

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端修炼场 — 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>

比如我写上述这么一段话，他的网页如下：

我们注意到上述段落之间是有默认间隔的，这样我们在页面上看去就比较整洁

换行标识

这个标识其实咱们前面已经使用过，就是 ，在他后面的文字会被换行到下一行。
我猜测有的道友看到想说，那你想换行为什么不直接在用一个段落标识?那是因为段落之间会有间距，那我只是单纯的换行的话，那用添加段落的方法就不好了。

接下来我来演示一下他们之间的区别

初始设置

网页展示：

我们明显看到这一段文字太长了，看着不舒服，那么们如何实现换行？

分段实现换行（验证是否可行）

网页展示：

很明显哈，各位道友，明显不是我们想要的效果，我们想要的是我们平时写文章那样只是换个行，行间距很小，这个就是换个段落，达不到预期效果，所以这种换行方法不可取。

利用 换行

网页展示：

换行成功！所以利用br换行可行！

水平线标识

不知诸位是否注意到，我的文字会出现很多分割线，那么我们在做网页时，有时候也需要添加这种水平线，那么我们如何操作呢？

<hr/>

上述标签即为我们的空标记—水平线。

我们在刚才的html中使用一下看看是否有用。

我们在两段之间加上我们的水平线标识。

网页展示：

后期我们不会使用这种方法，我们会使用css

加粗标识

如果我们想使我们的某些文字加粗的话，那么我们就会用到下面这个标识。

<strong></strong >

在标识内的文字会被加粗。同样我们使用上面的html试一下。

网页展示：

标签是加粗强调突出内容，虽然这个标签也可以加粗但是不会强调内容一般不使用，大家可以自行试一下

倾斜标识

<em></em>

如果我们需要倾斜某些字体，我们需要用到上述标识，依旧使用前面html试一试。

网页展示：

标签是倾斜强调突出内容，虽然这个标签也可以倾斜但是不会强调内容一般不使用，大家可以自行试一下

删除线标识

各位道友平时去藏物阁买东西时，一定看见过打折的时候，不要99只要9.9，那个99上面有个划掉的线，就是接下来要将的删除线。

<del></del>

依旧使用前面html试一试。

网页展示：

<s></s>也可作为删除线标识，一般不使用

下划线标识

如果诸位想要使用下划线作为强调，可以使用下面标识。

<u></u>

依旧使用前面html试一试。

网页展示：

上标 / 下标标识

大家看论文的时候，或者书籍的时候，时常会看到在一些名词上面有个角标，或者下角标，然后在书页的低端进行解释，那么如何在网页里面实现呢？那就需要用到下面标识。

<sup></sup> 上标
<sub></sub> 下标

依旧使用前面html试一试。

网页展示：

上述所以的标签可以嵌套使用，上面意思呢？就是我可以即加粗也倾斜，只要我们和套娃一样一层一层加上标识，标识顺序无影响。

总结

这篇我们介绍一些基础的标志词，对于我们想要在网页上进行一个基本的编写已经没有问题了，希望各位道友可以自行多加练习！早日晋升下一阶段 —— 化丹期！

前端修炼の道 | 前端开发所需软件有哪些？

在上一篇文中给大家介绍了本文我们再继续给大家带来新的内容。

工欲善其事，必先利其器，编写 HTML 页面之前必须了解一些常用的前端开发工具。

前端开发工具主要分 3 类：

图片编辑软件
代码编辑器
浏览器

这些工具在网页制作过程中发挥着很大的作用，下面对它们进行一一介绍。

Photoshop

Photoshop（简称 Ps）是一种图像处理软件

很多人都称 Ps 是“修图神器”，因为对于绝大多数普通用户来说，Ps 最大的用途就是美化用手机拍的照片。

在前端开发时，也会经常使用 Ps，但此时使用 Ps 并不是用来修图的，而是用它来分割图片或测量图片尺寸。

例如，开发人员需要根据设计图来制作页面，此时必须确定每个页面区域的尺寸、文字大小和颜色等数据，Ps 将在这时派上用场。

下面介绍在前端开发中使用 Ps 来测量图片尺寸和分割图片的方法。

使用 Ps 测量图片大小

在前端开发中使用 Ps 测量图片大小涉及以下 5 个步骤。

第一步运行 Ps（本书使用的是 Photoshop CS6）软件，打开图 1-12 所示对话框。

打开想要的文件：

在图 1-12 中依次单击菜单“文件” → “打开”，打开“文件打开为”对话框，在对话框中找到需要打开的文件所在的位置后，单击“打开”按钮。

图 1-12　新建画布对话框

测量图片尺寸，分为以下 4 步：

①放大图片：使用缩放工具，单击鼠标左键，放大图片。

② 选框选出边界：使用选框工具，沿边界画出选框，可以使用上下键来调整位置。

③ 画出辅助线：将鼠标放到标尺内，按下鼠标左键并拖动辅助线至选框边界。

如果打开的页面没有标尺，可单击“视图”→“标尺”来调出标尺。

④ 测量：使用选框工具从辅助线开始框选出需要测量的区域，该区域的图片尺寸将通过选框来测量，如图 1-13 所示。

图 1-13　测量选框所选图片尺寸

查看尺寸：依次单击菜单“窗口”→“信息”，打开信息面板，从信息面板中可以看到元素的尺寸，其中 W 代表宽度，H 代表高度；

如图 1-14 所示。如果把鼠标移到选框区域内，还可以在信息面板上看到鼠标位置处的颜色等信息。

图 1-14 在信息面板中查看所测量的图片尺寸

修改尺寸单位：在 Ps 中，标尺的单位可以有：像素（px）、厘米（cm）、百分比（%）等多种类型，但默认的单位是 cm。由于在网页中常用的单位是像素（px），因而在测量图片时需要修改 Ps 的标尺单位

通过以下步骤切换 Ps 中的单位：

① 如图 1-15 所示，单击菜单中的“编辑”，并从下拉菜单中选择 “首选项”，然后单击弹出菜单中的“常规”子菜单，此时弹出图 1-16 所示对话框。

② 在图 1-16 所示对话框中单击左窗口中的“单位与标尺”，在打开的右边窗口的“单位”栏中单击标尺下拉箭头，从弹出的下拉列表中选择“像素”，如图 1-16 所示。

使用 Ps 切图

在前端开发中使用 Ps 切图涉及以下 4 个步骤

第一步运行 Ps 软件，打开需要切图的图片，放大图片，先使用选框工具然后再画辅助线（先使用选框工具的目的是为了对齐像素），具体操作请参见“使用 Ps 测量图片大小”的步骤介绍。

第二步使用选框工具选中要切的内容，如图 1-17 所示。

第三步复制、粘贴要切割的内容到新画布：选中要切割的内容后，按 Ctrl+C 组合键复制选中的图片，然后依次单击菜单“文件”→“新建”，打开如图 1-18 所示新建画布对话框。在图 1-18 中根据实际情况设置画布的宽度和高度，其余参数尽量保持不变。单击“确定”按钮，新建一个空白画布。在新画布中按 Ctrl+V 组合键粘贴选中的内容。按 Ctrl+C 组合键复制图片时，一定要注意选中当前的图层，如图1-19 所示。