• 组织介绍

• WEB 标准

• HTML 概念

• HTML 结构详解

• HTML 规范

我们的第一个网页

现在我们就正式进入 WEB 前端的学习，先和大家一起来编写一个自己的网页。

0x01 在桌面创建一个记事本

右键桌面 ->新建 ->文本文档

有同学可能就会问：为什么我的创建的记事本文件名字叫“新建文本文档”而不是“新建文本文档.txt”呢？

这是因为.txt 是后缀名，表示的是打开方式，就比如.docx 后缀的都是默认用 word 打开，.xlsx 的都是默认用 excel 打开。

常用文件扩展名，Windows 系统文件按照不同的格式和用途分很多种类，为便于管理和识别，在对文件命名时，是以扩展名加以区分的，即文件名格式为：“主文件名. 扩展名”。这样就可以根据文件的扩展名，判定文件的种类，从而知道其格式和用途。主要 ISO、RAR、html、zip、exe、pdf 等。

——百度百科

没有显示后缀名的同学需要打开“此电脑”->左上角选择查看 ->之后将文件拓展名勾选上。

这样

0x02 编写代码

靓仔的第一个网页

直接将上面的代码粘贴到刚刚新建的记事本中，这时候我们就已经写好第一个网页了，只需要让谷歌浏览器去打开它我们就可以看到里面的内容了。

但是我们怎么让谷歌来打开一个记事本文件呢？很简单刚刚所提到的后缀名就可以解决，我们现在就把记事本的后缀名改成.html。

现在直接点击他就可以用浏览器打开了。

有的同学因为默认浏览器不是谷歌浏览器，所以显示的图片就不是谷歌的，这不应该当前操作。但是强烈建议使用谷歌浏览器（千万别用 IE 浏览器），在 JavaScript 一节中会详细介绍浏览器对我们写网页的影响。

恭喜！做到这一步你已经超越很多人了。

道虽迩，不行不至。事虽小，不为不成。——《荀子·修身》

下一步我会给大家讲解刚刚所写的那一段代码以及一些相关的专业知识。如果已经具备了专业知识的同学可以直接跳到标签介绍那里。

W3C

W3C 组织

聊到网页我们就不得不提起一个组织：W3C

W3C：World Wide Web Consortium，万维网联盟组织，用来制定 web 标准的机构（组织）。

W3C 组织就类似于现实世界中的联合国。W3C 就是网页世界的老大，规则都是由其来定的。所以我们在写网页的时候就需要遵守他的规则。

为什么要遵循 WEB 标准呢？因为很多浏览器的浏览器内核不同，导致页面解析出来的效果可能会有差异，给开发者增加无谓的工作量。因此需要指定统一的标准。

规则并不是用于约束小白的，而是用于约束高手的，因为高手会的太多，掌握太多他人所不会的。为了方便管理，所以需要规则加以约束。

Web 标准

Web 标准：制作网页要遵循的规范。

Web 标准不是某一个标准，而是由 W3C 组织和其他标准化组织制定的一系列标准的集合。

Web 标准包括三个方面：

• 结构标准（HTML）：用于对网页元素进行整理和分类。

• 表现标准（CSS）：用于设置网页元素的版式、颜色、大小等外观样式。

• 行为标准（JS）：用于定义网页的交互和行为。

根据上面的 Web 标准，可以将 Web 前端分为三层，如下。

Web 前端分三层：

• HTML（HyperText Markup Language）：超文本标记语言。从 语义 的角度描述页面的 结构。相当于人的身体组织结构。

• CSS（Cascading Style Sheets）：层叠样式表。从 审美 的角度美化页面的 样式。相当于人的衣服和打扮。

• JS：JavaScript。从 交互 的角度描述页面的 行为。相当于人的动作，让人有生命力。

HTML 概念

HTML 全称为 HyperText Markup Language，译为 超文本标记语言。

HTML 不是一种编程语言，是一种描述性的 标记语言。

作用 ：HTML 是负责描述文档 语义 的语言。

这里我们需要注意两个地方一个是超文本、一个是标记语言。

所谓的超文本，有两层含义：

（1）图片、音频、视频、动画、多媒体等内容，成为超文本，因为它们超出了文本的限制。

（2）不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件进行连接。即：超级链接文本。

HTML 不是一种编程语言，是一种描述性的 标记语言。这主要有两层含义：

（1）标记语言是一套标记标签 。比如：标签 表示超链接、标签 表示图片、标签

表示一级标题等等，它们都是属于 HTML 标签。

说的通俗一点就是：网页是由网页元素组成的，这些元素是由 HTML 标签描述出来，然后通过浏览器解析，就可以显示给用户看了。

（2）编程语言是有编译过程的，而标记语言没有编译过程，HTML 标签是直接由浏览器解析执行。

HTML 结构详解

在记事本中编写代码虽然可以实现最终的效果，但是不免有些难以操作，所以现在我们用 vscode 来打开刚刚到记事本文件

打开方式一：点击左上角的文件然后选择打开文件，之后选中刚刚的记事本文件。

pass: 如果 vscode 界面是英文的说明没有安装汉化的插件，具体的安装步骤请看工具篇。

打开方式二：直接将文件拖动到 vscode

文件和文件夹都是可以直接拖到 vscode 里面的，这样可以快捷打开。

我们要知道 HTML 标签都是有开始和结束的（双边标记 ），比如 和 ，在尖括号里多一个反斜杠表示结束。又或者有的标签是在末尾以 / 反斜杠直接闭合，这称为自闭合标签（ 单边标记）。

双边标记的标签在里面编写的是他的内容。

而自闭合标签大多数是编写的属性。

这些标签里有很多用等号的就称为标签的属性。

等号左边是要设置的属性名，右边是设置的属性值。

至于这些属性有什么用会在之后进行详细讲解。

一个最基本的网页应该包含一下的内容

内容

pass: 这里的 title 标签的标题是浏览器标签的标题，如下图。

自我介绍一下，小编 13 年上海交大毕业，曾经在小公司待过，也去过华为、OPPO 等大厂，18 年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024 年 Web 前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合 3 年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了 95% 以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再 6，webpack、git、node 学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就 ok 了，有些是真的要去记。当然了我们是牛 x 的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再 6，webpack、git、node 学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就 ok 了，有些是真的要去记。当然了我们是牛 x 的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽

资料领取方式：戳这里获取