iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 5
1

上一篇我們說到元素的特性,介紹了inline元素跟block元素。今天就來介紹:

  • 替換元素與非替換元素
  • 文檔的層級概念

替換元素&非替換元素

替換元素

這類元素,它的內容是透過引入外部資源(一串UR或是檔案路徑或是指定屬性類別)來顯示的。

比方像<img>元素,上一篇有提到,必須從屬性值指定,才能夠引入一張圖片來顯示在網頁上。

<img src="./image/pig.png">

如此一來,就可以看到這隻可愛的豬豬了。

*替換元素的特性,與排版也有很大的關係,將在CSS的視覺格式化模型時,好好談談,目前先知道它的基礎概念就好。

非替換元素

在元素內輸入的內容,可以直接顯現在網頁上,叫做非替換元素,例如<html>、<head>、<body>、<h1>、<p>、<div>、<span>、<em>、<strong>。

輸入內容直接呈現:

<h1>我是標題,是block元素也是非替換元素</h1>
<p>我是段落,是block元素也是非替換元素</p>
<div>我是block元素也是非替換元素</div>
<span>我是inline元素也是非替換元素</span>
<a href="##">我是連結,是inline元素也是非替換元素</a>

HTML文檔層級概念

文檔的層級結構很重要,關乎到CSS選擇器的使用,到後來套Javascript的功能,或是更後來串後端給的API,都關乎到HTML檔的層級結構。
從下列這圖我們可以看從最上頭開始,從我們打開文字編輯器新增一個檔案,就產生了文檔(Document),寫入的第一個元素,叫根元素<html>,從第一個元素長下去的都是第一個元素的後代元素。

層層疊的元素,在文檔裡看起來會像這樣(寫code應縮排,層級清楚,才具備可讀性):

<html>
    <head>
        <title>網頁名稱</title>
    </head>
    <body>
        <section>
            <p>第一個段落</p>
            <p>第二個段落</p>
        </section>
    </body>
</html>

上列元素關係說明:

  • <html>是根元素,<head>跟<body>是他們的子元素。
  • <head>跟<body>是兄弟元素。
  • <section>是<body>的子元素,是<html>的後代元素。
  • <p>是<section>的子元素,是<body>、<html>的後代元素。
  • <p>元素內的"第一個段落"、"第二個段落"是內容(content)。

我們可以拿google首頁來做簡單的練習,看著畫面來寫出Html架構:

還不認識元素沒關係,但可以先知道基礎文檔結構會長這樣:

<header>
    <nav>
        <a>Gmail</a>
        <a>圖片</a>
        <button>下拉選單</button>
        <a href="#account"><img src="account.png"></a>
    </nav>
</header>

<main>
    <a href="#google"><img src="google.png"></a>
    <input type="search">
    <div>
        <button>Google搜尋</button>
        <button>好手氣</button>
    </div>
</main>

<footer>
    <div>
        <span>台灣</span>
    </div>
    <div>
        <nav>
            <a src="#ad">廣告</a>
            <a src="#bussiness">商業</a>
            <a src="#manual">Google完全手冊</a>
            <a src="#how_it_work">搜尋運作方式</a>
        </nav>
        <nav>
            <a src="#privacy">隱私權</a>
            <a src="#terms_of_service">服務條款</a>
            <a src="#preference">設定</a>
        </nav>
    </div>
</footer>

今天的筆記到此告一段落~/images/emoticon/emoticon41.gif

*有任何錯誤或描述不夠精準之處,歡迎指教,非常感謝。


上一篇
Day4 動手寫HTML之前(上)
下一篇
Day6 動手寫HTML(1)
系列文
從門外漢到前端新手30

尚未有邦友留言

立即登入留言