Html中Div与Span的介绍

最新推荐文章于 2023-03-05 20:50:58 发布

huangche007

最新推荐文章于 2023-03-05 20:50:58 发布

阅读量724

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/u010624986/article/details/53707913

版权

前端开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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文章中我们在慢慢来熟悉它们

huangche007

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Html中Div与Span的介绍

Html中Div与Span的介绍在html开发中,div与span这两个标签可以说是我们经常使用到的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。Html中的Div标签 DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。 DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-
复制链接

扫一扫

专栏目录