WebDev Party 現代化網站前端基礎 Html 5 CSS (上)
今天很開心可以去參加OSSF舉辦的WebDev Party 現代化網站前端基礎，雖說是基礎課程，但講師大澤木小鐵把網頁很多ㄇㄟ ㄇㄟ角角說得非常仔細。
html
一開始大約簡介網頁發展史，接下來是XHTML宣告三種模式：
在html5，省略很多宣告<!DOCTYPE HTML>只要下這行指令就可以了
<html lang="en">
網頁內容編碼設定
<meta charset="utf-8" / >
header用以組合網頁頂端的內容
< header >
< hgroub >
< h1 >
網頁內容大標
< /h1 >
< h2 >
網頁內容副標對h1在加以描述
< h2 >
< /hgroub >
< p >
hgroup 簡介，描述（h1、h2更深一層的敘述）
< /p >
< /header >
hgroup 則是用來組合所有標題標籤
nav 就被定義用作導航
< header >
< h1 >
h1 大標
< /h1 >
< p >
對 h1描述
< /p >
< /header >
< hgroup >
< h1 >
h1 大標
< /h1 >
< p >
對 h1 段落描述
< /p >
< /hgroup >
< nav >
< ul >
< li >
Link
< /li >
< li >
Link
< /li >
< li >
Link
< /li >
< li >
Link
< /li >
< /ul >
< /nav >
article 文章，可以包覆N個section
網頁表達資料通常都是 < h1 > ~ < h6 >標題，但在html 5用的是 < HTML5 – section > 來區分章節與段落(不是拿來取代wrapper)，內容可以不用完整，可以是節錄某些內容，一個網頁也可以有兩個大標，層次不同，範例：
< h1 >
h1 大標
< /h1 >
< section >
< h1 >
段落 h1 大標
< /h1 >
<p >
測試中，測試中，測試中，測試中，測試中，測試中，測試中，測試中，測試中，測試中，測試中，測試中，測試中，測試中，測試中，測試中，測試中，測試中，測試中
< /p >
< /section >
outliner 網站分析網頁階層是否有符合html 5 規範，下面則是outliner外掛
< aside > 側邊攔，附屬於這個網站某個區塊，跟網站主題無關可以放廣告
表單checkbox有布林屬性，在html5 true代表預設值，false 不是預設值
< required > 代表表單欄位值一定要輸入
< i > ，< b > 在html5強調加重語氣，讓某些特定瀏覽器，可以辨別（視障人士）
ARIA，針對html控制項，讓某些特定瀏覽器，可以辨別（視障人士）
查詢HTML5、CSS、SVG、JS API....tag等適用的瀏覽器
IE某些元素不支援html 5，可用html5shivvu; 相容html 5 tag
若要偵測瀏覽器特性，建議使用
Modernizr對於（廣義的） HTML5 各種規格支援的程度，並且在 html tag(標籤)中加入適當的 class 來表現偵測後的結果。
新的html 5 tag，沒有包含任何樣式，可以配合outliner分析網頁是否有符合html 5階層
initializr針對前端快速產生html 5頁面(phototype)，預先產生跨瀏覽器樣板，預先載入目前常用的技術
css
html 5連結css樣式表格式：
< link rel="stylesheet" type="text/css" href="css位置.css" >
rel ： 載入樣式表
href ： css路徑（位置）
type ： html 5可以省略，因為目前預設的樣式是CSS，若以後有新的 stylesheet ，就必須定義。
在css樣式表盡量少用 ＠import 會造成時間延遲，在chrome 按F12，選擇Network計算載入時間
css有分幾種選擇器：
- 基本選擇器
- CSS屬性選擇器（CSS Attribute Selectors）會依據定義tag套用css，IE 6不支援
- 偽類選擇器
css越後面寫的css越優先套用，css套用範圍越小，權重越高， Specificity Calculator計算權重，數字越高，權重越高
在debug時，可使用Firebug Lite for Google Chrome™ 或者是 Firebug integrates with Firefox，在chrome 按F12，選擇Elements，在右邊css box，越上面代表權重越重，越下面代表權重越少
CSS 排版觀念：Box Model網頁內文指的是content，針對 < width >
以前IE Content 會包含padding與border
，若希望瀏覽器可以包含padding與border，可使用
box-sizing:border-box;
content-box | border-box | inherit
float可製作出文繞圖效果
overflow:hidden;可讓float父元素的高度撐開，有空間往上移，無空間會往下掉
IE 6讓float間距乘2倍解法
圖片取代標題文字會有效能問題，text-indent:-99999px;
改用
text-indent:100%; 文字縮排
white-space:nowrap; 不要折行
overflow:hidden; 滿出去，不要顯示
讓wraper網頁置中對齊
position:relative; 若實做下拉式選單，要在wraper裡下絕對定位，下拉式選單才會相依於wraper
margin:0 auto; 0代表上面位置、下面位置，auto代表左邊位置、右邊位置，將上、下面位置設0，上、下面不會有任何空隙
width:960px; 設定網頁大小為960px
css 字型
@font-face{
font-family:FontName（定義字型）;
src:url(font-url);
}
body{
font-family:FontName（定義字型）;
}
inline-block把行內元素變成區塊元素，從IE 7開始支援，字句沒有照著inline-block走，會造成字與字之間的空隙，解法如下：
-->< div >< div >
瀏覽器都有設定屬於自己的樣式，可使用css reset或是yahoo自己開發的Yahoo! recommends YUI 3.清除瀏覽器樣式
鐵神大大提醒盡量不要使用css hack，以免日後IE改版，又把以前的tag吃進來
以下是鐵神大大提供幾個實用的工具：
- 編輯器
- 微軟網路硬碟
- The Web Developer Wonderland存檔即時更新網頁頁面
- Bootstrap//格線、icon font
- 今日 Google 塗鴉：CSS Sprites 的原理
- Google Analytics (分析)
- css 範例
- Conditional Comments [if IE] : IE 專用 (IE only) 條件式 HTML 註解的語法
鐵神github投影片、相關範例
參考資料：
很棒的整理！
回覆刪除PS: [微軟網路硬碟] 的連結壞掉囉 ^^
我修改好了!!謝謝你~
回覆刪除讀完功力大增!
回覆刪除作者已經移除這則留言。
回覆刪除有幫助到你就好，這是鐵神的錄影檔，你可以去觀看
回覆刪除http://goo.gl/PMeUg
：）