推56論壇

 找回密碼
 立即注冊(限中文)

QQ登錄

只需一步,快速開始

    查看: 1208|回複: 0

    [HTML教程] HTML&&css面試題

      [複制鏈接]
    發表于 2018-8-30 15:24:32 | 顯示全部樓層 |閱讀模式
    HTML&css相關問題1.XHTML和HTML有什麽區別
    • HTML是一種基本的WEB網頁設計語言,XHTML是一個基于XMl的置標語言
    • 最主要的不同
    • XHTML元素必須被正確地嵌套。
    • XHTML元素必須被關閉
    • 標簽名必須用小寫字母
    • XHTMl文檔必須擁有根元素
    2.什麽是語義化的HTML?
    • 直觀的認識標簽對于搜索引擎的抓取有好處,用正確的標簽做正確的事情!
    • HTML語義化就是讓頁面的內容結構化,便于對浏覽器,搜索引擎解析;
    • 在沒有樣式css情況下也以一種文檔格式顯示,並且是容易閱讀。搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權重,利于SEO。
    • 在閱讀源代碼的人對網站更容易將網站分塊,便于閱讀維護理解。
    2(1)、簡述一下你對HTML語義化的理解?
    • 1、用正確的標簽做正確的事情。
    • 2、html語義化讓頁面的內容結構化,結構更清晰,便于對浏覽器,搜索引擎解析;
    • 3、即使在沒有樣式CSS情況下也以一種文檔格式顯示,並且是容易閱讀的;
    • 4、搜索引擎的爬蟲也依賴于HTML標記確定上下文和各個關鍵字的權重,利用SEO;
    • 5、使閱讀源代碼的人對網站更容易將網站分塊,便于閱讀維護理解。
    3.常見的浏覽器內核有哪些?
    • Trident內核:IE,MaxThon,TT,The Word,360,搜狗浏覽器等。[又稱爲MSHTML]
    • Gecko內核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等;
    • Presto內核:Opera7及以上。[Opera內核原爲:Presto,現爲:Blink]
    • Webkit內核:Safari,Chrome等。[Chrome的:Blink(Webkit的分支)]
    3(1).常見哪幾種浏覽器測試?有哪些內核(Layout Engine)?
    • 浏覽器:IE、Chrome、FireFox、Safari、Opera
    • 內核:Trident、Gecko、Presto、Webkit
    4.HTML5有哪些新特性,移除了哪些元素?如何處理HTML5新標簽的浏覽器兼容問題?如何區分HTML和HTML5?
    • HTML5現在已經不是SGML的子集,主要是關于圖像,位置,存儲,多任務等功能的增加。
    • 繪畫canvas
    • 用于媒介回放的video和audio元素
    • 本地離線存儲localStorage長期存儲數據,浏覽器關閉後數據不丟失;
    • sessionStorage的數據在浏覽器關閉後自動刪除
    • 語意化更好的內容元素,比如article,footer,header,nav,section
    • 表單控件:calendar,date,time,email,url,search
    • 新的技術webworker,websocktGeolocation
    • 移除的元素
    • 純表現的元素:basefont,big,center,font,s,strike,tt,u;
    • 對可用性産生負面影響的元素:frame,frameset,noframes;
    • 支持HTML5新標簽:
    • IE8/IE7/IE6支持通過document,createElement方法産生的標簽,可以利用這一特性讓這些浏覽器支持HTML5新標簽,浏覽器支持新標簽後,還需要添加標簽默認的樣式。
    5.請描述一下cookies,sessionStorage(會話存儲)和localStrorage(本地存儲)的區別?
    • cookie在浏覽器和服務器間來回傳遞。sessionStorage和localStorage不會;
    • sessionStorage和localStorage的存儲空間更大;
    • sessionStorage和localStorage有更多豐富易用的接口;
    • sessionStorage和localStorage各自獨立的存儲空間;
    5、(1)請描述一下cookies、sessionStorage和localStorage區別?
    • cookie是網站爲了標示用戶身份而儲存在用戶本地終端(Client Side)上的數據(通常經過加密)。
    • cookie數據始終在同源的http請求中攜帶(即使不需要),即會在浏覽器和服務器間來回傳遞。
    • sessionStorage和localStorage不會自動把數據發給服務器,僅在本地保存
      存儲大小:
    • cookie數據大小不能超過4K。
    • sessionStorage和localStorage雖然也有存儲大小的限制,但比cookie大得多,可以達到5M或更大。
      有期時間:
    • localStorage:存儲持久數據,浏覽器關閉後數據不丟失除非主動刪除數據;
    • sessionStorage:數據在當前浏覽器窗口關閉後自動刪除
    • cookie:設置的cookie過期時間之前一直有效,即使窗口或浏覽器關閉
    6.如何實現浏覽器內多個標簽頁之間的通信?
    • 調用localstorage,cookies等本地存儲方式
    • WebSocket、SharedWorker
    • localstroge另一個浏覽器上下文被添加、刪除或修改時,它都會觸發一個事件,我們通過監聽事件,控制它的值來進行頁面信息通信。
    • 注意quirks:Safari在無痕迹模式下設置localstorge值抛出QuotExceededError的異常。
    7.HTML5爲什麽只需要寫!DOCTYPE HTML?
    • HTMl5不基于SGML,因此不需要對DTD進行引用,但是需要doctype來規範浏覽器的行爲(讓浏覽器按照它們應該的方式來運行);而HTMl4.01基于SGMA,所以需要對DTD進行引用,才能告知浏覽器文檔所使用的文檔類型。
    8.Doctype作用?標准模式與兼容模式各種什麽區別?
    • !Doctype聲明位于HTML文檔的第一行,處于html標簽之前。告知浏覽器的解析器用什麽文檔標准解析這個文檔。doctype不存在或格式不正確會導致文檔以兼容模式呈現。
    • 標准模式的排版和JS運作模式都是該浏覽器支持的最高標准運行。在兼容模式中,頁面以寬松的向後兼容的方式來顯示,模擬老式浏覽器的行爲以防止站點無法工作。
    9.Doctype?嚴格模式與混雜模式如何觸發這兩種模式,區分它們有何意義?
    • 用于聲明文檔使用哪種規範(html/Xhtml)一般爲嚴格過渡基于框架的html文檔。
    • 加入XML聲明可觸發,解析方式更改爲IE5.5擁有IE5.5的Bug。
    9(1)、HTML5爲什麽只需要寫<!DOCTYPE HTML>?
    • HTML5不基于SGML,因此不需要對DTD進行引用,但是需要doctype來規範浏覽器的行爲(讓浏覽器按照它們應該的方式來進行)
    • 而HTML4.01基于SGML,所以需要對DTD進行引用,才能告知浏覽器文檔所使用的文檔類型。
    10、html document是幹嘛的?
    • HTML即:超文本標記語言,標准通用標記語言的一個應用,“超文本”就是指頁面內可以包含圖片、鏈接、甚至音樂、程序等非文字元素。
    • HTML Document即:HTML Document對象,每個載入浏覽器的HTML文檔都會成爲Document對象
    • 由于Document對象是window對象的一部分,所以可通過window.document屬性對其進行訪問。
    11、html5哪些操作可以SEO優化
    • title標簽;meta標簽;header標簽;footer標簽
    • 元標簽(meta標簽);導航標簽(nav標簽);文章標簽(article標簽);左或右側標簽(aside標簽)
    12、css盒模型有哪些及區別content-box border-box padding-boxQ1
    • IE盒子模型box-sizing:border-box;(怪異模式)
    • W3C標准盒子模型 box-sizing:content-box;(標准模式)默認模式
      Q2
    • content-box:這是默認樣式指定CSS標准。測量width和height屬性只包括的內容,但不是border, margin, 或者 padding。
    • padding-box:width和height屬性包括padding的大小,不包括border和margin
    • border-box:width和height屬性包括padding和border,但不是margin。這是盒模型的文檔時,Internet Explorer使用Quirks模式。
    • content-box不包含padding,border-box包含padding。所以如果你設置的大小是一樣的,content-box看起來,會比border-box大

    13、行內元素和塊狀元素的區別?行內快元素的兼容性使用?(IE8以下)
    • 行內元素:會在水平方向排列,不能包含快級元素,設置width無效,height無效(可以設置line-height),margin上下無效,padding上下無效
    • 塊級元素:各占據一行,垂直方向排列。從新行開始結束接著一個斷行
    • 兼容性:display:inline-block;display:inline;zoom:1;
    14、頁面導入樣式時,使用link和@import有什麽區別?
    • 1.link屬于HTML標簽,除了加載CSS外,還能用于定義RSS,定義rel連接屬性等作用;而@import是CSS提供,只能加載CSS;
    • 2.頁面被加載的時,link會同時被加載,而@import引用的CSS會等到頁面被加載完再加載;
    • import是CSS2.1提出的,只在IE5以上才能被識別,而link是HTML標簽,無兼容問題;
    14(1).css引入的方式有哪些?link和@import的區別是?
    • 內聯,內嵌,外鏈,導入
    • 區別:同時加載,
    • 前者無兼容性,後者css2.1以下浏覽器不支持
    • link支持使用javascript改變樣式,後者不可。
    15、介紹以下你對浏覽器內核的理解?
    • 1、主要分成兩部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎。
    • 2、渲染引擎:負責取得網頁的內容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等)、以及計算網頁的顯示方式、然後會輸出至顯示器或打印機。浏覽器的內核的不同對于網頁的語法解釋會有不同、所以渲染的效果也不相同。所有網頁浏覽器、電子郵件客戶端以及其他需要編輯、顯示網絡內容的應用程序都需要內核
    • 3、JS引擎則:解析和執行javascript來實現網頁的動態效果。
    • 4、最開始渲染引擎和JS引擎並沒有區分得很明確,後來JS引擎越來越獨立,內核九傾向于只指渲染引擎。
    16、box-sizing常用的屬性有哪些?分別有什麽作用?
    • box-sizing:content-box|border-box|inherit
    • content-box:寬度和高度分別應用到元素的內容框。
    17、清楚浮動有哪些方式?比較好的方式是哪一種
    • 1、父級div定義height。
    • 2、結尾處加空div標簽clear:both。
    • 3、父級div定義僞類:after和zoom。
    • 4、父級div定義overflow:hidden。
    • 5、父級div定義overflow:auto。
    • 6、父級div也浮動,需要定義寬度。
    • 7、父級div定義display:table。
    • 8、結尾處加br標簽clear:both。
    • 比較好的是第3種,好多網站都這樣用
    18、html5有哪些新特性?如何處理HTML5新標簽的浏覽器兼容問題?如何區分HTML和HTML5?Q1
    • HTML5現在已經不是SGML的子集,主要是關于圖像,位置,存儲,多任務等功能的增加;
    • 1、繪畫canvas;
    • 2、用于媒介回放的video和auto元素;
    • 3、本地離線存儲localStorage長期存儲數據,浏覽器關閉後數據不丟失;
    • 4、sessionStorage的數據在浏覽器關閉後自動刪除;
    • 5、語意化更好的內容元素,比如article、footer、header、nav、section;
    • 6、表單控件:calendar、date、time、url、search;
    • 7、新的技術
      Q2
    • IE8/IE7/IE6支持通過document.createElement方法産生的標簽;
        <!--[if lt IE 9]>  <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>  <![endif]-->
    19、iframe的作用?用法
    • 1、iframe是用來在網頁中插入第三方頁面,早期的頁面使用iframe主要是用于導航欄這種很多頁面都相同的部分,這樣在切換頁面的時候避免重複下載。
      優點
    • 1、便于修改,模擬分離,像一些信息管理系統會用到。
    • 2、但現在基本不推薦使用。除非特殊需要,一般不推薦使用。
      缺點
    • 1、iframe的創建比一般的DOM元素慢了1-2個數量級
    • 2、iframe標簽會阻塞頁面的的加載,如果頁面的onload事件不能及時觸發,會讓用戶覺得網頁加載很慢,用戶體驗不好,在Safari和Chrome中可以通過js動態設置iframe的src屬性來避免阻塞。
    • 3、iframe對于SEO不友好,替換方案一般就是動態語言的Incude機制和ajax動態填充內容等。

    20、box-sizing、transition、translate分別是什麽?
    • 1、box-sizing:用來指定模型的大小的計算方式。主要分爲border-box(從邊框固定盒子大小)、content-box(從內容固定盒子大小)兩種計算方式。
    • 2、transition:當前元素只要有"屬性"發生變化時,可以平滑的進行過渡。通過transition-propety設置過渡屬性;transition-duration設置過渡時間;transition-timing-function設置過渡速度;transition-delay設置過渡延時。
    • 3、translate:通過移動改變元素的位置;有x,y,z三個屬性
    21、選擇器優先級是怎樣的?
    • 1、!important>行內樣式>id選擇器>類選擇器>標簽選擇器>通配符>繼承
    • 2、權重算法:(0,0,0,0)==》第一個0對應的是important的個數,第二個0對應的是id選擇器的個數,第三個0對應的類選擇器的個數,第四個0對應的是標簽選擇器的個數,就是當前選擇器的權重
    • 3、比較:先從第一個0開始比較,如果第一個0大,那麽說明這個選擇器的權重高,如果第一個相同,比較第二個,依次類推。
      22、有一個導航欄在Chrome裏面樣式完好?在IE裏文字都聚到一起了,是哪個兼容性問題?
    • 用了display:flex屬性,在IE10以下都是無效的。

    23.CSS實現垂直水平居中
    HTML結構:
    <div class="wrapper">    <div class="content"></div></div>
    CSS:
    .wrapper{position:relative;}.content{    background-color:#6699FF;    width:200px;    height:200px;    position: absolute;        //父元素需要相對定位    top: 50%;    left: 50%;    margin-top:-100px ;   //二分之一的height,width    margin-left: -100px;}
    方法二
    .content{        position:absolute;        left:50%;        top:50%;        width:200px;        height:200px;        background:red;        -webkit-transform:translate(-50%,-50%);        -moz-transform:translate(-50%,-50%);        -o-transform:translate(-50%,-50%);        -ms-transform:translate(-50%,-50%);        transform:translate(-50%,-50%);    }24.display有哪些值?說明它們的作用。
    • block 塊類型。默認寬度爲父元素寬度,可設置寬高,換行顯示。
    • none 缺省值。像行內元素類型一樣顯示。
    • inline 行內元素類型。默認寬度爲內容寬度,不可設置寬高,同行顯示。
    • inline-block 默認寬度爲內容寬度,可以設置寬高,同行顯示。
    • list-item 像塊類型元素一樣顯示,並添加樣式列表標記。
    • table 此元素會作爲塊級表格來顯示。
    • inherit 規定應該從父元素繼承display屬性的值。
    25.行內元素有哪些?塊級元素有哪些?css的盒模型?
    • 塊級元素:div ,p,h1,form,ul,li
    • 行內元素:span,a,label,input,img,strong,em;
    • css盒模型:內容,border,margin,padding;
    26、寫一下audio標簽中,如何實現音樂的暫停和播放
    • play()開始,pause()暫停
    26(1)、寫出video標簽中預加載視頻用到的屬性是什麽
    • preload
    27.css選擇符有哪些?哪些屬性可以繼承?優先級算法如何計算?內聯和important哪個優先級高?
    • 標簽選擇符;類選擇符;id選擇符
    • id>class>標簽選擇
    • important優先級高
    28.css清除浮動的幾種方法?
    • 使用帶clear屬性的空標簽;
    • 使用css的overflow屬性;
    • 使用css的:after僞元素;
    • 同時爲了兼容 IE6,7 同樣需要配合zoom使用
           .clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}     .clear{zoom:1;}
    • 使用鄰接元素處理;
    • 父級設置成inline-block;
    • br清浮動
    • 以浮制浮(父級同時浮動)
    • 給浮動元素父級設置高度
    • 給父元素添加overflow:hidden 清除浮動方法;
    • 問題:需要配合 寬度 或者 zoom 兼容IE6 IE7;
           overflow: hidden;     *zoom: 1;
    29、px、em、rem的區別?
    • 1、px像素。絕對單位,像素px是相對于顯示器屏幕分辨率而言的,是一個虛擬單位。是計算機系統的數字化圖像長度單位,如果px要換算成物理長度,需要指定精度DPI。
    • 2、em是相對長度單位,相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置,則相對浏覽器的默認字體尺寸。它會繼承父級元素的字體大小,因此並不是一個固定的值。
    • rem是CSS3新增的一個相對單位(root em,根em),使用rem爲元素設定字體大小事,仍然是相對大小但相對的只是HTML根元素。
    • 4、區別:IE無法調用那些使用px作爲單位的字體大小,而em和rem可以縮放,rem相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優點于一身,通過它既可以做到只修改根元素就成比例地調整所有字體大小,又可以避免字體大小逐層複合的連鎖反應。目前,除了IE8及更早版本外,所有浏覽器已支持rem。
    30、CSS3新特性有哪些?
    • 1、顔色:新增RGBA、HSLA模式
    • 2、文字陰影(text-shadow)
    • 3、邊框:圓角(border-radius)邊框陰影:box-shadow
    • 4、盒子模型:box-sizing
    • 5、背景:background-size設置背景圖片的尺寸,background-origin設置背景圖片的原點,background-clip設置背景圖片的裁剪區域,以“,”分隔可以設置多背景,用于自適應布局
    • 6、漸變:linear-gradient、radial-gradient
    • 7、過渡:transition可實現動畫
    • 8、自定義動畫
    • 9、在CSS3中唯一引入的僞元素是::selection
    • 10、多媒體查詢、多欄布局
    • 11、border-image
    • 12、2D轉換:transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
    • 13、3D轉換
    31、標簽上title與alt屬性的區別是什麽?
    • Alt當圖片不顯示時,用文字代表
    • Title爲該屬性提供信息
    32、描述css reset的作用和用途?
    • Reset重置浏覽器的css默認屬性,浏覽器的品種不同,樣式不同,然後重置,讓他們統一。
    33、解釋css sprites,如何使用?
    • css 精靈圖,把一堆小的圖片整合到一張大的圖片(png)上,減輕服務器對圖片的請求數量。
    33(1)、爲什麽要使用css sprites
    • css精靈 把一堆小的圖片整合到一張大的圖片上,減輕服務器對圖片的請求數量
    • css sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中,再利用css的"background-image","background-position"的組合進行背景定位,這樣可以減少。
    • 很多圖片請求的開銷,因爲請求耗時比較長;請求雖然可以並發,但是如果請求太多會給服務器增加很大的壓力。
    34、在新窗口打開鏈接的方法是?
    • target:_blank
    35、合理的頁面布局中常聽過結構與表現分離,那麽結構是什麽?表現是什麽?
    • 結構是html,表現是css
    36、簡述對Web語義化的理解?
    • 就是讓浏覽器更好的讀懂你寫的代碼,在進行HTML結構、表現、行爲設計時,盡量使用語義化的標簽,使程序代碼簡潔明了,易于進行web操作和網站SEO,方便團隊的一種標准,以圖實現一種“無障礙”的web開發。
    37、display:none;與visibility:hidden的區別是什麽?
    • display:none;使用該屬性後,HTML元素(對象)的寬高,高度等各種屬性值都將“丟失”;
    • visibility:hidden;使用該屬性後,HTML元素(對象)僅僅是在視覺上看不見(完全透明),而它所占據的空間位置仍然存在,也即是說它仍然具有高度,寬度等屬性值。
    38、請用css定義p標簽,要求實現以下效果;字體顔色在IE6下爲黑色(#000000);IE7下爲紅色(#ff0000);而其他浏覽器下爲綠色(#00ff00)p{    color:green;    *color:blue;    _color:black;}39、前端頁面有哪三層構成,分別是什麽?作用是什麽?
    • 結構層、表示層、行爲層
    • 結構層(structural layer):由HTML或XHTML之類的標記語言負責創建。
    • 表示層(presentation layer):由css負責創建。
    • 行爲層(behaviorlayer):負責回答“內容應該如何對事件做出反應”這一問題。這是 Javascript 語言和 DOM主宰的領域。
    40、實現布局中間自適應寬度,左右兩欄固定寬度    <style>        .box{            display:flex;        }        .left{            width: 200px;            height: 600px;            background:red;        }        .right{            width: 200px;            height: 600px;            background:red;        }        .center{            width: 100%;            height:600px;            background:green;        }    </style></head><body>    <div class="box" >        <div class="left"></div>        <div class="center"></div>        <div class="right"></div>    </div>41、如何在頁面上實現一個圓形的可點擊區域?
    • 1、map+area或者svg
    • 2、border+radius
    • 3、純js實現需要求一個點在不在圓上簡單算法,獲取鼠標坐標等等
    42、介紹一下標准css的盒子模型?低版本IE的盒子模型有什麽不同的?
    • 1、有兩種:IE盒子模型、W3c盒子模型
    • 2、盒模型:內容(content)、填充(padding)、邊界(margin)、邊框(border)。
    • 3、區別:IE的content部分把border和padding計算了進去
    43、你如何對網站的文件和資源進行優化?期待的解決方案包括:
    • 文件合並
    • 文件最小化/文件壓縮
    • 使用CDN托管
    • 緩存的使用
    44、IE8以下版本的浏覽器中盒模型有什麽不同?
    • IE8以下浏覽器的盒模型中定義的元素的寬高不包括內邊劇和邊距
    45、寫出幾種IE6 BUG的解決方法
    • 1、雙邊距BUG float引起的 使用display
    • 2、3像素問題使用float引用的使用display:inline -3px;
    • 3、超鏈接hover後點擊失效,使用正確的書寫順序 link visited hover active
    • 4、le z-index問題給父級添加position:relative
    • 5、png 透明使用js代碼改
    • 6、min-height最小高度 !important解決
    • 7、select 在ie6下遮蓋 使用iframe嵌套
    • 8、爲什麽沒有辦法定義1px左右的寬度器(IE6默認的行高造成的,使用over:hidden,zoom:0.08,line-height:1px)
    46、css選擇符有哪些?哪些屬性可以繼承?優先級算法如何計算?內聯和important哪個優先級高?
    • css選擇符:類選擇器、標簽選擇器、ID選擇器、後代選擇器(派生選擇器)、群組選擇器
    • 可以繼承:類選擇器、標簽名選擇器、後代選擇器(派生選擇器)、群組選擇器
    • 優先級算法:
    • 標簽內直接定義:1000
    • ID選擇器:100
    • 類選擇器:1
    • 內聯和important中,important優先級高
    47、css的基本語句構成是?
    • 選擇符、屬性、值
    高級模式
    B Color Image Link Quote Code Smilies
    您需要登錄後才可以回帖 登錄 | 立即注冊(限中文)

    本版積分規則

    關閉

    推56站長論壇推薦上一條 /1 下一條

    站長QQ
    在線咨詢
    咨詢熱線
    QQ:405327411
    站長

    QQ|廣告合作|關于我們|聯系我們|免責聲明|網站導航|站長論壇 ( 豫ICP備11018337號-5 )

    豫公網安備 41172202000143號

    王寶臣旗下網站 推56論壇(www.lifenize.com)站長論壇 SEO論壇 網絡營銷論壇 新手站長論壇 網絡推廣論壇 站長社區 站長網

    Powered by Discuz! X3.4 Licensed

    ©2001-2013 Comsenz Inc.

    快速回複 返回頂部 返回列表