这篇文章里会涉及到两个术语,这里先明确一下:

  • 块级元素,block level element
  • 内联元素(或者叫行内元素),inline element
大多数 HTML 元素被定义为块级元素和内联元素。
 
 
—————————————————————————
 
HTML 块级元素
 
块级元素在页面中显示时,通常会以新行来开始。
 
例如:<div>、<h1>、<p>、<ul>、<table>
 
 
—————————————————————————
 
HTML 内联元素
 
内联元素在显示时,通常不会以新行开始。
 
例如:<span>、<a>、<b>、<td>、<img>
 
 
—————————————————————————
 
 
<div> 元素
 
<div> 元素是一个块级元素,也是一个容器,可以容纳其他的 HTML 元素。
 
<div> 元素,用来定义文档中的分区,没有特定的含义。
 
<div> 元素另一个常见的用途是文档布局。它取代了用表格定义布局的老方法。使用 <table> 元素进行文档布局不是表格的正确用法,<table> 元素是用来显示表格化的数据的。
 
 
—————————————————————————
 
<span> 元素
 
<span> 元素是内联元素,可用作文本的容器。与 CSS 一起使用时,可为部分文本设置样式属性。
 
 
 
参考链接:
 
 
 
(完)

HTML 的 <div> 和 <span> 标签的更多相关文章

  1. Div和Span标签显示与隐藏

    本实例中,学习jQuery的知识,显示与隐藏网页上的div或是span标签. 实际环境中,也许是根据某些条件进行,符合条件时,对某个或是某个div或是span标签时行显示与隐藏. 主要是学习jQuer ...

  2. "无意义"的div和span标签

    HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器.<div>元素没有特定的含义.除此之外,由于它属于块级元素,浏览器会在其前后显示折行.如果与 C ...

  3. CSS之div和span标签

    div和span是非常重要的标签,div的语义是division"分割": span的语义就是span"范围.跨度". 这两个东西,都是最最重要的"盒 ...

  4. div和span标签

    ------------------------ ------------------------ ------------------------ 块级标签独占一行,不和别的标签在同一行显示:行内标 ...

  5. div、span绑定内容改变事件

    内容改变事件onchange只适用于form表单标签(input.select.textarea) 当需要对div.span标签进行内容改变监听则无法适用,查阅了一些资料发现jquery有针对的方法, ...

  6. IT兄弟连 HTML5教程 “无意义”的HTML元素div和span

    HTML只是赋予内容的手段,大部分HTML标签都有其意义(例如,标签a创建链接,标签h1创建标题等),然而div和span标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用.但实际上, ...

  7. div和span显示在同一行

    div和span标签的区别 div  是块级元素标签,独占一行,后面跟的内容换行显示 span  是内联元素标签,后面可以跟其他显示内容,不独占一行 display属性可以改变内联元素和块级元素的状态 ...

  8. div和span与块级和行内标签

    <div>标签: 是一个区块容器标记,<div></div>之间是一个容器, 可以包含段落.表格.图片等各种HTML元素. <span>标签: 没有实际 ...

  9. 让HTML标签、DIV、SPAN拥有focus事件和blur事件,聚焦和失焦

    DIV和其他普通标签是不具有onfocus和onblur事件的.INPUT和A标签为什么拥有?而DIV和SPAN等普通标签却没有?有时候我们习惯性用键盘的TAB来移动光标,仔细看你会发现,光标只在IN ...

随机推荐

  1. [原创]java WEB学习笔记49:文件上传基础,基于表单的文件上传,使用fileuoload 组件

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  2. VS2010程序打包

    今天,小白就来给各位做个打包的新手教程,此文仅是为了记录自己的学习过程与方便其他初次接触的打包的朋友们总结一下,希望大家能够受用.废话不多说,下面我们就来讲解下打包工程.首先,在项目中添加一个安装项目 ...

  3. c++之路进阶——hdu3507(Print Article)

    参考博文:http://www.cnblogs.com/ka200812/archive/2012/08/03/2621345.html//讲的真的很好,有个小错误,博客里的num全为sum,像我这种 ...

  4. C++之路进阶——codevs4416(FFF的后宫)

    4416 FFF 团卧底的后宫  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold       题目描述 Description 你在某日收到了 FFF 团卧底的求 ...

  5. yii2封装一个类控制div宽度,高度

    1.首先,封装一个类,放在文件夹vendor下,命名为articls.php. <?phpclass Articles{ //测试    function add()    {        r ...

  6. PHP V5.2 中的新增功能,第 1 部分: 使用新的内存管理器

    PHP V5.2:开始 2006 年 11 月发布了 PHP V5.2,它包括许多新增功能和错误修正.它废止了 5.1 版并被推荐给所有 PHP V5 用户进行升级.我最喜欢的实验室环境 —— Win ...

  7. BaseAction的一般写法

    package com.mi.action; import java.util.Map; import javax.servlet.http.HttpServletRequest; import ja ...

  8. Java应用程序的打包和发布

    Java应用程序的打包和发布 简化Java应用程序的打包和发布 发布Java应用程序时Java提供了一系列打包和发布工具,可以显著的简化发布过程 该文章提供了打包Java code的几种方法,探讨Ja ...

  9. 鸟哥的linux私房菜学习记录之查看帮助文档

    如何使用man查看帮助文件 man command例如man date 按下enter键之后会显示date帮助文件,指令后面会有一个代号 info的用法 关机的几个常用命令 shutdown,halt ...

  10. WordPress博客网站fonts.useso加载慢解决办法

    WordPress博客网站fonts.useso加载慢解决办法 之前WordPress博客因为google字体库访问不了替换成360的useso,最近WordPress博客网站一直等待fonts.us ...