前端自学HTML笔记之一【基本结构】

n＆n

已于 2022-02-17 16:25:51 修改

阅读量257

点赞数

分类专栏：前端自学笔记文章标签： HTML 基础结构 VSCode 文本编辑器前端开发

于 2022-02-16 11:33:19 首次发布

本文链接：https://blog.csdn.net/qq_44406419/article/details/122843740

版权

3 篇文章 0 订阅

订阅专栏

我已加入 1_bit 博主的免费前端站起来学习计划，专栏链接：https://blog.csdn.net/a757291228/category_11609526.html

前端学习之旅 — 开篇

众所周知，前端三剑客指的是HTML、CSS、Javascript，html定义网页结构、css定义网页样式、js定义网页行为。
想要学好前端，三剑客的学习是必不可少的，接下来我们先来学习 HTML 的相关知识。

Alt

HTML全称 Hyper Text Markup Language，是一种超文本标记语言，用来表述网页的一种语言。

超文本是使用超链接的方式，将不同地方的资源联结到一起的文本（超链接是指网上的资源对象）；标记语言用于定义标记内的文本文档，该文档定义网页的结构。
我们常说的一个html文件就是一个网页，多个html文件通过超链接组合就变成了网站。

HTML5指的是HTML的第五个版本。

前端常用的文本编辑器有：

相比较来说第一种更受欢迎，个人在学习过程中也是使用第一种，因此在文章中仅介绍VS Code软件，其他软件大家有兴趣可以了解使用。
官网下载链接：VS Code

下载安装完成后，可以看到软件界面为全英文，通过安装扩展插件即可变为中文模式，见下图
第三步点击安装即可。

（插句题外话：VS Code中有很多有意思的插件，能给学习的过程带来不少乐趣）

首先要在VS Code中打开文件夹（该文件夹即为后续创建文件所存储的位置），选择完成后如下图

点击文件夹右侧的第一个加号是创建文件，点击第二个加号是创建文件夹。
html文件命名：文件名.html，其后缀名必须是.html。
在这里插入图片描述

左侧单击新建的html文件，输入英文状态下的!，点击下方显示的选项或直接按Enter键，即可自动生成html的基本结构。
在这里插入图片描述

在这里插入图片描述
完整HTML包括DOCTYPE声明、head、body部分等内容；通常<>中内容我们称为标签或元素

HTML5的声明为 <!DOCTYPE html>

<html>标签是在文件的最前端和最后端，包含了文件的所有内容。
lang属性: <html lang="en>"，其中lang属性用来说明每个页面的主要语言，lang="en"表示该页面是使用英文，lang="zh"表示使用的是中文；
<head></head>标签是头部标记，用来存放当前网页的相关信息和加载外部css、js样式。