【前端修炼场】 — 认识前端了解HTML（筑基期）

一碗黄豆酱

已于 2022-09-06 19:41:23 修改

阅读量386

点赞数 13

分类专栏：【前端修炼场】文章标签：前端 html

于 2022-08-22 11:47:15 首次发布

本文链接：https://blog.csdn.net/fsadagds/article/details/126405827

版权

【前端修炼场】专栏收录该内容

9 篇文章 49 订阅

订阅专栏

在这里插入图片描述

文章目录

前言
初识修真界
- 前端学习规划
初识HTML
制作第一个网站（真）
总结

前言

本文为【前端修炼场】系列的开篇之作，请各位观众老爷跟我踏实修炼，从初入修真界至前端大道巅峰！

初识修真界

在很久很久以前，此前端非彼前端，如若我们回到在多年前，我们可能就是一个修图美工的，妥妥切图仔，但是今非昔比，咱们大前端可是得天独厚，咱可以做PC端的网站也可以做手机端网站，APP等等

万丈高楼平地起，你准备好了么？携手和我踏入前端世界吧！

在此注释，我将前端修真分为八大境界，筑基期，化丹期，破丹期，小元神，大元神，归元境，混沌境，大道至尊

前端学习规划

前面我介绍了咱们修真界的八大境界，那么他们分别如何对应的呢?

筑基期 — 掌握HTML、CSS、PhotoShop，可以做到PC网络布局
化丹期 — 移动端开发，可以适配不同的尺寸手机
破丹期 — 成为Js开发工程师，掌握 Js 和 jQuery
小元神 — 学习前端开发框架如 React 、Vue等等，此时可以独立开发项目
大元神 — 学习后端技术，全栈达成
归元境 — 学会ReactNative、小程序技术等等
混沌境 — 掌握最新前端技术，Flutter等等
大道至尊 — 融汇贯通，对于网站出现的任何并发问题都可解决，并改进功能

那么我们如何一步一步晋升至巅峰？跟随阿酱！带你逐步修真，跟着阿酱走，笑傲江湖不是梦想！

初识HTML

在这里插入图片描述

HTML到底是个啥？各位客官听我细细说来

HTML由来

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即我们所见到的网页。

上述内容摘自百度，有兴趣者可点击链接查看 HTML百度百科
如果洒家侵权了，告知必删

重要！！！HTML需要借助浏览器打开，其实关于HTML我们一开始不需要知道咋来的，咱们一步一步从实践中学习！

制作第一个网站（假）

纯纯标题党哈哈哈，虽然是制作第一个网站，但是确是非常的简单

随便打开一个文件夹（桌面也行），建立一个文本文档txt，名字可以写伴侣的名字奥

点击进入文本文档，写入一行文字(可以是写给伴侣的肉麻情话哈)

保存后退出，点击文本文档修改后缀名为.HTML

我们发现此时小图标变成了浏览器模样
接下来点击这个文件，第一个简易网页完成啦，网页内容就是刚才输入的那句话，恭喜你正式进入前端修真！

其实我们日常见到的网站是由无数个向我们刚才建立的网页那般集合起来的，总结如下：

网页需要借助浏览器打开
后缀名为.html
网站由网页组成

作为修真者，我们要修炼更强的功法不是，刚才那个小网页简直就如同孩童玩物一般，如何让我等豪侠使用？那么我们如何晋升，比如将刚才的网页中的文字在其他位置显示？我想放在右边可不可以，放在中间是不是更好看？

网页进阶

我们如何让文字在中间显示？命令可以么，咱们直接使出狮吼功！可惜没有用，因为我们不会哈哈哈，我们将网页当作灵物，我们要想驯服它需要用他听得懂的语言，所以我们要用HTML看得懂的语句告诉他。

HTML不是编程语言，注意修真者们！他是一种标记语言（超越文本的标记语言），他是有一整套标记语言的喔

那么我们如何实现让文本在中间显示呢？跟着我一步一步操作理解吧！

将刚才的.html文件后缀名改回txt

点击进入文本，输入下图中内容

上图中<center>和</center>就是标记语言，后续会细讲各种标记语言

将后缀名重新改为.HTML

打开文件，文字就会出现在中间位置！成功啦！

结识浏览器

浏览器就是一个窗口，一个可以让我们打开网页的展示框，那么都有哪些浏览器呢?

比如洒家用的是联想自带的联想浏览器，其他的像是谷歌、火狐、IE浏览器、Safari等等

那么我们修仙之人总需要一套修炼体系需要遵守，那么网页标准又是如何？我们都是基于W3C指定的一系列规定，具体可以自行查看。

网页结构

WEB（网页）的组成是什么？

首先是HTML结构+CSS表现+JS行为

大家看到这里肯定很迷惑，没关系，后续我们用例子讲解，咱们修真者不去战斗如何提升？

其实上述构成结构就是我们需要后续学习的！简单来讲，HTML就是上述我们说的标志语言（将文字放在中间的<>+center 此类的），CSS可以使我们的网页更栩栩如生，JS提供一些行为操作。

HTML理解为框架，CSS理解为渲染加上外壳，JS增添动力源

制作第一个网站（真）

代码展示

<html>
      <head>
            <title> 一碗黄豆酱</title>
      </head>
      <body>
            <center> 
            跟着一碗黄豆酱 <br/>修仙路上不迷路
            </center>
      </body>
</html>

为了方便我用的代码块展示，诸位实际操作时需要按照上述我们使用文本文件那种方式进行操作，可以直接复制上述代码到刚才我们创建的文本文件保存运行即可

网页展示

图一：

图二：

详解

这一次我们所看到的示例，就正规一点了，虽然依旧很简单，但是麻雀虽小五脏俱全，我们细细看来。首先我们引入两个概念。

（1）常规标记，也叫双标记，就是上述代码中的< html > < /html >这样的成对出现的
（2）空标记也叫单标记，就是上述代码中出现的< br/ >，这样子单独出现的
< br/>的含义是换行，我相信很多人看到这个词的作用后肯定很疑惑，为什么我们不直接在代码中打换行符来实现，因为网页识别不了，这就是HTML的标志语言的作用，用网页能看懂的方式去命令他。

首先在看到HTML打下的框架< html > 以及< /html >，我们可以将此认为是最外框，然后里面包括了头部和身体
头部就是我们网页的标题，如网页展示的第一幅图片，一碗黄豆酱即为我设定的头部标题
身体就是我们网页展示的东西，如第二幅图所示

到此第一篇结束啦！各位修炼辛苦了，可以小酌一杯休养生息！

当然上述的title和br等等意思大家不是很熟，后续我们在实例中慢慢吸收掌握！

总结

这节课我们利用文本文件进行HTML开发，那么我们难道没有什么称手的兵器么？当然有，下一篇带大家引入！

欲知后事如何，且听下回分解！跟着阿酱，不迷路😃

咱们下篇见，天天都见！
在这里插入图片描述

一碗黄豆酱

关注

13
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
16
评论
【前端修炼场】 — 认识前端了解HTML（筑基期）

本文为【前端修炼场】系列的开篇之作，请各位观众老爷跟我踏实修炼，从初入修真界至前端大道巅峰！这节课我们利用文本文件进行HTML开发，那么我们难道没有什么称手的兵器么？当然有，下一篇带大家引入！欲知后事如何，且听下回分解！跟着阿酱，不迷路😃咱们下篇见，天天都见！
复制链接

扫一扫