常见HTML标签的bug
......
在说bug前，我们先简单了解一下HTML的标签。
对于刚入门前端的朋友而言，首先我们接触到的肯定会是标签以及标签的嵌套。
现在由于移动端（也就是手机）的盛行，我们的界面代码（html）为了适配移动端，在写的时候更多会使用H5的语义化标签。
关于H5，我以后会单开一篇博客。
我们通常将标签分成两大块：
1.块级标签
2.内联标签：行内块标签和行内标签
简单解释一下这两类标签：
我们的页面是由一个一个正方形的像素点组成的。每个像素点的宽为1px，高为1px。每个标签都是由这些小块组成，所以这些标签的范围都是长方形或者正方形的。当然css里面提供了改变形状的方式，我之后的博客会写一些。
块级标签（块级元素）**自带了宽和高的属性，我们可以给它们直接设定，同时它独占一行**。
行内块标签（行内块元素）也自带了宽和高的属性，我们也可以给它们直接设定，但是它并不独占一行。
行内标签（行内元素）没有宽和高的属性，我们没有办法给它们设定宽和高，但是我们可以通过css的display属性将其设置为块级标签或者行内块元素，将其变为可以设置宽高属性的元素，再设置它的宽和高，当然它也是不独占一行的。
对于不独占一行的标签，我们有时候会需要对它们垂直方向的对齐方式进行设定。当然，这里面也有要讲究的地方。我们css篇再讲。
然后我们再说一下标签的嵌套
大多数的标签嵌套都是这样的：
块级标签包裹块级标签、行内块标签以及行内标签
我们要注意：行内标签最好不要包裹块级标签。
当然，这三类标签的切换是很容易的：只需要以下几行代码
//以下三个属性值可以无视原元素自带的属性，直接修改该元素属性
display: block; //在指定元素内设置，会将其变成块级元素
display: inline; //在指定元素内设置，会将其变成行内元素
display: inline-block; //在指定元素内设置，会将其变成行内块元素
当然，这些是传统css改变标签（或者称为元素）的方式
如果你学到了页面的布局方式，那么相应的你也会了解到一些其他的方式去改变它们。比如弹性盒子等。后面会再写一篇关于弹性盒子的博客。
第一个bug：p标签
p标签，又称段落标签
虽然它也是块级标签，但是它的里面不能包含块级标签。
比如：
<body>
<p>
<div></div>
</p>
</body>
如果你这样写了代码，那么你会收到这样一个结果：
这样的结果很明显对于我们进行页面布局是十分不利的。尤其是后期我们在使用DOM去操作页面内容的时候，你可能会找元素找的很难受。所以我们一开始就要避免这些bug的存在。如果你是新手，那么关于DOM是什么，我后期会再开一篇博客的。
本文地址：https://blog.csdn.net/ttttqqqqq/article/details/107163110
上一篇： 专家预测8种行业未来20年将被机器人取代
下一篇： HTML总结