在瀏覽器中會把，多個換行，或是多個空格當(dāng)做一個空格來處理
1.html：
h1-----標(biāo)題標(biāo)簽
只有h1-----h6;
h1 -- 一級標(biāo)題標(biāo)簽
h2 -- 二級標(biāo)題標(biāo)簽
以此類推到h6
*h1在一個頁面當(dāng)中只可以用一次
p------段落標(biāo)簽
會自帶默認(rèn)的行距，空白部分；
br ----換行標(biāo)簽
a-----超鏈接
<a href="鏈接地址"></a>
<img src="" /> 圖片標(biāo)簽
src（圖片源）
div---- 一個容器，一個盒子，一張白紙
strong （加粗）加重說明
b （加粗）
em （傾斜）加重說明
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
(寫法)
屬性名=" 屬性值"
3.css：
樣式名:樣式值；
需要寫在style里
width:300px; 寬度
height:300px 高度
border： 邊框
border-width: 邊框的寬度
border-style: 邊框的線性
border-color: 邊框的顏色
background： 背景
background-color：背景顏色
background-image: 背景圖
background-repeat: 背景圖平鋪
-----no-repeat 不平鋪
-----repeat-x x軸平鋪
-----repeat-y y軸平鋪
background-position: 背景圖定位
x y;
（背景圖縮寫）background:圖片路徑 平鋪 背景圖定位；
color: 文本顏色
text-align: center; 文本水平居中
right
left
line-height: 文本的垂直居中（文字縱向居中）行高
寫高度
font-size （文字大?。? font-style:italic （文字傾斜）
normal---不傾斜
font-weight:bold (文字加粗)
normal---不加粗
font-family: (字體)
英文
中文
unicode
white-space:nowrap; （文字不換行）
overflow:hidden; （溢出隱藏）
text-overflow:ellipsis; （省略號）*缺一不可，而且要設(shè)置寬度
text-decoration:none; （取消下劃線）
underline （下劃線）
overline （上劃線）
line-through（中劃線）
text-indent （文本縮進(jìn)）
單位
px
em
%
寫在標(biāo)簽里面的叫做‘行內(nèi)樣式’
拿到style標(biāo)簽里的叫做‘內(nèi)聯(lián)樣式，內(nèi)部樣式’
border的縮寫：
border:邊框的寬度 邊框的線性 邊框的顏色;
線性有：
solid 實線
dashed 虛線
dotted 點畫線
顏色：
寫英文：
red
green
blue
十六進(jìn)制：
#3385ff
#0 f 0
如果三對不一樣的話不可以縮寫
rgb：
rgb(0-255,0-255,0-255)
4.引入圖片的地址分為兩種：
絕對路徑：
file:///C|/Users/Administrator/Desktop/什么文件
相對路徑：
../images/淘寶-用背景別用border.png
路徑不要出現(xiàn)中文
5.文檔構(gòu)成：
<!doctype html>
document type html
文檔 類型 html
過渡型 嚴(yán)格型
head 文檔頭
<meta charset="utf-8">
unicode編碼
utf-8 國際編碼
gb2312/gbk 中國編碼
<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)簽都要用小寫英文來寫
html需要用雙引號（英文）
img標(biāo)簽必須有alt屬性
雙標(biāo)簽必須要閉合標(biāo)簽
單標(biāo)簽需要合理閉合
6.字體繼承：
顏色
字體大小
文字加粗
傾斜
字體
雙下劃線
行高
* a標(biāo)簽不可以繼承顏色；
strong和b不會繼承加粗
em和i不會繼承傾斜
7選擇器：
標(biāo)簽選擇器
div h2 p span
class選擇器（類選擇器）
calss="起的小名，名字"
。
ID選擇器
id="大名"
#
通配符選擇器
*
嵌套選擇器
div空格 p
群組選擇器
div逗號p
* class可以起很多個
id 只可以有一個
* < p < class < id <行間
0 10 100 1000
8.標(biāo)簽特性
行標(biāo)簽：
1，不可以設(shè)置寬高
2，并到一行
3，會受到換行或是空格影響
4，寬度是內(nèi)容的寬度，根據(jù)內(nèi)容來撐起
塊標(biāo)簽：
1，可以設(shè)置寬高
2，獨(dú)占一行
3，不會受到換行與空格的影響
4，不設(shè)置寬度，寬度就是父級的寬度
行內(nèi)塊：
1，可以設(shè)置寬高
2，會并到一排
3，會受到空格與換行影響
塊標(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)簽
什么都可以包這個img
9.語義化：
像說話一樣寫代碼；
有語義化：
h1-h6
p
img
a
strong
em
無語義化：
div
span
b
i
10.列表：
有序列表<ol>
<li></li>
<li></li>
</ol>
無序列表
<ul>
<li></li>
<li></li>
</ul>
描述列表
<dl>
<dt></dt>
<dd></dd>
</dl>
list-style:none; 清除列表自帶樣式
*第一個電腦自帶的不方便使用，需要自己寫。
*需要把自帶的默認(rèn)樣式清除掉，自己寫。
11.盒模型：
width
height
border
padding
***
margin不算盒子
12.padding與margin
padding (內(nèi)邊距)
:邊框到內(nèi)容的距離
margin （外邊距）
一個盒子到另一個盒子的距離
關(guān)于padding:
padding: 5px; 上下左右
padding:100px 50px 上下 左右
padding:20px 60px 100px; 上 左右 下
padding:20px 60px 80px 120px; 上 右 下 左
padding-top:50px; 每一個方向，只給一個單獨(dú)的值
padding-left:50px;
padding-right:50px;
padding-bottom:50px;
*** 給了padding就要用寬高來減去這個padding 的距離
如果沒有設(shè)置寬高就不需要減掉；
*** 行標(biāo)簽只可以給左右的padding
關(guān)于margin：
margin:5px; 上下左右
margin:100px 50px 上下 左右
margin:20px 60px 100px; 上 左右 下
margin:20px 60px 80px 120px; 上 右 下 左
*** 行標(biāo)簽只可以給左右的margin
*** 寫代碼之前必須清除默認(rèn)的樣式
*{
margin:0;
padding:0;
}
margin的BUG:
***拖拽父級（塌陷）
解決的辦法如下所述：
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 動態(tài)，透明
13.浮動：
float: 浮動
float:left 左浮動
float:right 右浮動
說說這個浮動的特性：
是一個有方向的；
變成了塊；
并到一排；
頂對齊；
寬度不夠會掉下來；
脫離文檔流；
*加上浮動的元素只會對下面的元素有影響
*文本環(huán)繞
加浮動必須得：
只要有一個標(biāo)簽加上了浮動，同級的標(biāo)簽都要加浮動
加上浮動就必須清浮動（只能寫在父級）
overflow:hidden;
一定要設(shè)置寬度，不給寬度會是內(nèi)容的寬度
清浮動:
overflow:hidden (溢出隱藏)
*給父級加
<div style="clear:both"></div>*必須用塊標(biāo)簽
單獨(dú)再寫一個塊標(biāo)簽，給這個塊標(biāo)簽加上一個clear:both;
*清除掉左右浮動
.clearfix:after{
display:block;
clear:both;
content:"";
}
.clearfix{
zoom:1;
}
*給父級加
14.偽類選擇器：
:after
:link （未訪問）
:visited（訪問過）
:hover （鼠標(biāo)移入）
:active （鼠標(biāo)按下）
link visited hover active
lvha
只有a標(biāo)簽才可以加這個lv
ha都可以加
15.定位：
position: 定位
absolute; 絕對定位
*脫離文檔流
*把元素變成塊
*根據(jù)body來定位的
top：；
left：；
right：；
bottom：；
position: 定位
relative;相對定位
*本身的還在站位
*并不會改變元素
*根據(jù)原先的位置來定位（自己）
top：；
left：；
right：；
bottom：；
position:fixed; 固定定位；
根據(jù)可視區(qū)來定位的；
脫離文檔流
------------------（2）
z-index （層級）
{可以寫正數(shù)也可以寫負(fù)數(shù)}
普通元素<浮動<定位
*定位，后寫的比先寫的層級高
咱們定位是好用；但是不能多用，能用浮動的就用浮動，用不了再用定位
pacity:0.5; 透明
0-1
filter:alpha(opacity:80);兼容IE(透明)
0-100
*文字不能寫透明里面（如果文字也透明了）
外聯(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 后臺 相對安全一點
name---------想提交必須給它一個名字
<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: 垂直對齊方式
middle; 居中
top； 上邊
bottom 下邊
outline:none; 取消焦點
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" 列的單元格合并
如果沒有內(nèi)容，要個高度與寬度（因為不設(shè)置寬高的話它是根據(jù)內(nèi)容撐開）
18.框架
溢出的部分變成滾動條：
overflow:scroll;
X部分溢出隱藏，Y軸變成滾動條：
overflow-x:hidden
框架
后臺管理系統(tǒng)；
框架 <iframe></iframe>
<iframe src="../小米/index.html" scrolling="no" width="500" height="500" frameborder="0">
</ifra>
src="引入地址"
scrolling="no"（取消自帶滾條）（寫樣式不好使）
frameborder="0" 取消邊框
--------------------------------------------------------
框架集：
<body>
<frameset>
</frameset>
</body>
***在一個頁面中要是有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>
