May 27

[原]HTML的行内和块容器 晴

linuxing , 13:20 , 编程 » (X)HTML , 评论(0) , 引用(0) , 阅读(13154) , Via 本站原创 | |
    在HTML语言中,<span>标记用于定义一个行内的文本容器;段落则是用<p>标记来定义的。p元素时一个块级元素,在不同段落的文本之间会以一个空行来分隔。如果要将文档中的多个段落设置成相同的对齐方式,可以使用<div>标记,其称为分区标记,指定一个呈现HTML内容的通用块级容器。

一、<span>标记
定义一个行内的文本容器,其语法如下:

<span id="标识符" class="CSS类样式" style="CSS样式">文本内容</span>

<span>标记定义了一个通用行内元素,它不需要另起一行呈现。<span>标记本身没有任何结构含义,纯粹是为了应用样式。当其他行内元素都不适合时,可以考虑使用<span>标记。<span>标记有一个重要而实用的特性,即它什么事情也不会做,其唯一的作用就是围绕HTML代码中的文本或其他页面元素,以便可以为它们指定CSS样式。

<span>标记不仅在CSS样式表的应用方面特别有用,在Ajax网页设计中也经常用到。在HTML网页中用<span>标记定义一个行内元素并为其设置标记符id,编写JavaScript脚本时,可以利用id来引用此页面元素,并通过innerHTML属性动态设置其显示内容,通过className属性或style属性动态设置其显示格式,以达到页面局部刷新的目的。

二、<p>标记
段落用<p>标记来定义,语法格式如下:

<p align="对齐方式">段落文本内容</p>

除了通用属性之外,p元素具有align属性,用于设置段落的对齐方式,取值可以是left(左对齐,默认值)、center(居中)、right(右对齐)、justify(两端对齐)。
假如只是想让文本换到下一行显示,而不希望在网页中产生新的段落,则应在文本内容后面添加一个换行标记<br />,语法格式如下:

文本内容<br />

在Dreamweaver中,每当在文档窗口的设计视图中按Enter键时,都会在HTML源代码中添加一个<p>标记,从而产生一个新的段落,而且会自动在该段落中包含一个不换行空格(&nbsp)。如果只是换行,可以按下Shift+Enter组合键,这将在网页中生成一个换行标记(<br />)。
※ 使用Ctrl+Shift+Space可产生一个不换行空格(&nbsp)。

三、<div>标记
如果要将文档中的多个段落设置成相同的对齐方式,可以通过分别设置每个<p>标记的align属性来实现,但这样比较麻烦。
在这种情况下,可以将这些段落置于<div>和</div>标记之间组成一个块级容器,然后使用align属性来统一设置所有段落的对齐方式。
<div>标记也称为分区标记,其语法格式为:

<div id="标识符" align="对齐方式" class="CSS类样式" style="CSS样式">
要控制的文档内容
</div>

<div>标记指定一个呈现HTML内容的通用块级容器,呈现时需要另起一行,其内容可以是行内元素和块元素。使用<div>标记实现页面布局的优点在于,加载内容后能够立即显示出来,而使用表格则要等到全部加载完毕才能显示出来。

比较<span>、<div>和<p>标记
<span>标记定义的是行内元素,呈现时不需要另起一行。<div>和<p>定义的都是块级元素,呈现时需要另起一行;两个<div>元素之间不用空行来分隔,两个<p>元素或<p>与<div>元素之间通过一个空行来分隔。

不过,行内元素和块级元素也不是一成不变的。通过应用CSS规则“display:block;”,可以把<span>元素转换为块级元素;通过应用CSS规则“display:inline;”可以把<div>元素和<p>元素转换为行内元素;通过应用CSS规则“margin-top:0px;margin-bottom:0px”还可以取消两个段落之间的空行。
Tags:
发表评论
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
打开HTML
打开UBB
打开表情
隐藏
记住我
昵称   密码   游客无需密码
网址   电邮   [注册]