整理HTML與CSS基本概念
ＨＴＭＬ
HTML(HyperText Markup Language)，主要用來建立網頁的標準語言，在整個網頁上負責架構跟內容。
CSS(Cascading Style Sheets)，樣式表，用來調整HTML顯示方式。
HTML的標籤本身具有一些屬性，這些屬性可以透過CSS進行調整，進而改變網頁的佈局與呈現方式。
[常用標籤]
<div>
目前網頁的切版都是用div乘載html當中的其他元素，若沒有內容時則不會佔據寬跟高。
<h1> ~ <h6>
網頁的標題或是用來表示文章標題。
<p>
用來表示整篇文章，像是簡介或者是一段描述。
<p>內容....</p>
<ul>/<ol>/<li>
li :list
ul: unorder list
ol: order list
清單項目，li會跟<ul>或<ol>一起使用，經過css調整通常會用來做網頁的導覽列 (nav)、側邊欄或是社群媒體的項目。<li>當中通常會包含<a>連結，讓user可點選。
<a＞anchor
連結，透過屬性[href="url"]可連結至目的網站，也可以設定成[href="#id"]會在當頁面尋找該id，且移動至此。
<a href="https://google.com" target="_blank">google</a>
<a href="mailto:xxxxx@gmail.com">contact</a>
<img>image
圖片，透過屬性[src="url"]可顯示指定路徑的照片，其url可已是資料夾路徑或是網路連結，alt則是當圖片連結失效時會出現的文字。img標籤不需要有</img>當結束標籤。
<img src="url" alt="測試">
<hr>分隔線，預設的分隔線會佔據一整畫面，通常會用CSS調整一下樣式。本身是區塊元素，依預設border有寬度。
block元素：<div>、＜h1>~<h6>、<p>、<form>、<ul>、<ol>、<hr>
inline元素：<span>、<a>、<img>
參考：http://www.w3schools.com/html/html_blocks.asp
[id]
可在網頁上的標籤加上id屬性，但在同一網頁上只能出現一個id名稱。通常用來作架構的命名。
[流動]
網頁基本預設的流動規則是由左至右，由上至下。
[Box Model]
https://www.w3.org/TR/css3-box/
CSS
[選擇器]
- 直接選
- 選標籤，tag{...}，tag為標籤名稱，例如：p{...}
- 選id，#id{}，id名稱，在一個畫面上id是不會重複的，通常用來大區塊的分類。
- 選class，.classname{}，class名稱，通常會重複使用的會取成class
- 階層(css只能往下or同一層找)
- 選子孫，#nav li{...}
- 選孩子，ul>li{...}
- 選兄弟姊妹，#target~p{...}，該選擇器後面的只要是<p>都會被選到
- 選後面一個，#target+p{...}，該選擇器後面的一個才會被選到
- 選屬性
[target="_blank"] - 選次序
- li:first-child{...}，選第一個li，注意到li跟first-child沒有空格，代表是li這一層的次序。
- li:last-child{...}，選最後一個li
- li:nth-child(2n+1)，選奇數，nth-child指定次序
- li:nth-child(2n)，選偶數
Layout
[display屬性]
每一個html標籤都有一個預設的display屬性，通常是block(區塊元素)或者是inline(行內元素)。
- block：會從新的一行開始且在占據網頁的一整行，具自己個寬高。
- inline：無法設定寬高，依照包含的內容先是寬度。
- inline-block：可設定寬高，但又不占據一整行。
- none：不顯示，可用來跟使用者互動。
[定位]
- position，設定區塊的座標方式。如下[position]
- left/top/right/bottom，設定區塊的左/上/右/下的座標。
- z-index，設定區塊的重疊時的顯示優先權。
- overflow，當內容超出區塊範圍時候的顯示方式。
[position]
static:預設，各元素不用設定即是static，遵守網頁規則由左至右，由上至下。
relative:依照原來存在位置進行調整。
absolute:會找上一層(找不到再往上找)有誰設定過position，依照這個父元素進行位置調整，如果都沒有那就依body進行調整。
fixed:依目前看得網頁進行定位。
若是要對齊容器內（div）的對位置，採用absolute比較方便。不用特別計算跟父容器的距離。
[float]
設定區塊間的流動方式，像是doc當中的文繞圖。
left:往網頁左邊流動。
right:往網頁右邊流動。
clear:both ：清除流動關係。
[區塊]
- width，設定區塊寬度。width:1080px;
- height，設定區塊高度。height:500px;
- float，設定區塊流動方向。float:left;
- clear，解除區塊流動。
- margin，設定區塊外間距離。如下[margin]。
- padding，設定區塊內距。同margin。
[margin設定]
- margin:10px 20px 30px 40px; 依序為上 右 下 左
- margin:10xp 20px 30px; 上 右 下 ?-->找對面的來補,所以是找右的設定來補
- margin:10px 20px; 依序為上下 左右
- margin:10px; 全都一樣
[背景]
- background-color，背景顏色
- background-image，背景圖案
- background-attachment，背景是否固定不動
- background-repeat，背景是否重複
- background-position，背景位置
[邊框]
- border-color，四邊的顏色
- border-style，四邊的樣式
- border-width，四邊的寬度
- border-top-color，上邊框的顏色，top可以置換成為right、bottom、left。
- border-top-style，上邊框的樣式，top可以置換成為right、bottom、left。
- border-top-width，上邊框的寬度，top可以置換成為right、bottom、left。
- border-top，上邊框的顏色、樣式與寬度。top可以置換成為right、bottom、left。
- border，寬度、樣式、顏色。
[文字]
- font-family，設定字型
- font-size，字體大小
- color，字體顏色
- line-height，文字行高
- font-weight，文字粗體
- text-decoration，文字底線
- word-spacing，間距
- letter-spacing，間距
- text-aling，水平對齊方向
- text-indent，字首縮排