DIV+CSS學習筆記總結篇
第一部分 HTML
第一章 職業規劃和前景
-
職業方向規劃定位：javascript
web前端開發工程師cssweb網站架構師html本身創業前端
轉崗管理或其餘html5
-
web前端開發的前景展望：java將來
IT行業企業需求最多的人才jquery結合最新的
html5搶佔移動端的市場git本身創業作老闆github
隨着互聯網的普及
web開發成爲企業的寵兒和核心web
-
web職業發展目標：-
第1、梳理知識架構
負責內容的
HTML負責外觀的
css（層疊樣式表）負責行爲的
jsps切圖
-
第2、分解目標（起步階段、提高階段、成型階段）
-
起步階段：
基本知識的掌握
經常使用工具的掌握
溝通技巧的掌握（圍繞客戶的需求）
良好的開發習慣（加註釋、對齊方式）
-
提高階段：
熟悉掌握
HTML基本標籤和屬性熟練掌握
css的基本語法和使用瀏覽器兼容和w3c標準的掌握
結合
html+css+js開始系統項目的開發
-
成型階段：
精通
DIV+CCS佈局精通
css樣式表控制html標籤熟悉運用
js製做動態網站的效果能獨立開發完成網站
-
-
第二章 html基本結構
-
認識HTML：
html不是一種編程語言，是一種標誌語言標記語言是由一套標識標籤組成的
html使用標籤來描述網頁
html結構：
<html>
<head></head>
<body></body>
</html>
不成對出現的標籤
<br><hr><meta><img><input..><option..><link>
HTML 基本標籤的講解：
-
<html><head><body>標籤<h1>----<h6>僅僅用於標題文本，不要爲了產生粗體文本使用它們<p>標籤 段落標籤<strong><b>標籤-
都會讓文字產生加粗效果
<strong>用於強調文本，強度更深，表示重要文本--->用於SEO優化<b>只是視覺加粗效果--->單純爲了產生加粗
-
<em><i>標籤em用於強調文本i只是視覺斜體效果<strong>比<em>強調更強
-
特殊符號：
---->空格> --->大於號<；--->小於號"；--->引號©-->版權號
第三章 html基本標籤
-
HTMl基本標籤：-
span標籤對被用來組合文檔中的行內元素
注意：span沒有固定的格式表現，當對它應用樣式時，纔會產生視覺上的變化
-
<pre>標籤文字的格式按源碼的排版來顯示，咱們稱之爲預處理格式
-
<a>標籤--->他有一個必不可少的屬性 hreftarget屬性：_self(在原來頁面打開)_blank（新窗口打開）_top（打開時忽略全部的框架）_parent（在父窗口中打開）
-
建立錨點和錨連接
-
錨點也是一種超連接，是頁面內進行跳轉的超連接
第一步：建立錨點
<a name="錨點名稱"></a>第二步：使用建立好的錨點名稱
<a href="#錨點名稱">內容</a>
-
-
marquee標籤能夠建立一個內容滾動效果
-
<marquee direction="down" loop="4" onmouseover=this.stop() onmouseout=this.start()></marquee>
direction表示滾動方向，取值有（left,right,up,down,默認left）loop表示滾動循環的次數，默認爲無限循環
onmouseover=this.stop() onmouseover=this.start() scrollamout="1"(滾動速度)
表示當鼠標移上區域的時候中止滾動，鼠標移開繼續滾動
第四章 img圖片標籤與路徑
-
圖片標籤與路徑：
常見圖片格式
jpgpnggifGif（只支持全透明）Jpeg/jpgPng半/全透明都支持
-
圖片標籤寫法 ：
<img src="" alt="" width="" height="" />
-
圖片四要素：
src=""圖片路徑alt=""圖片含義width=""圖片寬度 和圖片大小保持一致height=""圖片高度 和圖片大小保持一致title=""
-
路徑知識：
-
相對路徑、絕對路徑：
相對路徑：(Relative Path) 相對於該文件的路徑；
絕對路徑：(Absolute Path) 從磁盤出發的路徑；
<img src="" …… align="" />align屬性--設置圖片與後面文字的位置關係
值--top、bottom、middle、absmiddle、left、right
-
在靜態頁面中：
-
/開頭表示根目錄；./表示當前目錄；（斜畫線前面一個點）../上級目錄；（斜畫線前面兩個點）直接用文件名不帶/也表示同一目錄
這些都是相對於當前文件的位置來講的，若是用絕對路徑的話就是寫全了。
第五章 三種列表的講解
-
三種列表的知識講解：
-
<ul>無序列表無序列表是一個沒有順序項目的列表，此列表項默認粗體圓點進行標識
-
<ul> <li></li> <li></li> <li></li> </ul>
-
<ol>有序列表
有序列表也是一列項目，只是列表項目使用的是數字進行標記。 有序列表始於
<ol>標籤。每一個列表項始於<li>標籤。
<ol> <li>內容一</li> <li>內容二</li> <li>內容三</li> </ol>
-
列表符號
-
無序列表-列表符號:
type="circle"空心圓type=「disc」實心圓 默認值type="square"方塊符
-
有序列表-列表符號
type="A"A B C Dtype="a"a b c dtype="1"1 2 3 4 默認值type="I" I II III type="i" i ii iii
列表嵌套
無序列表-嵌套
-
<ul> <li>柚子 <ul> <li>沙田柚</li> <li>蜜柚</li> </ul> </li> <li>荔枝</li> <li>蘋果</li></ul>
有序列表-嵌套
<ol> <li>茶 <ul> <li>紅茶</li> <li>綠茶</li> </ul> </li> <li>果汁</li> <li>牛奶</li></ol>
-
定義列表
定義列表不只僅是一列項目，而是項目及其註釋的組合。定義列表以
<dl>標籤開始。每一個定義列表項以<dt>開始。每一個自定義列表項的定義以<dd>開始。
<dl>
<dt>pc網頁製做</dt>
<dd>學習DIV+CSS JS JQ 項目實戰</dd>
<dt>手機網頁製做</dt>
<dd>手機網頁製做實戰</dd>
</dl>
-
dd是對dt的解釋< dl>< /dl>用來建立一個普通的列表,< dt>< /dt>用來建立列表中的上層項目，< dd>< /dd>用來建立列表中最下層項目，< dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標誌對之間。
<dl>
<dt>中國城市</dt>
<dd>北京 </dd>
<dd>上海 </dd>
<dd>廣州 </dd>
<dt>美國城市</dt>
<dd>華盛頓 </dd>
<dd>芝加哥 </dd>
<dd>紐約 </dd>
</dl>
dl是definition list的縮寫dt是definition title的縮寫dd是definition description的縮寫list-style屬性具備三個屬性份量：list-style-position：設置列表項圖標的位置，位於文本內或者文本外list-style-type： 設置列表項圖標的類型list-style-image：使用圖像設置列表項圖標
第六章 表單元素(上)
-
表單標籤:
-
<form>表單標籤<form>表單是一個包含表單元素的區域，包括起來的都是表單的內容
-
<form> <input type="text"/> </form>
-
HTML標籤 -
Action和確認按鈕：當用戶單擊確認按鈕時，表單的內容會被傳送到另外一個文件。表單的動做屬性定義了目的文件的文件名。由動做屬性定義的這個文件一般會對接收到的輸入數據進行相關的處理。
<form action="html.do" method="get">
username: <input type="text" name="user" />
<input type="submit" value="提 交" />
</form>
HTML標籤 - 隱藏域隱藏標籤：隱藏域在頁面中對於用戶是不可見的，在表單中插入隱藏域的目的在於收集或發送信息，以利於被處理表單的程序所使用。瀏覽者單擊發送按鈕發送表單的時候，隱藏域的信息也被一塊兒發送到服務器
<form>
<input type="hidden" name="hid" value="value">
</form>
-
<input>標籤的掌握-
經常使用
type類型：<input type="" name="" value="" />type="text"單行文本輸入框type="password"密碼（maxlength=""）type="radio"單項選擇（checked="checked"）type="checkbox"多項選擇type="button"按鈕type="submit"提交type="image"圖片提交type="file"上傳文件type="reset"重置type="hidden"隱藏
-
關於表單中的設置默認值：
<input type="text" name="" value="今天心情不錯" /> <input type="radio" name="" value="" checked="checked"> <input type="checkbox" name="" value="" checked="checked">
<select name="" > <option value=""></option> <option value="" selected="selected"></option> <select>
textarea沒有默認值-
<label>標籤的使用-
<label></label>label元素不會向用戶呈現任何特殊效果。不過，它爲鼠標用戶改進了可用性。
若是您在
label元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上。
<label>標籤的for屬性應當與相關元素的id屬性相同。例子：（重要---註冊表單--用戶體驗--必作）
-
<p>單向選擇</p> <label for="male">男：</label><input type="radio" name="sex" id="male"/> <label for="nv">女：</label><input type="radio" name="sex"checked="check"/>
第七章 表單和表格(下)
-
表單和表格標籤：
<textarea>文本域標籤<textarea>標籤：<textarea></textarea>是文本域標籤，能夠在其中插入一段文字內容，它有兩個經常使用屬性rows和cols
-
注意：
rows表示這個文本域有多少行cols表示這個文本域有多少列
除了這兩個屬性它還有
readonly（只讀，文本域的內容沒法改變，至關於協議）和title（鼠標放上提示）-
<select>標籤的掌握注：當提交表單時，瀏覽器會提交選定的項目，或者收集用逗號分隔的多個選項，將其合成一個單獨的參數列表，而且在將
<select>表單數據提交給服務器時包括name屬性
<form>
<select name="" id="">
<option value="1">1月</option>
<option value="2">2月</option>
</select>
</form>
經常使用到的屬性：
disabled=「disabled」 name="sel" size="2"
<table>表格標籤<table>表格標籤：<table>是表格標籤，能夠用它定義一個表格。
<table border="1">
<tr>
<td>姓名</td>
<td>性別</td>
</tr>
</table>
注意：
<table>的border屬性不能少-
<tr><td>標籤的使用-
<tr>行標籤：<tr>能夠定義表格中的一行，一個<tr></tr>表示一行。
-
<table border="1"> <tr> <td>姓名</td> <td>性別</td> </tr> <tr> <td>姓名</td> <td>性別</td> </tr> </table>
-
<td>單元格標籤:<td>能夠定義表格中的一個單元格，<td></td>表示一個單元格。
<table border="1"> <tr> <td >姓名</td> <td>性別</td> <td>愛好</td> </tr> </table>
border-collapse屬性設置是否將表格邊框摺疊爲單一邊框：border-collapse:collapse;colspan左右合併rowspan上下合併
第一部分總結：
非可視化標籤：
headmetastylescrpit...可視化標籤：
imgdivspanaulli...只有可視化標籤，才能用
css改變它單標籤：
metalinkbaseimginputbrhr雙標籤：
htmlheadbodydivapspan..ullioldl....-
經常使用可視化標籤
-
div通常用它來佈局
-
a 超連接標籤
href*屬性：設置跳轉的網頁地址target屬性：設置跳轉的目標結論：凡事頁面能夠點擊跳轉或者表單提交的文字，都用
a標籤
-
imgsrc*屬性用來設置圖片的url數據alt提供給搜索引擎搜索的widthheight結論 ：顯示圖片
-
ul li
列表
結論：只要未來設計頁面中有固定樣式的列表，就用ul和li
-
tablecaptiontrtd (th)慢慢已經被淘汰了 被ul li代替
若是是合併豎排的就是合併行（
rowspan）若是是合併橫排的就是合併列（
colspan）
-
HTML部分導圖總結
第二部分 CSS
第八章 css基礎知識
-
css基礎知識：css樣式表的定義css：（Cascading Style Sheets）層疊樣式表；
-
分類及位置：內部樣式
-head區域style標籤裏面外部樣式-
link調用內聯樣式-標籤元素裏面
css內的註釋：/*註釋內容*/-
css樣式表的語法CSS規則由兩個主要的部分構成：要添加樣式的盒子名或者標籤名、和要添加的樣式。盒子名或者標籤名{屬性:值;}
-
CSS中幾種顏色的表示方法
-
用顏色名錶示
-
有17個預先肯定的顏色，它們是
aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,
olive,orange,purple,red,silver,teal,white, andyellow
-
-
- **用十六進制的顏色值表示(紅、綠、藍)** - `#FF0000`或者`#F00 ` - **用rgb(r,g,b)函數表示** - 如：`rgb(255,255,0)` - **用hsl(Hue,Saturation,Lightness)函數表示（色調、飽和度、亮度)** - 如：`hsl(120,100%,100%)`,色調0表明紅色，`120`表明綠色，`240`表明
藍色
- **用`rgba(r,g,b,a)`函數表示 ** - 其中`a`表示的是改顏色的透明度，取值範圍是`0~1`，其中`0`表明徹底透明 - **用hsla(Hue,Saturation,Lightness,alpha)函數表示** - 色調、飽和度、亮度、透明度
例子
<div style="position:absolute;top:0px">
<div style="background-color:gray;">background-color:gray</div>
<div style="background-color:#F00;">background-color:#F00</div>
<div style="background-color:#ffff00;">background-color:#ffff00</div>
<div style="background-color:rgb(255,0,255);">background-color:rgb(255,0,255)</div>
<div style="background-color:hsl(120,80%,50%);">background-color:hsl(120,80%,50%)</div>
<div style="background-color:rgba(255,0,255,0.5);">background-color:rgba(255,0,255,0.5)</div>
<div style="background-color:hsla(120,80%,50%,0.5);">background-color:hsla(120,80%,50%,0.5)</div>
</div>
-
內部樣式表
當單個頁面須要設置樣式時，就應該使用內部樣式表。
使用
<style></style>標籤在文檔<head></head>裏面定義內部樣式表
<head>
<style type="text/css" >
p{color:red;}
</style>
</head>
從外部引入到樣式分爲兩種：（注意寫在
head標籤裏面）當樣式須要應用於不少頁面時，就須要用到外部樣式表，首先須要建立一個
css文件，而後引用到咱們的頁面中。Link樣式表式：<link rel=」stylesheet」 type=」text/css」 href=」my.css」(href表示路徑)>Html式：<style type="text/css">@import url("css.css");></style>-
內聯樣式表（優先級高）
寫在標籤裏面的樣式
如：
<p style="color:red;"></p>
表示給
p標籤裏面的文字顏色設置爲紅色-
區別：外鏈樣式與導入樣式
link標籤是屬於xhtml範疇，而@import則是css2.1中特有的。link標籤除了能夠加載CSS外，還能夠作不少其它的事情，好比定義RSS，定義rel鏈接屬性等，@import就只能加載CSS了。加載的順序的區別，
link加載的css時，是一種並行(沒有嘗試是不是這樣)加載CSS方式，而@impor則在整個頁面加載完成後才加載。兼容性的區別，因
@import`CSS2.1才特有的，因此對於不兼容CSS2.1`的瀏覽器來講，無效。在樣式控制上(好比動態改變網頁的佈局時,使用
javascript操做DOM)的區別，此時@import就無能爲力了。
-
樣式的優先級補充
-
相同權值狀況下，
CSS樣式的優先級總結來講，就是——就近原則（離被設置元素越近優先級別越高）：內聯樣式表（標籤內部）>嵌入樣式表（當前文件中）>外部樣式表（外部文件中）
-
權值不一樣時，瀏覽器是根據權值來判斷使用哪一種
css樣式的，哪一種樣式權值高就使用哪一種樣式-
層疊優先級是:
瀏覽器缺省<外部樣式表<內部樣式表<內聯樣式
其中樣式表又有:
類選擇器<類派生選擇器<ID選擇器<ID派生選擇器-
派生選擇器之前叫上下文選擇器，因此完整的層疊優先級是:
瀏覽器缺省<外部樣式表<外部樣式表類選擇器<外部樣式表類派生選擇器<外部樣式表ID選擇器<外部樣式表ID派生選擇器<內部樣式表<內部樣式表類選擇器<內部樣式表類派生選擇器<內部樣式表ID選擇器<內部樣式表ID派生選擇器<內聯樣式...共12個優先級
-
另外，若是同一個元素在沒有其餘樣式的做用影響下，其
Class定義了多個並以空格分開，其優先級順序爲：一個元素同時應用多個
class，後定義的優先（即近者優先），加上!important者最優先！
第九章 css選擇器(上)
-
css選擇器：class類選擇器能夠重複利用id選擇器惟一
-
標籤選擇器
什麼是選擇器：css選擇器就是要改變樣式的對象
選擇器
{屬性:值;屬性:值;}標籤選擇器：頁面中全部的標籤都是一個選擇器
p{color:red;}-
ID選擇器選擇
id命名的元素 以#開頭#p1{color:#0f0;}
-
類選擇器
class選擇器，選擇clas命名的元素 以.開頭.first{color:#00f;}
css代碼寫完後上線前要通過壓縮處理本地和服務器分兩個
css版本（備份）壓縮後註釋都清除，空間體積減小
-
羣組選擇器
選擇多個元素,以逗號隔開
#main,.first,span,a,h1{color:red;}
-
包含選擇器
-
選擇某元素的後代元素，也稱後代選擇器，父類與子類間以空格隔開
pspan{color:red;}
-
-
屬性選擇器
選擇包含某一屬性的元素
a[title]{color:red;}選擇包含title的a標籤a[title][href]{color:red;}選擇包含title和href的a標籤
-
>+選擇器子類選擇器：只選擇子元素（只選擇兒子）（至關於包含元素）p > span{color:red;}
-
相鄰兄弟選擇器：只選擇後面的相鄰兄弟元素
p + span{color:red;}
第十章 css選擇器(下)
-
<a>僞類選擇器a:link {color:#FF0000;}/ 未訪問的連接 / （只用於a標籤）a:visited {color:#00FF00;}/ 已訪問的連接 / （只用於a標籤）a:hover {color:#FF00FF;}/* 鼠標移動到連接上*/（可和其餘標籤結合一塊兒用）a:active {color:#0000FF;}/ 選定的連接 /-
注意
僞類選擇器的排序很重要，
a:linka:visiteda:hovera:active，記做lvha
-
輸入僞類選擇器（針對表單）
input:focus{color:red;}/ 鍵盤輸入焦點 /
-
其餘僞類選擇器
p:first-child{color:red;}/* 第一個p */:before在元素以前添加內容。:after在元素以後添加內容。
-
css優先規則內聯樣式表->
ID選擇器—>Class類選擇器->標籤選擇器
第十一章 背景屬性
-
背景屬性：
背景的添加 ：
-
背景顏色的添加:
background:red;backgronnd-color:red;
-
背景圖片的添加：
background:url(「images/1.jpg」);backgronnd-image:url(「images/1.jpg」);
背景的平鋪
-
什麼是平鋪？平鋪就是圖片是否重複出現
不平鋪：
background-repeat:no-repeat;水平方向平鋪：
background-repeat:repeat-x;垂直方向平鋪：
background-repeat:repeat-y;徹底平鋪：默認爲徹底平鋪
-
背景圖片的定位
背景圖片的定位就是能夠設置顯示背景圖片的位置，經過屬性
background-position來實現background-position的取值可爲英文單詞或者數值和百分值。background-positon的英文單詞取值top lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerottom right
-
background-positon的數值取值background-position:x y;
-
positon的百分值取值background-position:x% y%;
-
背景圖片的大小
背景圖片的大小能夠經過屬性
background-size來設置background-size的取值可爲數值和百分值。
-
background-size的數值取值background-size:x y;
-
background-size的數值取值background-size:x% y%;
-
背景圖片的滾動
背景圖片是否隨着內容的滾動而滾動由
background-attachment設置background-attachment:fixed;固定，不隨內容的滾動而滾動background-attachment:scroll;滾動，隨內容的滾動而滾動
第十二章 文字文本屬性
-
css文字文本屬性：-
文字屬性
color:red;文字顏色font-size:12px; 文字大小font-weight:「bold」文字粗細(bold/normal)font-family:「宋體」文字字體font-variant:small-caps小寫字母以大寫字母顯示
-
文本屬性
text-align:center;文本對齊(right/left/center)line-height:10px;行間距(可經過它實現文本的垂直居中)text-indent:20px;首行縮進-
text-decoration:none;文本線(
none/underline/overline/line-through)
letter-spacing: 字間距
-
第十三章 盒子模型
-
盒子模型
盒子模型就是一個有高度和寬度的矩形區域
全部
html標籤都是盒子模型div標籤自定義盒子模型
-
全部的標籤都是盒子模型
class和id的主要差異是：class用於元素組（相似的元素，或者能夠理解爲某一類元素），而id用於標識單獨的惟一的元素。
-
盒子模型的組成
-
盒子模型組成部分：
自身內容：
width、height寬高內邊距：
padding盒子邊框：
border邊框線與其餘盒子距離：
margin外邊距內容+內邊距+邊框+外邊距=面積
-
-
border邊框常見寫法
border:1px solid #f00;
-
單獨屬性：
border-width:-
border-style:dotted點狀虛線dashed（虛線）solid（實線）double（雙實線）
border-color(顏色)
-
padding內邊距-
值：
像素/釐米等長度單位、百分比padding:10px;上下左右padding:10px 10px;上下 左右padding:10px 10px 10px;上 左右 下padding:10px 10px 10px 10px;上 右 下 左（設置4個點-->順時針方向）
-
-
單獨屬性：
- `padding-top:` - `padding-right:` - `padding-bottom:` - ` padding-left:`
當設置內邊距的時候會把盒子撐大，爲了保持盒子原來的大小，應該高度和寬度進行減少，根據
width和height減少-
margin 外邊距
值：與
padding相同單獨屬性：與
padding相同
外邊距合併：兩個盒子同時設置了外邊距，會進行一個外邊距合併
補充盒子模型內容
-
標準盒子模型
盒子模型是
css中一個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是ie盒子模型和標準w3c盒子模型。他們對盒子模型的解釋各不相同，先來看看咱們熟知的標準盒子模型
從上圖能夠看到標準
w3c盒子模型的範圍包括margin、border、padding、content，而且content部分不包含其餘部分IE盒子模型
從上圖能夠看到
ie盒子模型的範圍也包括margin、border、padding、content和標準
w3c盒子模型不一樣的是：ie盒子模型的content部分包含了border和paddingIE盒子模型width=padding+border+內容標準盒子模型 = 內容的寬度（不包含
border+padding）-
例：
一個盒子的
margin爲 20px，border爲 1px，padding爲 10px，content的寬爲 200px、高爲 50px，假如用標準w3c盒子模型解釋，那麼這個盒子須要佔據的位置爲：寬20*2+1*2+10*2+200=262px、高20*2+1*2*10*2+50=112px，盒子的實際大小爲：寬1*2+10*2+200=222px、高1*2+10*2+50=72px；假如用ie 盒子模型，那麼這個盒子須要佔據的位置爲：寬20*2+200=240px、高20*2+50=70px，盒子的實際大小爲：寬200px、高50px
那應該選擇哪中盒子模型呢？固然是「標準
w3c盒子模型」了。怎麼樣纔算是選擇了「標準w3c盒子模型」呢？很簡單，就是在網頁的頂部加上doctype聲明。假如不加
doctype聲明，那麼各個瀏覽器會根據本身的行爲去理解網頁，即ie瀏覽器會採用ie盒子模型去解釋你的盒子，而ff會採用標準w3c盒子模型解釋你的盒子，因此網頁在不一樣的瀏覽器中就顯示的不同了。反之，假如加上了
doctype聲明，那麼全部瀏覽器都會採用標準w3c盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。
用
jquery作的例子來證明一下
<html>
<head>
<title>你用的盒子模型是？</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox = $.boxmodel ? "標準w3c":"ie";
document.write("您的頁面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>
上面的代碼沒有加上
doctype聲明，在ie瀏覽器中顯示ie盒子模型，在 ff 瀏覽器中顯示「標準w3c盒子模型」。
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<title>你用的盒子模型是標準w3c盒子模型</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox = $.boxmodel ? "標準w3c":"ie";
document.write("您的頁面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>
代碼2 與代碼1 惟一的不一樣的就是頂部加了
doctype聲明。在全部瀏覽器中都顯示「標準w3c盒子模型」因此爲了讓網頁能兼容各個瀏覽器，讓咱們用標準
w3c盒子模型-
擴展
第十四章 塊元素、行元素與溢出
-
基本概念
塊級元素：默認狀況下獨佔一行的元素，可控制寬高、上下邊距；
行內元素：默認狀況下一行能夠擺放多個的元素，不可控制寬高和上下邊距
-
行塊轉換
display:none; 不顯示display:block; 變成塊級元素display:inline; 變成行級元素display:inline-block; 以塊級元素樣式展現，以行級元素樣式排列
-
溢出
overflow:hidden; 溢出隱藏overflow:scroll; 內容會被修剪，瀏覽器會顯示滾動條overflow:auto; 若是內容被修剪，則產生滾動條
文本不換行：
white-space:nowrap;長單詞換行：
word-wrap:break-word;-
行內元素和快級元素小結
-
1、塊級元素：block element
每一個塊級元素默認佔一行高度，一行內添加一個塊級元素後沒法通常沒法添加其餘元素（
float浮動後除外）。兩個塊級元素連續編輯時，會在頁面自動換行顯示。塊級元素通常可嵌套塊級元素或行內元素；塊級元素通常做爲容器出現，用來組織結構，但並不全是如此。有些塊級元素，如只能包含塊級元素。
DIV是最經常使用的塊級元素，元素樣式的display:block都是塊級元素。它們老是以一個塊的形式表現出來，而且跟同級的兄弟塊依次豎直排列，左右撐滿。
-
2、行內元素：inline element
也叫內聯元素、內嵌元素等；行內元素通常都是基於語義級(semantic)的基本元素，只能容納文本或其餘內聯元素，常見內聯元素 「a」。好比
SPAN元素，IFRAME元素和元素樣式的display : inline的都是行內元素。例如文字這類元素，各個字母 之間橫向排列，到最右端自動折行。
-
3、block（塊）元素的特色:
①、老是在新行上開始；
②、高度，行高以及外邊距和內邊距均可控制；
③、寬度缺省是它的容器的100%，除非設定一個寬度。
④、它能夠容納內聯元素和其餘塊元素
-
4、inline元素的特色
①、和其餘元素都在一行上；
②、高，行高及外邊距和內邊距不可改變；
③、寬度就是它的文字或圖片的寬度，不可改變
④、內聯元素只能容納文本或者其餘內聯元素
-
對行內元素，須要注意以下:
設置寬度
width無效。 設置高度height無效，能夠經過line-height來設置。 設置margin只有左右
margin有效，上下無效。設置
padding只有左右padding有效，上下則無效。注意元素範圍是增大了，可是對元素周圍的內容是沒影響的。
-
5、常見的塊狀元素
address– 地址blockquote– 塊引用center– 舉中對齊塊dir– 目錄列表div– 經常使用塊級容易，也是CSS layout的主要標籤dl– 定義列表fieldset–form控制組form– 交互表單h1– 大標題h2– 副標題h3– 3級標題h4– 4級標題h5– 5級標題h6– 6級標題hr– 水平分隔線isindex–input promptmenu– 菜單列表noframes–frames可選內容，（對於不支持frame的瀏覽器顯示此區塊內容noscript– 可選腳本內容（對於不支持script的瀏覽器顯示此內容）ol– 有序表單p– 段落pre– 格式化文本table– 表格ul– 無序列表
-
6、常見的內聯元素
a– 錨點abbr– 縮寫acronym– 首字b– 粗體(不推薦)bdo–bidi overridebig– 大字體br– 換行cite– 引用code– 計算機代碼(在引用源碼的時候須要)dfn– 定義字段em– 強調font– 字體設定(不推薦)i– 斜體img– 圖片input– 輸入框kbd– 定義鍵盤文本label– 表格標籤q– 短引用s– 中劃線(不推薦)samp– 定義範例計算機代碼select– 項目選擇small– 小字體文本span– 經常使用內聯容器，定義文本內區塊strike– 中劃線strong– 粗體強調sub– 下標sup– 上標textarea– 多行文本輸入框tt– 電傳文本u– 下劃線
-
七，可變元素
可變元素爲根據上下文語境決定該元素爲塊元素或者內聯元素。
applet-java appletbutton- 按鈕del- 刪除文本iframe-inline frameins- 插入的文本map- 圖片區塊(map)object-object對象script- 客戶端腳本
8、行內元素與塊級元素有什麼不一樣
-
-
區別一：
塊級：塊級元素會獨佔一行，默認狀況下寬度自動填滿其父元素寬度
行內：行內元素不會獨佔一行，相鄰的行內元素會排在同一行。其寬度隨內容的變化而變化。
-
區別二：
塊級：塊級元素能夠設置寬高
行內：行內元素不能夠設置寬高
區別三：
-
塊級：塊級元素能夠設置
margin，padding行內：行內元素水平方向的
margin-left;margin-right;
padding-left;padding-right;能夠生效。可是豎直方向的margin-bottom;margin-top;padding-top;padding-bottom;卻不能生效。-
區別四：
塊級：
display:block;行內：
display:inline;
-
-
-
替換元素有以下：（和
img同樣的設置方法）<img>、<input>、<textarea>、<select><object>都是替換元素，這些元素都沒有實際的內容
能夠經過修改display屬性來切換塊級元素和行內元素
第十五章 定位
-
static靜態定位（不對它的位置進行改變，在哪裏就在那裏）默認值。沒有定位，元素出如今正常的流中（忽略
top,bottom,left, right或者z-index聲明）。
-
fixed固定定位（參照物--瀏覽器窗口）---作 彈窗廣告用到生成固定定位的元素，相對於瀏覽器窗口進行定位。 元素的位置經過
"left","top","right"以及"bottom"屬性進行規定。
-
relative（相對定位 ）（參照物以他自己）生成相對定位的元素，相對於其正常位置進行定位。
-
absolute（絕對定位）(除了static均可以，找到參照物-->與它最近的已經有定位的父元素進行定位)生成絕對定位的元素，相對於
static定位之外的第一個父元素進行定位。元素的位置經過 "
left","top","right"以及"bottom"屬性進行規定
-
z-index
z-index屬性設置元素的堆疊順序。擁有更高堆疊順序的元素老是會處於堆疊順序較低的元素的前面。定位的基本思想: 它容許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另外一個元素甚至瀏覽器窗口自己的位置。
-
一切皆爲框
塊級元素:
div、h1或p元素 即：顯示爲一塊內容稱之爲 「塊框「 ;行內元素:
span,strong,a等元素 即：內容顯示在行中稱 "行內框";使用display屬性改變成框的類型 即：
display:block; 讓行內元素設置爲塊級元素，display:none;沒有框
-
相對定位：
若是對一個元素進行相對定位，它將出如今它所在的位置上。
經過設置垂直或水平位置，讓這個元素「相對於」它的起點進行移動
.adv_relative { position: relative; left: 30px; top: 20px; }
-
絕對定位：
元素的位置相對於最近的已定位祖先元素，若是元素沒有已定位 的祖先元素，它的位置相對於最初的包含塊。
.adv_absolute { position: absolute; left: 30px; top: 20px; }
第十六章 框架
-
frameset框架：<frameset>---- 用來定義一個框架；雙標籤
不能和<body>一塊兒使用
-
rows、cols屬性rows定義行表示框架有多少行（取值px/%/*）cols定義列表示框架有多少列（取值px/%/*）
frame子框架
-
-
<
frame> ---- 表示框架中的某一個部分；單標籤，要跟結束標誌src顯示的網頁的路徑name框架名frameborder邊框線（取值 0 / 1）
-
<
noframes>屬性<
noframes> 提供不支持框架的瀏覽器顯示body的內容；雙標籤
<frameset>
<frame src=「」 />
<frame src=「」 />
<frame src=「」 />
<noframes>
<body>內容</body>
</noframes>
</frameset>
-
<iframe>內聯框架iframe元素會建立包含另一個文檔的內聯框架（即行內框架）容許和
body一塊兒使用width寬（取值 px / %）height高（取值 px / %）name框架名frameborder邊框線（取值 0 / 1）src顯示的網頁的路徑
第十七章 css高級屬性
-
opacity透明屬性-
opacity對於
IE6/7/，使用filter:alpha(opacity:值;) 值爲0-100對於
Webkit，Opera，Firefox，IE9+，使用opacity:值; 值爲0-1對於早期火狐，使用
-moz-opacity:值; 值爲0-1因此寫透明屬性時，通常寫法是
-
{
opacity:0.5;
filter:alpha(opacity：50);/*0-100*/
-moz-opacity:0.5; /*取值0-1*/-->針對早起版本的火狐兼容問題的解決
}
-
border-radius圓角邊框屬性-
向
div元素添加圓角邊框border-radius:10px;
-
-
box-shadow陰影屬性box-shadow屬性向框添加陰影效果,後面跟4個參數。box-shadow:0px 0px 10px #000;
-
<embed>屬性是
HTML5中新增的標籤,媒體嵌入插件標籤，能夠經過<embed>插入音頻或視頻<embed src=「media/music.mp3」 />格式
.mid.wav.mp3等
CSS部分導圖總結
原文件下載地址 訪問密碼 342a
第三部分 附錄
附錄一 DIV命名規範
企業
DIV使用頻率高的命名方法-
網頁內容類
-
標題:
title摘要:
summary箭頭：
arrow商標：
label網站標誌：
logo轉角/圓角：
corner橫幅廣告：
banner子菜單：
subMenu搜索：
search搜索框：
searchBox登陸：
login登陸條：
loginbar工具條：
toolbar下拉：
drop標籤頁：
tab當前的：
current列表：
list滾動：
scroll服務：
service提示信息：
msg熱點：
hot新聞：
news小技巧：
tips下載：
download欄目標題：
title熱點：
hot加入：
joinus註冊：
regsiter指南：
guide友情連接：
friendlink狀態：
status版權：
copyright按鈕：
btn合做夥伴：
partner投票：
vote左右中：
leftrightcenter
---
註釋的寫法:
/* Footer */內容區/* End Footer */
-
-
id的命名:
-
頁面結構
容器:
container頁頭：
header內容：
content/container頁面主體：
main頁尾：
footer導航：
nav側欄：
sidebar欄目：
column頁面外圍控制總體佈局寬度：
wrapper左右中：
leftrightcenter
---
-
導航
導航：
nav主導航：
mainbav子導航：
subnav頂導航：
topnav邊導航：
sidebar左導航：
leftsidebar右導航：
rightsidebar菜單：
menu子菜單：
submenu標題:
title摘要:
summary
---
-
-
-
功能
標誌：
logo廣告：
banner登錄：
login登陸條：
loginbar註冊：
regsiter搜索：
search功能區：
shop標題：
title加入：
joinus狀態：
status按鈕：
btn滾動：
scroll標籤頁：
tab文章列表：
list提示信息：
msg當前的:
current小技巧：
tips圖標:
icon註釋：
note指南：
guild服務：
service熱點：
hot新聞：
news下載：
download投票：
vote合做夥伴：
partner友情連接：
link版權：
copyright
-
-
class的命名:-
顏色:使用顏色的名稱或者16進制代碼,如
.red { color: red; }.f60 { color: #f60; }.ff8600 { color: #ff8600; }
-
字體大小,直接使用"font+字體大小"做爲名稱,如
.font12px { font-size: 12px; }.font9px {font-size: 9pt; }
-
對齊樣式,使用對齊目標的英文名稱,如
.left { float:left; }.bottom { float:bottom; }
-
標題欄樣式,使用"類別+功能"的方式命名,如
.barnews { }.barproduct { }
-
-
注意事項::
一概小寫;
儘可能用英文;
不加中槓和下劃線;
儘可能不縮寫，除非一看就明白的單詞.
-
推薦的
CSS書寫順序：-
顯示屬性
displaylist-stylepositionfloatclear
-
自身屬性
widthheightmarginpaddingborderbackground
-
文本屬性
colorfonttext-decorationtext-alignvertical-alignwhite-spaceother textcontent
-
---
---
附錄二 CSS精靈
-
CSS精靈原理以及應用
-
CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減小你的網站的HTTP請求數量。該圖片使用
CSSbackground和background-position屬性渲染，這也就意味着你的標籤變得更加複雜了，圖片是在CSS中定義，而非<img>標籤。
-
-
一個簡單的例子：
一張圖片做出一個按鈕的三個狀態
一個連接用
CSS作成按鈕的樣式，咱們可使用同一張圖片，完成按鈕的三個狀態，a:link，a:hover，a:active<a class="button" href="#">連接</a>加入右側的圖片爲：
200px 65px的三個按鈕圖拼合而成的圖片button.png，從上到下一次爲按鈕的普通、鼠標滑過、鼠標點擊的狀態。則可使用CSS進行定義。
a {
display:block;
width:200px;
height:65px;
line-height:65px; /*定義狀態*/
text-indent:-2015px; /*隱藏文字*/
background-image:url(button.png); /*定義背景圖片*/
background-position:0 0;
/*定義連接的普通狀態，此時圖像顯示的是頂上的部分*/
}
a:hover {
background-position:0 -66px;
/*定義連接的滑過狀態，此時顯示的爲中間部分，向下取負值*/
}
a:active {
background-position:0 -132px;
/*定 義連接的普通狀態，此時顯示的是底部的部分，向下取負值*/
}
-
更多的
CSS雪碧，圖片更復雜，背景定位更精確。可能會用到大量的數值如：
background:url(nav.png) -180px 24pxno-repeat; 來達到更精確的定位
-
優勢：
減小加載網頁圖片時對服務器的請求次數
能夠合併多數背景圖片和小圖標，方便在任何位置使用，這樣不一樣位置的請求只須要調用一個圖片，從而減小對服務器的請求次數，下降服務器壓力，同時提升了頁面的加載速度，節約服務器的流量。
提升頁面的加載速度
sprite技術的其中一個好處是圖片的加載時間(在有許多sprite時，單張圖片的加載時間)。由所需圖片拼成的一張GIF圖片的尺寸會明顯小於全部圖片拼合前的大小。單張的GIF只有相關的一個色表，而單獨分割的每一張GIF都有本身的一個色表，這就增長了整體的大小。所以，單獨的一張JPEG或者PNGsprite在大小上很是可能比把一張圖分紅多張得來的圖片總尺寸小。減小鼠標滑過的一些
bugIE6不會主動預加載鼠標滑過即a:hover中的背景圖片，因此，若是使用多張圖片，鼠標滑過會出現閃白的現象。使用CSS雪碧，因爲一張圖片便可，因此不會出現這種現象。
-
不足：
CSS雪碧的最大問題是內存使用影響瀏覽器的縮放功能
拼圖維護比較麻煩
使
CSS的編寫變得困難CSS雪碧調用的圖片不能被打印錯誤得使用
Sprites影響可訪問性
附錄三 部分工具資源
附錄四 編碼規範
附錄五 前端學習資源
其餘
- 1. java學習筆記總結-基礎篇
- 2. DIV+CSS學習筆記總結篇
- 3. 【筆記】Jsp學習總結
- 4. Markdown學習總結筆記
- 5. oracle學習筆記總結
- 6. Word2Vec --學習總結筆記
- 7. JVM學習筆記總結
- 8. 學習筆記：MyBatis總結
- 9. Vue2.0總結——（學習筆記②）
- 10. sqlserver2012 學習總結筆記
- 更多相關文章...
- • XML 總結 下一步學習什麼呢？ - XML 教程
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. java學習筆記總結-基礎篇
- 2. DIV+CSS學習筆記總結篇
- 3. 【筆記】Jsp學習總結
- 4. Markdown學習總結筆記
- 5. oracle學習筆記總結
- 6. Word2Vec --學習總結筆記
- 7. JVM學習筆記總結
- 8. 學習筆記：MyBatis總結
- 9. Vue2.0總結——（學習筆記②）
- 10. sqlserver2012 學習總結筆記