表單
1:表單标簽
<form></form>
屬性:
action="接口位址" <form action="送出位址" method="送出方式" name="表單名字">
method="get/post"
name="表單名稱"
2:表單控件
<input>
屬性:
type="控件類型"
name:屬性辨別表單域的名稱;
value:屬性定義表單域的預設值，其他屬性根據type的不同而有所改變化。
<input type="類型">
type="text"當行文本輸入框
type="password"密碼輸入框
type="submit"送出按鈕
type="reset"重置按鈕
type="button"空按鈕（如果要做功能，需要結合js）
name="名字"
value="值"
maxlength="允許輸入的字元個數"
size="設定元素顯示的寬度"
get和post的差別:
get:在位址欄送出，有長度限制，有可能造成資料丢失，一般送出的資料較短，明文可見，
不安全，就算加密也比較容易破解，速度較快，如果隻考慮速度那就用get
post:不在位址欄送出，安全，沒有長度限制（理論上是有長度限制）一般送出的資料較大，速度較慢
樣式的基本規則:
1:屬性與值之間用英文冒号連接配接，分号結束
2:屬性與屬性之間可以空格，可以換行
3:一個屬性中有多個屬性值時，屬性值與屬性值之間用空格隔開，沒有先後順序
4:屬性與屬性值必須在花括号中
樣式的三種寫法:
1:内部樣式 存在在head标簽中<head> <style type="text/css">選擇器{屬性:值;}</style> </head>
2:内聯樣式 以屬性style的方式添加在标簽中<div style="屬性:值;></div>
3:外部樣式
建立獨立的htme頁面，并在頁面head标簽中添加<link rel="stylesheet" href="檔案位址">
建立獨立的css檔案
方式一（推薦使用）
<link rel="stylesheet" href="css檔案位址">
另一種引入方式：
在style标簽第一行添加
@import url(css檔案位址);
建立獨立的css檔案
樣式表權重關系
外部樣式 内部樣式<内聯樣式
就近原則
選擇器:(選中指定的元素)
類型選擇器（标簽選擇器）:div span h1 p li ul......
類選擇器（class選擇器）:選中指定的元素，在一個頁面中可以多次出現
1:在标簽中添加屬性 class=".屬性"
2:在樣式中的選擇器 .屬性{}
id選擇器:選中指定的元素，在一個頁面中相同值隻允許出現一次
1:在标簽中添加屬性 id="#屬性"
2:在樣式用添加選擇器 #屬性{}
僞類選擇器:（更多的是控制顔色）
:link{}未通路之前的狀态
:visited{}通路過後的狀态
:hover{}滑鼠懸停的狀态
:active{}滑鼠按下的狀态
通配符 * 比對頁面所有的元素進行統一操作
*{margin:0;padding:0;}(消除了所有元素的間距)
群組選擇器 選擇器1,選擇器2,選擇器3
包含選擇器（後代選擇器） 選擇器1 選擇器2 選擇器3{屬性:值;}
選擇器權重對比
id > class >類型選擇器
100 10 1
内聯樣式選擇器權重值1000
包含選擇器權重值為各個選擇器權重之和
除非有添加 !important
清單修飾符
list-style:;=list-style-type:;
disc 小黑圓點
circle 空心圓
square 實心方塊
none 取掉修飾
list-style-image:url(圖檔位址)
list-style-position:圖檔位置;
outside 外邊
inside 裡邊
邊框:
border:邊框大小 邊框形态 邊框顔色;
border-邊框的大小;
border-style:邊框的形态;
border-color:邊框的顔色;
border-style邊框的常用線型
：solid 實線
：dashed虛線
：dotted點狀線
：double雙線
某一個方向的拆分:
border-top:上邊框大小 上邊框形态 上邊框顔色;
border-bottom:底邊框大小 底邊框形态 底邊框顔色;
border-left:左邊框大小 左邊框形态 左邊框顔色;
border-right:右邊框大小 右邊框形态 右邊框顔色;
利用邊框斜切實作三角形
border:30px solid transparent;顔色設定位透明
border-top-color:red; 某一個方向的顔色不透明
PS的應用（基本操作）
1：放大縮小
ctrl+alt+shift+滑鼠滑輪
2: 測量尺寸
矩形選框工具
f8調出資訊面闆
修改尺寸機關
編輯--首選項--機關與标尺--機關--px
3: 輔助線ctrl+R
頁面結構劃分:
1:頭部區域
2:輪播圖區域
3:内容區域
4:底部區域
background-color:背景顔色
顔色單詞 red blue green......
十六進制# 0-9 a-f
三原色 rgb(0,0,0) 0-255
background-image:url("圖檔位址");
與img标簽的差別:
img是标簽，是結構，占據頁面位置
background-image:;是css樣式,不占據位置
（畫在牆上的一幅畫,被img蓋住）
背景圖預設平鋪
background-repeat:圖檔是否平鋪;
repeat 平鋪（預設值）
no-repeat 不平鋪
repeat-x 水準平鋪
repeat-y 垂直平鋪
background-position:背景定位；
關鍵字寫法
水準值 left center right
垂直值 top center bottom
具體像素位置
綜合寫法:
background:顔色 圖檔 是否重複 定位;
background-attachment:背景關聯;
scroll 滾動(預設值)
fixedq 固定
浮動的屬性:
float:;
left 左浮動
right 右浮動
none 不浮動
浮動的目的:
讓豎着的元素橫着來
浮動效果:
1:左浮動找左邊,右浮動找右邊
2:浮動隻影響後面的元素，不影響前面的元素
3:父級元素的寬度小于浮動子元素的總寬度,子元素将被迫換行
4:子元素高度不一緻的浮動元素被迫換行時,可能被卡着
5:結構先寫的先浮動,後寫的後浮動
6:圖文混排
7:浮動産生的問題,父級元素高度塌陷
解決辦法: 給父級元素添加height:;
盒模型：
外邊距:：改變元素外邊的間距
margin:四個方向；
margin:上下 左右；
margin:上 左右 下;
margin:上 右 下 左；
margin-top:上外邊距；
margin-right;右外邊距；
margin-bottom:下外邊距；
margin-left:左外邊距；
注意：margin可以為負值 ，auto自适應
margin常見bug:
1：上下外邊距相遇，隻顯示最大值
2：嵌套關系的元素，子元素的上外邊距和父元素的上外邊距相遇，取較大值
内邊距：改變元素與内容的間距
padding:一個值; 一個值，改變四個方向 padding:10px(内邊距)
padding:上下 左右; padding:px px(上下 左右)
padding:上 左右 下; padding:px px px(上 左右 下)
padding:上 右 下 左； padding:px px px px(上 右 下 左)順時針方向變化
注意: 内邊（padding）沒有負值;
盒模型占位大小計算：
W= width+左右邊框+左右内邊距+左右外邊距
H= height+上下邊框+上下内邊距+上下外邊距
版心是頁面的内容顯示區域
有具體寬度 ;
左右居中 margin:0 auto;
切圖方式:
1：矩形選框工具選中=>ctrl+c=>ctrl+n=>ctrl+v=>ctrl+shift+alt+s存儲
2：切片工具=>選中區域=>ctrl+shift