7-4 HTML 和 Bootstrap (稍微了解即可)

一、HTML 基本概念

1. HTML非程式，只是一種寬鬆的標籤語法，寫錯也不會怎樣，為網頁的最基礎。
2. HTML標籤通常是一對的，如：<p>內容</p>或<div>文字</div>
3. HTML標籤也有單一的，如：<img src=”a.jpg”>
4. 標籤會有多個屬性，如：<a href=”a.html”>連結</a>，其中href即為屬性。
5. HTML標籤及屬性是不分大小寫的：<IMG>和<img>一樣，但建議採用小寫。
6. 可至張貼公告切換原始碼做線上練習

二、HTML常用基本標籤

1. 完整標籤列表：http://www.runoob.com/tags/html-reference.html
2. 常用基本標籤：

3. 標題	<h1></h1>（1~6）除了作為標題外，一般也拿來當作網站的架構或大綱。
   段落	<p></p>	區塊容器	<div></div>	行內容器	<span></span>
   換行	<br>	輸出標籤	<pre></pre>	引用	<blockquote></blockquote>
   水平線	<hr>	註釋標籤	<!--註釋-->

A、 項目符號或清單列表

有序列表	無序列表	定義列表
<ol> <li>項目1</li> <li>項目2</li> </ol>	<ul> <li>項目1</li> <li>項目2</li> </ul>	<dl> <dt>項目名稱</dt> <dd>項目說明</dd> </dl>

1. 其中有序列表有以下屬性：reversed（倒排）、start（起始編號）、type（編號類型：1、A、a、I、i ）
2. 常被拿來做選單、列表、縮略圖...等用途。

B、 表格標籤<table>

<table> <tr><th>表頭1</th><th>表頭2</th></tr> <tr><td>表格1</td><td>表格2</td></tr> </table>

<table>屬性：border（框寬度） <th>及<td>屬性：colspan（水平合併）、rowspan（垂直合併）、headers（定義表頭關聯） <th>還支援scope（定義表頭）屬性

1. 更複雜的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、 <tfoot> 以及 <tbody> 標籤。

C、 圖片<img src="圖片" alt="說明">

1. 屬性：src（圖片位置）、alt（取代文字）、width（寬）、height（高）、ismap（地圖對應，需有連結）、usemap（使用圖片地圖，需對應map）
2. 網頁圖片支援三種規格jpg（全彩、壓縮、相片）、png（全彩、透明）、gif（256色、透明背景、動畫）
3. 相對路徑（相對於自身html檔）較常用，絕對路徑通常為：http://網址/圖檔.jpg

D、 連結標籤<a href="連結位置">顯示文字</a>

1. 連結位置可以是網頁、圖片、網站、文件、檔案、FTP站、Email...等。
2. 屬性：連結位置href、錨點名稱name、框架位置target（_blank開新視窗、_parent上個框架、_self原視窗、_top跳出框架）。
3. 錨點名稱用法
4. (1) 先命名：<a name="top">某元素</a>
5. (2) 連結寫法：<a href="#top">回頂端</a>或<a href="index.html#top">回頂端</a>
6. Email連結：<a href="mailto:主信箱?cc=副本&bcc=密件副本&subject=主題&body=內容">連結呈現文字</a>，若非得加入空白不可，請用「%20」取代之。

E、 HTML的顏色碼

1. HTML顏色是用十六進位（00~FF）的紅、綠、藍（RGB）之組合而成的。 例如：#FF0000為紅色，#808080為灰色，#000000為黑色，#FFFFFF為白色
2. 也可以直接寫顏色名，例如：red、gray、black、white等

F、 HTML長度單位

1. 長度不用寫單位，一般預設就是px（像素）。例如 <table width="640">
2. 也可以用百分比表示，例如：<table width="100%">
                      

三、Bootstrap

1. Bootstrap 元件