HTML

Hyper Text Markup language：超文本標記語言
不是一種程式語言

• <!DOCTYPE>
  DOCTYPE 是 document type 的縮寫，告訴瀏覽器用該格式 render 網頁
• backslash：反斜線
  
  

loreum ipsum：假文字

div：division，span：跨度

• 分部、分組
  #### div：會換行
  #### span：不會換行
  
  

<img />

• title=""，當滑鼠 hover 時會出現文字。
• alt=""，替代文字
  
  

<pre>：可保留完整格式

preformatted text。

<br>

line break。

<table>, <tr>, <td>, <th>

// <td> table cell
// <th> table head

<table>
  <tr>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

<a>

<a> anchor 錨點
href： hypertext reference

• 不開新分頁
  <a href="" target="_self"></a>
• 開新分頁
  <a href="" target="_blank"></a>

連到頁面內的內容

設定 <p id="p1">p1 段落</p>。

<a href="#p1">點我連到 p1 段落</a>

iframe：嵌入網頁

<iframe href="" width="" height="" />

input

想改表單的字

<form>
  <input type="date" />
  <input type="submit" value="可改送出按鈕所顯示的字">
</form>

SEO search engine optimaztion

搜尋引擎優化

<meta name="keywords" content="">
<meta name="description" content="">

og tag open graph protocol

主要 fb 在用

fb og 偵錯網址

https://developers.facebook.com/tools/debug/?locale=zh_TW

可檢查網頁在 fb 上看起來像什麼樣子

• #### JSON - ld：json for linking data
  底下有 key 是 AggregateRating (評論摘錄)，可主動告訴 google 在它們的網站上評分多少

• robot.txt：給網頁爬蟲看的檔案
  sitemap.xml 網站的地圖，把網站中的網址放上去，搜尋引擎就知道該爬哪些網站。
  
  

escape：跳脫，把標籤當內容

& 變成 &
< 變成 &lt;
> 變成 &gt;

CSS selector

selector

選底下的元素

> 選底下一層的元素
空白則是選底下所有元素

選旁邊的元素

+ 選一個旁邊的元素
~ 選所有旁邊的元素

pseudo classes

• 先判斷順序，再判斷標籤或屬性名稱

:fist-child
:last-child
:nth-child

pseudo element

• ::before

  .wrapper::before {
  content: '$';
  }
  

• ::after

  .wrapper::after {
  content: 'NTD';
  }
  

<div class="wrapper" data-symbol="NTD">
  1000
</div>

把屬性的東西取出來
<style>
.wrapper::after {
  content: attr(data-symbol);
}
</style>

class 的權重

• !important
  最高權重
• id > class > 標籤
  愈詳細的贏
• 按權重比較

CSS 的裝飾

work-break

// 將單字從中間截斷
word-break: break-all;

// 依單字的總長度分割
word-break: break-word;

white-space

// 將文字放在同一行，不要包起來
white-space: nowrap;

overflow

// 超出時藏起來
over-flow: hidden;

// 超出時滾動
overflow: scroll;

text-overflow

// 超出時文字變成省略號 ...
// 同時需要 overflow: hidden 與 white-space: nowrap; 屬性
text-overflow: ellipsis;

transform

// 變成兩倍大小
transform: scale(2);

// 將元素置中
#box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
transform: scale(2);

box-sizing

// 就是預設要自己算寬高加總的屬性
box-sizing: content-box;

// 寬高多少即是多少
box-sizing: border-box;