HTML中<div>和<span>的用法与区别-优快云博客

本文介绍了HTML中的<div>和<span>元素，详细解释了它们作为块级元素和内联元素的区别，并通过示例展示了如何使用CSS的display属性来改变这些元素的默认行为。

HTML <div> 和 <span>

可以通过<div>和<span>将HTML元素组合起来。

HTML 块元素

块元素在浏览器显示时，通常会以新行开始（和结束。）

例如：<div>、<h1>、<p>、<ul>、<table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

例如：<span>、<img>、<b>、<td>、<a>

HTML <div> 元素

<div>是一个块级元素，它是可用于组合其他HTML元素的容器。由于它是块级元素，在浏览器中显示会前后换行。

如果与css一起使用，<div>元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 元素

HTML <span> 元素是内联元素，在显示时通常不会以新行开始。可用作文本的容器。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

下面举例看下<div>与<span>的区别：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<p>xxxxxx<span style="background-color:red;" >yyyyyyy</span>zzzzzzzzz<div style="background-color:Yellow;">aaaaaaa</div>bbbbbbb</p>
</body>
</html>

样式效果如下：

如果想要<div>和<span>互换显示效果可以使用样式的display属性：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<p>xxxxxx<span style="background-color:red; display:block;" >yyyyyyy</span>zzzzzzzzz<div style="background-color:Yellow; display:inline">aaaaaaa</div>bbbbbbb</p>
<!--当<span>标签display属性设置为block时可以设置它的宽度、高度，但如果span没有设置block属性即使给它宽度、高度也不会有效果的-->
</body>
</html>

HTML 中有用的字符实体

注释：实体名称对大小写敏感！

HTML 统一资源定位器

URL也被称为网址。

HTML <!DOCTYPE>

<!DOCTYPE> 声明帮助浏览器正确地显示网页。

<!DOCTYPE>不是HTML标签。它为浏览器提供一项信息（声明），即HTML是用什么版本编写的。

常用的声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

转载于:https://www.cnblogs.com/Juliet1018/p/7064607.html