2.3 HTML元素类型
HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。一般情况下,行内元素只能包含数据和其他行内元素,而块级元素可以包含行内元素和其他块级元素,这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。
任何HTML (超文本标记语言) 元素都有其默认的display属性,大多数都是行内元素(inline)或块级元素(block)。一个行内元素只占据它对应标签的边框所包含的空间,而一个块级元素占据其父元素(容器)的整个空间,因此创建了一个“块”。首先需要说明的是,这三者是可以互相转换的,使用display属性能够将三者任意转换。
(1) display:inline;转换为行内元素。
(2) display:block;转换为块状元素。
(3) display:inline-block;转换为行内块状元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签元素转换</title>
<style type="text/css">
span {
display: block;
width: 120px;
height: 30px;
background: red;
}
div {
display: inline;
width: 120px;
height: 200px;
background: green;
}
i {
display: inline-block;
width: 120px;
height: 30px;
background: lightblue;
}
</style>
</head>
<body>
<span>行内转块状</span>
<div>块状转行内 </div>
<i>行内转行内块状</i>
</body>
</html>
2.3.1 块状元素特点
块元素会独自占据一整行,或者多行,可以任意设置其大小尺寸,是用于搭建网页布局的必须部分,使网页结构更加紧凑合理,特点如下:
1.总是从新的一行开始。
2.高度、宽度都是可控的。
3.宽度没有设置时,默认为100%。
4.块级元素中可以包含块级元素和行内元素。
常用的块状元素有:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
等。
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>块状元素</title>
<style type="text/css">
div{background-color: palegoldenrod;}
p {background-color: paleturquoise;}
h4 {background-color: papayawhip;}
ul{background-color: peru;}
</style>
</head>
<body>
<div>这是div标签元素行</div>
<p>这是div标签元素行</p>
<h4>这是h4标签元素行</h4>
<ul>
<li>这是ul标签元素行</li>
<li>这是ul标签元素行</li>
</ul>
</body>
</html>
2.3.2 行内元素特点
行内元素也称为内联元素,行内元素不占有独立区域,其大小仅仅被动的依赖于自身内容的大小(例如文字和图片),所以一般不能随意设置其宽高、对齐等属性。
常用于控制页面中文本的样式,我们通常会使用行内元素来进行文字、小图标(小结构)的搭建,其特点如下:
一、和其他元素都在一行。
二、高度与宽度以及内边距都是不可控的。
三、宽高就是内容的高度,不可以改变。四、行内元素只能行内元素,不能包含块级元素。常用的内联元素有:<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
。
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>行内元素</title>
<style type="text/css">
span{background-color: palevioletred;}
p{background-color: paleturquoise;}
</style>
</head>
<body>
<span>这是span标签元素行1</span>
<span>这是span标签元素行2</span>
<p>换一行看看文字效果,我是一段测试代码,<b>被b标签加粗</b>。
我是一段测试代码,<i>被i标签变成斜体</i>。</p>
</body>
</html>
2.3.3 行内块状元素特点
普遍的规则里总有那么几个不一样的,在行内元素中就有那么几个特殊标签,常用的行内块状元素有:<img>、<input>、<td>
,可以给他们设置宽高、对齐属性,我们把这样特殊的一类标签称为行内块元素。行内块元素综合了块元素和行内元素的不同特点。
1.和相邻行内元素在同一行,但是之间会有空白缝隙。
2.默认宽度是他本身内容的宽度。
3.宽度、高度、行高、外边距以及内边距都可以手动设置。
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>行内块元素</title>
<style>
input{
width:200px;height: 30px;
}
</style>
</head>
<body>
<input type="text" value="行内块元素1" />
<input type="text" value="行内块元素2" />
</body>
</html>
* .扩展:display属性——display属性在前端中大致分为html dom display 属性和css display属性。
- 这里主提css display属性。display 属性规定元素城的显示框类型,常用于页面布局,比较常见的属性值包括none 、 block、inline和inline-block。
- display:block 规定元素以块级元素形式显示,可以设置宽高,但排斥其他元素与其同行
- display:inline 规定元素以行内元素形式显示,无法设置宽高,可与其他行内元素同行
- display:inline-height 规定元素以可设置宽高的行内元素显示
- html dom display 属性通常用于html 和js的互动,如在js定义移除元素的函数