2013年11月5日 星期二

深入淺出HTML&CSS

摘錄些我覺得有趣的東西


void element (空元件)
空元件不包含任何內容, 也就是標籤與結束標籤之間沒有東西, 例如 <br></br>
而不包含內容的空元件 <br></br> 這樣寫十分的愚蠢
所以簡寫 <br> , 空元件還是會有屬性(Attributes)的

下面是完整的HTML中空元件列表
  • area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr


Block Elements (區塊元件)
區塊元件通常前後都隱含有換行, 例如<h3><p>都是區塊元件


Inline Elements (行內元件)
行內元件通常都插入在其他標簽之中, 不會包含換行, 例如<a>就是行內元件


線上驗證工具, html, css


class 之於 # , id 之於 .

設定body的font-size作為網頁預設字型大小, 其餘使用百分比相對大小來作改變
CSS線上字型解決方案: @font-face
於CSS修改字型, 最好於font-family最後插入泛用字型, 如serif, sans-serif, 作為替代方案


Box Model 這網站應該解釋得不錯, 這觀念挺重要的, iOS開發上也有機會用到


CSS有個media屬性, 可以判別裝置的寬.高.方向, 來使用不同的樣式表
例如下面這個範例, 螢幕寬度小於等於800會載入下面這範例的CSS表
<link type="text/css" rel="stylesheet" href="xxx.css" media="screen and (max-device-width: 800px)">
測試了一下, 他是看你當前螢幕(裝置)的解析度, 而不是瀏覽器視窗大小


<span>與<div>基本上是一樣的東西, 差別在於上面介紹的
<div> 是區塊元件
<span> 是行內元件





暫時到這邊 後面有點難懂我需要些時間去消化測試 等第二次再翻實在補充

沒有留言:

張貼留言