手记

从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标签定义为透明标签,也就是计算嵌套关系的时候,并不考虑它,把它当成透明的就行了

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

2人推荐
随时随地看视频
慕课网APP