xhtml和html有什麼差別？

 1.xhtml和html有什麼差別

HTML是一種基本的WEB網頁設計語言，XHTML是一個基於##XML的置標語言

最主要的不同：

#     XHTML 元素必須正確嵌套。

     XHTML 元素必須關閉。

   標籤名稱必須用小寫字母。

     XHTML 文件必須擁有根元素

2、簡述src與href的差異：

href 是指向網絡資源所在位置，建立和當前元素(錨點)或當前文檔(鏈接)之間的鏈接，用於超鏈接。

src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置;在請求src資源時會將其指向的資源下載並套用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源載入、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入目前標籤內。這也是為什麼將js腳本放在底部而不是頭部。

3、行內元素有哪些?區塊級元素有哪些? 空(void)元素有那些?

##行內元素：a、b、span、img、input、strong、select、label、em、button、textarea

區塊級元素： div、ul、li、dl、dt、dd、p、h1-h6、blockquote

#空元素：即係沒有內容的HTML元素，例如：br、meta、hr、link、input、img

#4、 form中的#action屬性和method屬性的意義是什麼？ method常用值有哪些？

action

屬性用於指定form表單提交的後台程式位址;method屬性用於指定form表單提交的方法。

method

的常用值有：get和##post

5、 

表單元素新增的屬性有哪些？ required

：

 #必填項目##placeholder：

提示訊息，點擊input#內容時會消失 pattern:校驗正規表示式

antofocus：

#自動取得焦點aotucomplete:自動完成

#

6.向指定伺服器提交資料的方法有哪些？

   Ajax  表單Form  

   URL?參數 

##   URL?參數 

#   AngularJS的$HTTP

JQ Ajax: $.POST(,,)  $.GET(,,)  $.Ajax({})

##.

JS Ajax: 5步。 (參考25題)

7、寫一個function，清除字串前後的空格。 (相容於所有瀏覽器)

function trim(str) {

   if ( str && typeof str === "string") {

#           return str.replace(/(^\s*)|(\s*)$/ g,"");   //移除前後空白符號

#           }

########################### #####} ##################8、如何消除一個陣列裡面重複的元素?############### ###var arr1 =[1,2,2,2,3,3,3,4,5,6],################## var arr2 = [ ];##################    for(var i = 0; i< arr1.length; i++){############### ####        if(arr2.indexOf(arr1[i]) < 0){##################        與 arr2.push(##arr1[i]);# ################        }##################}############################################################################################################################# #document.write(arr2); // 1,2,3,4,5,6################9、請描述cookies，sessionStorage和localStorage的差異## #############sessionStorage用於本地儲存一個會話(session)中的數據，這些數據只有在同一個會話中的頁面才能存取並且當會話結束後數據也隨之銷毀。因此sessionStorage不是持久的本機存儲，只是會話層級的儲存。而localStorage用於持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。 ############web storage和cookie的區別#############Web Storage的概念和cookie相似，差異在於它是為了更大容量儲存設計的。 Cookie的大小是受限的，每次你要求一個新的頁面的時候Cookie都會被發送過去，這樣無形中浪費了頻寬，另外cookie還需要指定作用域，不可以跨域呼叫。 ###############除此之外，###Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與伺服器進行交互，作為HTTP規範的一部分而存在 ，而Web Storage僅僅是為了在本地「儲存」資料而生。 #####################10###、cookie####和session###的差別是什麼？ ########################   Cookie ###儲存在用戶端本機###;############ ######   Session###儲存在伺服器端###;##################  ###聯絡：session####的###id ###存在###cookie###中。 #########################

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

1）.link屬於XHTML標籤，而@import是CSS#提供的；

## 2）.頁面被載入的時，link會同事被加載，而@ import引用的CSS會等到頁面載入完再載入；

3 ).import只有在IE5#以上才能被識別，而##link是XHTML標籤，無相容問題;

4

）.link 方式的樣式的權重>@import#的權重

12.簡單描述下定位Position:

#Relative:

相對定位。相對於自身原有位置定位，原DOM空間會保留；

Absolute

#：絕對定位。相對於第一個非static定位的祖先元素進行定位，會刪除原DOM空間；

Fixed

：固定定位器視窗進行定位; 會刪除DOM空間

Static

: 預設值.沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right z-index 宣告）。

Inherit

：規定從父元素繼承 position 屬性的值。

13.#display有哪些值？說明他們的作用。

  block         

象區塊類型元素相同顯示。

  none          

預設值。象行內元素類型一樣顯示。

  inline-block    

象行內元素一樣顯示，但其內容像區塊類型元素一樣顯示。

  list-item     

象區塊類型元素一樣顯示，並新增樣式清單標記。 #

  table         此元素會以區塊等級顯示

  inherit       ##  inherit       規定display 屬性的值

14、jquery中如何將數組轉換為json字串，然後再轉換回來？

$.parseJSON

#$.fn.stringify = function() {

#   return JSON.stringify(this);

#}

使用

：

$(array).stringify();

15.JSON 的了解？ JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式。

它是基於JavaScript的子集。資料格式簡單

, 易於讀寫, #佔用頻寬小

#如：

{"age":"12", "name":"back"}

JSON

字串轉換為JSON

物件:#var obj =eval('('+ str +')');

var obj = str.parseJSON();

#var obj = JSON.parse(str);

#JSON物件轉換為JSON#字串：

#var last=obj.toJSONString();

var last=JSON.stringify(obj);#16、什麼是響應式設計？響應式設計的基本原理是什麼？    依據不同裝置的螢幕大小、解析度、方向等，統一網站顯示為不同效果。

   行動優先。可以使用JS跳轉不同手機站和

PC站，可以使用MediaQuery來偵測不同裝置的屬性展示不同的CSS

，可以使用各種響應式前端框架。    優點：使用者體驗好，尤其是手機端。    缺點：包含大量冗餘程式碼，開發成本較大(但是遠低於開發手機站+PC站的模式)1

7.### visibility###：######hidden######和# #####display######：######none######的差別？ ############

使用display：none#隱藏以後，元素的空間被釋放，其餘元素可以佔用空間；

使用visibility：#hidden只是看不見，但是元素的空間仍然佔據，別的元素無法使用。

18、 列舉陣列相關的常用方法

push/pop , shift/unshift, split/join, slice/splice/concat, sort/reverse, map/reduce, forEach, filter

19、 列舉字串相關常用的方法

indexOf/lastIndexOf/charAt, split/match/test, slice/substring/substr, toLowerCase/toUpperCase

#20、常見的瀏覽器核心有哪些？

Trident核心：#IE,MaxThon,TT,The World,360,搜狗瀏覽器等。 [又稱MSHTML]

#Gecko核心： Netscape6以上版本，FireFox（火狐）,MozillaSuite/SeaMonkey等

##Presto核心：Opera7以上。 [Opera

核心原為：Presto，現為：##Blink;] Webkit核心：Safari（蘋果自帶的瀏覽器）,Chrome（Google） 等。   [ Chrome的：Blink

（

WebKit的分支）##] 21.title與h1的差異、b與strong的差別、i

與

##em的差別？    title

屬性沒有明確意義只表示是標題，

H1則表示層次明確的標題，對頁面資訊的抓取也有很大的影響；  strong是標示重點內容，有語氣加強的意義，使用閱讀裝置閱讀網路時：

會重讀，而

是展示強調內容。   i

內容呈現為斜體，######em######表示強調的文字；######## #

22、網頁驗證碼是幹嘛的，是為了解決什麼安全性問題。

  區分使用者是電腦還是人的公共全自動程式。可以防止惡意破解密碼、刷票、論壇灌水；

  有效防止駭客對某一個特定註冊用戶用特定程式暴力破解方式進行不斷的登陸嘗試。

23.對前端工程師這個職位你是怎麼樣理解的?

a. 前端是最貼近使用者的程式設計師，前端的能力就是能讓產品從90分進化到100 分，甚至更好

b. 參與項目，快速高品質完成實現效果圖，精確到1px;

c. 與團隊成員，UI設計，產品經理的溝通;

d . 做好的頁面結構，頁面重構和使用者體驗;

e. 處理hack，相容、寫出優美的程式碼格式;

f. 針對伺服器的最佳化、擁抱最新前端技術。

24、#什麼是閉包(closure),為什麼要用它？

閉包是指有權存取另一個函數作用域中變數的函數，而建立閉包的最常見的方式就是在一個函數內創建另一個函數，透過另一個函數存取這個函數的局部變數,利用閉包可以突破作用鏈域，將函數內部的變數和方法傳遞到外部。可以把閉包簡單理解成「定義在一個函數內部的函數」

#閉包的特性：

#1.函數內再巢狀函數

2.內部函數可以引用外層的參數與變數

#3.參數和變數不會被垃圾回收機制回收

//li節點的onclick事件都能正確的彈出目前被點擊的li

#

    

• index = 0

    

• index

      

• index
    = 1
    
• index = 2
#    <) li>

#######

25、Ajax是什麼？如何創建一個Ajax？

ajax全稱為：Asynchronous javascript and XML,即異步的 #JavaScript和xml，也稱為頁面無刷技術。 這裡的非同步可以簡單的理解為：向伺服器發送請求的時候，我們不必等待結果，而是可以同時做其他的事情，等到有了結果它自己會根據設定進行後續操作，同時，頁面是不會發生整頁刷新的，提高了使用者體驗。

如何建立一個Ajax？

(1)建立XMLHttpRequest物件,也就是建立一個非同步呼叫物件

(2)建立一個新的HTTP##請求,並指定該HTTP請求的方法、URL及驗證訊息

(3)設定回應HTTP#請求狀態變化的函數

(4)發送HTTP請求

#(5)取得非同步呼叫傳回的資料

(6)使用JavaScript和DOM#實現局部刷新

26.原生#JS的window.onload 與Jquery的$(document).ready(function(){})有什麼不同？如何用原生JS實作Jq#的ready方法？

window.onload()方法是必須等到頁內包含圖片的所有元素載入完畢後才能執行。

$(document).ready()是DOM結構繪製完畢後就執行，不必等到載入完畢。

27.（設計題）想實作一個對頁面某個節點的拖曳？如何做？ （使用原生JS）

#回答概念即可，以下是幾個要點

給需要拖曳的節點綁定mousedown, mousemove, mouseup事件

mousedown事件觸發後，開始拖曳

mousemove時，需要透過event.clientX和clientY取得拖曳位置，並且即時更新位置

mouseup時，拖曳結束

#28、 apply, call和bind有什麼差別?

三者都可以把一個函數應用在其他物件上，注意不是自身物件． apply,call是直接執行函數調用，bind是綁定，執行需要再次調用．

apply和call#的差別是apply接受數組作為參數，而call是接受逗號分隔的無限多個參數列表，

##程式碼示範

   function Person() {
    }
    Person.prototype.sayName() { alert(this.name); }
    var obj = {name: 'michaelqin'}; // 注意这是一个普通对象，它不是Person的实例
    1) apply
    Person.prototype.sayName.apply(obj, [param1, param2, param3]);
    2) call
    Person.prototype.sayName.call(obj, param1, param2, param3);
    3) bind
    var sn = Person.prototype.sayName.bind(obj);    
    sn([param1, param2, param3]); // bind需要先绑定，再执行 
   sn(param1, param2, param3); // bind需要先绑定，再执行

29、iframe有那些缺點？

*iframe會阻塞主頁面的Onload事件；

*搜尋引擎的檢索程式無法解讀這種頁面，不利於SEO;

*iframe 和主頁共用連線池，而瀏覽器對相同網域的連線有限制，所以會影響頁面的並行載入。

使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是透過javascript

##動態給iframe加上src屬性值，這樣可以繞開以上兩個問題。

30、如何解決ajax跨域問題？

jsonp

、 #iframe、window.name、window.postMessage、伺服器上設定代理頁面

自己的做法：

jQuery

中ajax的使用 ##$.ajax({

dataType:'jsonp'

#})

以上是xhtml和html有什麼差別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！