網頁設計第6課:學習更多元素
你有沒有獨立完成過一些網頁?如果還沒有,請看下面的例子:</html> <head><title>我的網站</title> </head><body><h1>標題</h1><p>一些文字。。。< /p><h2>子標題</h2><p>一些文字。。。。</p> </body> </html>
看完了,然後呢?現在要學習七個新元素。
前面學過,你可以通過用<b>和</b>把文本括起來,Web Design把文本設為粗體;類似地,你可以通過用<i>和</i>把文本括起來,把文本設為斜體。沒錯,這裡的“i”是“斜體(italic)”的意思。
例1:<i>這句話應顯示為斜體</i>該例在瀏覽器中將顯示如下:
這句話應顯示為斜體 同樣,你可以用small標籤把文本設為小字體:
例2:<small>這句話應顯示為小字體</small>該例在瀏覽器中將顯示如下:
這句話應顯示為小字體 我可以同時應用多個標籤嗎?你可以同時應用多個標籤,只要你能避免標籤交錯起來。最好通過一個網站設計例子來說明:
例3:
如果你希望一段文本即是粗體又是斜體,你可以這樣做:<b><i>既是粗體又是斜體</i></b>注意不能這樣:<b><i>既是粗體又是斜體</b></i>二者區別在於:在前一個例子中,首先打開的標籤最後關閉。這樣可以避免混淆。
學習更多元素!正如第3課中提到的,有些元素是沒有尾標籤(end tag)的。這種元素被稱作空元素(empty element),它們不與特定文本段落相關。一個例子是<br />,它的作用是插入一個換行符。
例4:寫一些文字<br />重起一行再寫一些文字該例在瀏覽器中將顯示如下:
寫一些文字重起一行再寫一些文字 注意上面的空元素<br />:它沒有尾標籤,並且在首標籤名稱的後面加了空格和斜槓。
另一個空元素是<hr />,網頁寄存的作用是畫一條水平線。這裡的“hr”是“水平線(horizontal rule)”的意思。
例5:<hr />該例在瀏覽器中將顯示如下:--------------------------------------------------------------------------------
HTML中的空元素還包括ul、ol和li,這三個元素用於製作列表。
ul代表“無序列表(unordered list)”,它的作用是為每個列表項顯示一個粗點。ol代表“有序列表(ordered list)”,它的作用是顯示每個列表項的序號。用<li>元素把多個列表項組織為一個列表,其中的li代表“列表項(list item)。感覺有些迷糊?那麼,請看下面的例子:
例7:<ul><li>一個列表項</li><li>另一個列表項</li></ul>該例在瀏覽器中將顯示如下:
一個列表項
另一個列表項
例8:<ol><li>第一個列表項</li><li>第二個列表項</li></ol>
該例在瀏覽器中將顯示如下:
第一個列表項
第二個列表項
喲!就這些啊?嗯,這一課就學這麼多。再次重申,請反覆實驗本課所學的元素,並在製作自己的網頁時使用它們。<i>斜體</i><small>小字體</small><br /> 換行<hr /> 水平線<ul>無序列表</ul><ol>有序列表</ol><li>列表項< /li>
留言列表
