書籍之 Head First HTML與CSS
看到同事寫web伺服器,決心也要學習一下,技多不壓身,先從html和css入門吧。
1、Web語言:開始瞭解HTML1
開發工具:Sublime Text (外掛Zen Coding + View In Browser),
快速執行:首選項->快捷鍵->使用者
{ "keys": ["f2"], "command": "open_in_browser" },
]
學習之初:只用notepad,之後快速開發用這個Sublime。
元素= 開始標記+內容+結束標記
2.認識HTML中的“HT”:深入理解超文字
1)".." :回上一級目錄
2)對於檔案html和圖片資源,份資料夾管理。
3)<em> 設定為斜體
3.構建網頁:構建模組
1)<q>:短引用,文字前後加 " 引號,用於段落裡新增引用,作為其中的一部分。
2)<blockquote>:長引用,建立一個單獨的文字塊,將文字稍微縮排。用於一段或者多段文字,自成一個新段落。
3)<br> 換行
4)塊元素:單獨顯示,前後有換行的效果,特立獨行 例如:h1,h2,...,h6,p,blockquote
內聯元素:在段落中,隨波逐流 例如:q,a,em
5)元素分為兩大類:
void元素(空元素):沒有實際內容的元素,目的減少HTML標記數量。不需要</>,例如:<br>,<img>
正常元素:例如<p></p> ,<h1> ,<a>
6)列表:
<li>:列表元素,包含在列表,作為一個列表項
<ol>:包圍列表項,作為有序列表顯示
<ul>:包圍列表項,作為無序列表顯示
注意:<ul>和<ol>必須包含<li>使用
定義列表:以 <dl> 標籤開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
4 Web鎮之旅:開始連結
1)域名:網站唯一的名字 eg: www.starbuzzcoffee.com (www.之後的都是域名)
域名可以用於多個網站,域名唯一,但是網站名字不唯一。 eg:corpo.starbuzzcoffee.com ,empl.starbuzzcoffee.com
2)HTTP:超文字傳輸協議, HyperText Transfer Protocol
URL:統一資源定位符,Uniform Resource Locator,
例如:http://www.starbuzz.com/index.html
協議 (http/FTP 告訴遊覽器使用什麼方式獲取資源)+ 網站 (伺服器名+域名組成,告訴遊覽器從什麼計算機獲取資源)+ 絕對路徑(告訴伺服器要找那個網頁)
3)在寫專案時候,儘量用相對路徑。
4)target="_blank" 跳轉到新標籤頁(並且100%有效,根據遊覽器的設定)
5 認識媒體:給網頁新增影象
1)web最常用的圖片格式:JPEG,PNG,GIF
JPEG:照片和複雜影象。不支援動畫,有損格式
PNG或GIF:單色影象、logo和幾何圖形,無損格式。PNG更適合透明和多種顏色
GIF:是唯一支援動畫的圖片格式
2)<img src=""> src屬性:制定圖片的位置 img是void元素。
屬性:
alt:當遊覽器無法正常顯示,會描述這個影象的一些文字
width:影象的寬度
height:影象的高度
3)HTML:用於提供結構 CSS:用來提供表現
4)網頁顯示的圖片都分略縮圖和原圖,顯示網頁一般都是略縮圖,點選後的網址顯示大圖。
<a href="html/seattle_video_med.html">
<img src="thumbnails/seattle_video_med.jpg" alt="My video iPod in Seattle, WA">
</a>
6 嚴格的HTML:遵循標準,合乎規範
1)舊版本:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http;//www.w3.org/TR/html4/strict.dtd"
HTML5 doctype: <!doctype html> 告訴遊覽器正在使用HTML5
2)構建web應用書籍: 《Head First HTML5 Programming》
3)HTML5:在這個版本里面,使用向後相容性,也就是規則可自定義。在這個版本之後,再也沒有HTML6,也可以直接稱為HTML。
5)meta制定Unicode:在head之間新增 <meta charset="utf-8">
7 新增一個“X”到HTML:轉到XHTML
1)p{color:maroon;}
h1{font-family:sans-serif;color:gray;}
h2{font-family:sans-serif;color:gray;}
h1,h2{ font-family:sans-serif;color:gray; }
css樣式分離:建立css指令碼,在HTML腳本里面引用css樣式。
<link type="text/css" rel="stylesheet" href="lounge.css">
rel屬性:制定了HTML檔案與所連線的檔案之間的關係。stylesheet 樣式表
href屬性:檔案地址
2)在html裡面:<link type="text/css" rel="stylesheet" href="lounge.css">
<p class="greentea">
在css裡面:
p.greentea{
color: green;
}
8 新增一些樣式:開始學習CSS
1)CSS屬性:
font-family: 設定字型,可以寫多個,從左往右,那個字型有,用哪個
font-size: 設定字型大小
color: 設定顏色
font-weight:bold:字型的粗細 lighter、normal、bold、bolder
text-decoration:裝飾,上劃線(underline),下劃線(overline),刪除線(line-through)
2)web字型:
href屬性:檔案地址
TrueType字型:.ttf OpenType字型:.otf
這兩個字型,後者在前者基礎上建立的。
Embedded OpenType字型:.eot 是 otf字型的一種壓縮形式,這種格式是專用的Microsoft,僅IE支援。
SVG字型:svg 通用影象格式
Web開放字型:.woff 大多數遊覽器對此字型提供了支援
3)font-face屬性:
@font-face {
font-family: "Emblema One"; /*新增名字*/
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");
}
4)字型:老版本的遊覽器IE不支援畫素制定字型大小的文字縮放
em:字型大小,類似百分比,是一個相對度量單位
5)font-style:italic 斜體/ oblique 傾斜文字,傾斜,有時候一樣有時候不一樣,直接用italic
background-color: rgb(80%,40%,0%); rgb開頭, 100%是255,r:255*80%
9 擴大你的詞彙量:字型和顏色樣式
1)盒模型:box model 。css將每個元素看做一個盒子表示,每一個盒子由一個內容區以及可選的內邊距、邊框和外邊距組成。
2)css樣式:
css檔案裡面 以.開頭
.guarantee{
border-color: black;
border-width:1px;
border-style:solid;
background-color:#a7cece;
}
html裡面: <p class="guarantee"></p>
3)邊框樣式:
border-style: groove;
border-width:thin; / 5px; /*邊框寬度*/
border-color:red;
指定一個邊的邊框: border-top-color,border-top-style,border-top-width
指定邊框圓角:border-radius:15px;
4)CSS中使用id號:
屬性名#id號{}
在html裡面 <p id="guarantee">
舉例: p#specilas{ color:red; }
5)平臺樣式相容:
a. media屬性:根據不同平臺呼叫不同的css檔案。在link裡面新增:media="screen and (max-device-width:480px)",media="print" (差異性大,建議分開,便於管理)
b. @media screen and (min-device-width:481px) { } 可以把所有平臺的樣式程式碼都放在一起。
10 與元素親密接觸:盒模式
1)<div> 可定義文件中的分割槽或節(division/section)。<div> 標籤可以把文件分割為獨立的、不同的部分。它可以用作嚴格的組織工具,並且不使用任何格式與其關聯。把相關的元素歸組到一起,放在邏輯區中。
如果用 id 或 class 來標記 <div>,那麼該標籤的作用會變得更加有效。
2)簡寫:例如 border:thin solid #007e7e; 寫成一行
3)<div>允許為塊級內容建立邏輯劃分 <span>將相關的內聯內容的邏輯分組
4)偽類:用於向某些選擇器新增特殊的效果。所以有點像類,但不呼叫,所以偽。
#elixirs a:link{color:#007e7e;}
#elixirs a:visited{color:#333333;}
#elixirs a:hover{background:#f88393; color:#0d5353;}
11 高階網站構建:div和 span
12 佈置元素:佈局和排版
13 開始製作表格:表格和列表
14 互動活動:XHTML 表單