關於網頁
通常主頁面都是 index.html 這個檔案，我們所看到的網頁是由 html 檔案經過瀏覽器渲染，才能看到網頁的畫面
HTML (HyperText Markup Language)
超文本標記語言，是標記語言，不是程式語言
常用標籤
<!DOCTYPE HTML> ：告訴瀏覽器要用 HTML 這個格式去 render
<head></head>：放網頁相關資訊 ex.<meta />、<title></title>
<body></body>：放網頁主要內容
<!-- -->：註解內容
<h1></h1>：h 代表 heading，有 h1 ~ h6，數字越大字越大
<p></p>：p 代表 paragraph，內文大小的字
<div></div>：div 代表 division，用來分組，會換行
<span></span>：行內分組，不換行
<img alt="" title="" src="" />：顯示圖片用，alt 放替代文字(無法顯示圖片時)，title 放圖片文字(游標移到圖片上時)，src 放圖片來源
<ul></ul>：unordered list，沒有排序的清單
<li></li>：list item，放在 ul 裡面，一個個項目
<ol></ol>：ordered list，有排序的清單，前面會有 1、2、3... 序號
<pre></pre>：preformated text，怎麼打就怎麼顯示，換行跟空格會被考慮進去
<br>：line break，換行
<table></table>：表格
<tr></tr>：table row，一列(橫)
<td></td>：table data，一排(直)
<th></th>：table head，第一列標題，字體會變粗
<a href="" target=""></a>：anchor，連結，可以連結到網頁外面或網頁裡面的東西，href 前者放網址，後者放 #id 名稱，target 連結開啟的方法(ex.新開分頁)
<iframe src="" width="" height=""></iframe>：遷入網頁，src 放網址，(ps. 不想讓別人遷入自己的網站可以加上 X-Frame-Options 的設定)
<form></form>：表單
<input type="" value="" name="" id=""/>：表單內的輸入框，type 有 text、password、email、submit、checkbox、radio、date，value 設值(ex. 男、女)，name 設類別(ex. gender)，id 作為 label 對應的地方
<label for=""></label>：指定對應的 input，for 裡面的值對應 input 裡的 id
Escape 跳脫
讓標籤原始呈現，而不會被當作標籤
<: <
>: >
&: &
Semantic elements 語意化元素
使用語意化元素可以讓機器或其他人更簡易的辨識內容
<main></main>：放主要內容
<nav></nav>：navigation，導覽列
<footer></footer>：網頁底部資訊
SEO (Search Engine Optimization)
搜尋引擎優化，幫助搜尋引擎理解你的網頁
工程師在 HTML 裡可以做的 SEO
<meta name="keywords" content="" />：網頁關鍵字
<meta name="description" content="" />：網頁簡介
<meta prooerty="og:title" content="" />：網頁標題
og，open graph protocol，告訴 facebook 要呈現的內容
<link rel="alternate" hreflang="en" href="">：有提供其語言的版本，告訴搜尋引擎是同一個頁面但不同語言
<meta property="al:ios:app_name" content="">
<meta property="al:ios:app_store_id" content="">
：告訴搜尋引擎有 app 版，會跳出詢問下載的東西
JSON-ld (JSON for Linking Data)：用一種格式化的方式告訴機器網頁有哪些內容，讓機器可以理解網頁裡面的內容
robots.txt：給網頁爬蟲看的檔案
- Disallow-不允許爬蟲爬的東西
- Allow-允許爬蟲爬的東西
- Sitemap.xml-網站地圖，告訴搜尋引擎有哪些網址要爬
CSS (Cascading Style Sheets)
階層樣式表
使用 CSS 的方法：
- 直接寫在元素上
- 寫在
<style></style>裡面 - 獨立在另一個檔案，再用 link 引入進來
Selector 選擇器
*：選擇所有
標籤名稱：選擇到是那個標籤名稱的東西
#id 名稱：選到對應 id 的東西
.class 名稱：選到對應 class 的東西
.class1.class2：選到同時有 class1 跟 class2 的東西
.class1 > .class2：選到 class1 底下一層的 class2
.class1 .class2：選到 class1 底下所有的 class2(下一層或下下一層都會被選)
.class1 + .class2：選到 class1 正旁邊的 class2
.class1 ~ .class2：選到 class1 旁邊所有的 class2
Pseudo-classes
:hover：移到元素上才會有效果
:nth-child()：()裡面是幾，就會選到第幾個元素
Pseudo-elements(偽元素)
::before：在元素前面用 css 加上東西
::after：在元素後面用 css 加上東西
可以用 attr() 把屬性的值取出來放到 content
// html
<div class="price" data-symbol="NTD">
<div class="price" data-symbol="SGD">
// css
.price::after {
content: attr(data-symbol);
}
Selector 權重
id > class > tag
!important 大於所有
| inline-style | id | class, pseudo class, attribute | tag |
|---|---|---|---|
| 0 (千位) | 0 (百位) | 0 (十位) | 0 (個位) |
裝飾
bakcground：背景顏色、圖片 + url("圖片來源")
border：內邊框，可以用 border 畫三角形
border-radius：圓角 50% 會變圓形
outline：外邊框
margin：外距
padding：內距
color：文字顏色
font-size：字體大小
font-weight：字的粗細
font-family：字體
letter-spacing：字距
line-height：行高，用 em 相對字體大小
text-align：字對齊方式
word-break：字句被切斷的方式
white-space：字句呈現的方式
overflow：設定超出的東西如何處理
text-overflow：針對文字的 overflow
transition：漸變效果，可以設定秒數、漸變方式
transform：變形、轉換，可以縮放、旋轉、位移(不會影響到其他元素)
Box Model 盒模型
元素的尺寸：內容 + padding + border，尺寸不會被限制
設定 box-sizing：bodrer-box，把尺寸限制，即便加了 border，整體尺寸也不會變
排版定位
Display-元素的排列方式
block： 自己一行，可以調寬高
inline： 可以並排，不可調寬高、上下的 margin、padding
inline-block：可以並排，可以調寬高、margin、padding
Position-元素定位方式
static：預設
relative：相對定位，相對自己原本的位置定位
abosolute：絕對定位，相對於某個參考點(往上層找第一個不是 static 的東西) 做定位
fixed：固定定位，對瀏覽器(實際是 viewport)做定位
sticky：網頁往上滑到某個點就會固定
z-index：元素前後位置
