搜索
首页web前端html教程HTML中div与span对比
HTML中div与span对比Jun 04, 2018 pm 03:10 PM
htmlspan对比

这篇文章主要介绍了HTML中div与span对比,分别介绍了p和span的用法和比较,有兴趣的可以了解一下

一、e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3和45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114

1.e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3标签

e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3标签可定义文档中的分区或节(pision/section),从而把文档分割为独立的、不同的部分。e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3标签可以作为一种严格的组织工具,并且不使用任何格式与其关联,这其中包含一种HTML标记和表现样式相分离的思想。在实际工作中,我们通常为e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3标签指定 id 或 class 属性,使该标签会变得更加有效。e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 是一个块级元素,这意味着它的内容自动地开始一个新行。并且实际上换行是 e388a4556c0f65e1904146cc1a846bee 固有的唯一格式表现。

下面这段 HTML 模拟了新闻网站的结构。其中的每对e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3标签 把每条新闻的标题和摘要组合在一起,也就是说,e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 为文档添加了额外的结构。同时,由于这些 e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 属于同一类元素,所以可以使用 class="news" 属性对这些e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3标签进行标识,这么做不仅为 e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 添加了合适的语义,而且便于进一步使用样式对 e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 进行格式化。

     <p class="news">
         <h2>
             News headline 1</h2>
         <p>
             some text. some text. some text...</p>
         ...
     </p>
     <p class="news">
        <h2>
             News headline 2</h2>
         <p>
             some text. some text. some text...</p>
        ...
     </p>

2.45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114标签

45a2772a6b6107b401db3c9b82c049c2 标签被用来组合文档中的行内元素(inline elements)。

  <span style="color: Red">注意:</span>

二、块级元素和行内元素

块级元素(block element)和行内元素/内联元素(inline element)是css中的概念,像e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3和4a249f0d628e2318394fd9b75b4636b1473f0a7621bec819994bb5020d29372a等元素常常被称为块级元素。这是因为这些元素显示为一块内容,即“块框”。与之相反,45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114 和 8e99a69fbe029cd4e2b854e244eab143128dba7a3a77be0113eb0bea6ea0a5d0 等元素称为“行内元素”,这是因为它们的内容显示在一行中,即“行内框”。

 块级元素和行内元素的概念并不是固定不变的,而是相对的。我们可以使用元素的 display 属性改变生成的框的类型。这意味着,通过将 display 属性设置为 block,可以让行内元素(比如 3499910bf9dac5ae3c52d5ede7383485 元素)表现得像块级元素一样;还可以通过把 display 设置为 inline 让生成的元素成为行内元素;甚至,我们可以把display属性设置为 none ,使元素根本没有框,这种情况,该框及其所有内容就不再显示,不占用文档中的空间。

     <p id="dv1" style="display: block">
         我是一个块级元素。
     </p>
     <p id="dv2" style="display: inline">
         我是一个行内元素。
     </p>
     <p id="p3" style="display: none">
         我是不可见的
     </p>

三、e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3和45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114的比较

1.相同点:e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3标签和45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114标签都是用来划分区间但是没有实际语义的标签;两者都是主要用于应用样式表。

2.不同点:e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3标签属于块级元素,浏览器在它的前后会自动添加一个换行标签0b9f73f8e206867bd1f5dc5957dbcb38;45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114标签属于内联元素,它的前后不会自动添加换行标签。

如果在网页布局中要将某两个内容显示在同一行内,最简单的方法就是将它们用45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114标签包装起来。比如,一个页面有相邻的两个元素,一个是e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3,另一个是45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114。要想将它们显示在同一行,可以将这个e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3改为45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114。当然,也可以通过css将e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3等标签的display属性设置为 inline 来实现。

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。

相关推荐:

通过代码详细为你讲解如何在js中创建div,span,label

详谈div中的dispaly:inline样式 和span的区别

怎样定义内联元素span的最小高度

以上是HTML中div与span对比的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
HTML超文本标记语言--超在那里?(文档分析)HTML超文本标记语言--超在那里?(文档分析)Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML(超文本标记语言),介绍一下HTML的本质,HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单,希望对大家有所帮助!

html和css算编程语言吗html和css算编程语言吗Sep 21, 2022 pm 04:09 PM

不算。html是一种用来告知浏览器如何组织页面的标记语言,而CSS是一种用来表现HTML或XML等文件样式的样式设计语言;html和css不具备很强的逻辑性和流程控制功能,缺乏灵活性,且html和css不能按照人类的设计对一件工作进行重复的循环,直至得到让人类满意的答案。

web前端笔试题库之HTML篇web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试(笔试)题分享给大家,本篇文章就先给大家分享HTML部分的笔试题(附答案),大家可以自己做做,看看能答对几个!

HTML5中画布标签是什么HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

总结HTML中a标签的使用方法及跳转方式总结HTML中a标签的使用方法及跳转方式Aug 05, 2022 am 09:18 AM

本文给大家总结介绍a标签使用方法和跳转方式,希望对大家有所帮助!

html5废弃了哪个列表标签html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

html中document是什么html中document是什么Jun 17, 2022 pm 04:18 PM

在html中,document是文档对象的意思,代表浏览器窗口的文档;document对象是window对象的子对象,所以可通过“window.document”属性对其进行访问,每个载入浏览器的HTML文档都会成为Document对象。

html5支持boolean值属性吗html5支持boolean值属性吗Apr 22, 2022 pm 04:56 PM

html5支持boolean值属性;boolean值属性指是属性值为true或者false的属性,如input元素中的disabled属性,不使用该属性表示值为flase,不禁用元素,使用该属性可以不设置属性值表示值为true,禁用元素。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器