2.10 内联元素


2.10 内联元素





  
HTML



<h1>内联元素</h1>
<h2>斜体</h2>
<code>&lt;em&gt;     </code>  <em>强调</em>                    <br />
<code>&lt;cite&gt;   </code>  <cite>引用</cite>                  <br />
<code>&lt;var&gt;    </code>  <var>计算机变量</var>           <br />
<code>&lt;dfn&gt;    </code>  <dfn>定义</dfn>                  <br />
 <h2>加粗</h2>
<code>&lt;strong&gt; </code>  <strong>着重强调</strong>   <br />
 <h2>等宽(Monospace)</h2>
<code>&lt;code&gt;   </code>  <code>计算机代码</code>             <br />
<code>&lt;kbd&gt;    </code>  <kbd>键盘按键</kbd>                   <br />
<code>&lt;samp&gt;   </code>  <samp>计算机示例输出</samp>    <br />

<h2>下划线</h2>
<code>&lt;a&gt;      </code>  <a href="#">链接</a>                      <br />
<code>&lt;acronym&gt; </code>  <acronym title="a" >
首字母缩写(acronym)</acronym> <br />
<code>&lt;abbr&gt;   </code>  <abbr title="a" >简写
(abbreviation)</abbr>   <br />
 <h2>垂直排列</h2>
<code>&lt;sup&gt;    </code>  上标<sup>1</sup>                <br />
<code>&lt;sub&gt;    </code>  下标<sub>1</sub>                  <br />



内联元素


















问题


需要为文本赋予明确的含义,还想为文本添加样式以反映其内在的含义。


解决方案


HTML提供了内联元素用于识别文本的含义、控制文本排列的顺序、向文档插入额外的内容,例如图片、控制元素。内联元素本身就是内容。


内联元素和文本的组合是非常合乎情理的。一些人把这称为混合内容,但是我更倾向于把混合内容定义为块状元素、文本和内联元素之间的相互组合——而这是不可取的。我所定义的内容是指文本与内联元素的组合,这是应当提倡的。它很明确地把内容与结构相分离,并且强调了应当永远把内联元素和文本放在块状元素之中——而不是块状元素之间。


我把内联元素划分为4类:语义元素、排列顺序元素、可替代元素、控制元素语义元素semantic element)用于识别内容的含义。排列顺序元素flow element)控制元素之间的排列顺序,例如插入一个断行符。可替代元素replaced element)可用对象进行替代,例如图片。控制元素control element)是一些可用于输入数据的对象,例如文本框。


HTML赋予每个语义化的内联元素一种默认的样式,用于强调其中的文本有某种特殊的含义。举个例子,<code>会被解析为等宽字体。可以用CSS覆盖这些默认的样式。


细节


3种语义化的内联元素用于定义内容的相对重要性。它们的重要性依次增大:<span><em><strong><span>是一般的,具有中等重要性。搜索引擎使用<em><strong>来对内容进行排序。


我把剩下的语义化内联元素按它们所包含的内容(例如短语、单词、字符)将其分类。短语内联元素包括<a><cite><code><kbd><samp><var>。单词内联元素包括<acronym><abbr><dfn>。字符内联元素包括<sub><sup>


排列控制flow-control元素控制文档的排列顺序,例如<br />插入了一个断行符,<bdo>可改变排列的方向。


可替代元素可用外部内容来替代,例如<img>,可用图片或者<object>来替代它,<object>可用视频、flash电影和声音文件来替换。


控制元素是表单中用于数据录入的内联元素,例如<input><textarea><select><button>


默认样式


HTML为每个语义化的内联元素都赋予了默认的样式。<span>没有默认样式和任何含义,所以可把它用于任何目的。<strong>默认是粗体显示。下面几个元素默认都是斜体:<em><dfn><cite><var>。接下来几个元素的默认样式为等宽字体:<code><kbd><samp>。默认为下划线的有:<a><acronym><abbr>IE 6不支持<abbr>


相关


HTML结构,第10111214章中的所有设计模式。




标签:
Warning: Invalid argument supplied for foreach() in C:\zl\webjia\view.php on line 50
友情链接
轻松育儿世界奇观
苏ICP备16066217号-2