Html 基礎一
Html 簡介¶
HTML(Hyper Text Markup Language)是用於創建網頁的標準標記語言，可以創建網站，也廣汎的用在開發網頁APP、行動裝置APP(混合應用程式框架)及桌面APP。HTML由一系列的元素(elements)組成，其中元素包含了標籤(tags)和內容(content)，標籤描述了網頁的結構，以告訴瀏覽器如何顯示內容，下列爲一簡單的HTML文件及在瀏覽器瀏覽的結果：
<!DOCTYPE html>
<html>
<head>
<title>網頁的標題</title>
</head>
<body>
網頁内容
</body>
</html>
HTML5是HTML最新的版本，由全球資訊網協會(W3C)於2014年10月制定完成，廣義的 HTML5 實際包含：
- HTML：創建網頁的標記語言(Markup Language)，用來告訴瀏覽器如何呈現網頁。
- CSS：串接樣式表(Cascading Style Sheets)，用來為 HTML 添加樣式(字型、間距和顏色等)的網頁語言。
- JavaScript(JS)：是一種可以用在動態網頁的直譯式程式語言。隨著最新版的HTML5及CSS3的推行，JS還可用於遊戲、桌機和行動APP的開發，以及在伺服器端執行(如Node.js)。
網頁瀏覽器¶
HTML文件主要在Web瀏覽器(Chrome, Edge, Firefox, Safari)上執行，瀏覽器載入HTML文件後，解譯其標籤以顯示内容。
網頁開發工具¶
- 記事本或TextEdit：HTML文件為純文字，一般文字編輯器即可編輯。
- Notepad++：NotePad++為在視窗環境下可取代記事本的編輯軟體，除了支援網頁原始碼高亮顯示，並提供指令提示功能，方便編輯網頁。
- Visual Studio Code：是微軟公司的程式開發套件，功能強大且輕量型的程式碼編輯器。
- Visual Studio：是微軟公司的程式開發套件，具有完整的開發工具集，但其功能過於龐雜，對於初學者需要一些時間才能上手。
簡易的網頁文件編輯器¶
- Jupter Notebook
- Jupyter Notebook
Jupter Notebook 是一個方便同時用來編輯HTML及Markdown文件的編輯器，同時又具有Python等程式語言的編輯及執行環境，具有高互動，且容易呈現視覺化的執行結果。 請參閲相關課程：
- Jupyter Notebook
- Microsoft Azure Notebooks
Microsoft Azure Notebooks則是Jupter Notebook加上雲端硬碟的功能，讓使用者可以隨時隨地的編輯HTML文件。
HTML標籤¶
HTML 包含了一系列的元素，而元素包含了標籤(tags)與內容(content)，HTML標籤是用尖括號括起來的元素名稱：
<標籤>內容...</標籤>
- HTML標籤通常成對出現，例如
<p></p>，結束標籤在標籤名稱之前插入了正斜杠 - 少部分標籤無結束標籤，例如
<hr>, <br />
我們可以用標籤來控制網頁呈現的樣貌，例如字體大小、設置超連結等。舉例來說，以下這個句子：
我的網頁内容
在前後加上段落標籤<p>，就變成一個段落元素：
<p>我的網頁内容</p>
另外再以斜體標籤<i>包覆：
<p><i>我的網頁内容</i></p>
就變成具斜體的段落元素了
我的網頁内容
HTML5的基本結構¶
一個基本的HTML5文檔包含：
- <!DOCTYPE html>：聲明這個文件是HTML5
- <html></html>：HTML頁面的根元素
- <head></head>：包含關於該網頁文件的信息，但不會在網頁顯示。一般 head 區塊會包含下列項目：
- <meta charset="utf-8">：字元採用 utf-8 編碼
- <meta name="viewport"：設定手機解析度
- <title></title>：指定該網頁的標題
- <style></style>：用來撰寫串接樣式碼
- <script></script>：用來撰寫 JS 程式碼 該區塊可以還放在<head>或<body>，其差異在載入的優先順序，在<head>會先載入。
- <body></body>：包含該網頁可見的內容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>網頁的標題</title>
<style>
/* 樣式寫在這裏 */
</style>
<script>
/* JavaScript寫在這裏 */
</script>
</head>
<body>
<!-- Html 寫在這裏 -->
</body>
</html>
字元編碼與手機解析度¶
文字的呈現會有字元編碼的問題，不正確的編碼設定，可能會造成亂碼的問題。網頁普遍採用的字元編碼為 Unicode(萬國碼、國際碼)，目前是全球資訊網的最主要的編碼形式，因此網頁應當透過<meta>元素加上utf-8字元編碼元素，以避免文字無法正確呈現。
近年來智慧型手機的普及化，透過手機來瀏覽網頁的比例越來越高，因此在設計網頁時，當透過 viewport 來調整適合手機瀏覽器的螢幕解析度，以避免螢幕字體不易閲讀的問題，viewport 屬性簡單來説：
- width=device-width：設定寬度自動符合手機螢幕寬度，以達到手機預設最佳解析度。
- initial-scale=1：設定手機螢幕的初始縮放比例為1倍。
註解語法的差異¶
請注意HTML、CSS及JavaScript 註解語法的差異
- Html 註解：<!-- 註解内容 -->
- CSS 註解： / 註解内容 /
- JavaScript 單行註解： // 註解内容
- JavaScript 多行註解： / 註解内容 /
Html 基本元素¶
標題¶
HTML標題分六層次，使用<h1> to <h6>標記定義，本文件的標題便是以這六層次來標註，而文件目錄結構也會以標題的層次來產生：
<h1>標題 1</h1>
<h2>標題 2</h2>
<h3>標題 3</h3>
段落¶
瀏覽器會在段落前後自動添加一些邊距，段落採用
標籤定義。
<p>段落一</p>
<p>段落二</p>
<p>這是帶有換行<br>及 空 格 的段落。</p>
<pre>標籤¶
<pre> 標籤內的文本會保留原始的空格及換行：
<!-- 段落内未帶有 `<br>` 標籤，將不會換行 -->
<p>
段落 一
段落 二
</p>
<!-- 改爲 `<pre>` 標籤，
將會保留原始的空格及換行 -->
<pre>
段落 一
段落 二
</pre>
文字格式¶
格式化元素目的在顯示特殊類型的文字，常用的格式化元素包含：
- <b>：粗體
- <strong>：重要文字
- <i>：斜體文字
- <em>：強調文字
- <mark>：標記文字
- <small>：小文字
- <del>：刪除的文字
- <sub>：下標文字
- <sup>：上標文字
<b>粗體文字</b>
<strong>重要文字</strong>
<i>斜體文字</i>
<em>強調文字</em>
<sub>下標文字</sub>
<sup>上標文字</sup>
<del>刪除文字</del>
<mark>標記文字</mark>
無編號清單
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
有編號清單
<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
區塊引言¶
<blockquote> 標籤定義一段文字屬於引用。通常透過縮排來呈現。引言的URL來源可設定在cite屬性。
<blockquote cite="http://app.ewin.tw">
<p>這是取自於 樂活學程式 的引言。</p>
</blockquote>
超鏈結¶
超連結讓用戶透過單擊方式轉換到其他頁面，HTML超鏈結採用<a>標記定義，連結的目的地定義在 href 屬性中。
絕對網址與相對網址¶
- 在 href 屬性指定完整的網址稱爲絕對網址，例如
- 若指向同一網站的鏈結，則網域名稱可以省略，稱爲相對網址，例如：index.php
<!-- 絕對網址 -->
<a href="http://python.ewin.tw/">樂活學Python</a>
<br>
<!-- 相對網址(指向同一網站的鏈結)-->
<a href="index.php">樂活學Python</a>
連結的目標屬性¶
target 屬性可以指定在何處打開連結的文件，該屬性具有以下值之一：
| 屬性 | 説明 |
|---|---|
| _blank | 在新的瀏覽器視窗開啓 |
| _self | 在目前的視窗開啓(預設值) |
| _parent | 在父框架中開啓 |
| _top | 在整個視窗中開啓，當被鎖定在框架中時，可用來突破框架 |
| 指定框架名稱 | 在指定的命名框架(例如 _new)中開啓 |
<!-- 在目前的視窗開啓(target="_self") -->
<a href="http://python.ewin.tw/">樂活學Python</a>
<!-- 在新的瀏覽器視窗開啓文件 -->
<a href="http://python.ewin.tw/" target="_blank">樂活學Python</a>
<!-- 在最頂層的視窗開啓文件(會突破框架限制) -->
<a href="http://python.ewin.tw/" target="_top">樂活學Python</a>
<!-- 在 name='_new' 的框架開啓 -->
<a href="http://python.ewin.tw/" target="_new">樂活學Python</a>
圖像¶
HTML圖像使用 <img> 標籤定義。
<img src="http://ewin.biz/app/logo.png" alt="樂活學程式" width="60" height="60">
圖像超連結¶
<a href="http://python.ewin.tw/" target="_new">
<img src="http://ewin.biz/app/logo.png" alt="樂活學Python" width="60" height="60">
</a>
<table>
<tr>
<th>姓名</th>
<th>身高</th>
</tr>
<tr>
<td>小明</td>
<td>170</td>
</tr>
<tr>
<td>小王</td>
<td>160</td>
</tr>
</table>
表格樣式控制¶
表格預設顯示為無邊框，可以透過CSS樣式的border屬性來設置邊框
<style>
table, th, td {
/* 1px 寬度的黑線 */
border: 1px solid black;
}
table {
/* 將表格邊框折疊為單個邊框 */
border-collapse: collapse;
}
</style>
框架 Iframe¶
iframe 可以在網頁內嵌入其他網頁，使用<iframe>標籤定義，主要的屬性包含：
- src：指定嵌入式框架頁面的URL網址。
- height：iframe的高度。
- width：iframe的寬度。
預設下，高度和寬度以像素(px)為單位。
<iframe src="http://python.ewin.tw" height="150" width="400"></iframe>
iframe寬度與高度也可以透過CSS樣式來設置，例如下列樣式設置了在手機上 iframe 可以占滿螢幕版面，其中因瀏覽器高度是無限大，所以高度100%是沒有作用，應當設定為100vh(即View Height 100%，也就是螢幕可視高度的100%)：
<style>
iframe {
width: 100%;
height: 100vh;
margin: 0px;
}
</style>
<iframe src="http://python.ewin.tw"></iframe>