技術類文章

金魚也能學會寫網頁-開始編寫HTML

一開始只是興趣使然，寫了一篇關於網頁框架的簡單筆記，不過幾經思考後，還是想把它寫成網頁相關的系列筆記，希望在忘了一些東西時，能有個地方可以快速找回記憶。☺️

💡 Hint: 以下筆記內容所使用的作業系統為"Windows 10"

📝 網頁中常出現的元素

元素 用途 分類
<h1>~</h1>…<h6>~</h6> 標題 block 類型元素
<p>~</p> 段落 block 類型元素
<ul>~</ul> 條列式列表(無序) block 類型元素
<ol>~</ol> 條列式列表(有序) block 類型元素
<dl>~</dl> 定義用列表 block 類型元素
<table>~</table> 表格 block 類型元素
<address>~</address> 聯絡方式 block 類型元素
<div>~</div> 任意範圍、群組化 block 類型元素
<a>~</a> 超連結 inline 類型元素
<em>~</em> 強調 inline 類型元素
<strong>~</strong> 重點標示 inline 類型元素
<img>~</img> 圖片 inline 類型元素
<span>~</span> 任意範圍 inline 類型元素

📓 inline元素 VS. block元素

HTML 文件主要是由元素的巢狀關係所構成，而在進行巢狀配置時，必須遵守 “文件內容模型 (Content Model)” 的規範，也就是哪一些元素可以被放在另一些元素之內。

HTML5 的文件內容模型有點複雜，所以可以依照舊版 HTML block元素/inline元素 的分類方式就好。

簡單來說，inline元素可以被放在block元素之內，但block元素不能被放在inline元素之內。

分類元素的方法很簡單，在瀏覽器上顯示時，會自動換行的就是block元素，反之則是inline元素。

📝 實際使用元素

📓 <hx>元素

  • 作用: 設定標題
  • 共有 h1~h6 六大階層，原則上不可以有階層亂跳的情況
  • 同一頁面中，只能有一個<h1></h1>標籤
1
2
3
4
5
6
<h1>h1 h1 h1</h1>
<h2>h2 h2 h2</h2>
<h3>h3 h3 h3</h3>
<h4>h4 h4 h4</h4>
<h5>h5 h5 h5</h5>
<h6>h6 h6 h6</h6>

📓 <p>元素

  • 作用: 標記段落
1
<p>段落</p>

📓 <ul>、<ol>元素

  • 作用: 製作條列式列表
  • 不可單獨使用，要搭配<li>元素使用
  • ul: 無編號、無順序
  • ol: 有編號、有順序
1
2
3
4
5
<ul>
    <li>項目內容</li>
    <li>項目內容</li>
    <li>項目內容</li>
</ul>

1
2
3
4
5
<ol>
    <li>項目內容</li>
    <li>項目內容</li>
    <li>項目內容</li>
</ol>

📓 <dl>元素

  • 作用: 製作定義用列表
  • 將標題項目和項目說明合成一組
  • 不可單獨使用，要搭配<dt></dt>標記標題、<dd></dd>進行項目說明，兩元素亦無法被單獨使用，需搭配成一組
1
2
3
4
5
6
<dl>
    <dt>項目標題</dt>
    <dd>項目說明</dd>
    <dt>項目標題</dt>
    <dd>項目說明</dd>
</dl>

📓 <div>元素

  • 作用: 將資料群組化
  • 內容群組化後，之後在CSS樣式設計上會比較方便
  • 透過 id 屬性，可以為群組命名
  • 可用 <section>元素取代
1
2
3
<div id='content'>
    <p>段落</p>
</div>

1
2
3
<section id='content'>
    <p>段落</p>
</section>

📝 巢狀元素與親子關係

整個 HTML 文件以 html 為最上層的父元素，由巢狀的親子關係所組成。外層元素稱為"父"元素，內層元素稱為"子元素"，更內層的稱為"孫"元素，而同一層的元素則互為"兄弟元素"。

  • 原始碼
1
2
3
4
5
6
7
8
9
10
<html>
    <body>
        <div>
            <h1><h1>
            <p>
                <a></a>
            </p>
        </div>
    </body>
</html>
  • 巢狀元素

  • 親子關係

分享到