Web前端入门第 7 问：HTML 标签不闭合、乱闭合、只有闭合标签有没有什么问题？

合集 - Web前端入门(17)

1.Web前端入门第2问：前端开发是什么？与后端、全栈的区别是什么？一个完整的Web项目有哪些角色参与？02-282.Web前端入门第3问：前端需要学习哪些技术？02-283.Web前端入门第4问：HTML、CSS、JavaScript 的作用分别是什么？02-284.Web前端入门第 5 问：写一个 Hello, World! 踹开程序开发的大门02-285.Web前端入门第 6 问：HTML 的基础语法结构02-28

6.Web前端入门第 7 问：HTML 标签不闭合、乱闭合、只有闭合标签有没有什么问题？02-28

7.Web前端入门第1问：英语是否很重要？有哪些前置条件？02-288.Web前端入门第 8 问：HTML <!DOCTYPE> 申明有何用处？如果没有此申明有什么问题？03-069.Web前端入门第 9 问：HTML 块级元素，内联块元素，内联元素三者有什么区别？03-0610.Web前端入门第 10 问：HTML 段落标签（ <p> ）嵌套段落标签（ <p> ）的渲染结果会怎样？03-0611.Web前端入门第 11 问：HTML 常用标签有多少？全量标签有多少？03-0612.Web前端入门第 12 问：HTML 常用属性一览03-0613.Web前端入门第 13 问：HTML 标签和属性是否区分大小写？03-0614.Web前端入门第 14 问：HTML 语义化是什么？03-0615.Web前端入门第 15 问：学会查阅 HTML 文档03-0616.Web前端入门第 16 问：学会使用开发者工具调试 HTML 页面03-0617.Web前端入门第 17 问：前端开发编辑器及插件推荐03-06

收起

HTML 标签语法遵循层级嵌套的树形结构，如果写出来的代码不是树形结构，浏览器会怎么渲染？

注意：以下截图都来源于 Chrome 浏览器，不同浏览器可能会产生不同的渲染结果。

先看正常代码

  <section>
    <span>span标签</span>
    <div>div标签</div>
    <p>我是p1标签</p>
    <p>我是p2标签</p>
  </section>

正常的渲染结果：

HTML 标签不闭合问题

标签不闭合的错误代码示例：

  <section>
    <span>span标签
    <div>div标签
    <p>我是p1标签
    <p>我是p2标签</p>

浏览器自我修正后在元素末尾添加了闭合标签。渲染结果如下：

HTML 标签乱闭合问题

标签乱闭合的错误代码示例：

  <section>
    <span>span标签
    <div>div标签</span>
    <p>我是p1标签</div></p>
    <p>我是p2标签</p>
  </section>

浏览器自我修正后将异常的标签进行了拆分重组。渲染结果如下：

HTML 只有闭合标签问题

只有闭合标签的错误代码示例：

  <section>
    span标签</span>
    div标签</div>
    我是p1标签</p>
    <p>我是p2标签</p>
  </section>

浏览器自我修正后去掉了一些闭合标签，但是 p 标签的闭合标签在前面添加了开始标签。渲染结果如下：

总结

代码编写时还是必须要遵循 HTML 语法规则，否则可能会出现我们不想要的结果，尤其 CSS 样式编写时，如果 HTML 结构错乱，将会导致 CSS 无法到达预期效果。