Please enable JavaScript.
Coggle requires JavaScript to display documents.
HTML 基礎, 基本 HTML 文字, HTML表格 - Coggle Diagram
HTML 基礎
文件的架構
<html></html>
視為根元素（root element），
包含了所有顯示在這個頁面上的內容。
<head></head>
裡面放的是你想涵括的重要資訊，
但不會顯示於網頁瀏覽者眼前的。
例如，顯示於搜尋結果的關鍵字、
頁面說明、CSS、字元實體集...等。
<body></body>
包含了所有會顯示於網頁瀏覽者眼前的內容。
無論是文字、圖片、影面、互動遊戲...等。
<meta charset="utf-8">
這個元素指定了你的文件使用utf-8這種字元編碼， 建議大家都要使用這個元素，它會幫助你免去許多文字無法正確呈現的煩惱。
<title></title>
呈現於網頁瀏覽者眼前的網頁標題。
標記文字
段落(paragraph)
<p> (en-US) elements 包含文字段落，
在呈現一般文字時，這是我們最常用到的。
<p>This is a single paragraph</p>
文件標題 (heading)
HTML最多可以有六層的heading，
<h1> (en-US)–<h6> (en-US) ，
雖然通常我們只使用3至4層
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>
清單 (list)
<ul> (en-US)
無順序性清單（Unordered lists）
代表這些項目的順序改變，
不影響任何是，例如購物清單。
項目會包含在 <ul> (en-US) 裡面。
<ol> (en-US)
有順序性清單（Ordered lists）
代表這些項目的順序是有意義的，
例如食譜裡的製作步驟。
項目會包含在 <ol> (en-US) 裡面。
<li> (en-US) (list item)
<p>At Mozilla, we’re a global community of</p>
<ul>
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
<p>working together ... </p>
連結 (link)
<a> — a 代表了「anchor」
<a>Mozilla Manifesto</a>
<a href="">Mozilla Manifesto</a>
連接網址
<a href="https://www.mozilla.org/zh-TW/about/manifesto/">Mozilla Manifesto</a>
網址的開頭使用https:// 或 http:// （網路文字傳送標準的不同）
<p>起頭起尾
在元素名稱和屬性之間有一個空格
（如果有多個屬性，屬性之間也需要有空格）
屬性名稱後面接著等於符號「=」
屬性包在起始標籤裡面，如範例所示
圖片
圖片元素是直接把圖檔嵌在HTML網頁上，它是透過圖片來源（src ，source）這個屬性，提供了連到圖片檔案的路徑。
<img src="images/firefox-icon.png" alt="My test image">
巢狀元素
（nesting element）
每個元素都要在字母的前後
<strong>very</strong>
空元素
（empty elements)
<img src="images/firefox-icon.png" alt="My test image">
基本 HTML 文字
</h1>
六種標題元素
<h1> (en-US), <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US)，跟 <h6> (en-US). 每個元素分別代表著在文件中的不同層級; <h1> 代表主標題, <h2> 代表副標題, <h3> 代表更次級的副標題, 依此類推。
組合
在一個故事裡，
<h1> 將用來代表整個故事的標題，
<h2> 則代表每個章節的標題，
而<h3> 代表每個章節中的副標題，
依此類推下去。
<h1>The Crushing Bore</h1>
<p>By Chris Mills</p>
<h2>Chapter 1: The dark night</h2>
<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p>
<h2>Chapter 2: The eternal silence</h2>
<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p>
<h3>The specter speaks</h3>
<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>
</p>
在 HTML 裡，
每個段落都被包在
<p> (en-US) 元素中
<p>I am a paragraph, oh yes I am.</p>
HTML表格
列、格、標頭
<table></table>
<td>Hi, I'm your first cell.</td>
<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
放入HTML 中的 body
<td>
<tr>
<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
</tr>
要讓這個列停止增加並開始在下一列增加連續的儲存格的話，我們需要用 <tr> 元素
<th>
表格的標頭(table header) — 存在於一列或一欄開頭的特別儲存格並且定義了欄或列中內容的資料型態
<table>
<tr>
<td> </td>
<td>Knocky</td>
<td>Flor</td>
<td>Ella</td>
<td>Juan</td>
</tr>
<tr>
<td>Breed</td>
<td>Jack Russell</td>
<td>Poodle</td>
<td>Streetdog</td>
<td>Cocker Spaniel</td>
</tr>
<tr>
<td>Age</td>
<td>16</td>
<td>9</td>
<td>10</td>
<td>5</td>
</tr>
<tr>
<td>Owner</td>
<td>Mother-in-law</td>
<td>Me</td>
<td>Me</td>
<td>Sister-in-law</td>
</tr>
<tr>
<td>Eating Habits</td>
<td>Eats everyone's leftovers</td>
<td>Nibbles at food</td>
<td>Hearty eater</td>
<td>Will eat till he explodes</td>
</tr>
</table>
