整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

html程序员们都知道的div和span,你知道吗?

html程序员们都知道的div和span,你知道吗?

TML 块元素

大多数 HTML 元素被定义为块级元素或内联元素。

编者注:“块级元素”译为 block level element,“内联元素”译为 inline element。

块级元素在浏览器显示时,通常会以新行来开始(和结束)。

例子:<h1>, <p>, <ul>, <table>

html程序员们都知道的<div> 和 <span>,你知道吗?

HTML 内联元素

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

例子:<b>, <td>, <a>, <img>

HTML <div> 元素

HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

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

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

定义和用法

<div> 可定义文档中的分区或节(division/section)。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。

用法

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。

可以对同一个 <div> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。

HTML <span> 元素

HTML <span> 元素是内联元素,可用作文本的容器。

<span> 元素也没有特定的含义。

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

定义和用法

<span> 标签被用来组合文档中的行内元素。

如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此。

可以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式。

可以对同一个 <span> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。

HTML:

<p class="tip"><span>提示:</span>... ... ...</p>

CSS:

p.tip span {
	font-weight:bold;
	color:#ff9955;
	}

希望以上可以解决你们心中的一些疑惑,其中可能会有不对的地方或是需要改进的地方,欢迎留言纠正。感觉还不错欢迎关注收藏转载哦

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

HTML 块元素

大多数 HTML 元素被定义为块级元素或内联元素。

编者注:“块级元素”译为 block level element,“内联元素”译为 inline element。

块级元素在浏览器显示时,通常会以新行来开始(和结束)。

例子:<h1>, <p>, <ul>, <table>

HTML 内联元素

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

例子:<b>, <td>, <a>, <img>

HTML <div> 元素

HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

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

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

HTML <span> 元素

HTML <span> 元素是内联元素,可用作文本的容器。

<span> 元素也没有特定的含义。

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

HTML 分组标签

标签 描述

<div> 定义文档中的分区或节(division/section)。

<span> 定义 span,用来组合文档中的行内元素。

络编程之Span标签。

同学们好,今天我将为大家分享Span标签的相关知识。Span标签是一种无意义的行内元素,没有任何实际效果。如果不加CSS,它和不加文字没有任何区别。但是,它非常重要,因为它可以方便地对元素进行分组,以不同的样式显示。

先来看看今天的示例效果。在这个网页上,我使用了CSS和JS分别演示了Span标签的效果。现在,一共有两行文字,第一行中的无语义和元素加上了Span标签,可以看到它们有蓝色并且加粗。但除此之外,这句话和普通文字没有任何区别。

第二行中,我使用JS代码实现了对Span标签动态数字的变化。点击0时,每隔100毫秒,0的数字开始自动加1。再次点击时,数字暂停增加。如果继续点击,数字又开始增加。现在,让我们来看一下实现代码。Span标签和div标签一样,也是一种无属性的包围标签。它的常用属性包括ID、style、class,用法和写法与div相同。但是,Span标签更多地用于对文字的操作。

虽然您可以像使用div一样使用CSS来设置CSS,但总感觉怪怪的。实际上,这应该被称为XHTML和CSS布局。Span标签没有固定的格式,只有当它应用CSS时才会产生视觉上的变化。如果不对Span应用CSS,那么Span标签中的文本与其他文本没有任何视觉上的差异。它主要是提供了将部分文字独立出来的方式,可以替代以前的Font标签。Span标签的实用性主要体现在CSS和JS上,它的用法很简单,一眼就能看懂。还有时间,简单介绍一下控制JS的代码。ID是命名onclick是鼠标点击事件。当点击这个Span时,将调用setclock函数。通过b变量控制是暂停还是开始增加数字。如果b为假,将开始调用SpanC函数。如果b为真,将清除计时器并暂停。

今天的分享就到这里。请记住Span标签的用法和写法。所有的案例和相关文档都可以向我索取。我们下期再见。如果您想学习网络编程、服务端编程、数据库或算法,请关注我们。