5.5 HTML5 块元素标签的使用
HTML 块元素
块元素在显示时，通常会以新行开始。如 <h1> <p> <ul> 。
新建一个 index01.html ，写入代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>块元素</title>
</head>
<body>
<!-- 块 -->
<p>大家好！</p>
<h1>大家好</h1>
</body>
</html>执行一下：
大家可以看到它是一个新行开始的。没有连在后面，这就是块元素的特点。
HTML 内联元素
内联元素通常不会以新行开始，例如 <b> <a> <img> 等标签。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>块元素</title>
</head>
<body>
<!-- 块 -->
<p>大家好！</p>
<h1>大家好</h1>
<b>这是一个加重标签</b>
<a>这是一个超链接标签</a>
</body>
</html>刷新浏览器：
很明显可以发现这并没有换行，都在一行中，这就是内联元素的效果。除此之外还有很多同类的标签，在之后的实际使用中会发现更多。
HTML <div> 元素
<div> 元素也被称为块元素，其主要是组合 HTML 元素的容器。空的 <div> 是没有效果的。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>块元素</title>
</head>
<body>
<!-- 块 -->
<p>大家好！</p>
<h1>大家好</h1>
<b>这是一个加重标签</b>
<a>这是一个超链接标签</a>
<div>
<p>hello niuke</p>
</div>
</body>
</html>刷新浏览器：
在视觉上没有任何效果，它的主要作用是配合一些样式使用，我们来测试一下。创建一个 mycss.css 文件，给 <div> 元素添加一个 id ：<div id="divid">。然后在 mycss.css 中写入：
#divid {
color: blueviolet;
}并在 html 文件的头部引用：
<link rel="stylesheet" type="text/css" href="mycss.css">
这个时候这个 div 中的元素颜色就会更改掉。
如果再向
中加入其他元素，那么它的文字颜色也会同样被更改。但是有的时候我们指向改变其中的一个元素，那么这个时候就需要更改我们的 css 代码： HTML
#divid p{
color: blueviolet;
}这样的话他就表示选择 div 下面的 p 元素加上颜色效果。
HTML <span> 元素
<span> 元素是内联元素，可以作为文本的容器：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>块元素</title>
<style type="text/css">
span {
color: aqua;
}
</style>
</head>
<body>
<!-- 块 -->
<p>大家好！</p>
<h1>大家好</h1>
<b>这是一个加重标签</b>
<a>这是一个超链接标签</a>
<div>
<p>hello niuke</p>
</div>
<div id="divspan">
<p><span>试试span</span>是什么样子</p>
</div>
</body>
</html>刷新浏览器：
可以清楚的看到被 <span> 包裹的部分更改了颜色，其他部分没有被更改。如果没有样式的话他们的视觉效果并没有区别。后面的课程会对 css 效果做详细讲解。
查看11道真题和解析
