在瀏覽器中會(huì)把晚胡，多個(gè)換行碰逸，或是多個(gè)空格當(dāng)做一個(gè)空格來(lái)處理
1.html：
h1-----標(biāo)題標(biāo)簽
只有h1-----h6;
h1 -- 一級(jí)標(biāo)題標(biāo)簽
h2 -- 二級(jí)標(biāo)題標(biāo)簽
以此類(lèi)推到h6
*h1在一個(gè)頁(yè)面當(dāng)中只可以用一次
p------段落標(biāo)簽
會(huì)自帶默認(rèn)的行距，空白部分期吓；
br ----換行標(biāo)簽
a-----超鏈接
<a href="鏈接地址"></a>
<img src="" /> 圖片標(biāo)簽
src（圖片源）
div---- 一個(gè)容器，一個(gè)盒子庇绽，一張白紙
strong （加粗）加重說(shuō)明
b （加粗）
em （傾斜）加重說(shuō)明
i (傾斜)
span （空標(biāo)簽）
單標(biāo)簽
br
img
<標(biāo)簽名 />
雙標(biāo)簽
h2 p a
起始的標(biāo)簽 結(jié)束的標(biāo)簽
<標(biāo)簽名> </結(jié)束標(biāo)簽>
2屬性：
href 超鏈接地址
title 文本提示（提示文字）
alt 文本替換
width 寬度
height 高度
src 圖片源
border 邊框
style 樣式
私有屬性：
href
width
height
alt
src
公有屬性：
title
style
(寫(xiě)法)
屬性名=" 屬性值"
3.css：
樣式名:樣式值衷畦；
需要寫(xiě)在style里
width:300px; 寬度
height:300px 高度
border： 邊框
border-width: 邊框的寬度
border-style: 邊框的線(xiàn)性
border-color: 邊框的顏色
background： 背景
background-color：背景顏色
background-image: 背景圖
background-repeat: 背景圖平鋪
-----no-repeat 不平鋪
-----repeat-x x軸平鋪
-----repeat-y y軸平鋪
background-position: 背景圖定位
x y;
（背景圖縮寫(xiě)）background:圖片路徑 平鋪 背景圖定位振劳；
color: 文本顏色
text-align: center; 文本水平居中
right
left
line-height: 文本的垂直居中（文字縱向居中）行高
寫(xiě)高度
font-size （文字大小）
font-style:italic （文字傾斜）
normal---不傾斜
font-weight:bold (文字加粗)
normal---不加粗
font-family: (字體)
英文
中文
unicode
white-space:nowrap; （文字不換行）
overflow:hidden; （溢出隱藏）
text-overflow:ellipsis; （省略號(hào)）*缺一不可苇侵，而且要設(shè)置寬度
text-decoration:none; （取消下劃線(xiàn)）
underline （下劃線(xiàn)）
overline （上劃線(xiàn)）
line-through（中劃線(xiàn)）
text-indent （文本縮進(jìn)）
單位
px
em
%
寫(xiě)在標(biāo)簽里面的叫做‘行內(nèi)樣式’
拿到style標(biāo)簽里的叫做‘內(nèi)聯(lián)樣式赶盔，內(nèi)部樣式’
border的縮寫(xiě)：
border:邊框的寬度 邊框的線(xiàn)性 邊框的顏色;
線(xiàn)性有：
solid 實(shí)線(xiàn)
dashed 虛線(xiàn)
dotted 點(diǎn)畫(huà)線(xiàn)
顏色：
寫(xiě)英文：
red
green
blue
十六進(jìn)制：
#3385ff
#0 f 0
如果三對(duì)不一樣的話(huà)不可以縮寫(xiě)
rgb：
rgb(0-255,0-255,0-255)
4.引入圖片的地址分為兩種：
絕對(duì)路徑：
file:///C|/Users/Administrator/Desktop/什么文件
相對(duì)路徑：
../images/淘寶-用背景別用border.png
路徑不要出現(xiàn)中文
5.文檔構(gòu)成：
<!doctype html>
document type html
文檔 類(lèi)型 html
過(guò)渡型 嚴(yán)格型
head 文檔頭
<meta charset="utf-8">
unicode編碼
utf-8 國(guó)際編碼
gb2312/gbk 中國(guó)編碼
<meta name="author" content="作者" /> 作者
<meta name="copyright" content="版權(quán)" /> 版權(quán)
<meta name="description" content="描述" /> 描述
<meta name="keywords" content="關(guān)鍵字"/> 關(guān)鍵字
<title>標(biāo)題</title> 標(biāo)題
5.XHTML：
文檔必須要有文檔頭
所有的標(biāo)簽都要用小寫(xiě)英文來(lái)寫(xiě)
html需要用雙引號(hào)（英文）
img標(biāo)簽必須有alt屬性
雙標(biāo)簽必須要閉合標(biāo)簽
單標(biāo)簽需要合理閉合
6.字體繼承：
顏色
字體大小
文字加粗
傾斜
字體
雙下劃線(xiàn)
行高
* a標(biāo)簽不可以繼承顏色；
strong和b不會(huì)繼承加粗
em和i不會(huì)繼承傾斜
7選擇器：
標(biāo)簽選擇器
div h2 p span
class選擇器（類(lèi)選擇器）
calss="起的小名榆浓，名字"
于未。
ID選擇器
id="大名"
#
通配符選擇器
*
嵌套選擇器
div空格 p
群組選擇器
div逗號(hào)p
* class可以起很多個(gè)
id 只可以有一個(gè)
* < p < class < id <行間
0 10 100 1000
8.標(biāo)簽特性
行標(biāo)簽：
1，不可以設(shè)置寬高
2陡鹃，并到一行
3烘浦，會(huì)受到換行或是空格影響
4，寬度是內(nèi)容的寬度萍鲸，根據(jù)內(nèi)容來(lái)?yè)纹?塊標(biāo)簽：
1闷叉，可以設(shè)置寬高
2，獨(dú)占一行
3脊阴，不會(huì)受到換行與空格的影響
4握侧，不設(shè)置寬度蚯瞧，寬度就是父級(jí)的寬度
行內(nèi)塊：
1，可以設(shè)置寬高
2品擎，會(huì)并到一排
3埋合，會(huì)受到空格與換行影響
塊標(biāo)簽：
h1---h6
p
div
行標(biāo)簽:
a
strong
b
em
i
span
行內(nèi)塊：
img
行，塊萄传，行內(nèi)塊的轉(zhuǎn)換
display:block 轉(zhuǎn)換成塊
display:inline 轉(zhuǎn)換成行
display:inline-block 轉(zhuǎn)換成行內(nèi)塊
塊標(biāo)簽可以包任何標(biāo)簽
p標(biāo)簽只可以包行內(nèi)
行標(biāo)簽只能包行標(biāo)簽(*不可以包自己)
a可以包任何標(biāo)簽
什么都可以包這個(gè)img
9.語(yǔ)義化：
像說(shuō)話(huà)一樣寫(xiě)代碼甚颂；
有語(yǔ)義化：
h1-h6
p
img
a
strong
em
無(wú)語(yǔ)義化：
div
span
b
i
10.列表：
有序列表<ol>
<li></li>
<li></li>
</ol>
無(wú)序列表
<ul>
<li></li>
<li></li>
</ul>
描述列表
<dl>
<dt></dt>
<dd></dd>
</dl>
list-style:none; 清除列表自帶樣式
*第一個(gè)電腦自帶的不方便使用，需要自己寫(xiě)秀菱。
*需要把自帶的默認(rèn)樣式清除掉振诬，自己寫(xiě)。
11.盒模型：
width
height
border
padding
***
margin不算盒子
12.padding與margin
padding (內(nèi)邊距)
:邊框到內(nèi)容的距離
margin （外邊距）
一個(gè)盒子到另一個(gè)盒子的距離
關(guān)于padding:
padding: 5px; 上下左右
padding:100px 50px 上下 左右
padding:20px 60px 100px; 上 左右 下
padding:20px 60px 80px 120px; 上 右 下 左
padding-top:50px; 每一個(gè)方向答朋，只給一個(gè)單獨(dú)的值
padding-left:50px;
padding-right:50px;
padding-bottom:50px;
*** 給了padding就要用寬高來(lái)減去這個(gè)padding 的距離
如果沒(méi)有設(shè)置寬高就不需要減掉；
*** 行標(biāo)簽只可以給左右的padding
關(guān)于margin：
margin:5px; 上下左右
margin:100px 50px 上下 左右
margin:20px 60px 100px; 上 左右 下
margin:20px 60px 80px 120px; 上 右 下 左
*** 行標(biāo)簽只可以給左右的margin
*** 寫(xiě)代碼之前必須清除默認(rèn)的樣式
*{
margin:0;
padding:0;
}
margin的BUG:
***拖拽父級(jí)（塌陷）
解決的辦法如下所述：
overflow:hidden;
border:1px solid #000;
padding-top:50px;(推薦)
***margin合并
解決的辦法如下所述：
給單一方向加上你想要的距離（取最大值）
margin負(fù)值：
left or right 不能設(shè)置寬
top or bottom 不能設(shè)置高
*padding不可以給負(fù)值
小圖片的格式：
jpg 占據(jù)的內(nèi)存小
png 內(nèi)存大 透明
psd 有圖層的
gif 動(dòng)態(tài)棠笑，透明
13.浮動(dòng)：
float: 浮動(dòng)
float:left 左浮動(dòng)
float:right 右浮動(dòng)
說(shuō)說(shuō)這個(gè)浮動(dòng)的特性：
是一個(gè)有方向的梦碗；
變成了塊；
并到一排蓖救；
頂對(duì)齊洪规；
寬度不夠會(huì)掉下來(lái)；
脫離文檔流循捺；
*加上浮動(dòng)的元素只會(huì)對(duì)下面的元素有影響
*文本環(huán)繞
加浮動(dòng)必須得：
只要有一個(gè)標(biāo)簽加上了浮動(dòng)斩例，同級(jí)的標(biāo)簽都要加浮動(dòng)
加上浮動(dòng)就必須清浮動(dòng)（只能寫(xiě)在父級(jí)）
overflow:hidden;
一定要設(shè)置寬度，不給寬度會(huì)是內(nèi)容的寬度
清浮動(dòng):
overflow:hidden (溢出隱藏)
*給父級(jí)加
<div style="clear:both"></div>*必須用塊標(biāo)簽
單獨(dú)再寫(xiě)一個(gè)塊標(biāo)簽从橘，給這個(gè)塊標(biāo)簽加上一個(gè)clear:both;
*清除掉左右浮動(dòng)
.clearfix:after{
display:block;
clear:both;
content:"";
}
.clearfix{
zoom:1;
}
*給父級(jí)加
14.偽類(lèi)選擇器：
:after
:link （未訪(fǎng)問(wèn)）
:visited（訪(fǎng)問(wèn)過(guò)）
:hover （鼠標(biāo)移入）
:active （鼠標(biāo)按下）
link visited hover active
lvha
只有a標(biāo)簽才可以加這個(gè)lv
ha都可以加
15.定位：
position: 定位
absolute; 絕對(duì)定位
*脫離文檔流
*把元素變成塊
*根據(jù)body來(lái)定位的
top：念赶；
left：；
right：恰力；
bottom：叉谜；
position: 定位
relative;相對(duì)定位
*本身的還在站位
*并不會(huì)改變?cè)? *根據(jù)原先的位置來(lái)定位（自己）
top：；
left：踩萎；
right：停局；
bottom：；
position:fixed; 固定定位香府；
根據(jù)可視區(qū)來(lái)定位的董栽；
脫離文檔流
------------------（2）
z-index （層級(jí)）
{可以寫(xiě)正數(shù)也可以寫(xiě)負(fù)數(shù)}
普通元素<浮動(dòng)<定位
*定位，后寫(xiě)的比先寫(xiě)的層級(jí)高
咱們定位是好用企孩；但是不能多用锭碳，能用浮動(dòng)的就用浮動(dòng)，用不了再用定位
pacity:0.5; 透明
0-1
filter:alpha(opacity:80);兼容IE(透明)
0-100
*文字不能寫(xiě)透明里面（如果文字也透明了）
外聯(lián)樣式（外聯(lián)樣式表）
<link href="css/index.css" rel="stylesheet"/>
16.表單：
提交數(shù)據(jù)
<input type="text" class="txt" />
（明文輸入框）文本輸入框
placeholder 占位符
<input type="submit" value="百度一下" />
submit提交按鈕
value可以改變按鈕文字
<input type="password" name="num"/>
（密文輸入框）密碼框
<form action="模擬百度.html" method="get"></form>
action 數(shù)據(jù)提交的地址
method 提交的方式
get 地址欄 不安全
post 后臺(tái) 相對(duì)安全一點(diǎn)
name---------想提交必須給它一個(gè)名字
<input type="checkbox" />復(fù)選框
<input type="radio" name="sex" id="id"/>單選框
*（用相同的name）
<label for="nv">女</label>
for="ID"
<select>
<option>下拉框內(nèi)容</option>
</select>
下拉框
<input type="button" value="關(guān)閉" />普通按鈕
<textarea></textarea>文本域
vertical-align: 垂直對(duì)齊方式
middle; 居中
top勿璃； 上邊
bottom 下邊
outline:none; 取消焦點(diǎn)
resize:none; 取消文本域拖拽
17.table
<table border="1" （邊框）cellpadding="0"（清除單元格默認(rèn)padding）cellspacing="0"（單元格間距）> 表格
<thead> 可省略
<tr> 行行
<th></th> 頭列
</tr>
</thead> 表頭
<tbody> 不可以
<tr> 行行
<td></td> 身列
</tr>
</tbody> 表身
<tfoot> 可省略
<tr> 行行
<td></td> 尾列
</tr>
</tfoot> 表尾
</table>
border-collapse:collapse; 取消間距
colspan="3" 行的單元格合并
rowspan="2" 列的單元格合并
如果沒(méi)有內(nèi)容工禾，要個(gè)高度與寬度（因?yàn)椴辉O(shè)置寬高的話(huà)它是根據(jù)內(nèi)容撐開(kāi)）
18.框架
溢出的部分變成滾動(dòng)條：
overflow:scroll;
X部分溢出隱藏运提，Y軸變成滾動(dòng)條：
overflow-x:hidden
框架
后臺(tái)管理系統(tǒng)；
框架 <iframe></iframe>
<iframe src="../小米/index.html" scrolling="no" width="500" height="500" frameborder="0">
</ifra>
src="引入地址"
scrolling="no"（取消自帶滾條）（寫(xiě)樣式不好使）
frameborder="0" 取消邊框
--------------------------------------------------------
框架集：
<body>
<frameset>
</frameset>
</body>
***在一個(gè)頁(yè)面中要是有frameset就不能有body
<frameset rows="200,*">
<frame src="../小米/index.html" />
<frame src="../小米/index.html" />
</frameset>
<frameset cols="150,*">
<frame src="../小米/index.html" />
<frame src="../小米/index.html" />
</frameset>
