HTML的學習課程-第一章 架構的認識

前面我們講過了HTML的基本架構,現在我們來說明一下其他HTML的標籤,來美化我們的網頁.

首先我們來認識一下標籤的類別,依標籤的用途來分,可以分為「內容顯示標籤」和「結構標籤」

「內容顯示標籤」是用來改變內容的顯示方法,比如說字要大一點,背景要改變顏色,這邊我要斷行等等.

以下為幾個「內容顯示標籤」的例子

<h1></h1>標題顯示

<h1>這是h1的顯示</h1>

以標題方式顯示內容,HTML會顯示如下,是不是明顯放大呢??

這是h1的顯示

<p></p>來進行文章的分段

 <p>這是一段很長的文章</p><p>長到無法分段落</p><p>很難閱讀</p>

我們透過使用<p></p>段落標籤來替文章進行分段,顯示結果如下是不是比較容易閱讀了呢??

這是一段很長的文章

長到無法分段落

很難閱讀

<br>來進行文章的換行

這是一段很長的文章<br>長到無法分段落<br>很難閱讀

使用<br>可以讓文章在需要的地方換到下一行,它和<p></p>不同的是,換行中間的間隔比較小,顯示結果如下

這是一段很長的文章
長到無法分段落
很難閱讀

那「結構標籤」則是用來建立表格,區塊,清單樣式等容器,再將內容放到容器內顯示給使用者,以下為幾個「結構標籤」的例子

<table>用來建立表格

<table border="1">
    <tr>
            <td>內容1</td>
            <td>內容2</td>
    </tr>
    <tr>
            <td>內容3</td>
            <td>內容4</td>
    </tr>
</table>

上面的HTML程式會建立一個只有二行二列的表格,表格內放內容,顯示結果如下

內容1 內容2
內容3 內容4
<div>用來建立區塊

<div style="background: red; height:100px; width:100px;">內容</div>

使用<div></div>建立一個區塊,並將背景設從紅色,裡面放內容

內容
<ul><li>建立清單列表

<ul>
    <li>清單一</li>
    <li>清單二</li>
</ul>

使用<ul><li></li></ul>來建立清單,顯示內容如下

 

  • 清單一
  • 清單二

這些標籤只是HTML的一小部分,而且每一個標籤還有屬性可以創造更多的變化,只要我們善用這些標籤和屬性,就可以讓你的網頁有各式各樣的模樣,接下來我們會針對常用的標籤及屬性來進行介紹.

HTML的學習課程-第三章 表格元素

arrow
arrow
    文章標籤
    HTML 標籤類別 學習課程
    全站熱搜

    痞客興 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄