當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端面试常考系列三

發布時間：2023/12/3 HTML 28 豆豆

生活随笔收集整理的這篇文章主要介紹了前端面试常考系列三小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

轉載自?前端面試常考系列三

一、簡述一下src與href的區別

href 表示超文本引用，在 link和a 等元素上使用。src 表示來源地址，指向外部資源所在位置，在?img、script、iframe 等元素上。
src 的內容，是頁面的一部分，是引入。href 的內容，是與該頁面有關聯，是引用。區別就是，引入和引用。

src用于替換當前元素，href用于在當前文檔和所引用的外部資源之間建立聯系。

二、HTML5的標簽有什么作用

a、使Web頁面的開發規范統一，增強了語義。

b、使搜索引擎更加容易按照HTML5規則識別出有效的內容。

c、使Web頁面更接近于一種數據字段和表。

三、不使用border如何畫出1px高的線，在不同瀏覽器的不同模式下都能保持相同效果

方法如下：

</div>?

四、談談你對canvas的理解

canvas是HTML5中新增一個HTML5標簽與操作canvas的javascript API，它可以實現在網頁中完成動態的2D與3D圖像技術。標記和 SVG以及VML之間的一個重要的不同是，有一個基于 JavaScript 的繪圖 API，而SVG和VML使用一個XML文檔來描述繪圖。SVG 繪圖很容易編輯與生成，但功能明顯要弱一些。canvas可以完成動畫、游戲、圖表、圖像處理等原來需要Flash完成的一些功能。

五、img的alt和title有何區別

alt屬性和title屬性的區別是前者是在圖片無法加載的時候才會顯示的其值，而title是在圖片正常加載鼠標劃上去顯示的值，雖然alt也有后者的功能，但是只是在低版本的ie瀏覽器才支持，高版本及標準瀏覽器不支持這個功能了。

六、表單的主要用途是什么，由幾部分組成

表單的主要用途是：在網頁中采集數據，完成服務器之間的數據傳送。表單對于用戶而言是數據的錄入和提交的界面；表單對于網站而言獲取用戶信息的途徑。

表單構成：表單由表單標簽、表單域和表單按鈕組成

a、表單標簽：面包含了處理表單數據所用CGI程序的URL,以及數據提交到服務器的方法。

b、表單域：包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框、和文件上傳框等。

c、表單按鈕：包括提交按鈕，復位按鈕和一般按鈕；用于將數據傳送到服務器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。

七、表單提交中Get和Post方式的區別

(1)、get是從服務器上獲取數據，post是向服務器傳送數據。

(2)、get是把參數數據隊列加到提交表單的ACTION屬性所指的URL中，值和表單內各個字段一一對應，在URL中可以看到。post是通過HTTPpost機制，將表單內各個字段與其內容放置在?HTML HEADER內一起傳送到ACTION屬性所指的URL地址,用戶看不到這個過程。

(3)、對于get方式，服務器端用Request.QueryString獲取變量的值，對于post方式，服務器端用Request.Form獲取提交的數據。

(4)、get傳送的數據量較小，不能大于2KB。post傳送的數據量較大，一般被默認為不受限制。但理論上，IIS4中最大量為80KB，IIS5中為100KB?。

(5)、get安全性低，post安全性較高。

八、HTML5 新增的表單元素有哪些

input的類型有

email（自動驗證email格式）
? url（自動驗證url格式）
? number（只能輸入數字）
? range（類似音量滑動條）
? Date?pickers (date,month, week, time, datetime, datetime-local)（自帶日期選擇）
? search（搜索域，類似百度的類似搜索提示）
? color（顏色選擇，這個現在不兼容大部分瀏覽器=-=）

新標簽

datalist（自動驗證內容是否在可選擇選項中）
? keygen?
? output?

九、HTML5廢棄了哪些HTML4元素

第一類：表現性元素

basefont
? big
? center
? font
? s
? strike
? tt
? u
建議用語義正確的元素代替他們，并使用CSS來確保渲染后的效果。

第二類：框架類元素

因框架有很多可用性及可訪問性問題，HTML5規范將以下元素移除。
? frame
? frameset
? noframes
? 但html5支持iframe。

第三類:屬性類

很多表現性的屬性也被新規范移除，如下：
? align
? body標簽上的link、vlink、alink、text屬性
? bgcolor
? height和width
? iframe元素上的scrolling屬性
? valign
? hspace和vspace
? table標簽上的cellpadding、cellspacing和border屬性
? header標簽上的profile屬性
? 鏈接標簽a上的target屬性
? img和iframe元素的longdesc屬性

第四類：其他

abbr取代acronym（用于表示縮寫）
? object取代了applet
? ul取代了dir

十、HTML5 標準提供了哪些新的 API

HTML5?提供的應用程序?API?主要有：

Media API

Text Track API

Application Cache API

User Interaction

Data Transfer API

Command API

Constraint Validation API

History API

十一、HTML5有哪些類型的存儲，區別是什么

存儲類型有：

HTML5的存儲類型有：essionStorage和localStorage。

兩者區別：

sessionStorage屬于session級別,只在當前域名內才有效，當瀏覽器窗口關閉，存入的值跟著也消失。

localStorage屬于cookie級別，永久存在瀏覽器中。

十二、簡單介紹一下消息推送與WebSocket

B/S架構的系統多使用HTTP協議，

HTTP協議的特點：

1、無狀態協議

2、用于通過Internet發送請求消息和響應消息

3、使用端口接收和發送消息，默認為80端口底層通信使用Socket完成。

HTTP協議決定了服務器與客戶端之間的連接方式，無法直接實現消息推送,有下面一些變相的解決辦法：

01.輪詢

客戶端定時向服務器發送Ajax請求，服務器接到請求后馬上返回響應信息并關閉連接。?
優點：后端程序編寫比較容易。?
缺點：請求中有大半是無用，浪費帶寬和服務器資源。?
實例：適于小型應用。

02長輪詢

客戶端向服務器發送Ajax請求，服務器接到請求后hold住連接，直到有新消息才返回響應信息并關閉連接，客戶端處理完響應信息后再向服務器發送新的請求。?
優點：在無消息的情況下不會頻繁的請求，耗費資小。?
缺點：服務器hold連接會消耗資源，返回數據順序無保證，難于管理維護。?
實例：WebQQ、Hi網頁版、Facebook IM?。

03。長連接

在頁面里嵌入一個隱蔵iframe，將這個隱蔵iframe的src屬性設為對一個長連接的請求或是采用xhr請求，服務器端就能源源不斷地往客戶端輸入數據。?
優點：消息即時到達，不發無用請求；管理起來也相對便。?
缺點：服務器維護一個長連接會增加開銷。?
實例：Gmail聊天

04.Flash Socket

在頁面中內嵌入一個使用了Socket類的程序JavaScript通過調用此Flash程序提供的Socket接口與服務器端的Socket接口進行通信，JavaScript在收到服務器端傳送的信息后控制頁面的顯示。?
優點：實現真正的即時通信，而不是偽即時。?
缺點：客戶端必須安裝Flash插件；非?HTTP?協議，無法自動穿越防火墻。?
實例：網絡互動游戲。

05.Websocket

WebSocket是HTML5開始提供的一種瀏覽器與服務器間進行全雙工通訊的網絡技術。依靠這種技術可以實現客戶端和服務器端的長連接，雙向實時通信。

特點:

a、事件驅動

b、異步

c、使用ws或者wss協議的客戶端socket

d、能夠實現真正意義上的推送功能

缺點：少部分瀏覽器不支持，瀏覽器支持的程度與方式有區別。