Zi 字媒體
2017-07-25T20:27:27+00:00
第一部分 HTML第一章 職業規劃和前景職業方向規劃定位：web前端開發工程師web網站架構師自己創業轉崗管理或其他web前端開發的前景展望：我們的前端學習群：543761540未來IT行業企業需求最多的人才結合最新的html5搶佔移動端的市場自己創業做老闆隨著互聯網的普及web開發成為企業的寵兒和核心web職業發展目標：第一、梳理知識架構負責內容的HTML我們的前端學習群：543761540負責外觀的css（層疊樣式表）負責行為的jsps切圖第二、分解目標（起步階段、提升階段、成型階段）起步階段：基本知識的掌握常用工具的掌握溝通技巧的掌握（圍繞客戶的需求）良好的開發習慣（加註釋、對齊方式）提升階段：熟悉掌握HTML基本標籤和屬性熟練掌握css的基本語法和使用瀏覽器兼容和w3c標準的掌握結合html+css+js開始系統項目的開發成型階段：精通DIV+CCS布局精通css樣式表控制html標籤熟悉運用js製作動態網站的效果能獨立開發完成網站第二章 html基本結構認識HTML：html不是一種編程語言，是一種標誌語言標記語言是由一套標識標籤組成的我們的前端學習群：543761540html使用標籤來描述網頁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用於強調文本我們的前端學習群：543761540i只是視覺斜體效果<strong>比<em>強調更強特殊符號： ---->空格> --->大於號<；--->小於號"；--->引號©-->版權號第三章 html基本標籤HTMl基本標籤：span標籤對被用來組合文檔中的行內元素注意：span沒有固定的格式表現，當對它應用樣式時，才會產生視覺上的變化<pre>標籤文字的格式按源碼的排版來顯示，我們稱之為預處理格式<a>標籤--->他有一個必不可少的屬性 hreftarget屬性：_self(在原來頁面打開)我們的前端學習群：543761540_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圖片標籤與路徑圖片標籤與路徑：常見圖片格式 jpg png gifGif （只支持全透明）Jpeg /jpg我們的前端學習群：543761540Png 半/全透明都支持圖片標籤寫法 ：<img src="" alt="" width="" height="" />圖片四要素：src="" 圖片路徑alt="" 圖片含義width="" 圖片寬度 和圖片大小保持一致height="" 圖片高度 和圖片大小保持一致title=""路徑知識：相對路徑、絕對路徑：相對路徑：(Relative Path) 相對於該文件的路徑；絕對路徑：(Absolute Path) 從磁碟出發的路徑；<img src="" …… align="" /> align屬性--設置圖片與後面文字的位置關係值--top、bottom、middle、absmiddle、left、right在靜態頁面中：/開頭表示根目錄；./表示當前目錄；（斜畫線前面一個點）../上級目錄；（斜畫線前面兩個點）我們的前端學習群：543761540直接用文件名不帶/也表示同一目錄這些都是相對於當前文件的位置來說的，如果用絕對路徑的話就是寫全了。第五章 三種列表的講解三種列表的知識講解：<ul>無序列表無序列表是一個沒有順序項目的列表，此列表項默認粗體圓點進行標識<ul> <li></li> <li></li> <li></li></ul>有序列表有序列表也是一列項目，只是列表項目使用的是數字進行標記。 有序列表始於 <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> </dldd是對dt的解釋< dl>< /dl>用來創建一個普通的列表,我們的前端學習群：543761540< 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</dldl是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"/> </formHTML標籤 - Action和確認按鈕：當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。<form action="html.do" method="get"> username: <input type="text" name="user" /> <input type="submit" value="提 交" /> </formHTML標籤 - 隱藏域隱藏標籤：隱藏域在頁面中對於用戶是不可見的，在表單中插入隱藏域的目的在於收集或發送信息，以利於被處理表單的程序所使用。瀏覽者單擊發送按鈕發送表單的時候，隱藏域的信息也被一起發送到伺服器<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" 多項選擇我們的前端學習群：543761540type="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<selecttextarea沒有默認值<label>標籤的使用<label></label>label 元素不會向用戶呈現任何特殊效果。不過，它為滑鼠用戶改進了可用性。我們的前端學習群：543761540如果您在 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>文本域標籤我們的前端學習群：543761540<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>表示一行。我們的前端學習群：543761540<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</tableborder-collapse 屬性設置是否將表格邊框摺疊為單一邊框：border-collapse:collapse;我們的前端學習群：543761540colspan左右合併rowspan上下合併第一部分總結：非可視化標籤：head meta style scrpit...可視化標籤：img div span a ul li...只有可視化標籤，才能用css改變它單標籤：meta link base img input br hr我們的前端學習群：543761540雙標籤：html head body div a p span ..ul li ol dl ....常用可視化標籤div一般用它來布局a 超鏈接標籤href*屬性：設置跳轉的網頁地址target屬性：設置跳轉的目標結論：凡事頁面可以點擊跳轉或者表單提交的文字，都用a標籤imgsrc*屬性用來設置圖片的url數據alt提供給搜索引擎搜索的width我們的前端學習群：543761540height結論 ：顯示圖片ul li列表結論：只要將來設計頁面中有固定樣式的列表，就用ul和litable caption tr td (th)慢慢已經被淘汰了 被ul li代替如果是合併豎排的就是合併行（rowspan）如果是合併橫排的就是合併列（colspan）HTML部分導圖總結HTML5標籤集合第二部分 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, and yellow用十六進位的顏色值表示(紅、綠、藍)#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(2550255)</div> <div style="background-color:hsl(120,80%,50%);"background-color:hsl(12080%50%)</div> <div style="background-color:rgba(255,0,255,0.5);"background-color:rgba(25502550.5)</div> <div style="background-color:hsla(120,80%,50%,0.5);"background-color:hsla(12080%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版本（備份）我們的前端學習群：543761540壓縮后註釋都清除，空間體積減少群組選擇器選擇多個元素,以逗號隔開 #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標籤）我們的前端學習群：543761540a:hover {color:#FF00FF;}/* 滑鼠移動到鏈接上*/（可和其他標籤結合一起用）a:active {color:#0000FF;} / 選定的鏈接 /注意偽類選擇器的排序很重要，a:link a:visited a:hover a:active，記作lvha輸入偽類選擇器（針對錶單）input:focus{color:red;} / 鍵盤輸入焦點 /其他偽類選擇器p:first-child{color:red;} /* 第一個p */:before 在元素之前添加內容。我們的前端學習群：543761540: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;我們的前端學習群：543761540垂直方向平鋪：background-repeat:repeat-y;完全平鋪：默認為完全平鋪背景圖片的定位背景圖片的定位就是可以設置顯示背景圖片的位置，通過屬性background-position來實現background-position的取值可為英文單詞或者數值和百分值。background-positon的英文單詞取值top lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerottom rightbackground-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)我們的前端學習群：543761540font-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標籤都是盒子模型我們的前端學習群：543761540div標籤自定義盒子模型所有的標籤都是盒子模型class和id的主要差別是：class用於元素組（類似的元素，或者可以理解為某一類元素），而id用於標識單獨的唯一的元素。盒子模型的組成盒子模型組成部分：自身內容：width、height 寬高內邊距： padding盒子邊框： border 邊框線與其他盒子距離： margin外邊距內容+內邊距+邊框+外邊距=面積border 邊框常見寫法 border:1px solid #f00;單獨屬性：border-width:border-style:dotted 點狀虛線dashed（虛線）我們的前端學習群：543761540solid（實線）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 盒子模型擴展學會使用box-sizing布局第十四章 塊元素、行元素與溢出基本概念塊級元素：默認情況下獨佔一行的元素，可控制寬高、上下邊距；行內元素：默認情況下一行可以擺放多個的元素，不可控制寬高和上下邊距行塊轉換display:none; 不顯示display:block; 變成塊級元素display:inline; 變成行級元素我們的前端學習群：543761540display:inline-block; 以塊級元素樣式展示，以行級元素樣式排列溢出overflow:hidden; 溢出隱藏overflow:scroll; 內容會被修剪，瀏覽器會顯示滾動條overflow:auto; 如果內容被修剪，則產生滾動條文本不換行：white-space:nowrap;長單詞換行：word-wrap:break-word;行內元素和快級元素小結一、塊級元素：block element每個塊級元素默認佔一行高度，一行內添加一個塊級元素后無法一般無法添加其他元素（float浮動后除外）。兩個塊級元素連續編輯時，會在頁面自動換行顯示。塊級元素一般可嵌套塊級元素或行內元素；塊級元素一般作為容器出現，用來組織結構，但並不全是如此。有些塊級元素，如只能包含塊級元素。DIV 是最常用的塊級元素，元素樣式的display:block都是塊級元素。它們總是以一個塊的形式表現出來，並且跟同級的兄弟塊依次豎直排列，左右撐滿。二、行內元素：inline element也叫內聯元素、內嵌元素等；行內元素一般都是基於語義級(semantic)的基本元素，只能容納文本或其他內聯元素，常見內聯元素 「a」。比如 SPAN元素，IFRAME元素和元素樣式的display : inline的都是行內元素。例如文字這類元素，各個字母 之間橫向排列，到最右端自動折行。三、block（塊）元素的特點:①、總是在新行上開始；②、高度，行高以及外邊距和內邊距都可控制；③、寬度預設是它的容器的100%，除非設定一個寬度。④、它可以容納內聯元素和其他塊元素四、inline元素的特點①、和其他元素都在一行上；②、高，行高及外邊距和內邊距不可改變；③、寬度就是它的文字或圖片的寬度，不可改變④、內聯元素只能容納文本或者其他內聯元素對行內元素，需要注意如下:設置寬度width 無效。 設置高度height無效，可以通過line-height來設置。 設置margin只有左右margin有效，上下無效。設置padding只有左右padding有效，上下則無效。注意元素範圍是增大了，但是對元素周圍的內容是沒影響的。五、常見的塊狀元素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 – 無序列表六、常見的內聯元素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 - 客戶端腳本八、行內元素與塊級元素有什麼不同區別一：塊級：塊級元素會獨佔一行，默認情況下寬度自動填滿其父元素寬度行內：行內元素不會獨佔一行，相鄰的行內元素會排在同一行。其寬度隨內容的變化而變化。區別二：塊級：塊級元素可以設置寬高行內：行內元素不可以設置寬高區別三：塊級：塊級元素可以設置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-indexz-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部分導圖總結原文件下載地址css選擇符(複製圖片地址到瀏覽器打開放大即可清晰查看)css選擇符css常見簡寫css簡寫速查HTML+CSS+JavaScript學習導圖筆記(複製圖片地址到瀏覽器打開放大即可清晰查看)HTML+CSS+JavaScript學習導圖筆記前端詳細學習路線(複製圖片地址到瀏覽器打開放大即可清晰查看)前端學習路線第三部分 附錄附錄一 DIV命名規範企業DIV使用頻率高的命名方法網頁內容類摘要: 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左右中：left right center註釋的寫法: /* Footer */ 內容區/* End Footer */id的命名:頁面結構容器: container頁頭：header內容：content/container頁面主體：main頁尾：footer導航：nav側欄：sidebar欄目：column頁面外圍控制整體布局寬度：wrapper左右中：left right center導航導航：nav主導航：mainbav子導航：subnav頂導航：topnav邊導航：sidebar左導航：leftsidebar右導航：rightsidebar菜單：menu子菜單：submenu摘要: summary功能標誌：logo廣告：banner登陸：login登錄條：loginbar註冊：regsiter搜索：search功能區：shop加入：joinus狀態：status按鈕：btn滾動：scroll標籤頁：tab文章列表：list提示信息：msg當前的:current小技巧：tips圖標: icon註釋：note指南：guild服務：service熱點：hot新聞：news下載：download投票：vote合作夥伴：partner友情鏈接：link版權：copyrightclass的命名:顏色:使用顏色的名稱或者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請求數量。該圖片使用CSS background和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 或者 PNG sprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。減少滑鼠滑過的一些bugIE6不會主動預載入滑鼠滑過即a:hover中的背景圖片，所以，如果使用多張圖片，滑鼠滑過會出現閃白的現象。使用CSS雪碧，由於一張圖片即可，所以不會出現這種現象。不足：CSS雪碧的最大問題是內存使用影響瀏覽器的縮放功能拼圖維護比較麻煩使CSS的編寫變得困難CSS 雪碧調用的圖片不能被列印錯誤得使用 Sprites 影響可訪問性附錄三 一些tips解決方案頁面優化實踐從下面的幾個方面可以進行頁面的優化：減少請求數圖片合併CSS文件合併減少內聯樣式避免在 CSS中使用 import減少文件大小選擇適合的圖片格式圖片壓縮CSS 值縮寫（Shorthand Property)文件壓縮頁面性能調整文件載入順序減少標籤數量調整選擇器長度盡量使用CSS 製作顯示錶現增強代碼可讀性與可維護性規範化語義化模塊化寫DIV+CSS 的一些常識不要使用過小的圖片做背景平鋪這就是為何很多人都不用 1px 的原因，這才知曉。寬高 1px 的圖片平鋪出一個寬高 200px 的區域，需要 200200=40, 000 次，佔用資源無邊框推薦的寫法是 border:none;，哈哈，我一直在用這個。 border:0; 只是定義邊框寬度為零，但邊框樣式、顏色還是會被瀏覽器解析，佔用資源慎用 通配符所謂通配符，就是將CSS 中的所有標籤均初始化，不管用的不用的，過時的先進的，一視同仁，這樣，大大的佔用資源。要有選擇的初始化標籤。CSS的十六進位顏色代碼縮寫習慣了縮寫及小寫，這才知道，原來不是推薦的寫法，為的是減少解析所佔用的資源。但同時會增加文件體積。孰優孰劣，有待仔細考證。樣式放頭上，腳本放腳下。不內嵌，只外鏈堅決不用 CSS表達式使用 引用樣式表，而不是通過@import 導入。一般來說，PNG比 GIF 要小，小得多。再者，GIF 中有多少顏色是被浪費的，很值得優化。千萬不要在 HTML中縮放圖片，一者不好看，二者佔資源。正文字體最好用偶數12px、14px、16px，效果非常好。特例，15px。block、ul、ol等上下留出至少一倍行距，左側至少兩倍行距，右側隨意。段落之間，至少要有一倍行距強行指定某些元素的 line-height，正文 1.6倍於文字大小，標題1.3倍。中文標點用全形英文夾雜在中文中，左右空格，半形。中文字體的粗體和斜體，遠離較好[建議] HTML 標籤的使用應該遵循標籤的語義下面是常見標籤語義p - 段落h1,h2,h3,h4,h5,h6 - 層級標題strong,em - 強調ins - 插入del - 刪除abbr- 縮寫code - 代碼標識cite - 引述來源作品的標題q - 引用blockquote - 一段或長篇引用ul - 無序列表ol - 有序列表dl,dt,dd - 定義列表常用代碼片段雅虎工程師提供的CSS初始化示例代碼【僅供參考】可以在html頭文件中直接引用，從而避免瀏覽器的不兼容帶來的錯誤。bodydivdldtddulollih1h2h3h4h5h6precodeformfieldsetlegendinputbuttontextareapblockquotethtd { margin:0; padding:0; }body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; }tdthcaption { font-size:14px; }h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }address, captioncite, code, dfn, em, strongth, var { font-style:normal; font-weight:normal; }a { color:#555; text-decoration:none; }a:hover { text-decoration:underline; }img { border:none; }olulli { list-style:none; }input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }table { border-collapse:collapse; }html { overflow-y: scroll; } .clearfix:after { content: "."; display: block; height:0; clear:both; visibility: hidden; }.clearfix { *zoom:1; }現代瀏覽器cssreset解決方案【推薦使用這個】normalize.cssmobile meta標籤<meta name=」viewport」 content=」width=320,target-densitydpi=dpi_value,initial-scale=1, user-scalable=no」/表格不被撐開table-layout: fixed; word-break: break-all;;border-collapse: collapse不設寬高居中<div id=」abc」 style=」display:table;text-align:center;width:100%;height:100%;」> <span style=」background:#f00; display:table-cell; vertical-align:middle;」> <input type=」button」 value=」item1″ /> </span> </div>透明度的兼容代碼filter:alpha(opacity=50); /*1-100*/-moz-opacity:0.5; /*0-1.0*/-khtml-opacity:0.5; /*0-1.0*/opacity:0.5; /*0-1.0*/文本溢出的幾種處理方法簡單隱藏div.hide{overflow:hidden}使用滾動條div.scroll{overflow:scroll}簡單裁切div.clip{ border:1px solid; overflow:hidden;/*超出隱藏*/ white-space:nowrap;/*強制在一行顯示*/ text-overflow:clip;/*裁切*/}超出部分省略號div.elli{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis;/*使用省略號*/}清除浮動的幾種方法方法一：投機取巧法 -- 不推薦直接一個放到當作最後一個子標籤放到父標籤那兒，此方法屢試不爽，兼容性強方法二：overflow + zoom方法 --不推薦.fix{overflow:hidden; zoom:1;}此方法優點在於代碼簡潔，涵蓋所有瀏覽器方法三：after + zoom方法 -推薦--此方法可以說是綜合起來最好的方法了clearfix只應用在包含浮動子元素的父級元素上.clearfix{zoom:1;}.clearfix:after{ display:block; content:'clear'; clear:both; line-height:0; visibility:hidden; }方法四 在方法三的基礎上的最優雅的做法【推薦】.clearfix:after.clearfix:before {/*before 是為了防止瀏覽器頂部空白的崩潰*/ content: " "; display: table; }.clearfix:after { clear: both; }清除浮動的原理是觸發BFC，這裡只有clear:both起清除浮動作用，其他的line-height:0; visibility:hidden;都是為了隱藏生的內容需要的拓展閱讀CSS中的浮動和清除浮動實用的60個CSS代碼片段一些總結自動繼承屬性：colorfonttext-alignlist-style...非繼承屬性：backgroundborderposition...具有破壞性的元素：floatdisplay:none;position:absoblute/fixed/sticky;具有包裹性的元素：display:inline-block/table-cellposition:absolute/fixed/stickyoverflow:hidden/scroll消除圖片底部間隙的方法圖片塊狀化-無基線對齊img{display:block;}圖片底線對齊img{vertical-align:bottom;}行高足夠小 - 基線位置上移.box{line-height:0;}一些概念BFCBFC全稱」Block Formatting Context」 中文為「塊級格式化上下文」記住這麼一句話：BFC元素特性表現原則就是，內部子元素再怎麼翻江倒海，翻雲覆雨都不會影響外部的元素BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此擴展閱讀CSS中的BFC優雅降級(graceful degradation)Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工作。由於IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於完全失效漸進增強 progressive enhancement：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來併發揮作用平穩退化是在瀏覽器沒有JavaScript功能，或沒有開啟JavaScript功能情況下，我們解決這種問題的方式；我們的前端學習群：543761540
寫了
5860316篇文章，獲得
23313次喜歡