前言:
國慶有點時間就這樣整理了一遍：在Typora 整理覺得挺好看的，這里顯示真心難看，排版不出效果。時間關(guān)系就這樣吧！
HTML
瀏覽器：
作用：
1、發(fā)送請求
2、接收響應(yīng)
3、解析響應(yīng)代碼
分類：
谷歌、火狐、IE、蘋果、歐鵬
內(nèi)核：作用：相當于瀏覽器的發(fā)動機。
發(fā)展：
1、只有結(jié)構(gòu)（HTML）單調(diào)。
2、加入樣式。（css）頁面更加美觀，但缺少交互
3、加入行為（js）使網(wǎng)頁具有交互效果。
web標準：
結(jié)構(gòu)(html)、樣式(css)、行為標準（js）。
結(jié)構(gòu)標準（html）
概念：
1、(HyperText Mark Language)超文本標記語言
2、超文本：本質(zhì)上是普通文本，但是可以解析為圖片、鏈接、音頻、視頻...
3、語言：它是web標準中描述結(jié)構(gòu)的語言。
4、標記：這種語言的一個特點：a、書寫需要使用一個標記來進行突出。b、以"<"開頭，以">"結(jié)尾
骨架格式：
1、<html></html>用來管理當前頁面上的所有的內(nèi)容。
2、<header></header> html中的一部分，用來存放一些頭部信息
3、<title></title> 設(shè)置頁面的結(jié)構(gòu)
4、<body></body> 用來存放一些頭部信息
標簽：（重點）
分類：
雙標簽：成對出現(xiàn) <html></html>
單標簽：只有一個開頭的標簽，并且在開頭標簽中有個 "/",例如：<br/>
關(guān)系：
嵌套關(guān)系：將來如果兩個標簽是嵌套關(guān)系，書寫時，被嵌套的標簽需要向右有個縮進。
并列關(guān)系：將來如果2個標簽是并列關(guān)系，在書寫時，2個代碼需要左對齊。
常用標簽：
1、p標簽：作用：段落
2、h系列的標簽：作用：標題。分類：h1,h2,...,h6。注意：一個頁面只允許出現(xiàn)一個 h1
3、hr 標簽。作用：水平線（無語意）
4、br 標簽。作用：換行（無語意）
5、沒有語意的標簽（常用）：
div：
特點：單獨可以占一行
作用：結(jié)合css進行頁面的布局，（div+css布局）
span：
特點：一行可以顯示多個
作用：將來也是在div+css布局中輔助布局
6、文本格式化標簽：
沒有語意：
b:作用：加粗文本
s:作用：給文本添加刪除線
i:作用：給文本添加傾斜效果
u:作用：給文本添加下劃線
強調(diào)語意：
strong：作用：加粗文本。
del: 作用：給文本添加刪除線
em: 作用：給文本添加傾斜效果
ins: 作用：給文本添加下劃線
7、img標簽：
作用：在頁面上可以添加一張圖片
語法：<img/>
標簽的屬性：
作用：可以為標簽設(shè)置一些信息。
src：路徑。例如：src="login.png"
alt: 給圖片設(shè)置描述信息，當圖片無法正常加載時會顯示這段文本。
title：給圖片設(shè)置描述信息。
width：給圖片設(shè)置寬度。如果只設(shè)置寬度，那么圖片會等比例縮放。
height：給圖片設(shè)置高度。
border：設(shè)置邊框。
8、a標簽：
作用：在頁面添加鏈接。1、從一個頁面跳轉(zhuǎn)到另一個頁面2、空鏈接3、錨鏈接
名稱：鏈接、超鏈接、a標簽
語法：<a>文本</a>
屬性：
href 作用：設(shè)置超鏈接的跳轉(zhuǎn)路徑。
title 作用：設(shè)置鏈接的描述信息。
target： 作用：設(shè)置a 標簽的跳轉(zhuǎn)方式。
取值：_self 在原頁面上跳轉(zhuǎn)
_blank 在新的頁面上跳轉(zhuǎn)
base：可以統(tǒng)一設(shè)置當前頁面的a 標簽的跳轉(zhuǎn)方式
9、路徑
絕對路徑：帶有盤符的路徑，換一條設(shè)備就不能打開。
相對路徑：
a、同一目錄下 <img src="1.jpg">
b、文件在圖片的上一級目錄
c、圖片在文件的上一級目錄
10、列表：
作用：用來管理一系列的數(shù)據(jù)。
無序列表（用的最多的）<ul><li></li></ul>
有序列表（用的比較少）<ol><li></li><ol>
自定義列表（基本不用）<dl><dt></dt><dd></dd></dl>
11、表格
作用：用來管理多組數(shù)據(jù)。
語法：
<table>
<tr>
<th></th>
<td></td>
</tr>
</table>
屬性：
border 設(shè)置邊框
width 設(shè)置寬
height 設(shè)置高
cellspacing 設(shè)置單元格和單元格之間的間距
cellpadding 設(shè)置單元格的邊框與內(nèi)容之間的距離
align 設(shè)置對齊方式
取值 left、right、center
完整結(jié)構(gòu)
<table>
<caption></caption> 給表格設(shè)置標題
<thead></thead> 給表格設(shè)置表頭 <tr></th> <th></th>
<tbody></tbody> 給表格設(shè)置內(nèi)容 <tr></tr> <td></td>
<tfoot></tfoot> 給表格設(shè)置表尾 <tr></tr> <td></td>
</table>
合并單元格
rowspan 跨行合并
colspan 跨列合并
12、表單元素
text 文本框
value 默認值
password 密碼
value 默認值
radio checked="checked"
name 分組
button 按鈕
value 設(shè)置文本
file 上傳框
label 給label中的文本設(shè)置點擊時選中的表單元素
屬性 for="id名"
CSS
表單元素
作用：收集用戶信息
常用元素：input、select、textarea
input
type="text" 文本框、type="password" 密碼框、type="radio"單選框、type="checkbox" 多選框（屬性name 用來設(shè)置分組）checked="checked"
type = "file" 上傳框
type="button" 按鈕
type="submit" 提交按鈕、屬性 ：value 改變按鈕中的默認文本。必須與form結(jié)合起來使用。要提交的表單元素必須具有name屬性。
type="reset" 重置按鈕、屬性：value 改變按鈕中的默認文本。必須與form結(jié)合起來表單提交才有效果。
type="image" 圖片按鈕。屬性：src
select
下拉框
標簽：option 下拉選項 屬性：selected = "selected" 設(shè)置默認選中
textarea
文本域
屬性：
? rows 設(shè)置行數(shù)
? clos 設(shè)置列數(shù)
css 層疊樣式
作用：修改html 頁面中的結(jié)構(gòu)
屬性：
? color、width、height、background、border
? 字體相關(guān)屬性：
? font-style: normal、italic(斜體)
? font-weight: 作用設(shè)置字體的粗細。normal/400，bold/700 加粗
? font-size: 作用 設(shè)置字體風格，單位 px
? font-family: 作用：設(shè)置字體類型。取值：微軟雅黑、宋體、黑體、楷體、中文
? 簡寫：font-style、font-weight、font-family。注意：font-style、font-weight可以省略。font-size、font-family 不能省略。
水平方向：left、center、right
垂直方向：top、center、bottom
text-align ：
作用：設(shè)置容器中的內(nèi)容在容器的水平方向上的位置。
取值：left ：水平靠左（默認值）
? left：水平靠右
center：水平居中
text-height
? 設(shè)置一行文本的高度
? 應(yīng)用：可以讓文本在容器的垂直方向上居中（讓line-height = 容器的高度）
? 注意點：如果light-height < 容器的高度，文字會向上偏。= 文字居中，> 文字會向下偏。
text-indent
作用：設(shè)置文本的首行縮進
單位：px 具體的像素
em 一個字體大小
text-decoration
作用：設(shè)置文本修飾
取值：none 沒有任何裝飾（默認）
underline 下劃線
選擇器
單一選擇器：
1、標簽選擇武器
p{}、span{}
2、類選擇器
.login{}、.content{}
3、id選擇器
#id{}
4、通配符選擇器
*{margin:0,padding:0}
復合選擇器
1、后代選擇器 父元素后所有子元素 關(guān)鍵字： 空格
2、子代選擇器 父元素下面的第一層子元素中對應(yīng)的標簽 關(guān)鍵字： >
3、交集選擇器 選中多個選擇器交集的元素 關(guān)鍵字：無
4、并集選擇器 選中多個選擇器中集合合并的部分 關(guān)鍵字： ,
鏈接偽類選擇器：
LVHA 記憶：買了個LV，心里樂 HA 哈！
1、為被訪問：a:link{屬性名:屬性值}
2、被訪問過：a:visited{}
3、鼠標停留：a:hover{}
4、被點擊時：a:active{}
解析：在css中為鏈接準備了4種狀態(tài)。給開發(fā)者設(shè)置這些樣式。
分類
注意：根據(jù)css樣式所在的位置我們可以將css分3大類
行內(nèi)樣式
通過標簽的style屬性來設(shè)置樣式。
特點：只能作用在當前行、結(jié)構(gòu)與樣式混合在一起不利于管理和維護
一般情況下不建議使用。
內(nèi)部樣式
在header 標簽之中的style標簽里面寫屬性。來設(shè)置樣式
特點：只能作用在當前頁面
結(jié)構(gòu)與樣式相對分離，管理維護相對方便。
外部樣式
通過在一個后綴名為.css 的文件中寫屬性。 設(shè)置link 為樣式表。
標簽 link rel="stylesheet" 設(shè)置當前l(fā)ink為樣式表
href="" 設(shè)置外部樣式的路徑
特點：樣式可以作用在任意頁面
? 結(jié)構(gòu)與樣式完全分離
元素的顯示方式：display
塊級元素：
1、單獨占一行
2、可以設(shè)置寬高
3、如果不設(shè)置寬高，寬度默認是一整行，高度默認是由內(nèi)容覺決定的
關(guān)鍵字：display:block
具體：p、h、div、ul、ol、dl、dd、li
行內(nèi)元素：
1、一行內(nèi)可以顯示多個
2、無法設(shè)置寬高
3、寬高都由內(nèi)容來決定
關(guān)鍵字：display:inline
具體：
b、u、i、strong、ins、、del、em、span、a、label
行內(nèi)塊級元素：
一行內(nèi)可以顯示多個
可以設(shè)置寬高
如果不設(shè)置寬高，寬高由內(nèi)容決定
關(guān)鍵字：
display：inline-block
具體： img、input、textarea、select
css的三大特性
繼承性
作用：給父元素設(shè)置樣式，子元素也會起作用
特殊情況：a標簽的顏色、h標簽的大小
那些屬性可以繼承？
color、fon-、text-align
層疊性
定義：是瀏覽器處理沖突的一種能力
規(guī)則：優(yōu)先級
優(yōu)先級
定義：層疊的規(guī)則
在單一選擇器： 行內(nèi) > id > 類 > 標簽 > 通配符 >繼承
復合選擇器：算法：權(quán)重
格式：（0,0,0,0）
第一個 0 表示是行內(nèi)元素：如果樣式行為 行內(nèi)元素。 如果有個id選擇器，給這個數(shù)字添加1,(1,0,0,0)
第二個0 表示的是這個復合選中 id選擇器 的個數(shù)。如果有個id選擇器，給這個選擇器加 1
第三個 0，表示的是這個復合選擇器中 類選擇器 的個數(shù)。如果有個類標簽選擇器，給這個數(shù)字添加1, (0,0,1,0)
第四個 0，表示的是這個復合選擇器中標簽選擇器的個數(shù)，如果有個標簽選擇器，給這個數(shù)字添加1，（0,0,0,1）
比較方式：從左到右依次比較四個數(shù)字，左邊數(shù)字大的就大，如果相等比較下一個數(shù)字
注意： 權(quán)重越大，優(yōu)先級越高，繼承的權(quán)重為0
div 盒子模型
內(nèi)容：給元素設(shè)置寬高，其實是給元素的盒子模型的內(nèi)容設(shè)置的。
border 邊框：
border：給盒子設(shè)置邊框
語法：border: 1px solid #000
border-style:
作用：設(shè)置邊框的分隔。取值：solid實線、dotted雙線、dashed虛線、double雙線
屬性：
border-top、border-right、border-bottom、border-left
擴展屬性：
border-collapse：collapse 去掉單元格與單元格之間的間距，并且顯示為細線。
padding 填充（內(nèi)邊距）：
作用：設(shè)置盒子的邊框與內(nèi)容之間的距離。
語法：
padding: padding:50px; 給元素的上下左右都設(shè)置50px的padding
padding: 50px 100px; 給元素的上下padding設(shè)置50，左右padding設(shè)置 100
屬性：
padding-top
padding-right
padding-bottom
padding-left
特點：
一般情況下如果設(shè)置padding 會改變盒子的大小。
計算盒子的大?。?br>
寬 = border-left-width + padding-left + width + padding-right+border-right
高 = border-width + padding-top + height + padding-bottom + border-bottom-width
在特殊情況下設(shè)置padding不會改變盒子的大?。?br>
在父盒子中有個子盒子，父盒子設(shè)置寬度，子盒子不設(shè)置寬度，默認情況下子盒子的寬度會占父盒子的一整行。在這種情況下如果給盒子設(shè)置padding-left/padding-right,不會改變盒子的寬度，但是如果設(shè)置上下的padding會改變盒子的高度。
margin（外邊距）:
盒子與盒子之間的距離
語法：
margin:100px 給盒子上下左右設(shè)置100px;
屬性：
margin-top、margin-right、margin-bottom、margin-left
注意：
margin的合并現(xiàn)象（margin的塌陷現(xiàn)象）
1、兩個相鄰的元素，如果給上一個元素設(shè)置margin-bottom給下面的元素設(shè)置，margin-bottom兩個外邊距不會疊加，只會重合
2、如果在一個大盒子中有個小盒子，給這個小盒子設(shè)置margin-top大盒子也會跟著一起向下位置。
解決2的塌陷問題：
a、給父盒子設(shè)置一個邊框
b、給父盒子設(shè)置一個屬性：overflow:hidden
c、浮動
浮動
作用：用來設(shè)置元素的位置。
取值：
left：左浮動，在父元素內(nèi)部靠左顯示。
right：右浮動，在父元素的內(nèi)部靠右顯示。
浮動后元素的“顯示”的特點：
1、脫離標準流（會覆蓋在標準流之上，在標準流中不占位置）。標準流：a、塊級元素單獨占一行 b、行內(nèi)元素一行內(nèi)顯示多個
2、改變元素的顯示方式。
3、顯示方式與行內(nèi)快元素相同
浮動后元素的“位置”特點：
1、如果浮動的元素的上一個元素是標準流中的元素，那么浮動元素會在這個標準流元素之"下"顯示。
2、如果浮動的元素的上一個元素是浮動的元素，那么這個浮動的元素會跟著上一個浮動元素之"后"。
浮動的應(yīng)用：
1、文字環(huán)繞圖片（已經(jīng)被淘汰）
2、制作導航
3、用來進行頁面布局。 名詞：通欄、版心、左右分欄
!import 的權(quán)重最高
清除浮動
找到浮動元素的父元素，給這個父元素設(shè)置一個overflow:hidden 的屬性。（可能會對頁面上的元素進行裁剪）
// ---------------------------- 使用偽元素來清除 ---------------------------
.clearfix:after {
content:"";
display:block;
height:0;
line-height: 0;
visibility: hidden;
clear:both;
}
.clearfix {
*zoom: 1;
}
?
// ------------------ 使用雙偽元素來清除 -----------------------------
.clearfix:before , .clearfix:after {
content:“”；
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
關(guān)鍵字：clear:both;
偽元素：
定義： 頁面不存在，可以通過css代碼來動態(tài)給html添加結(jié)構(gòu)內(nèi)容
關(guān)鍵字： :after{}、:before{}
屬性： content 用來設(shè)置偽元素的內(nèi)容
定位
相對點位：
position:relative
絕對定位：
position:absolute
固定定位：
position:fixed
怎么快速將子元素定位到父元素的中間位置？
1、將子元素的位置設(shè)置為50%。
2、使用margin向反方向平移自身寬、高的一半。
emment語法
作用：提升書寫代碼的速度。
注意：它是插件來的。
例如：!+tab 生成HTML骨架；$ 生成帶有順序字母的內(nèi)容。tac+tab 生成 text-align:center
元素的隱藏屬性及一些小技巧：
display :none 隱藏（頁面上不會占據(jù)位置）
display : block 顯示
overflow:hidden 隱藏、scroll 顯示滾動、auto 自動（根據(jù)內(nèi)容決定是否顯示滾動條）
鼠標樣式：cursor取值、pointer 小手
outline: 設(shè)置輸入框獲取焦點時都得邊框樣式。none 沒有邊框。
防拖拽屬性：resize:none
vertical-align: 設(shè)置文字和圖片的對齊方式。 baseline ：默認值（基線）middle：中線（對齊），只能和“行內(nèi)塊”元素結(jié)合起來使用，否則無效。應(yīng)用：1、文本與圖片垂直居中對齊 2、去除圖片低側(cè)空白縫隙。
滑動門：用來設(shè)置導航的背景圖片（由于導航的文字多少不一，導航的寬度也不一致，為了能夠讓一張圖片解決所有的背景圖片的問題，我們需要用到滑動門。實現(xiàn)思路：li標簽放左邊的半圓、a標簽放右邊的半圓）
項目總結(jié)：
1、得到項目的psd文件、圖片
2、創(chuàng)建項目的目錄
index.html 網(wǎng)站入口
imgs 管理網(wǎng)站中所有的圖片
css 管理網(wǎng)站中所有的樣式
3、清除瀏覽器的默認行為。
進行css的初始化：
1、清除默認 margin:0、padding:0
2、清除圖片的默認邊框
3、去掉圖片下面幾個像素的空白
4、去掉ul、li中的默認小點
5、去掉去掉a標簽的下劃線
6、清除input默認的padding
7、給頁面設(shè)置統(tǒng)一的字體
8、左右浮動
9、清除浮動
補充：
a、網(wǎng)站小圖標：
1、使用 “比特蟲 http://www.bitbug.net/”
2、放在當前網(wǎng)站的根目錄
2、將小圖標改名為： favicon.ico
3、在head 標簽之中引入小圖標<link rel ="shortcut icon" href="favicon.ico">
b、精靈圖：
原理：將多張小圖放到一張大圖上，將來請求圖片只要請求一次就可以了
使用：
1、測出精靈圖的大小，在頁面上放好容器
2、測量出需要顯示圖標的大小，在頁面上放好容器
3、將精靈圖以背景圖的方式放到容器中
4、通過修改background-posion 屬性來移動背景圖片的位置
#####SEO相關(guān)的3個標簽：
搜索引擎的優(yōu)化
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
1、得到項目的psd文件、圖片
2、創(chuàng)建項目的目錄
index.html 網(wǎng)站入口
imgs 管理網(wǎng)站中所有的圖片
css 管理網(wǎng)站中所有的樣式
3、清除瀏覽器的默認行為。
進行css的初始化：
1、清除默認 margin:0、padding:0
2、清除圖片的默認邊框
3、去掉圖片下面幾個像素的空白
4、去掉ul、li中的默認小點
5、去掉去掉a標簽的下劃線
6、清除input默認的padding
7、給頁面設(shè)置統(tǒng)一的字體
8、左右浮動
9、清除浮動
補充：
a、網(wǎng)站小圖標：
1、使用 “比特蟲 http://www.bitbug.net/”
2、放在當前網(wǎng)站的根目錄
2、將小圖標改名為： favicon.ico
3、在head 標簽之中引入小圖標<link rel ="shortcut icon" href="favicon.ico">
b、精靈圖：
原理：將多張小圖放到一張大圖上，將來請求圖片只要請求一次就可以了
使用：
1、測出精靈圖的大小，在頁面上放好容器
2、測量出需要顯示圖標的大小，在頁面上放好容器
3、將精靈圖以背景圖的方式放到容器中
4、通過修改background-posion 屬性來移動背景圖片的位置
SEO相關(guān)的3個標簽：
搜索引擎的優(yōu)化
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
Photoshop的基本使用
切圖：
1、切圖（最后面會有切圖的步驟）：
Ctrl+ 左鍵 選中圖層
改變圖層的層級
2、文字：
文字工具
選中文字工具點擊頁面上的文字
3、放大和縮小
放大：點擊放大
縮?。涸诜糯蠊ぞ咧邪?alt鍵
4、輔助線：
在標尺中點擊左鍵向下、右拉推動
標尺：視圖----> 標尺
?
切圖步驟：
1、使用參考線選中要切圖的區(qū)域
2、將指針切換為切片工具
3、使用切片工具選擇區(qū)域
4、文件-->導出--->存儲為web 格式
5、選擇路徑(保存)
