Html中Div与Span的介绍
在html开发中,div与span这两个标签可以说是我们经常使用到的标签,div的语义是division“分割”; span的语义就是span“范围、跨度”。
Html中的Div标签
DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。
DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。用于组合块级元素,以便通过样式表来对这些元素进行格式化。
接下来用代码初步感知一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<h3>编程开发语言</h3>
<ul>
<li>Java</li>
<li>C</li>
<li>C++</li>
<li>PHP</li>
</ul>
</div>
</body>
</html>
div在浏览器中,默认是不会增加任何的效果改变的,但是语义变了,div中的所有元素是一个小区域。
div标签是一个容器级标签,里面什么都能放,甚至可以放div自己。
Html中的Span标签
span也是表达“小区域、小跨度”的标签,但是是一个“文本级”的标签。
就是说,span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
span里面是放置小元素的,div里面放置大东西的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
span{
background-color: pink;
}
</style>
</head>
<body>
<h3>书</h3>
<ul>
<li>
<p>第一行代码</p>
<p>
《第一行代码——Android》是Android初学者的最佳入门书。全书由浅入深、系统全面地讲解了Android软件开发的方方面面。第1章带领你搭建Android开发环境,完成你的第一个Android程序。第2章至第13章完整地讲解了Android开发中的各种基本知识和关键技术,包括四大组件、UI、碎片、广播机制、数据存储、服务、多媒体、网络、定位服务、传感器,以及分布式版本控制系统Git的使用等等。在部分章节会穿插相关技术的高级使用技巧。第14章和第15章则将带领你编写一个完整的项目,教会你如何打包、上架、嵌入广告并获得盈利。《第一行代码——Android》内容通俗易懂,既适合初学者循序渐进地阅读,也可作为一本参考手册,随时查阅。
<span>
<a href="">详细信息</a>
<a href="">购买</a>
</span>
</p>
</li>
<li>
<p>第一行代码</p>
<p>
《第一行代码——Android》是Android初学者的最佳入门书。全书由浅入深、系统全面地讲解了Android软件开发的方方面面。第1章带领你搭建Android开发环境,完成你的第一个Android程序。第2章至第13章完整地讲解了Android开发中的各种基本知识和关键技术,包括四大组件、UI、碎片、广播机制、数据存储、服务、多媒体、网络、定位服务、传感器,以及分布式版本控制系统Git的使用等等。在部分章节会穿插相关技术的高级使用技巧。第14章和第15章则将带领你编写一个完整的项目,教会你如何打包、上架、嵌入广告并获得盈利。《第一行代码——Android》内容通俗易懂,既适合初学者循序渐进地阅读,也可作为一本参考手册,随时查阅。
<span>
<a href="">详细信息</a>
<a href="">购买</a>
</span>
</p>
</li>
<li>
<p>第一行代码</p>
<p>
《第一行代码——Android》是Android初学者的最佳入门书。全书由浅入深、系统全面地讲解了Android软件开发的方方面面。第1章带领你搭建Android开发环境,完成你的第一个Android程序。第2章至第13章完整地讲解了Android开发中的各种基本知识和关键技术,包括四大组件、UI、碎片、广播机制、数据存储、服务、多媒体、网络、定位服务、传感器,以及分布式版本控制系统Git的使用等等。在部分章节会穿插相关技术的高级使用技巧。第14章和第15章则将带领你编写一个完整的项目,教会你如何打包、上架、嵌入广告并获得盈利。《第一行代码——Android》内容通俗易懂,既适合初学者循序渐进地阅读,也可作为一本参考手册,随时查阅。
<span>
<a href="">详细信息</a>
<a href="">购买</a>
</span>
</p>
</li>
</ul>
</body>
这里只是很简单很简单的介绍了下div与span,在今后的CSS文章中我们在慢慢来熟悉它们