HTML5+CSS3上課筆記－網站、工具

W3C SCHOOL

http://www.w3schools.com/

http://www.w3schools.com/html/html_form_attributes.asp (html5 input新屬性)

測試瀏覽器支援度

https://html5test.com

http://fmbip.com/

測試語法 在各瀏覽器的各版本是否支援 或是可否用前綴字使其支援

http://caniuse.com/

查看瀏覽器市佔率

http://gs.statcounter.com/

icon產生(但 現在可用png圖檔就好 不定一定要ico)

http://www.favicon.cc/

px和em的換算

http://pxtoem.com/

自動產生css前綴子

http://cssprefixer.appspot.com/

(會自動判斷 哪些屬性需要加哪些browser用到的前綴子)

hex和rgb的轉換

http://hex.colorrrs.com/

css.的generator

http://css3generator.com/

圖片邊框(border-img)產生器

http://border-image.com/

(上傳圖 調整用的位子)

線上壓縮png
https://tinypng.com/

css3產生漸層的語法

http://www.colorzilla.com/gradient-editor/

符號編碼轉換 (ex >→ &# 或在css用\0000 在js用 \u0000)

https://www.evotech.net/articles/testjsentities.html

google fonts

https://www.google.com/fonts

Font Awesome(作者將各種常用圖示做成字型)

http://fortawesome.github.io/Font-Awesome/

文字編輯器

Brackets (可直接不存檔在chrom直接預覽網頁)

推薦外掛：Color Picker、emmet

Color Picker可以 option+command+K 選擇顏色(可包含透明度)

emmt可以

1.輸入「div>p>a」按tab後 自動產生「<div><p><a></a></p></div>」

2.輸入「ul>li*3」按tab後 自動產生「<ul><li></li><li></li><li></li><ul>」

3.對著class name按command E 直接編輯其CSS

Sublime

 有各種套件可下載

 安裝package control (https://packagecontrol.io/installation)

View→Show Console

把網站的程式碼貼上 enter 重新啟動

之後安裝各套件方式：

1.打開Package Control (Crrl +shift +p 或 command + shift +p)

2.輸入install package→enter

3.輸入套件名→enter

推薦套件：emmet、colorpicker、html boilerplate、cssformat、livereload(要撘配chrome套件)