本文介绍了HTML5中的div标签及其重要性，作为网页布局的基础，div用于组合内容并清晰文档结构。同时，文章讨论了空白折叠现象、转义字符的使用以及HTML注释的重要性，这些都是前端开发者必备的知识点。此外，文中还提到了作者的‘白宝书’系列和相关社区福利，鼓励读者通过学习和推荐订阅来提升技能并加入技术交流平台。
- 当前子专栏 基础入门三大核心篇 是免费开放阶段。推荐他人订阅，可获取扣除平台费用后的35%收益，文末名片加V！
- 说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费开放，购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。
- 福利：除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外，还可以通过加入星荐官共赢计划 加入私域社区。
- 作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 跨域学习者，从事过全栈研发、产品经理等工作，目前任某金融品类App负责人。
- 荣誉：2022年度博客之星Top4、博客专家认证、全栈领域优质创作者、新星计划导师，“星荐官共赢计划” 发起人。
- 现象级专栏《白宝书系列》作者，文章知识点浅显易懂且不失深度；TFS-CLUB社区创立者，旨在以“赋能 共赢”推动共建技术人成长共同体。
- 🏆 白宝书系列
接下来，我们来学习一下HTML5的几个特性，掌握了这几个特性，会让我们在编写HTML的过程中更加得心应手~
上篇我们学习了两种基础标签：标题标签和段落标签；还有一种标签是非常常用的标签，就是div标签，几乎每个网页都有大量的div标签，下面我们就来学习这个标签吧~
⭐️ div标签
🌟 div标签
div是英语division（分割）的缩写，顾名思义，<div></div>标签对用来将相关内容组合到一起，达到和其他内容分割的目的，使文档结构更清晰。
比如，网页的头部要放到一个<div></div>标签对中，轮播图也要放到一个<div></div>标签对中，文章内容也要放到一个<div></div>标签对中。这样网页结构才能更清晰。实际上，网页的内容的任何一部分都要放到一个<div></div>标签对中。
<div></div>是常见的HTML标签，它可以结合CSS使用，实现网页的布局，这种布局形式叫做”DIV+CSS“。
<div></div>像是一个容器，什么都可以容纳，因此工程师也习惯称呼<div></div>为”盒子“。
我们的网页就是由众多的盒子和盒子嵌套组成的。
我们可以打开百度新闻看一下它的网页布局：
我们会发现网页的任何一个部位都是放在<div></div>中的，所以<div></div>是我们网页制作中使用最频繁的一个标签。
🌟 div标签小实战
将我们上篇”前端开发技术“的网页用div作分割。
注意：<div></div>中的子标签需要缩进。
在实际项目中，结合需求来对网页进行分割。
分割结束后再次浏览网页会发现网页没有任何变化，不要着急，以后学到了css，运用div+css对每一个div进行美化后网页就会好看很多。
⭐️ HTML5特性
🌟 空白折叠现象
空白折叠现象有两种：
- 文字和文字之间的多个空格、换行会被折叠成一个空格
- 标签”内壁“和文字之间的空格会被忽略
在学习段落标签时提到的html网页显示不会换行其实就是这个空白折叠现象。
下面直接上图来看：
🌟 转义字符
常见的转义字符：
| 转义字符 | 意义 |
|---|---|
| < | 小于号 |
| > | 大于号 |
| | 空格（不会被折叠） |
| © | 版权符号© |
什么时候会用到转义字符？
比如，想要在网页中显示一个"<p>“标签，直接编写的情况下html文件会把”<p>"真的识别成一个p标签造成无法显示：
这时就要用到转义字符了，使用转义字符后：
🌟 HTML注释
在编写代码过程中，书写清晰注释非常重要，不管是他人还是日后自己阅读代码时，注释都可以起到提示的作用。
注释能够让我们更加快速的了解一段代码的含义或作用。
HTML注释的语法：
<!--这是一段注释。。。-->
在VS Code中，输入注释的快捷键是Ctrl+/
扫一扫
686
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
