在说bug前,我们先简单了解一下HTML的标签。对于刚入门前端的朋友而言,首先我们接触到的肯定会是标签以及标签的嵌套。
当然,bug这种东西我们都会考虑到版本问题,如果不考虑版本,那就有点耍流氓了,说不定什么时候它就被修复了呢。我这里用的是目前而言的高版本谷歌浏览器测试的。
现在由于移动端(也就是手机)的盛行,我们的界面代码(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是什么,我后期会再开一篇博客的。
第二个bug:img标签
img标签的bug在于它的对齐方式,单纯的img标签它的垂直对齐需要两个属性:父元素的line-height属性和自身的vertical-align两个属性,这两个属性在后面的博客中也会详解。
PS:你们可以试一下:单纯的line-height和vertical-align并不能移动img的位置
我们来看一下它们一起使用的效果:
注意:img标签如果没有设置vertical-align属性,那么它默认是vertical-align:top;的效果,而其后的文字是vertical-align:baseline;的效果。img标签没有vertical-align:baseline;的效果。
<style>
div{
width: 600px;
height: 400px;
background-color: #f00;
border: 1px solid #000;
line-height: 400px;
}
img{
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<img src="book08.jpg" alt="">
</div>
当你将img的vertical-align改为bottom
总结:当我们在写HTML的时候需要更加细心去发现更多的东西。