HTML面試題

1.XHTML和HTML有什麼區別

• HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
  最主要的不同：
• XHTML 元素必須被正確地巢狀。
• XHTML 元素必須被關閉。
• 標籤名必須用小寫字母。
• XHTML 文件必須擁有根元素。

2.前端頁面有哪三層構成，分別是什麼?作用是什麼?

• 結構層 Html 表示層 CSS 行為層 js;
  3.你做的頁面在哪些流覽器測試過?這些瀏覽器的核心分別是什麼?
• Ie(Ie核心) 火狐（Gecko） 谷歌（webkit,Blink） opera(Presto),Safari(wbkit)

4.什麼是語義化的HTML?

• 直觀的認識標籤 對於搜尋引擎的抓取有好處，用正確的標籤做正確的事情！
• html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜尋引擎解析；
  在沒有樣式CCS情況下也以一種文件格式顯示，並且是容易閱讀的。搜尋引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重，利於 SEO。
• 使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。

5.HTML5 為什麼只需要寫 !DOCTYPE HTML？

• HTML5 不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行為（讓瀏覽器按照它們應該的方式來執行）；而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文件所使用的文件型別。

6.Doctype作用？標準模式與相容模式各有什麼區別?

• !DOCTYPE宣告位於位於HTML文件中的第一行，處於html 標籤之前。告知瀏覽器的解析器用什麼文件標準解析這個文件。DOCTYPE不存在或格式不正確會導致文件以相容模式呈現。
• 標準模式的排版 和JS運作模式都是以該瀏覽器支援的最高標準執行。在相容模式中，頁面以寬鬆的向後相容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

7.html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器相容問題？如何區分 HTML 和
HTML5？

• HTML5 現在已經不是 SGML 的子集，主要是關於影象，位置，儲存，多工等功能的增加。
• 繪畫 canvas
• 用於媒介回放的 video 和 audio 元素
• 本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失；
• sessionStorage 的資料在瀏覽器關閉後自動刪除
• 語意化更好的內容元素，比如 article、footer、header、nav、section
• 表單控制元件，calendar、date、time、email、url、search
• 新的技術webworker, websockt, Geolocation
  移除的元素
• 純表現的元素：basefont，big，center，font, s，strike，tt，u；
• 對可用性產生負面影響的元素：frame，frameset，noframes；
  支援HTML5新標籤：
• IE8/IE7/IE6支援通過document.createElement方法產生的標籤，
• 可以利用這一特性讓這些瀏覽器支援HTML5新標籤，
• 瀏覽器支援新標籤後，還需要新增標籤預設的樣式：

8.請描述一下 cookies，sessionStorage 和 localStorage 的區別？

• cookie在瀏覽器和伺服器間來回傳遞。 sessionStorage和localStorage不會
• sessionStorage和localStorage的儲存空間更大；
• sessionStorage和localStorage有更多豐富易用的介面；
• sessionStorage和localStorage各自獨立的儲存空間；

9.如何實現瀏覽器內多個標籤頁之間的通訊?

• 呼叫localstorge、cookies等本地儲存方式
• CSS面試題

• 1.簡要說一下CSS的元素分類

  • 塊級元素：div,p,h1,form,ul,li;
  • 行內元素 : span>,a,label,input,img,strong,em;

  2.CSS隱藏元素的幾種方法（至少說出三種）

  • Opacity:元素本身依然佔據它自己的位置並對網頁的佈局起作用。它也將響應使用者互動;
  • Visibility:與 opacity 唯一不同的是它不會響應任何使用者互動。此外，元素在讀屏軟體中也會被隱藏;
  • Display:display 設為 none 任何對該元素直接打使用者互動操作都不可能生效。此外，讀屏軟體也不會讀到元素的內容。這種方式產生的效果就像元素完全不存在;
  • Position:不會影響佈局，能讓元素保持可以操作;
  • Clip-path:clip-path 屬性還沒有在 IE 或者 Edge 下被完全支援。如果要在你的 clip-path 中使用外部的 SVG 檔案，瀏覽器支援度還要低;

  3.CSS清除浮動的幾種方法（至少兩種）

  • 使用帶clear屬性的空元素
  • 使用CSS的overflow屬性；
  • 使用CSS的:after偽元素；
  • 使用鄰接元素處理；

  4.CSS居中（包括水平居中和垂直居中）

  內聯元素居中方案

  水平居中設定：
  1.行內元素

  • 設定 text-align:center；

  2.Flex佈局

  • 設定display:flex;justify-content:center;(靈活運用,支援Chroime，Firefox，IE9+)

  垂直居中設定：
  1.父元素高度確定的單行文字（內聯元素）

  • 設定 height = line-height；

  2.父元素高度確定的多行文字（內聯元素）

  • a:插入 table （插入方法和水平居中一樣），然後設定 vertical-align:middle；
  • b:先設定 display:table-cell 再設定 vertical-align:middle；
    

    塊級元素居中方案

    水平居中設定：
    1.定寬塊狀元素

  • 設定 左右 margin 值為 auto；

  2.不定寬塊狀元素

  • a:在元素外加入 table 標籤（完整的，包括 table、tbody、tr、td），該元素寫在 td 內，然後設定 margin 的值為 auto；
  • b:給該元素設定 displa:inine 方法；
  • c:父元素設定 position:relative 和 left:50%，子元素設定 position:relative 和 left:50%；

  垂直居中設定：

  • 使用position:absolute（fixed）,設定left、top、margin-left、margin-top的屬性;
  • 利用position:fixed（absolute）屬性，margin:auto這個必須不要忘記了;
  • 利用display:table-cell屬性使內容垂直居中;
  • 使用css3的新屬性transform:translate(x,y)屬性;
  • 使用:before元素;

  5.寫出幾種IE6 BUG的解決方法

  • 雙邊距BUG float引起的 使用display
  • 3畫素問題 使用float引起的 使用dislpay:inline -3px
  • 超連結hover 點選後失效 使用正確的書寫順序 link visited hover active
  • Ie z-index問題 給父級新增position:relative
  • Png 透明 使用js程式碼 改
  • Min-height 最小高度 ！Important 解決’
  • select 在ie6下遮蓋 使用iframe巢狀
  • 為什麼沒有辦法定義1px左右的寬度容器（IE6預設的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

  6.對於SASS或是Less的瞭解程度？喜歡那個？

  • 語法介紹

  7.Bootstrap瞭解程度

  • 特點，排版，外掛的使用;

  8.頁面匯入樣式時，使用link和@import有什麼區別？

  • link屬於XHTML標籤，除了載入CSS外，還能用於定義RSS, 定義rel連線屬性等作用；而@import是CSS提供的，只能用於載入CSS;
  • 頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;
  • import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無相容問題;

  9.介紹一下CSS的盒子模型？

  • 有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading;
  • 盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).

  10.CSS 選擇符有哪些？哪些屬性可以繼承？優先順序演算法如何計算？ CSS3新增偽類有那些？

  • id選擇器（ # myid）
  • 類選擇器（.myclassname）
  • 標籤選擇器（div, h1, p）
  • 相鄰選擇器（h1 + p）
  • 子選擇器（ul > li）
  • 後代選擇器（li a）
  • 萬用字元選擇器（ * ）
  • 屬性選擇器（a[rel = “external”]）
  • 偽類選擇器（a: hover, li: nth – child）
  • 可繼承的樣式： font-size font-family color, UL LI DL DD DT;
  • 不可繼承的樣式：border padding margin width height ;
  • 優先順序就近原則，同權重情況下樣式定義最近者為準;
  • 優先順序為:
    JavaScript

    12	!important>id>class>tagimportant比內聯優先順序高

  11.CSS3有哪些新特性？

  • CSS3實現圓角（border-radius:8px），陰影（box-shadow:10px），
    對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
  • transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
    增加了更多的CSS選擇器 多背景 rgba

  JavaScript面試題

  1.javascript的typeof返回哪些資料型別

  • Ｏbject number function boolean underfind;

  2.例舉3種強制型別轉換和2種隱式型別轉換?

  • 強制（parseInt,parseFloat,number）隱式（== – ===）；

  3.陣列方法pop() push() unshift() shift()

  • Push()尾部新增 pop()尾部刪除
  • Unshift()頭部新增 shift()頭部刪除

  4.ajax請求的時候get 和post方式的區別?

  • 一個在url後面 一個放在虛擬載體裡面
    有大小限制
  • 安全問題
    應用不同 一個是論壇等只需要請求的，一個是類似修改密碼的;

  5.call和apply的區別

  • Object.call(this,obj1,obj2,obj3)
  • Object.apply(this,arguments)

  6.ajax請求時，如何解釋json資料

  • 使用eval parse,鑑於安全性考慮 使用parse更靠譜;

  7.事件委託是什麼

  • 讓利用事件冒泡的原理，讓自己的所觸發的事件，讓他的父元素代替執行！

  8.閉包是什麼，有什麼特性，對頁面有什麼影響?簡要介紹你理解的閉包

  • 閉包就是能夠讀取其他函式內部變數的函式。

  9.新增 刪除 替換 插入到某個接點的方法

  obj.appendChidl()
  obj.innersetBefore
  obj.replaceChild
  obj.removeChild
  10.說一下什麼是javascript的同源策略？

  • 一段指令碼只能讀取來自於同一來源的視窗和文件的屬性，這裡的同一來源指的是主機名、協議和埠號的組合

  11.編寫一個b繼承a的方法;

  JavaScript

  1234567891011

  functionA(name){this.name=name;this.sayHello=function(){alert(this.name+”say Hello!”);};}functionB(name,id){this.temp=A;this.temp(name);//相當於new A();deletethis.temp;this.id=id;this.checkId=function(ID){alert(this.id==ID)};}

  12.如何阻止事件冒泡和預設事件

  JavaScript

  123456 相關推薦 html 和css常見的面試題 1、常見的塊級元素  內聯元素 div -最常用的塊級元素      dl - 和dt-dd 搭配使用的塊級元素      form - 互動表單      h1 -h6- 大標題      hr - 水平分隔線      ol – 有序列表      p - 段落      ul - 無序列表     html。css。js的面試題 HTML面試題1.XHTML和HTML有什麼區別HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言最主要的不同：XHTML 元素必須被正確地巢狀。XHTML 元素必須被關閉。標籤名必須用小寫字母。XHTML 文件必須擁有根元素。2.前端頁面有哪三層構 前端html+css+js面試題 HTML&CSS： 對Web標準的理解（結構、表現、行為）、瀏覽器核心、渲染原理、依賴管理、相容性、CSS語法、層次關係，常用屬性、佈局、選擇器、權重、盒模型、 Hack、CSS前處理器、CSS3、Flexbox、CSS Modules、Document flow、BFC、H HTML+CSS+JS面試題（附帶答案） 一、單項選擇(165題) 1.HTML是什麼意思？ A)高階文字語言 B)超文字標記語言 C)擴充套件標記語言 D)圖形化標記語言 2.瀏覽器針對於HTML文件起到了什麼作用？ A)瀏覽器用於建立HTML文件 B)瀏覽器 前端js和css的經典面試題 （一）HTML中Doctype的作用 宣告叫做檔案型別定義（DTD），宣告的作用為了告訴瀏覽器該檔案的型別。讓瀏覽器解析器知道應該用哪個規範解析文件。宣告必須在HTML文件的第一行，這並不是一個HTM js面試題，關於變量提升，作用域，全局變量 fine log js面試 提升 per nbsp lin undefine 變量 /**********seperate line************/ var a = 10; function test() { 　　a = 100; 　　cons html、css和js註釋的規範用法 ont alt 推薦 pan 文件 strong 服務 可用 如何 成為專業的前端工程師！！！ html註釋： <!--註釋內容--> css註釋： //註釋內容 單行註釋（不推薦使用，因為有的瀏覽器可能不兼容，沒有效果）/*註釋內容*/ 多 關於一道JS面試題的思考 ges 會有 作用 初學 沒有 使用 很好 obj 值傳遞 題目： for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(new Date, i); }, 整理出來的前端js面試題 禁止 如何改變 產生 字符串 避免 得到 作用 擴展 如何 15、HTTP狀態碼 100 Continue 繼續，一般在發送post請求時，已發送了http header之後服務端將返回此信息，表示確認，之後發送具體參數信息 200 OK 正常返回信 js面試題知識點全解(一作用域和閉包) foo true 方式 聲明 提升 function 這樣的 all 變量提升 問題： 1.說一下對變量提升的理解 2.說明this幾種不同的使用場景 3.如何理解作用域 4.實際開發中閉包的應用 知識點： js沒有塊級作用域只有函數和全局作用域，如下代碼： if(tru js面試題-----作用域與閉包 code 生命 結果 bin 聲明 click 函數 i++ spa 1、問題代碼: var length = 10; function fn(){ console.log(this.length); } var obj = { length:5, js面試題-----DOM操作和BOM操作 dom 數據 prop 樹形 結構 獲取 protocol earch 部分 題目1：DOM是哪種基本的數據結構 答案：DOM是一種樹形結構的數據結構 題目2：DOM操作的常用API有哪些 答案：獲取DOM節點，以及節點的property和Attribute。獲取父節點，獲 js面試題-----通信類 log 技術分享 sof 事件 嵌入 sage list 通信 als 題目1：什麽是同源策略及限制 題目2：前後端如何通信 　　Ajax WebSocket CORS 題目3：如何創建Ajax 　　XMLHttpRequest對象的工作流程 　　兼容性處理 js面試題1 for gif 其他 繼承 返回值 reat 前插 document 數據交換 1.介紹js的基本數據類型 Undefined、Null、Boolean、Number、String 2.js有哪些內置對象？ 數據封裝類對象：Object、Array、Boolean、Numb js面試題之求數組最值 pre 面試 可能 cti clas return n) ole arr 今天繼續分享js常見的面試題，求數組最大值，最小值，這裏列舉4種常見解法，還有其他方法也可以實現，讀者知道可以私信我，我將把意見列舉到博客中，歡迎提出意見。 第一種，利用數組排序 1 var arr html、css和js原生寫一個模態彈出框，順便解決父元素半透明子元素不透明效果 script javascrip z-index htm index 彈出 rgb 特性 radi 模態框： html部分： <!-- 按鈕 --> <button id="box" onclick="pop_box()">彈出框</ JS面試題 urn settime 銷毀 dom set ons -1 執行 blog for(var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }); } for 前端第四課——JS面試題 json 數據 面試題 win javascrip 圖片 cti ges 基本數據 筆試題 1.JavaScript的基本數據類型 2.["1","2","3"].map(parseInt)答案？ 3.JavaScript中如何將JSON轉化成對象/數組？怎麽轉回來？ 4. iOS 加載本地HTML，css，js fill 簡書 p標簽 一道 bundle www string text orien 在IOS開發中，可以通過webView來加載HTML文件 步驟如下： 1.需要有一個webView，可以通過storyboard拖拽一個 或者 alloc 一個（我在這裏是拖拽了一個 js 面試題 表現 區別 ech 計算 如何 編寫 dom 一個 利用 1.截取字符串abcdace的acealert(‘abcdace‘.substring(4)); 2.規避javascript多人開發函數重名問題命名空間封閉空間js模塊化mvc（數據層、表現層、控制層）seajs變