五倍紅寶石 HTML課

課程詳細:https://5xruby.tw/talks/css-html-2016-3

這門課的老師是Amos,我覺得他對html和css的了解算是非常深入,滿推薦他的

1. 課程一開始是在講html tag的語意,用了解語意的方式去記憶,除了不容易忘記,在編寫網頁的時候也能挑出最符合情境的tag使用

要做好SEO就和無障礙設計一樣,盲人看不到畫面,只能靠閱讀器判斷內容,搜尋引擎也是一樣的

盡量讓網頁的語意和輔助標籤完整,就不用太擔心SEO的問題

2. 在標籤的使用上不能亂包,例如用<p>去包<div>,在Chrome的parser裡面他會認為你寫錯了,然後幫你修正而產生非預期的結果,造成css失效的問題

3. 再來就是切版,規劃版面大小的時候要計算pixel數,如果超過大小就會跑版

主要會影響版面大小的東西是width、margin、padding、border

width不用說,就是內容物要用的大小

border和padding會把元素往外展開,造成他佔位的空間變大

margin則是將其他元素推開,一樣會改變元素們在整個容器裡面可用的大小,但本身佔用的空間沒變

4. 元素在畫面上有分block和inline兩種類型

block的元素會直接用margin佔掉右邊整塊區域,並強迫下一個元素換行

inline則是類似<a>、<img>或<span>這種可以以一行呈現的東西

inline的高度不太能調整,通常會用line-height去操作

5. 排版的時候可以透過float或是display:inline-block將子容器進行橫向排列

float要避免後面的元素浮上來被擋住可以用clear:both,將左右的float消除

inline-block在使用的時候要注意,將block轉換成inline時,會繼承inline的特性,而出現所謂的4px space

6. html在比較後面的元素,render時處在比較高的位置,可以蓋過前面的東西

7. position有四種static、absolute、relative、fix

static就是你沒去設定他時的預設值

relative則是會以原本的位置當基準進行移動,原本所佔的位置則保留下來

absolute首先會往上層容器開始找,先找到任一容器不是position:static時,以他為基準進行移動,此時元素原來佔的位置會消失,由後面的元素替補

fixed直接跳到最上層,用視窗作為他的基準來移動

留言

粗體斜體刪除線連結引用圖片程式碼

注意:您的電子信箱將不會被公開,且網站連結不會被搜尋引擎採計

{124} {123} {122} {121} {120} {119} {118} {117} {116} {115} {114} {113} {112} {111} {100} {025} {024} {023} {022} {021} {020} {019} {018} {017} {016} {015} {014} {013} {012} {011} {010} {009} {008} {007} {006} {005} {004} {003} {002} {001}