note HTML基礎
keep reading...
PART1. HTML5
HTML5是HTML最新的修訂版本，2014年10月由W3C完成標準制定。目標是取代1999年所制定的HTML 4.01和XHTML 1.0標準，以期能在網際網路應用迅速發展的時候，使網路標準達到符合當代的網路需求。
通常在HTML標籤代碼的第一行看到<!doctype html>。它告訴你的瀏覽器，你的代碼是HTML標籤代碼。但是它並不會對你的頁面效果和內容做任何更改。
https://zh.wikipedia.org/wiki/HTML5 ----
PART2. 主架構
幾乎所有的HTML文檔都會包含三個基本標籤：html, head和body。
html 開始標籤通常放置在代碼文檔中的第二行，doctype標籤之後。結束標籤通常放置在代碼文檔中的最后一行。
一個最簡單的HTML文檔至少可以被分為兩個部分，head部分和body部分。在head部分當中包含的元素不能被顯示在頁面中，例如title和link標籤。body部分包含了文字，圖片，以及視頻等等。
*需要comment時，作<!-- 跟 --> 中間的內容就會隱藏
元素:
paragraph
<p>文本
</p>結束文本
heading
<h1></h1>
<h2></h2>
title(顯示在瀏覽器的頁面標籤)
<title></title>
| <hr> | 代表章節、文章或其他長內容中段落之間的分隔符。 | |
| <pre> | 代表其內容已經預先排版過，格式應當保留。 | |
| <blockquote> | 代表引用自其他來源的內容。 | |
| <ol> | 定義一個有序列表。 | |
| <ul> | 定義一個無序列表。 | |
| <li> | 定義列表中的一個列表項。 | |
| <dl> | 定義一個定義列表（一系列術語和其定義）。 | |
| <dt> | 代表一個由下一個<dd>定義的術語。 | |
| <dd> | 代表出現在它之前術語的定義。 | |
|
代表一個和文檔有關的圖例。 | |
|
代表一個圖例的說明。 | |
| <div> | 代表一個通用的容器，沒有特殊含義。 |
直接更改段落中的文字顏色
style="color: blue"
----
PART3. 插入一些簡單的東西
插入圖片(可以是儲存位置或網址)
<img src="/images/logo.png">
src stand for "source"可以再加入 width(如width="50"、height="100"等)
其他屬性:http://www.asjh.tn.edu.tw/xupload/learning/html/htmltag/img.htm
插入youtube(iframe元素是inline frame的簡稱)
<iframe width="280" height="200" src="https://www.youtube.com/................" frameborder="0" allowfullscreen>您所使用的瀏覽器不支援</iframe>
其他屬性:http://www.wibibi.com/info.php?tid=366
插入文本超連結
<a href="http://en.wikipedia.org"> 維基百科超連結 </a>
<a href="page2.html">第二頁</a>
<a href="/001/001.html"> 不同目錄的網頁 </a>
<a href="/">回到首頁</a>
----
PART4. 簡單CSS與樣式設計
連結CSS格式
<link rel="stylesheet" href="/css/wiki.css">
使用link連結到javascript或css
rel is short for relation. It specifies the relation between the tag and href.href stands for hypertext reference. It's the source of the file used by the tag.CSS基礎(可以利用 .css檔宣告，或是直接在文本內使用<style></style>)
CSS是用{ }區隔區間，並使用:及;符號。
HTML是指完整頁面的設定，另外可再透過不同區間(如p、h1等)設定額外規則。
html{
background-image: url(/images/textures/light10.png);
background-color: lightblue;
color:navy
}
h1{
color:red
}
h2{
color:orange
}
*也可以直接在文本中使用<style></style>，就透過不用CSS(把CSS內容放進style即可)
----
PART5. Class與ID 介紹
Class的用法
<style>
.blue-text {
color: blue;
}
</style>
文中便可使用blue-text，注意宣告時要在前面加. 套入樣式時則不需要.
<h2 class="blue-text">I LOVE YOU</h2>
ID設定的用法(與class相同概念，不過是反向，先在文本中的區間設定ID，再回朔至CSS中設定)
<style>
#SET {
color: blue;
}
</style>
#SET {
color: blue;
}
</style>
<p id="SET">this is blue</p>
字體相關:
font-sizefont-family
*字體格式可以取自外部，googleapis是個好網站
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
*字體格式可以排多個字體，防止部分字元該字體不支援font-family:a,b,c...
-----
PART6. 互動表單
PART6. 互動表單
互動表單使用方法(form)，直接使用html進行表單設計
<input type="text">
<form action="/submit-photo">
<input type="text" placeholder="photo URL">
<button type="submit">submit</button>
</form>
會增加一個可輸入文字的框框與submit按鈕
此外input type尚有radio、checkbox等選擇
----
PART7. 其他
PART7. 其他
活用範例1:利用nesting的技巧，將圖片結合超連結
<a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera. "></a>
活用範例2:unordered list，意即bullet item。如果改成<ol></ol>就變成1.2.3....的ordered list
<ul>
<li>milk</li>
<li>cheese</li>
</ul>
<li>milk</li>
<li>cheese</li>
</ul>
