育將電腦工作室 - 線上書籍

網頁設計與雲端應用
=========

### 一、HTML

1. HyperText Markup Language：超文本標記語言，通過定義的內容，例如，標題，段落或圖像給人的內容結構和含義。用來處理網站的架構。
2. 非程式，只是一種寬鬆的標籤語法，寫錯也不會怎樣，為網頁的最基礎。
3. HTML的檔案為純文字檔，副檔名為.html，瀏覽器即可讀取HTML檔。
4. 廣義論及HTML5時，實際指的是HTML、CSS和JavaScript在內的技術組合。
5. 各瀏覽器HTML5支援：<http://www.findmebyip.com/litmus/> 或 [http://html5test.com](http://html5test.com/)
6. HTML標籤及屬性是不分大小寫的： `<IMG>和<img> `一樣，但建議採用小寫。
7. 英文手冊：[http://www.w3schools.com/html/html5\_intro.asp](http://www.w3schools.com/html/html5_intro.asp)
8. 中文手冊：<http://www.w3school.com.cn/tags/index.asp>
9. <span style="font-size:16px;">HTML：<span style="color:#FF0000;">由 elements(元素), tags(標籤) , attributes(屬性) 組成</span></span>  
   ![](https://www.ugm.com.tw/uploads/tad_book3/image/10502/hhjh/4/1_html.jpg)
10. 元素：h1~h6、div、p、a .....等
11. 標籤：<>，使用<>將元素與屬素包裝起來。通常由開始標籤到結束標籤，例 <div>.....</div>，但也自閉標籤如 <img> <meta>.....
12. 屬性：屬性是用來提供有關元素的附加信息的屬性。最常見的屬性包括id屬性，它標識的元素; 的class屬性，該屬性分類的元素; src屬性，該屬性指定嵌入內容的來源; 及href屬性，它提供了一個超鏈接引用到一個鏈接資源。
 
### 二、CSS

1. Cascading Style Sheets：串接樣式表，是創造的樣式與內容使用的外觀展現語言，例如，字體或顏色。用來處理網站的外觀。
2. CSS可以自定 CLASS(.) 與 ID(#) 兩種選擇器。
3. CLASS 可以重複 ， ID則是唯一
4. CSS 套用方式  
   行內套用 (Inline)  
   嵌入套用 (Embed)  
   外部連接套用 (External Link)  
   匯入套用 (Import)
 
### 三、JavaScript

1. JavaScript 是用於客戶端的腳本語言，通常給 HTML 網頁增加動態效果
2. 直譯式程式語言
 
### 四、Github 操作 [<span class="fa fa-link" style="color:rgb(0, 0, 0);"></span>](https://www.ugm.com.tw/modules/tad_book3/page.php?tbdsn=537)

### 五、HTML元素

1. <h1>~<h6>標題：HTML5不再支援 align屬性，如要設定對齊，可用css語法調整，每個頁面只能有一個<h1>，這樣可以加強網頁的seo
2. <div>區域</div>：容器，可將許多html 元素包在一起
3. <p>段落</p>：一般用來顯示文章內容，在下方會多一個空白列 sublime：<span style="color:#FF0000;">lorem 、tab、shift+tab</span>
4. <br />：換行 XHTML規定 單一標籤必須加上「 / 」，故建議使用「<br />」
5. <pre>程式碼</pre>
6. <hr />：分隔線
7. 
8. <b>粗體</b>、<u>底線</u>、<i>斜體</i>
9. <sup>上標</sup>、<sub>下標</sub>
10. <table>表格</table>
11. <a>連結</a>
12. <img />：圖片
13. <span>區域</span>
 
### 六、HTML屬性

1. <img src='圖片位置' alt='圖片說明' class='img-responsive' id='slider\_img' style='width:100px;height:100px;'/>
2. 屬性以 「鍵/值」出現，如 src='圖片位置'
3. 通用屬性：  
   class：規定元素的類名  
   id：規定元素唯一的ID  
   style：規定元素的樣式  
   title：規定元素的額外訊息
 
### 七、HTML格式

```
<pre class="brush:as3;">
	<b>粗體</b>
	<big>大號字</big>
	<em>著重文字</em>
	<i>斜體字</i>
	<small>小號字</small>
	<strong>加重語氣</strong>
	<sub>下標字</sub>
	<sup>上標字</sup>
	<ins>插入字</ins>
	<del>刪除字</del>
```

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown