HTML中的标签表现形式
在HTML中按标签的不同表现形式分为三种:
- 行内元素
- 块级元素
- 行内块元素
行内元素 (display:inline)
行内元素标签中只能在其中放文本信息和其他行内元素标签,框架大小只随内容改变,并不能在样式上给宽度和高度。行内元素可以多个并列在一行显示,如<a> < strong> <span> <span>
等。
快级元素(display:block)
块级元素标签中可以放其他的块级元素标签和行内元素标签,大小可以通过设置宽度和高度来进行改变,块级元素自己独占一行,不能并列显示。如<h1~6> <p> < ul> <li> <div>
等。
行内块元素(display:inline-block)
行内块元素标签可以说是以上两种的集合,行内块元素标签,即可以多个并列又可以通过设置高度和宽度来改变大小,如<img /> <input /> <td>
以上三个不同的元素标签是可以进行相互转化的,在我们平时接触的网页中,经常能遇到一些链接是有宽和高的,但作为了链接的<a>
标签是属于行内元素,是不能设置高度和宽度的,这就用到了标签间的转换:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a{
display: inline-block;
width: 120px;
height: 50px;
background-color: #6cf;
color: red;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<a href="#" >链接1</a>
<a href="#">链接2</a>
</body>
使用display:inline-block
将原本是行内元素的<a>
标签转化为了行内块元素,即可以多个并列显示又可以设置高度和宽度。在实际使用中根据需求的不同可以将标签进行转换。