标签显示模式 : 指的是 标签显示的方式 , 标签类型有很多 , 不同的情景使用不同类型的标签 ;
块级元素 可以 独占一行显示 , 常见的 块级元素 标签 :
<h1>
, <h2>
, … , <h6>
;<p>
;<div>
;<ul>
, <ol>
, <li>
;上述标签都会 独占一行显示 ;
块级元素 特点 :
特殊的块级元素 : 存放文字内容的 块级元素 , 只能包含文字内容 , 不能包含其它块级元素 ;
<p>
标签是特殊的 块级元素 , 其中不能包含 <div>
标签 , 只能放文字内容 ; <div>
标签 , 只能放文字内容 ;代码示例 : 为 div 块级元素 设置 宽度 , 高度 , 上边距 , 背景颜色 , 文字颜色 ; 下面的代码中 ,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>块级元素</title>
<base target="_blank"/>
<style>
div {
/* 宽度 200 像素 */
width: 200px;
/* 高度 100 像素 */
height: 100px;
/* 上边距 2 像素 */
margin-top:2px;
/* 背景黑色 */
background-color: black;
/* 文字绿色 */
color:green;
}
</style>
</head>
<body>
<div>块级元素1</div>
<div>块级元素2</div>
<div>
<strong>文字</strong>
<h1>标题</h1>
</div>
</body>
</html>
显示效果 :