第一部分HTML&CSS整理答案1.什么是HTML5？
答：HTML5是最新的HTML標(biāo)準(zhǔn)。
注意：講述HTML5推出的設(shè)計(jì)目的，以及現(xiàn)在市場的使用情況，瀏覽器支持情況等。。。。
設(shè)計(jì)目的
HTML5的設(shè)計(jì)目的是為了在移動設(shè)備上支持多媒體。新的語法特征被引進(jìn)以支持這一點(diǎn)，如video、audio和canvas 標(biāo)記。HTML5還引進(jìn)了新的功能，可以真正改變用戶與文檔的交互方式，包括：
· 新的解析規(guī)則增強(qiáng)了靈活性
· 新屬性
· 淘汰過時(shí)的或冗余的屬性
· 一個(gè)HTML5文檔到另一個(gè)文檔間的拖放功能
1.HTML5中什么是不同的新的表單元素類型？答：提示本地驗(yàn)證表單需要再外面添加form標(biāo)簽包起來，才能查看效果
color
date
datetime-local
time
url
range
telephone
number
search
1.HTML5的頁面結(jié)構(gòu)同HTML4或者更前的HTML有什么區(qū)別？答：一個(gè)典型的WEB頁面包含頭部，腳部，導(dǎo)航，中心區(qū)域，側(cè)邊欄?，F(xiàn)在如果我們想在在HTML4的HTML區(qū)域中呈現(xiàn)這些內(nèi)容，我們可能要使用DIV標(biāo)簽。
但是在HTML5中通過為這些區(qū)域創(chuàng)建元素名稱使他們更加清晰，也使得你的HTML更加可讀
以下是形成頁面結(jié)構(gòu)的HTML5元素的更多細(xì)節(jié)：（注意主要考的是標(biāo)簽語意化）
：代表HTML的頭部數(shù)據(jù)
：頁面的腳部區(qū)域
：頁面導(dǎo)航元素
：自包含的內(nèi)容
：使用內(nèi)部article去定義區(qū)域或者把分組內(nèi)容放到區(qū)域里
：代表頁面的側(cè)邊欄內(nèi)容
1.哪些瀏覽器支持HTML5？答：幾乎所有的高版本瀏覽器Safari，Chrome，F(xiàn)irefox，Opera，IE8以上都支持HTML5
1.為什么HTML5里面我們不需要DTD（Document Type Definition文檔類型定義）？答：HTML5沒有使用SGML或者XHTML，他是一個(gè)全新的東西，因此你不需要參考DTD，對于HTML5，你僅需放置下面的文檔類型代碼告訴瀏覽器識別這是HTML5文檔即可
1.HTML5的離線儲存？答：localStorage??? 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；
sessionStorage? 數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除。
1.瀏覽器是怎么對HTML5的離線儲存資源進(jìn)行管理和加載的呢？答：在線的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那么瀏覽器就會根據(jù) manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后 瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發(fā)生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資 源并進(jìn)行離線存儲。
離線的情況下，瀏覽器就直接使用離線存儲的資源。
1.請描述一下cookies，sessionStorage 和 localStorage 的區(qū)別？（1）cookie在瀏覽器和服務(wù)器間來回傳遞， sessionStorage和localStorage不會。
（2）sessionStorage和localStorage的存儲空間更大。
（3）sessionStorage和localStorage有更多豐富易用的接口。
（4）sessionStorage和localStorage各自獨(dú)立的存儲空間。
1.頁面可見性（Page Visibility）API 可以有哪些用途？答：在頁面被切換到其他后臺進(jìn)程的時(shí)候，自動暫停音樂或視頻的播放。
1.HTML5的form如何關(guān)閉自動完成功能？答：給不想要提示的input是設(shè)置autocomplete=off即可。
1.一個(gè)div，要求實(shí)現(xiàn)當(dāng)內(nèi)容過少時(shí)，div的最低高度為200px，當(dāng)內(nèi)容較多時(shí)，div的高度被內(nèi)容撐開。答：min-height:200px
1.實(shí)現(xiàn)一個(gè)布局，分左中右三欄。左欄固定寬為200px，右欄固定150px，中欄隨屏幕寬自動適應(yīng)。寫出html和css。
#content{background:#ff6;}
#left,#right{width:200px;background:#fc0;float:left;}
#middle{float:left; width:100%;margin:0 -200px;}
#middle .inner{margin:0 200px;background:#ccc;}
#right{float:right;}
法二：
位置不能換
css
*{
margin:0;
padding:0;
}
#left{
float:left;
width:200px;
height:100px;
background:paleturquoise;
}
#middle{
margin:0200px;
height:100px;
background:black;
}
#right{
float:right;
width:200px;
height:100px;
background:palevioletred;
}
法三：
下面是css樣式代碼：
#main {float:left;width:100%;}
.content {margin:0 200px;height:100%;background:red;}
#left{float:left;width:200px;margin-left:-100%;background:blue;}
#right{float:left;width:200px;margin-left:-200px;background:green;}
ut???h???
1.a標(biāo)簽的四個(gè)偽類是什么？如何排序？為什么？愛恨分明原則: l v h a
link visited hover active
注釋：為了產(chǎn)生預(yù)期的效果，在CSS 定義中，a:hover 必須位于 a:link 和 a:visited 之后 !
注釋：為了產(chǎn)生預(yù)期的效果，在CSS 定義中，a:active 必須位于 a:hover 之后??！
注釋：Pseudo-class（偽類）的名稱對大小寫不敏感。
注釋：偽類可與CSS 類配合使用：
a.red:visited {color: #FF0000;}
如果上面這個(gè)例子中的鏈接已訪問過，那么它會顯示為紅色。
1.如何實(shí)現(xiàn)浮動元素居中
我是浮動的
我也是居中的
.box{
float:left;
position:relative;
left:50%;
}
p{
float:left;
position:relative;
right:50%;
1.已知一個(gè)div內(nèi)有一個(gè)img，兩者的高度均不知道，但圖片的高度一定小于div的高度。用css實(shí)現(xiàn)圖片在div內(nèi)的垂直居中。參考：http://www.jb51.net/css/76120.html
http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg"/>
.box{
/*非IE的主流瀏覽器識別的垂直居中的方法*/
display:table-cell;
vertical-align:middle;
/*設(shè)置水平居中*/
text-align:center;
/*針對IE的Hack */
*display:block;
*font-size:175px;/*約為高度的0.873，200*0.873約為175*/
*font-family:Arial;/*防止非utf-8引起的hack失效問題，如gbk編碼*/
width:200px;
height:200px;
border:1pxsolid#eee;
}
.boximg{
/*設(shè)置圖片垂直居中*/
vertical-align:middle;
}
1.HTML靜態(tài)頁面出現(xiàn)中文亂碼如何解決？答：
1.下列標(biāo)簽既是行內(nèi)屬性標(biāo)簽又可以設(shè)寬高的標(biāo)簽是？（D）A.div ??? B. span ??? C. inputD. imgE. h1
1.用一兩句話說一下你對“盒模型”這個(gè)概念的理解，和它都涉及到哪些css屬性。答：網(wǎng)頁設(shè)計(jì)中常聽的屬性名：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。
這些屬性我們可以用日常生活中的常見事物——盒子作一個(gè)比喻來理解，所以叫它盒子模式。
CSS盒子模型就是在網(wǎng)頁設(shè)計(jì)中經(jīng)常用到的CSS技術(shù)所使用的一種思維模型。
1.外邊距、內(nèi)邊距、邊框有幾種書寫形式,列舉說明。參考：http://wangye.huseoblog.com/cssdivhezi.html
1.有上下兩個(gè)div，上一個(gè)div 設(shè)置margin-bottom：10px；下一個(gè)div設(shè)置margin-top： 5px；那么兩個(gè)div最后的間距是多少？答：10px
1.寫出下列CSS命令的最簡寫法{margin-left:20px; margin-bottom:50px; margin-right:20px; margin-top:20px;}答：margin: 20px 20px 50px;
1.我們用hack調(diào)兼容時(shí)，用到如下命令 div{height：300px；*height：400px；_height：500px;}，在ie6里div顯示高度是多少，火狐里顯示高度是多少？答：ie6:400px,????? 火狐：300px;
1.三層嵌套用在什么地方最合適，有什么優(yōu)點(diǎn)。答：有圓角邊框不固定寬度同時(shí)兼容ie的時(shí)候
1.背景圖合并用在什么地方最適合，有什么優(yōu)點(diǎn)。答: 通常當(dāng)遇到一個(gè)網(wǎng)站要加載大量icon(小圖標(biāo))的時(shí)候，我們會把它合并成sprite(圖片拼接)。目的是為了減少HTTP請求次數(shù)。這樣做既能減少頁面加載時(shí)間，又可以減輕服務(wù)器的負(fù)載
1.頁面如何在瀏覽器里達(dá)到居中，并且左右自適應(yīng)？答：margin: 0 auto;
1.HTML5版本類型聲明怎么寫。有什么用？答：
1.XHTML1.0版本你知道么，跟html5版本有什么區(qū)別答: XHTML 1.0 是 XML 風(fēng)格的 HTML 4.01。
XHTML 1.1 主要是初步進(jìn)行了模塊化。
HTML5 是下一代 HTML，取代 HTML 4.01。
W3C 原本確實(shí)計(jì)劃用 XHTML 系列替代 HTML 4.01，但 XHTML 系列實(shí)際上只活到了 1.1（1.1 和夭折的 1.2 已經(jīng)體現(xiàn)出過分 XML 的跡象，而 W3C 的理想其實(shí)在瘋狂的 XHTML 2 身上，當(dāng)然，它沒能誕生），還沒脫離 HTML 4.01 的陰影就死了。
還沒等XHTML 興起，它的地位就被 HTML5 取代了。
1.書寫ol，ul，table的嵌套規(guī)范答：http://www.5icool.org/a/201308/a2081.html
1.前端頁面有哪三層構(gòu)成，分別是什么？作用是什么？答: 分成：結(jié)構(gòu)層、表示層、行為層。
結(jié)構(gòu)層由HTML 或 XHTML之類的標(biāo)記語言負(fù)責(zé)創(chuàng)建。標(biāo)簽，也就是那些出現(xiàn)在尖括號里的單詞，對網(wǎng)頁內(nèi)容的語義含義做出了描述，但這些標(biāo)簽不包含任何關(guān)于如何顯示有關(guān)內(nèi)容的信息。例如，P標(biāo)簽表達(dá)了這樣一種語義：“這是一個(gè)文本段?！?/p>
表示層由CSS 負(fù)責(zé)創(chuàng)建。 CSS對“如何顯示有關(guān)內(nèi)容”的問題做出了回答。
行為層負(fù)責(zé)回答“內(nèi)容應(yīng)該如何對事件做出反應(yīng)”這一問題。這是 Javascript 語言和 DOM主宰的領(lǐng)域。
1.img的alt和title有什么區(qū)別？答: alt 是圖片加載失敗時(shí)，顯示在網(wǎng)頁上的替代文字； title 是鼠標(biāo)放上面時(shí)顯示的文字
1.HTML代碼的書寫規(guī)范有哪些？答:https://segmentfault.com/a/1190000003229217
1.瀏覽器的調(diào)試工具有哪些？都有什么功能？答:http://www.cnblogs.com/Excellent/p/5368812.html
1.table的合并邊框?qū)傩允鞘裁矗靠缧惺鞘裁?？跨列是什么?/b>答:合并邊框:cellspacing, 跨行:rowspan, 跨列: colspan
1.CSS是什么？有什么用處。答: 層疊樣式表是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言。
CSS目前最新版本為CSS3，是能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語言。相對于傳統(tǒng)HTML的表現(xiàn)而言，CSS能夠?qū)W(wǎng)頁中的對象的位置排版進(jìn)行像素級的精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力，并能夠進(jìn)行初步交互設(shè)計(jì)，是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語言。CSS能夠根據(jù)不同使用者的理解能力，簡化或者優(yōu)化寫法，針對各類人群，有較強(qiáng)的易讀性。
1.你知道less,sass這些東西么（小米）；答: CSS 預(yù)處理器技術(shù)已經(jīng)非常的成熟，而且也涌現(xiàn)出了越來越多的 CSS 的預(yù)處理器框架。最為普遍的三款 CSS 預(yù)處理器框架，分別是 Sass、Less CSS、Stylus。CSS 預(yù)處理器是一種語言用來為 CSS 增加一些編程的的特性，無需考慮瀏覽器的兼容性問題，例如你可以在 CSS 中使用變量、簡單的程序邏輯、函數(shù)等等在編程語言中的一些基本技巧，可以讓你的 CSS 更見簡潔，適應(yīng)性更強(qiáng)，代碼更直觀等諸多好處。
1.解釋W(xué)3C答: 萬維網(wǎng)聯(lián)盟創(chuàng)建于1994年，是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)。到目前為止，W3C已發(fā)布了200多項(xiàng)影響深遠(yuǎn)的Web技術(shù)標(biāo)準(zhǔn)及實(shí)施指南，
如廣為業(yè)界采用的超文本標(biāo)記語言（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）、可擴(kuò)展標(biāo)記語言（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)子集）以及幫助殘障人士有效獲得Web內(nèi)容的信息無障礙指南（WCAG）等，
有效促進(jìn)了Web技術(shù)的互相兼容，對互聯(lián)網(wǎng)技術(shù)的發(fā)展和應(yīng)用起到了基礎(chǔ)性和根本性的支撐作用。
1.頁面重構(gòu)答: 網(wǎng)站重構(gòu)不是一種技術(shù)，不是css+div，更不是標(biāo)準(zhǔn)，網(wǎng)站重構(gòu)是一種思想，是一種理念。
引用WebReBuild.ORG?的話：當(dāng)前國內(nèi)的同行普遍的認(rèn)為：所謂的網(wǎng)站重構(gòu)就是“DIV+CSS”，想法固然極度局限。但也不是另一部分的人認(rèn)為是“XHTML+CSS”，因?yàn)椤癤HTML+CSS”只是頁面重構(gòu)。真正的網(wǎng)站重構(gòu)理應(yīng)包含結(jié)構(gòu)、行為、表現(xiàn)三層次的分離以及優(yōu)化，行內(nèi)分工優(yōu)化，以及以技術(shù)與數(shù)據(jù)、人文為主導(dǎo)的交互優(yōu)化等。
重構(gòu)網(wǎng)站先重構(gòu)人，重構(gòu)你的理念，不要光光追求技術(shù)，追求還原設(shè)計(jì)稿，追求瀏覽器的兼容性，重要的是基礎(chǔ)和理念。當(dāng)你真正了解什么是網(wǎng)站重構(gòu)的時(shí)候網(wǎng)站重構(gòu)也就真正開始了。
1.div+css與table布局的有何區(qū)別？答: div+css:布局簡潔明了，使用方便，相對于表格來說更容易搜索的到！優(yōu)化程度高點(diǎn)。不易出現(xiàn)錯(cuò)誤或者不可控！樣式繁多，易控易修改。
Table: 表格布局不建議使用，這個(gè)算是快要被淘汰的一種布局方式。布局不容易調(diào)整和規(guī)劃。容易失控。大部分都不能使用太多樣式。
1.后臺編碼格式不是UTF-8怎么辦？答: 統(tǒng)一編碼格式
1.一個(gè)CSS文件如果過大的話，加載會很慢，占用過大帶寬，如果解決？答: 1.去除空格和換行,壓縮css代碼;
2.盡量使用簡寫, 縮減代碼;
3.將css文件分成多個(gè)文件
1.input標(biāo)簽存在的兼容問題？答:當(dāng)input標(biāo)簽在type為text時(shí)，在Firefox和Safari中的默認(rèn)高度為22像素（包括上下邊框）寬度為146像素（包括左右邊框），而在IE中的默認(rèn)高度為24像素，而寬度卻和Firefox和Safari是一致的，也是146像素。
當(dāng)input標(biāo)簽在type為submit時(shí)，在Firefox中的高度為23像素（包括陰影），寬度為75像素。在Safari中高度為21像素，寬度為73像素，在IE中高度為為25像素、寬度為73像素。
1.input中disabled與readonly有何區(qū)別？答: Readonly只針對input(text / password)和textarea有效，而disabled對于所有的表單元素都有效，包括select, radio, checkbox, button等。
表單元素在使用了disabled后，當(dāng)我們將表單以POST或GET的方式提交的話，這個(gè)元素的值不會被傳遞出去，而 readonly會將該值傳遞出去(這種情況出現(xiàn)在我們將某個(gè)表單中的textarea元素設(shè)置為disabled或readonly，但是submit button卻是可以使用的)。
1.input屬性有哪些？1.position屬性值，如只寫了absolute，是相對誰定的位？答:離它最近的已經(jīng)定位的父元素
1.CSS選擇器中div.ps是什么意思答: 類名是ps的div
1.使用display:inline-block在IE6中不能正常顯示，如何解決？答:方法1：直接讓塊元素設(shè)置為內(nèi)聯(lián)對象呈遞（設(shè)置屬性display:inline），然后觸發(fā)塊元素的 layout（如：zoom:1 等）。兼容各瀏覽器的代碼如下：div {display:inline-block;*display:inline; *zoom:1;...}
方法2：先使用display:inline-block 屬性觸發(fā)塊元素，然后再定義 display:inline，讓塊元素呈遞為內(nèi)聯(lián)對象（兩個(gè)display 要先后放在兩個(gè) CSS 樣式聲明中才有效果，這是 IE 的一個(gè)經(jīng)典 bug，如果先定義了display:inline-block，然后再將 display 設(shè)回 inline 或 block，layout 不會消失）。代碼如下（…為省略的其他屬性內(nèi)容）： div {display:inline-block;...}div {*display:inline;}
1.png圖片有幾種格式答:png有3種不同深度的格式：png8、png24、png321.display的屬性值有哪些？2.標(biāo)簽的隱藏（display:none和visibility:hidden）的區(qū)別答：visibility:hidden隱藏，但在瀏覽時(shí)保留位置；CSS display:none視為不存在，且不加載！
1.在頁面內(nèi)居中（水平和垂直方向）*3答：垂直居中:水平方向給父級設(shè)置text-align;使用左右margin值為auto
豎直方向:設(shè)置line-height值為元素高度;設(shè)置元素絕對定位,top:0;bottom:0 margin:auto, 0;
1.如何讓鏈接訪問過后的hover消失正常情況下: 愛恨原則: l —> v —> h — > a
為了達(dá)到上述效果,改變順序即可: l —> h —> v —> a
1.Ie6中為什么不能設(shè)置1px高的div答：在用DIV構(gòu)建網(wǎng)頁的時(shí)候，有時(shí)候需要的高度很小，這時(shí)候就可能會出現(xiàn)問題，因?yàn)椋琁E6下DIV有個(gè)默認(rèn)的高度，大約10-12px。當(dāng)你試圖定義一個(gè)高度小于這個(gè)默認(rèn)值的 div 的時(shí)候，IE 會固執(zhí)的認(rèn)為這個(gè)層的高度不應(yīng)該小于字體的行高。
解決辦法：
第一：定義該DIV字體大小。
例如:
第二：
直接限制自動調(diào)整
1.div中內(nèi)容沒有撐開高度的原因，怎么解決父親div沒有設(shè)置高度
孩子div設(shè)置高度了,
此時(shí),父親的高度是靠孩子撐起來的
但是當(dāng)孩子浮動了,
父親的高度也就沒了
此時(shí)需要給孩子增加一個(gè)兄弟div,并且clear:both,問題完美解決
1.雙倍邊距bug連接地址:http://www.360doc.com/content/14/1224/20/21166337_435502508.shtml
在產(chǎn)生雙邊距bug的元素內(nèi),增加一行屬性:display:inline;
第二種辦法:采用cssHack:margin-left:20px;_margin-left:20px;
1.如何讓div水平排列1:浮動
2.定位
1.定義id名和class名有什么區(qū)別從概念上來說:
id是先找到結(jié)構(gòu)/內(nèi)容，再給它定義樣式；class是先定義好一種樣式，再套給多個(gè)結(jié)構(gòu)/內(nèi)容。
從樣式效果上來說:
id的優(yōu)先級要比class高出一個(gè)層次
html中不管有幾個(gè)id,
在css獲取到的就是所有的
但是在js中通過document獲取到的是第一個(gè)
1.CSS有幾種引入方式？link和@import有什么區(qū)別link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS。
link引用CSS時(shí)，在頁面載入時(shí)同時(shí)加載；@import需要頁面網(wǎng)頁完全載入以后加載。
link是XHTML標(biāo)簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
1.在IE中給div設(shè)display:inline-block;它還會占一行不會?答：ie不支持display屬性
1.如何制作漸變效果（不使用CSS3）這里的關(guān)鍵點(diǎn)是h1 { position: relative } 和h1 span { position: absolute }
h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}
是的，就這些，你已經(jīng)搞定了
1.上下兩個(gè)div分別設(shè)置了margin-bottom和margin-top，兩個(gè)div之間的距離是多少？會發(fā)生融合效果,距離就是數(shù)值比較大的那個(gè)
1.除了ul、ol還用什么寫列表dl dt dd
1.如果不寫頭部聲明會有什么問題通常html DOCTYPE聲明是必須的，而且使用div+css更是必不可少，如果缺少或錯(cuò)誤document將會造成你的CSS失效或半失效，即因?yàn)閏ss失效，網(wǎng)頁布局變亂，有的css屬性不能體現(xiàn)。
另外:由于萬惡的IE（尤其指IE6和IE7），我們在頁面重構(gòu)時(shí)不免要對其進(jìn)行各種bug修復(fù)及差異化處理。在標(biāo)準(zhǔn)瀏覽器[1]中可實(shí)現(xiàn)的效果在IE里卻有各種離奇問題，例如IE6、IE7不能良好應(yīng)對的inline-block和.clearfix問題.
所以就加入了IE版本區(qū)分代碼，主要還是解決IE版本兼容性問題。
1.如何優(yōu)化你的頁面一、提倡前端開發(fā)工程師在書寫xhtml的時(shí)候做到結(jié)構(gòu)語義化。
結(jié)構(gòu)中主要包括了head和body兩個(gè)部分，但是我們經(jīng)常說的是結(jié)構(gòu)語義化主要是body中的標(biāo)簽，但是我在這里還是簡單的說一下head，head中其實(shí)包括了一些對于我們seo很有用的一些東西，比如title,Description,Keywords,這些東西在蜘蛛抓取的時(shí)候都是有幫助的，當(dāng)然，還有其他的一些，我在此就不一一說明了，比如設(shè)置緩存等一些其他的信息。
那么body中的話，包括的標(biāo)簽就很多了，我覺得作為一個(gè)合格的前端開發(fā)人員你應(yīng)該去熟悉他們，比如div,span,h,ul,ol,dl,p等等這類的標(biāo)簽的使用。應(yīng)該非常合理，還有就是注意h標(biāo)簽的斷層，及h1標(biāo)簽的使用，這些都是非常重要的。
同時(shí)在我們的結(jié)構(gòu)中不要出現(xiàn)style和onclick這樣的內(nèi)聯(lián)的樣式和事件。希望大家能夠注意結(jié)構(gòu)與表現(xiàn)、行為的分離。
二、css，js文件數(shù)量及大小的優(yōu)化
那么關(guān)于css、js的優(yōu)化的話，一般情況下建議css和js采用外聯(lián)式。但是如果你的頁面內(nèi)容比較多，設(shè)計(jì)師把整個(gè)效果做得比較花的話，恐怕css就非常多了，那么這種情況下，你一定要把你的css規(guī)劃好，盡量的采用縮寫，這樣可以減少css文件的大小，那么對css做相應(yīng)的規(guī)劃也可以減少css的個(gè)數(shù)，減少http請求數(shù)，js同理。
三、背景圖片數(shù)量及大小的優(yōu)化
由于我們的背景圖片數(shù)量比較多，這樣的話，會給服務(wù)器帶來影響，增加了http請求數(shù)，我們是否有一種好的解決辦法呢？這個(gè)答案是肯定的，如果你是一個(gè)合格的前端開發(fā)，你應(yīng)該清楚，在我們的css定義背景的時(shí)候，可以通過坐標(biāo)來實(shí)現(xiàn)對背景進(jìn)行定位的，既然如此，那么我們可以將這些背景合并起來，這樣即可減少http請求數(shù)，同時(shí)，我們在背景整合的時(shí)候，也需要考慮圖片質(zhì)量，同時(shí)也需要考慮圖片的大小.
你的背景圖片保證不超過3個(gè)以上，你的css文件不超過2個(gè)，js文件不超過3個(gè)。而且良好的遵守web標(biāo)準(zhǔn)的一些規(guī)定，css放到head中，js文件放到之前或者之后.
建議body中增加text-align:center
用 代替 @import
作為大型網(wǎng)站來說，首頁使用內(nèi)聯(lián)式樣式表，這樣可以減少http請求數(shù)的同時(shí)，也可以防止裸奔。當(dāng)然其他頁面需要使用外聯(lián)樣式表，這樣才可以方便維護(hù)。因?yàn)樽鳛榇笮途W(wǎng)站來說，他的首頁訪問量是非常的大的，所以。。
把樣式表置于頂部
把腳本置于頁面底部
避免使用CSS 表達(dá)式（Expression）
使用外部JavaScript 和 CSS
削減JavaScript 和 CSS
用 代替 @import
避免使用濾鏡
剔除重復(fù)腳本
減少DOM訪問
開發(fā)智能事件處理程序
??4-??y=??+??
最好的方案就是按照HTML 規(guī)范在文檔? 內(nèi)加載你的樣式表。
使用此方法的時(shí)候，我們每次都要加載兩個(gè)js文件或者寫兩個(gè)標(biāo)簽才行，這樣不太好，http請求會增多，那么我們可以打開DD_belatedPNG.js文件，在尾部加入如下代碼即可：
window.onload = function()
{
DD_belatedPNG.fix(".pngFix,.pngFix:hover");
}
這樣我們只需要引入此JS，在需要透明的標(biāo)簽上加入class="pngFix"即可，簡單 · 方便 · 快捷！
優(yōu)點(diǎn)：
1、CSS代碼無需任何修改，按照平時(shí)的思路來寫即可；
2、無需配置；
3、沒有多余的gif圖片；
4、支持img；
5、支持平鋪；
6、支持CSS Sprite；
8、支持Hover等偽類；
缺點(diǎn)：
1、額外加入了js文件（6.39k）和http請求，可以忽略不計(jì)；
2、當(dāng)文件載入之前，會先暫時(shí)呈現(xiàn)灰底；
3、js文件過多的時(shí)候，可能會報(bào)錯(cuò)，導(dǎo)致js無法正常運(yùn)行（這種情況極少出現(xiàn)，可以忽略不計(jì)）；
使用情況：
1、當(dāng)前6種方法均不能解決問題的時(shí)候可考慮；
2、當(dāng)png圖片過多的時(shí)候可考慮，因?yàn)閜ng圖片太多，使用前面的幾個(gè)方法，有的會導(dǎo)致CSS代碼冗余過多，還不如引入此文件劃算；
方案8 - PNG8格式的圖片解決方案：
介紹：png8和gif都是8位的透明度，IE6與生俱來就支持png8的索引色透明度，但不支持png或8位以上的 alpha 透明度。而對于非動畫的GIF建議你使用PNG8，因?yàn)轶w積會更小~
思路：一個(gè)最簡單也最保險(xiǎn)的方法讓IE6支持PNG圖片透明（小小的分享一下）
text-t??????
1.Hack是什么怎么用？http://www.kwstu.com/Admin/ViewArticle/201409011604277330
1.Border 虛邊border: 1px dashed red;
1.li在ie6與ie8下的高度問題在li樣式上加上vertical-align:bottom;
1.Css常見兼容性問題，如何解決？http://www.zhufengpeixun.cn/CSS/2011-08-25/142.html
1.Css常見選擇器有哪些？優(yōu)先級？選擇器:http://www.runoob.com/cssref/css-selectors.html
優(yōu)先級:id > class > 層級選擇器和標(biāo)簽選擇器
1.你如何理解絕對定位和相對定位的？都用在什么地方？有什么優(yōu)點(diǎn)和缺點(diǎn)？絕對定位就是你的位置已經(jīng)不屬于你了，你只能漂浮在半空中。
相對定位就是你的位置你還占用的，人還在飄著
有意思的是這些都是相對父輩元素有position為相對或者絕對屬性來定位的，都找不到的話就以body窗口來定位
因?yàn)榻^對定位（和文檔流沒關(guān)系）如無申明，則其是對與body而言的，處理不好的話。如顯示器尺寸變了，可能就會變型。
相對定位的元素屬文檔流，所以穩(wěn)定的，相對定位是相對他該出現(xiàn)的位置，如無設(shè)top left之類，和普通div基本一樣。
一般的絕對定位是這樣用的，父元素要是相對定位的且須有布局，如有個(gè)高度，這樣子元素用絕對定位，就可以相對它的父元素進(jìn)行絕對定位，父元素若不這樣做，那么子元素用絕對定位其實(shí)是相對body定位
1.左側(cè)樣式固定，右側(cè)文本寬度自適應(yīng)如何布局看第五十六題面試題.1.下面的布局如何實(shí)現(xiàn),如何不用浮動還能使用什么布局方式定位. 或則flex-box
1.HTML靜態(tài)頁面出現(xiàn)中文亂碼如何解決？答:
1.下列哪個(gè)選擇器優(yōu)先級是最高的？a. #a b. .a .b .c .d .e .f .g .h .i .j .k .l .m .n .o c. #a .b d. div.b#a
答:d
1.寫CSS命令，設(shè)置字體為宋體，12px大小，顏色為#eeeeee,加粗。一、字體屬性主要包括下面幾個(gè)
font-family，font-style，font-variant，font-weight，font-size，font
font-family（字體族）: “Arial”、“Times New Roman”、“宋體”、“黑體”等;
font-style（字體樣式）: normal（正常）、italic（斜體）或oblique（傾斜）;
font-variant (字體變化): normal（正常）或small-caps（小體大寫字母）;
font-weight (字體濃淡): 是normal（正常）或bold（加粗）。有些瀏覽器甚至支持采用100到900之間的數(shù)字（以百為單位）;
font-size（字體大?。? 可通過多種不同單位（比如像素或百分比等）來設(shè)置, 如：12xp，12pt，120%，1em
如果用font 屬性的話，就可以把幾個(gè)樣式進(jìn)行簡化，減少書的情況；font 屬性的值應(yīng)按以下次序書寫(各個(gè)屬性之間用空格隔開)：
順序：font-style | font-variant | font-weight | font-size | line-height | font-family
二、font的簡寫實(shí)例
.font{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:arial,verdana;
}
上面的樣式簡寫為：
.font{font:italic small-caps bold 12px/1.5em arial,verdana;}
三、font的簡寫注意事項(xiàng)
1、簡寫時(shí)，font-size和line-height只能通過斜杠/組成一個(gè)值，不能分開寫。
2、順序不能改變.這種簡寫方法只有在同時(shí)指定font-size和font-family屬性時(shí)才起作用。而且，如果你沒有設(shè)定font-weight, font-style, 以及 font-varient ，他們會使用缺省值
1.常用布局屬性有哪些？有什么特點(diǎn)？margin , padding , position , float
http://www.codesec.net/view/404576.html
1.填空題一個(gè)div，css設(shè)置如下：{width:200px;margin:200px 20px;padding:50px 60px 70px;border:100px solid red;overflow:hidden;}在IE6怪癖解析下，這個(gè)div的實(shí)際寬是_360px___？在正常解析下，這個(gè)div的實(shí)際寬度是_560px___?
1.web網(wǎng)頁中常見的圖片格式有哪些？分別有什么特點(diǎn)？常用的圖片格式有JPG、GIF、PNG。
1、jpg：jpg全名是JPEG。JPEG圖片以 24 位顏色存儲單個(gè)位圖。JPEG 是與平臺無關(guān)的格式，支持最高級別的壓縮，不過，這種壓縮是有損耗的。漸近式 JPEG 文件支持交錯(cuò)。
2、gif:GIF分為靜態(tài)GIF和動畫GIF兩種，擴(kuò)展名為.gif，是一種壓縮位圖格式，支持透明背景圖像，適用于多種操作系統(tǒng)，“體型”很小，網(wǎng)上很多小動畫都是GIF格式。其實(shí)GIF是將多幅圖像保存為一個(gè)圖像文件，從而形成動畫，最常見的就是通過一幀幀的動畫串聯(lián)起來的搞笑gif圖，所以歸根到底GIF仍然是圖片文件格式。但GIF只能顯示256色。和jpg格式一樣，這是一種在網(wǎng)絡(luò)上非常流行的圖形文件格式。
3、png：PNG，圖像文件存儲格式，其設(shè)計(jì)目的是試圖替代GIF和TIFF文件格式，同時(shí)增加一些GIF文件格式所不具備的特性。PNG的名稱來源于“可移植網(wǎng)絡(luò)圖形格式(Portable Network Graphic Format，PNG)”，也有一個(gè)非官方解釋“PNG's Not GIF”，是一種位圖文件(bitmap file)存儲格式，讀作“ping”。PNG用來存儲灰度圖像時(shí)，灰度圖像的深度可多到16位，存儲彩色圖像時(shí)，彩色圖像的深度可多到48位，并且還可存儲多到16位的α通道數(shù)據(jù)。PNG使用從LZ77派生的無損數(shù)據(jù)壓縮算法，一般應(yīng)用于JAVA程序、網(wǎng)頁或S60程序中，原因是它壓縮比高，生成文件體積小。
1.在HTML中，SEO常見的白帽優(yōu)化技巧有哪些？http://seo.pingce.cc/seoweb/hmseo/20130626204.html
1.塊屬性標(biāo)簽與行屬性標(biāo)簽的區(qū)別？哪些標(biāo)簽是塊屬性的，哪些是行的?在標(biāo)準(zhǔn)文檔流里面，塊級元素具有以下特點(diǎn)：
①總是在新行上開始，占據(jù)一整行；
②高度，行高以及外邊距和內(nèi)邊距都可控制；
③寬如果不設(shè)置,默認(rèn)是父級的寬度，與內(nèi)容無關(guān)；
④它可以容納內(nèi)聯(lián)元素和其他塊元素。
行內(nèi)元素的特點(diǎn)：
①和其他元素都在一行上；
②高，行高及外邊距和內(nèi)邊距部分可改變；
③寬度只與內(nèi)容有關(guān)；
④行內(nèi)元素只能容納文本或者其他行內(nèi)元素。
不可以設(shè)置寬高，其寬度隨著內(nèi)容增加，高度隨字體大小而改變，內(nèi)聯(lián)元素可以設(shè)置外邊界，但是外邊界不對上下起作用，只能對左右起作用，也可以設(shè)置內(nèi)邊界，但是內(nèi)邊界在ie6中不對上下起作用，只能對左右起作用
http://www.cnblogs.com/imihiroblog/archive/2012/08/28/2660370.html
1.IE6和IE7有什么不同？答：
I.打開IE7，第一感覺就是簡潔干凈了許多。主要是去除了工具菜單，按鈕圖標(biāo)變得更加圓滑。
-transf&??bb??
