默认情况下,HTML文档的格式与文档内容在浏览器窗口中显示的格式是不相关的,例如:浏览器会将连在一起的几个空白字符折算为一个空格,并且会忽略换行符。HTML提供了组织内容的方式,将显示的内容分段,预先编排内容的格式等。
<body> <h1>Antoni Gaudí</h1> <p>Many tourists are drawn to Barcelona to see Antoni Gaudí's incredible architecture.</p> <p>Barcelona celebrated the 150th anniversary of Gaudí's birth in 2002.</p> </body>可以为段落添加样式,包括字体、字号、颜色等。
<p>Add this to your style sheet if you want to display a dotted border underneath the <code>abbr</code> element whenever it has a <code>title</code> attribute.</p> <pre> <code> abbr[title] { border-bottom: 1px dotted #000; } </code> </pre>
<blockquote cite="http://en.wikipedia.org/wiki/Apple">The apple forms a tree that is small and deciduous, ......</blockquote>注意浏览器会忽略blockquote元素中的内容的格式,默认对blockquote文本进行缩进。要在引用中建立结构,可以使用一些组织元素,例如p或hr。
<p>She tried again, this time in French: <q lang="fr">Avez-vous lu le livre <cite lang="en">High Tide in Tucson</cite> de Kingsolver? C'est inspirational.</q></p>
<blockquote cite="http://en.wikipedia.org/wiki/Apple"> 主题1 <hr> 主题2 <hr> ...... </blockquote>上例在blockquote元素中加入了一些hr元素,形成一定的结构。
<body> I like apples and oranges. I also like: <ol> <li>bananas</li> <li>mangoes</li> <li>cherries</li> <li>plums</li> <li>peaches</li> <li>grapes</li> </ol> You can see other fruits I like <a href="fruitlist.html">here</a> </body>ol元素支持属性如下:
<body> I like apples and oranges. I also like: <ul> <li>bananas</li> <li>mangoes</li> <li>cherries</li> <li>plums</li> <li>peaches</li> <li>grapes</li> </ul> You can see other fruits I like <a href="fruitlist.html">here</a> </body>无序列表的每个项目前都会显示一个项目符号,符号的样式可以用CSS属性list-style-type控制。
<body> I like apples and oranges. I also like: <ol> <li>bananas</li> <li value="4">mangoes</li> <li>cherries</li> <li value="7">plums</li> <li>peaches</li> <li>grapes</li> </ol> You can see other fruits I like <a href="fruitlist.html">here</a> </body>
<body> I like apples and oranges. I also like: <dl> <dt>Apple</dt> <dd>The apple is the pomaceous fruit of the apple tree</dd> <dd><i>Malus domestica</i></dd> <dt>Banana</dt> <dd>The banana is the parthenocarpic fruit of the banana tree</dd> <dd><i>Musa acuminata</i></dd> <dt>Cherry</dt> <dd>The cherry is the stone fruit of the genus <i>Prunus</i></dd> </dl> You can see other fruits I like <a href="fruitlist.html">here</a>. </body>
<head> ...... <style> body{ counter-reset: OuterItemCount 5 InnerItemCount; } #outerlist > li:before { content: counter(OuterItemCount)". "; counter-increment: OuterItemCount 2; } ul.innerlist > li:before { content: counter(InnerItemCount, lower-alpha) ". "; counter-increment: InnerItemCount; } </style> </head> <body> I like apples and oranges. I also like: <ul id="outerlist" style="list-style-type: none"> <li>bananas</li> <li>mangoes, including:</li> <ul class="innerlist"> <li>Haden mangoes</li> <li>Keitt mangoes</li> <li>Kent mangoes</li> </ul> <li>cherries</li> <li>plums, including: <ul class="innerlist"> <li>Elephant Heart plums</li> <li>Stanley plums</li> <li>Seneca plums</li> </ul> </li> <li>peaches</li> <li>grapes</li> </ul> You can see other fruits I like <a href="fruitlist.html">here</a>. </body>
<body> I like apples and oranges. <figure> <figcaption>Listing 23. Using the code element</figcaption> <code>var fruits = ["apples", "oranges", "mangoes", "cherries"];<br>document.writen("I like " + fruits.length + " fruits"); </code> </figure> You can see other fruits I like <a href="fruitlist.html">here</a>. </body>figure元素生成了一个将code元素裹在其中的插图,并用figcaption元素为其添加了一个标题。注意figcaption元素必须是figure元素的第一个或最后一个子元素。