Span与div

✍ dations ◷ 2025-09-12 13:23:53 #HTML

在HTML中,spandiv元素被用来表达一个逻辑区块。div在Dreamweaver也叫“层”,用于标示块级元素,而span标示行内元素。

绝大多数HTML元素具有语义上的意义 - 也就是说,这个元素表示了它的作用。例如,一个p元素应该包含一段文本,而一个h1元素应该包含页面的最高层级标题,可据此区分它们。但spandiv没有天生的语义含义,它们可以被用于指定特定的区块或行列。

div就像一个段落,在视觉上于页面隔离出了文档的一部分,它可以包含段落、标题、表格等。span元素的作用是选择特定文本,以便于指定特殊样式,。这些特性由层叠样式表(CSS)控制。

spandiv

当它们被标记为具有classid属性时,spandiv元素可以表示通过HTML无法描述的信息的类型。例如,<div id="byline">Fred Smith</div>可能被用于指示一个文档中作者的名称,而<span class="date">10th Feb 2010</span>可能被用于具体指示一个日期。

有三个主要的理由使用具有classid属性的spandiv标签:

也许spandiv元素的最常见用法就是用以携带classid属性,结合CSS以应用布局,排版,颜色和其它表现性的属性于部分内容。CSS不只是应用于视觉上的样式:当由语音浏览器(英语:voice browser)说出时,CSS样式可以影响语速,重音,丰富度甚至于立体声。

任何HTML内的元素的属性,应该描述它们语义上的目的,而不仅仅是它们在某个特定介质中所想要的表现属性。例如,<span class="red small">password too short</span>在语义上毫无意义,然而<span class="warning">password too short</span>会有用的多。通过对CSS的正确使用,“warnings”可能被渲染为一个红色,小字体,但当被打印出时,它们可能被省略,因为此时对它们做任何事情都为时已晚。也许被说出时它们可以被给与额外的重音,而且在语速上有一个较小的减少。第二个例子是语义化的标记,而不仅是表现上的,但当结合CSS时满足了这两种目的。

这种对部分页面内容进行的分组和标签被引进可能仅仅为了使页面语义上更有意义。

万维网联盟(W3C)已在运行一个主要的语义网项目,旨在使整个web对今天和未来的信息系统越来越有用。

在页面设计过程中,设计者对内容中每一个元素和子元素的确切目的和意义,有一个清晰的想法。如果表达该含义的标准的HTML元素存在,它们就应该被使用。如果没有,就封装一个恰当classidspandiv。至少,这样做将帮助未来的编辑者维护这个标记。

微格式运动是建立于语义化class的想法之上的一次尝试。例如,微格式敏感软件可能会自动发现如<span class="tel">123-456-7890</span>的元素且允许对该电话号码的自动拨号。

一旦HTML或者XHTML的标记被送达网页访问者的客户端浏览器,就会有客户端代码将需要导航于网页的内部结构(或者文档对象模型)的机会。最常见的原因是页面随着产生动态行为的JavaScript。例如,如果把鼠标移至"Buy now"的超链接上,它就意味价格,JavaScript代码可以做到这个,但无论它在标记中的哪里,JavaScript需要标识价格元素。如下的标记将足够:<div id="price">$45.99</div>

另一个例子是Ajax编程技术,其中,例如,点击一个超链接也许会引发JavaScript代码检索文本寻找新的报价,以代替页面中现有的那个,而不用重新加载整个网页。当新的文本从服务器端返回,JavaScript必须标识页面上的准确的区域,用新的信息代替。

不那么常见,但作为改进对网页的访问,以及必须使用spandiv元素的classid属性以在页面内导航的代码的重要例子包括自动测试工具的使用。在动态产生HTML(Dynamic web page)上,这也许包括自动页面测试工具如HttpUnit(英语:HttpUnit),xUnit(英语:XUnit)家族成员之一,的使用,以及应用于表单驱动的网站时的负载或压力测试工具如Apache JMeter(英语:Apache JMeter)。

明智的使用div和span是HTML和XHTML标记中的一个重要部分。

例如,当结构上和语义上一系列项目需要一个外部的包围元素,和进一步为每一个项目提供的容器时,则在HTML中有多种多样可用的列表结构,其中之一可能比一个自制的divspan元素的混合更加可取。

示例:

【优】

<ul class="menu">  <li>Main page</li>  <li>Contents</li>  <li>Help</li></ul>

【劣】

相关

  • C08A·B·C·D·G·H·QI·J·L·M·N·P·R·S·VATC代码C08(钙通道阻断药)是解剖学治疗学及化学分类系统的一个药物分组,这是由世界卫生组织药物统计方法整合中心(The WHO Collab
  • 焚风焚风(德语:Föhn;英语:Föhn wind)或称火烧风,是出现在山脉背面的干热风,焚风往往以阵风形势出现,从山上沿山坡向下吹,是一种下坡风。世界各地几乎所有的山脉都有类似的风,在各个地方
  • 埃及总统阿拉伯埃及共和国总统是经选举产生的阿拉伯埃及共和国的国家元首。根据埃及宪法的相关规定,总统也是埃及武装力量的总司令和政府行政部门主管,任期四年,可以连任一次。现任总统
  • 张伯毅张伯毅(英语:Jeffrey P. Chang,1917年10月10日-2013年7月9日),美籍华裔病理学家、医学家。湖南汉寿人。早年就读于长沙明德中学。1941年毕业于位于成都的国立中央大学医学院(今第四
  • 维基语录维基语录(英语:Wikiquote)是维基媒体基金会下属的一个维基项目,属于维基百科的一个姊妹项目,同样使用MediaWiki软件。维基语录旨在创建一个各种语言的名人名言以及谚语等内容的自
  • 列支敦士登国家图书馆列支敦士登国家图书馆(德语:Liechtensteinische Landesbibliothek)是列支敦士登的国家图书馆,它也是该国的法定送存图书馆,建立于1961年,位于首都瓦都兹,由列支敦士登国家图书馆基
  • 江户开城江户开城是指日本江户时代末期(幕末)的庆应4年(1868年)的3至4月间(旧历),旧幕府(德川宗家)在经过与明治新政府军队(东征大总督府(日语:東征大総督))的一系列谈判后将江户移交给新政府的事
  • 蔡应麟蔡应麟(?-?),字子瑞,福建泉州府晋江县人,民籍,明朝政治人物。福建乡试第五十二名,万历十一年(1583年)癸未科会试第一百二十四名,登二甲第十八名进士。授兵部主事,后改任吏部主事。天启年间
  • 宝珣宝珣(1815年-1878年),字东山,室名味经书屋,,马佳氏,满洲镶黄旗人,清朝政治人物。道光丁酉科举人,辛丑科进士。中进士后钦点兵部主事,官至盛京户部侍郎,奉天府尹,内阁学士,盛京将军,兵部右侍
  • 广东新语《广东新语》是清代笔记,全书二十八卷,可视为一部描述广东的百科全书。作者在书中多号称“屈子”,“屈子曰”,成书于康熙十七年(1678年),是屈大均《屈沱五书》之一。康熙二十六年(16