第一章 瞭解Html(hyperText Markup Language)

web伺服器原理

1. 伺服器是一臺連結到物聯網的計算機，用於處理使用者的各種請求，存有html檔案，圖片，聲音以及其他型別檔案
2. 瀏覽器傳送需要html網頁或其他資源的請求
3. 伺服器接受請求後，找到資源將其傳送給瀏覽器

第三章 構建網頁

q標籤 引用文段中的內容 即加雙引號 ，內聯元素 blockquote 塊引用 塊元素 內聯元素 換行元素 空元素： 沒有html內容的元素稱為空元素 元素= 開始符 + 內容 +結束符

第四章 連結

根目錄：網頁的最頂層目錄，叫根目錄 用/表示 http:超文字傳輸協議 什麼叫絕對路徑？ 定義：網站名之後的部分 作用：告訴瀏覽器如何從根目錄去獲取特定的網頁或檔案 url包含傳輸協議、網站名、絕對路徑 預設網頁工作原理： /drinks/ http請求:我可以獲取檔案/drinks/嗎？ 伺服器：這是個目錄，我給你找他的預設檔案 找到了 傳給你。 注意：伺服器接收到沒有以/結尾的url時會再尾部加/ 然後尋找這個目錄下的預設檔案

相對路徑和絕對路徑的取捨

相對路徑用於本網站的頁面和圖片等資源，絕對路徑用於跳轉其他頁面。

file協議： 告訴瀏覽器從電腦中讀取檔案 file: ///xxxxxxx/index.html 必須三根斜線

如何連結到其他網頁的特定區域

用a元素創目標錨：a< id=“xx”> 連結目標錨：

連結本網頁特定區域

建立目標錨 連結目標錨：

連結時重開一個視窗

a< target=”-blank”>

第五章給你的網頁新增影象

gif和jpeg的差別

jpeg ：有損不支援透明，顏色多 gif: 無損支援透明 顏色只有256種 alt屬性：如果圖片不能顯示即顯示alt的值

第六章注意事項

http-equiv 屬性 告訴瀏覽器關於網頁內容型別的資訊 例如conctent-type content = “text/html”指明內容型別的資訊 charset 字元編碼

第八章學習css

新增下劃線 屬性名 border-bottom :1px solid black 外部連結樣式表：<link type="text/css" rel="stylesheet" href="相對路徑" />空元素

繼承

與文字外觀相關的樣式會被繼承如 字型顏色 字型 字型大小、寬度等 覆蓋繼承值的原則：css中被應用的規則總是最具體的 元素.類名{

}此類中的元素 使用此樣式

< p class=”name”> 將p元素新增到name類中 當具體度相同時按照css樣式表中排序在後的類來應用。

要點： css中簡單的表示式稱為規則 包括一個選擇符 若干屬性和值。 選擇符指定對哪些元素應用規則 元素名可以當作元素 一次選擇多個元素用逗號隔開 《link》外部樣式表 用.classname選擇類中所有元素 一個元素可以屬於多個類

第九章文字

文字和字型 fontfamily 字型 fontsize 字型大小 font-weight 字型粗細 text-decoration 文字樣式如下劃線等

font-family body{ font-family :Verdana,Geneva,Arial,san-serif } 解釋： 前三個是san-sefif字體系列中的具體字型，最後加上通用的字體系列名，若前三種瀏覽器沒有則預設使用最後一種瀏覽器預設的字型 字型大小 三種表示方式 font-size: px / %/em; px:用畫素表示字型的高度 %：相對繼承的父元素大小的百分比 em與%類似 關鍵字也可以定義： samll medium large 定義頁面字型的方法 選擇關鍵字定義body字型大小即網頁預設的字型大小 用em或%把別的元素的字型大小指定為相對於body字型大小的字型尺寸 優點 想要調整頁面字型大小隻需修改body，其他元素會自行修改大小。 字型粗細 font-weight： bold加粗 normal正常 字型樣式 font-style: italic(斜體)

web顏色

網頁的顏色是根據紅綠藍三原色以一定比例組成來指定的 設定顏色的4種方式 名字定義顏色： back-color:silver background-color:rgb(80%,40%,0%) background-color:rgb(204,102,0) background-color:#cc6600 後三種表示同一種顏色 0~255可以表示某一種原色的數值 最後一種其實就是前一種的16進位制的表示 通常用調色盤來選擇顏色

第十章 盒模式

css中將每個單一的元素看作一個盒子 box由內容區、補白區、邊框、邊界組成 p、padding、border、margin 注意：補白、邊界是透明的 margin/padding：上右下左 順時針旋轉 background-image:url(); 背景圖片額度屬性： repeat:設定背景圖片的平鋪 常見值 no-repeat repeat-x repeat-y inherit（繼承父元素的值） 在某個方向新增補白和邊界： padding-left/right/等 邊框： border-style控制邊框外觀， 一共八種邊框樣式 實線虛線等 border-weight 邊框寬度 border-color 定義邊框一側 boder-top-style border-bottom-style

多樣式表

連結的樣式表中最下面的樣式表 優先權最高

第11章div和span

用div將網頁分成幾個邏輯部分 div的使用情況： 作為一個容器 不要為了結構而讓網頁變得複雜的使用div 效果 使用div劃分結構，把網頁分成幾個合理的邏輯結構，有助於網頁的結構清晰和樣式化 一般瀏覽器的寬度是800畫素 div{ width:200px //這裡的寬度是用來定義元素內容區的寬度，瀏覽器會把巢狀在div中的所有元素調整成這個寬度 } 整個div的寬度等於magin+padding+width 塊元素的寬度預設是auto即自動延伸到整個空間 text-align 對齊方式 text-align只能作用於塊元素，但會影響一個元素中的所有內聯元素 理解：div中的塊元素會繼承對齊方式，而塊元素中的內聯元素會受到父元素text-align屬性的作用！

子孫選擇法： 父選擇符 子孫選擇符｛

｝

樣式縮寫

margin/padding: 順時針 padding/margin: 10px margin:10px 上下 10px左右

根據狀態化樣式元素

a:link{｝ a:visited{} a:hover{} 偽類： 作用與類一樣但並不能在html檔案中找到這個類 機理：瀏覽器會仔細檢查《a》元素，並將其新增到正確的偽類中，如果被訪問過則放入visited 滑鼠停留的就放進hover 滑鼠移開則將其再拿出來 注意：不僅只用於連結，某些瀏覽器也支援啟用和停留其他種類的元素的偽類。而且存在其他的偽類例如first-child 復值於元素的第一個孩子

層疊

決定瀏覽器才有哪種樣式的方法 方式： 1、收集所有的樣式表包括 作者 、讀者、瀏覽器 2、找到所有匹配申明 如需要找到font-size屬性 ，找到所有《h1》元素中有font-size申明的元素 3、把所有規則寫出來 按照 作者讀者 瀏覽器的順序排序 4、按照申明的具體程度排序 5、將所有的衝突規則按照他們在各自樣式出現的順序排序 6、第一名即為font-size屬性的被瀏覽器所使用的規則。 具體度演算法： 000 選擇符id +1 這個選擇符有類或偽類 每個+1 這個選擇符有元素名稱？ 每個+1 h1 001 h1.bule 011

作者：h1{
    color:green;
}
h1.b{
    color.red;
｝
讀者：
h1{
    color:black;
}
瀏覽器：h1
{
    color:bule;
}

按照第三步排序： h1 h1.b dh1 lh1 按照具體度： h1.b h1 dh1 lh1 沒有規則衝突即取得h1.b

第12章 佈局和排版

流

瀏覽器使用流來佈置頁面元素 塊元素 瀏覽器從頭到尾顯示他遇到的每一個元素 每個元素都會換行 內聯元素 瀏覽器會在水平方向上一個接一個的顯示 注意事項：瀏覽器並排內聯元素且兩者都有邊界時，兩內聯元素的邊界正常 瀏覽器並列放兩個塊元素時，會把邊界重疊，且值為兩者中的最大值

float

讓一個元素儘可能靠左或右，然後讓他後面的元素流到其周圍 對塊元素： 不影響 對內聯元素：內聯元素會留在其周圍 clear屬性:right 解釋：頁尾右邊不能有飄逸的內容 塊元素會忽略漂移元素而內聯元素不會 特點：無論怎麼調整瀏覽器的大小，內容都會擴充套件到填滿瀏覽器位置。

凍結佈局

把元素鎖住，凍結在頁面上，不能移動。 常見方式：

凝膠物佈局

一般用於整個body部分 鎖定頁面中的內容區寬度，但將其放在瀏覽器中間 方式將margin設定成 auto 瀏覽器會自行計算合適的距離，讓內容放在頁面中間。

絕對佈置

position: absolute; top: 10px; right:10px; width:200px; 當一個元素被絕對佈置後，瀏覽器會將其從流中取出，再根據top right（相對於頁面而不是視窗） 等屬性指明的位置放置 z-index決定被絕對佈置的元素誰在上面 position 佈局的預設值是static 即把元素放在正常的流中 float: 將元素從流中拿出，根據值決定飄向位置 absolute：精準的將元素放置在某一個位置（相對於父元素） fixed: 將一個元素放置在一個精準的位置（相對於瀏覽器視窗） relative:讓一個元素正常的流在頁面上，然後在頁面顯示之前讓其偏移

使用百分數佈置元素位置： 元素位置會隨著瀏覽器的寬度改變而改變例 瀏覽器寬度為800px 元素左邊設定為10% 即為80px。 被絕對佈置的元素不存在clear屬性 固定佈置 fixed 相對佈置 relative left：30px; 顯示的元素相對於流的位置右邊30px;