从0到1认识HTML标签规则

一个面试题引发的思考:

以下嵌套规则错误的是(多选):

1、<p><div class="content">慕课网</div></p>
2、<ul><p>慕课网</p></ul>
3、<dl><li>慕课网</li></dl>
4、<h1><div class="title">慕课网</div></h1>
5、<span><div>慕课网</div></span>

揭晓答案: 全错

从HTML5的特点说起

我们知道HTML5作为前端标准已经有一些年头了, HTML5不仅仅是新增了一些实用的语义化标签和强大的API, 而且其继承了HTML4的容错性, 也就是无论我们写出多么错误的HTML代码, 浏览器都不会有任何抱怨, 默默承受😑

虽然浏览器不抱怨, 但是不意味着没有错误, 拿上面例子来说, 如果将选项1放到浏览器中, 你会得到:

<p></p><div class="content">慕课网</div><p></p>

从中我们看到， 如果标签嵌套规则不正确, 就会造成浏览器修改代码, 对开发和调试造成不必要的麻烦。

标签分类

我们知道HTML标签分类方法有很多种，其中之一就是按照默认显示样式可以分为block、inline、inline-block

block元素

div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul ...

特点： 独占一行，可设置高度、行高以及顶和底边距

inline元素

span、a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、kbd、label、q、s、samp、select、small、strike、strong、sub、sup、textarea、tt、u ...

特点： 常见于文字相关标签，和其他元素都在一行上，宽、高、行高及顶和底边距不可设置，宽度就是它的文字宽度

inline-block元素

img、input

特点： 既可以设置宽、高等，又和其他元素在一行

标签嵌套规则

block元素可以嵌套inline和inline-block元素

<div><b>慕课网</b></div> ✅

block元素不一定能包含block元素

强调：h1、h2、h3、h4、h5、h6、p、dt不能包含其他block元素

<p><div>慕课网</div></p> ❎
<header><h1>慕课网</h1></header> ✅

inline元素除a元素外不能包含block元素

<a href="/"><div>慕课网</div></a> ✅
<b><div>慕课网</div></b> ❎

a元素不能嵌套a元素

<a href="/"><a>慕课网</a></a> ✅
<b><div>慕课网</div></b> ❎

ul、ol子元素仅能为li包含li，dl子元素仅为包含dt和dd

<ul><li></li></ul> ✅
<ul><div></div></ul> ❎

ps: a标签之所以能够嵌套block标签，原因是w3c将a标签定义为透明标签，也就是计算嵌套关系的时候，并不考虑它，把它当成透明的就行了

以上就是标签嵌套规则，你学会了吗👏👏