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

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

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

——百度百科

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

这样

靓仔的第一个网页

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

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

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

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

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

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

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

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标签的标题是浏览器标签的标题，如下图。

其层级结构应该如下：

DOCTYPE

html

head

title

body

靓仔的第一个网页

补充：头标签内部的常见标签如下：

：指定整个网页的标题，在浏览器最上方显示。

：为页面上的所有链接规定默认地址或默认目标。

：提供有关页面的基本信息

：用于定义HTML文档所要显示的内容，也称为主体标签。我们所写的代码必须放在此标签內。

：定义文档与外部资源的关系。

HTML规范

（1）所有标记元素都要正确的嵌套，不能交叉嵌套。正确写法举例：

（2）所有的标记都必须小写。

（3）所有的标签都必须闭合。

双标签：

单标签： 建议写成 建议转成 ，还有

（4）所有的属性值必须加引号。

（5）所有的属性必须有值。、

秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！

而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。

这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！

资料截图 ：

高级前端工程师必备资料包