第2天：HTML 结构

最新推荐文章于 2022-10-19 18:38:29 发布

lefex

最新推荐文章于 2022-10-19 18:38:29 发布

阅读量122

点赞数

本文链接：https://blog.csdn.net/lefex/article/details/103351415

版权

先简单回答下昨天微信群中关于第一天内容第1天：开篇词，开发环境准备大家遇到的主要问题：

@QP：VSCode 插件可以介绍些；

我：等待时机成熟的时候我会把我常用的插件分享给大家，目前重点是先把基础学好。
@GCH ：如何创建 HTML 文件？
我：建一个后缀名为 html 的文件即可。VSCode也支持创建文件和文件夹。

@很多人：如何打卡？
我：每天打卡指令「隐藏」在文章中，需要阅读文章才能找到打卡指令。打卡需要在文章末尾处留言，每天最多只有100个名额。

现在主流前端框架为 React 和 Vue，但是学习这些前端框架的时候还是需要打好基础，浏览器最终认识的是 HTML 和 CSS，万变不离其宗，框架再咋么厉害最终还会被转换成 HTML 和 CSS。在面试中，面试官往往还是喜欢基础扎实的同学。只有掌握这些基础知识，你才会深刻理解框架出现的原因，前端构建解决了什么问题，Node 的出现对前端起到了什么作用。

Web创建的初心是人人可发布内容，不去纠结代码语法，这就使得HTML 写法很随意，比如下面这段代码写的很乱，很难阅读，但是浏览器可以正常解析：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">    <Title>HTML结构</TITLE></head><bOdy><P>欢迎来到前端小课，共同学习前端</p></BODY></HTML>

从浏览器中的 Elements 中可以看到，浏览器已经把代码转换成一种「好看」的格式，标签不再包含大写字母，格式也重新进行了排列。虽然 HTML 写法很随意，但是为了「方便阅读代码」，需要把 HTML 写的结构化，如同上图显示的那样。在 VSCode 中点击右键，选择「Format Document」可以方便地格式化 HTML 代码。

可以通过这个网站来验证 HTML 是否有错：

https://validator.w3.org/#validate_by_input

「今天打卡指令随意，可以提一些你遇到的问题、或者想法、或者你想和大家分享的知识点」。

在开始讲 HTML 结构前，试想一下，一个纯文本的 html 文件，在浏览器中是否可以正常显示。

欢迎来到前端小课和我一起学习前端

在浏览器中打开这个 html 文件，效果如下，你会发现浏览器可以正常地显示，只不过浏览器自动添加了 html、head 和 body 标签，这就是 HTML 的基本结构：

但是为了更好地显示网页，我们还需要一些额外元素，比如网页的元数据 meta 标签，文档的编码格式，标题。浏览器是不能直接理解 HTML 的，需要把 HTML 转换成 DOM，HTML 和 DOM 是不一样的，虽然它们看起来无太大的差别，你可把 DOM 理解成内存中的树状结构，可以通过 JavaScript 来动态获取到某个节点。下面这段代码是 HTML 的基本结构：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>HTML结构</title></head><body>    <p>欢迎来到前端小课和我一起学习前端</p></body></html>

通过谷歌浏览器可以查看 DOM 结构

我们一一来说明各个标签的作用：

meta 标签用来定义一些元数据，提供网站的基本信息，供搜索引擎抓取，还可以做 SEO。其中下面这段代码是为了支持 HTML5：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

总结

本节内容对 HTML 基本结构做了一次介绍，通过本节内容希望你能够掌握，在任何编辑器中可以写出一个 HTML 结构，对 HTML转换成 DOM 有一个基本的了解。可以通过谷歌浏览器查看任何节点元素。HTML 相对来说比较简单，你可以把它理解为一个文档，通过不同的标签来表示不同的内容。明天的内容为 HTML head 标签中能放啥，大家加油！

推荐阅读：

第1天：开篇词，开发环境准备

前端小课开课啦「免费加入」

https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML

前端小课