頁面渲染的全過程

輸入url后，先拿到html文件，html下載完以后會開始對它進行解析

html在解析的過程中，如果文本里有外部資源鏈接，比如css、js和img時，會立即啟用其他線程下載這些靜態資源。

特殊的是當遇到js文件的時候，html解析會停下來，等js文件下載結束并且執行完，再進行html執行。

在html解析的同時，解析器會把解析完的html轉化成DOM對象，構建成DOM樹。

當css下載完，css解析器開始對css解析，把css解析成css對象，把css組裝起來，構建CSSOM樹。

DOM和CSSOM樹構建完畢，瀏覽器根據兩棵樹建一顆渲染樹。

HTML

Hyper Text Markup Language 超文本標記語言

html5為什么只需要寫

答:這是w3c制定的規則,是文檔類型聲明,語義化說是告訴瀏覽器和其他開發者,這個文檔使用的是html5標準。

2.html5新特性有哪些

答:header、footer、aside、nav、video、audio、canvas、localStorage、sessionStorage、cookie、output、datalist、keygen、data、time、email、url、search···

< img > 的 title 和 alt 有什么區別？

答： alt 是圖片加載失敗時，顯示在網頁上的替代文字；

title 是鼠標放上面時顯示的文字。

這些都是表面上的區別，alt是img必要的屬性，而title不是。

XHTML和HTML有什么區別

答:XHTML:

1)所有的標記都必須有一個相應的結束標記;

2)所有標簽的元素和屬性的名字都必須使用小寫;

3)所有的XHTML標記都必須合理嵌套;

4)所有的屬性都必須用引號""括起來;

5)XHTML文檔必須擁有根元素。

如何在 html 頁面上展示 < div> < /div> 這幾個字符

答：使用忽略HTML標記< xmp>，

如：

什么是漸進式渲染

答:指打開頁面先加載首頁顯示內容;,之后再隨著時間或者滾動頁面進行后面的加載。

前端頁面有哪三層構成,分別是什么?作用是什么?

結構標準:制作網頁按照html標準結構寫網頁;

表現標準:用來美化網頁CSS;

行為標準:用來實現網頁中用戶的動作處理JavaScript。

瀏覽器的內核有哪些

答:

Trident(IE內核):IE、騰訊TT、獵豹安全瀏覽器、360極速瀏覽器、百度瀏覽器等;

Gecko(firefox):火狐瀏覽器

webkit(Safari):Apple

Blink:谷歌瀏覽器

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

什么是語義化的HTML

答:就是寫出的HTML代碼符合內容的結構,選擇合適的標簽,能夠便于開發者閱讀和寫出更優雅的代碼,比如頁面結構寫頂部用header標簽,導航有nav標簽等,同時也讓瀏覽器的爬蟲和機器更好的解析。

實體字符

CSS

Cascading Style Sheets 層疊樣式表

特性

層疊性、繼承性、優先級

塊級元素

特點:塊級獨占一行;可以設置寬高;如果沒設置寬度,那么其寬度等于父元素的寬度。

比如:div,p,ul,ol,dl,li,dd,h1-h6

轉換:display:block;

行內元素

特點:都在一行顯示,不能設置寬度和高度。

比如:a b em font i img input br label span small select textarea

轉換:display:inline

行內塊元素

特點:都在一行上顯示,可以設置寬度和高度。

比如:

轉換:display:inline-block;

選擇器優先級

!important>行內樣式>id選擇器(#)>類選擇器(class)>標簽選擇器>通配符選擇器

CSS3新特性有哪些

答:顏色--RGBA、文字陰影--text-shadow、邊框圓角--border-radius、邊框陰影--box-shadow、盒子模型--box-sizing、設置背景圖片的尺寸--background-size、漸變--linear-gradient、過渡動畫--transition、媒體查詢多欄布局、伸縮布局、transform:translate···

清除浮動的幾種方式

1)父級div設置height;

2)結尾處加空div標簽clear:both;

3)父級div定義偽類:after和zoom;

4)父級div定義overflow:hidden或者auto;

link和@import有什么區別

@import引用的css會等到頁面被加載完畢后再加載，link在頁面加載時會同時被加載。

link是html標簽，無兼容問題。link方式的樣式權重高于@import

transition和animation的區別

他們都是隨時間改變元素的屬性值，主要區別是transition需要觸發一個事件才能改變屬性，而animation不需觸發任何事件就會隨時間改變屬性值。

meta viewport標簽相關

H5標準聲明，使用 HTML5 doctype，不區分大小寫 標準的 lang 屬性寫法 聲明文檔使用的字符編碼,防亂碼 優先使用 IE 最新版本和 Chrome 頁面描述 頁面關鍵詞 網頁作者 搜索引擎抓取 為移動設備添加 viewport iOS 設備 begin 添加到主屏后的標題(iOS 6 新增)是否啟用 WebApp 全屏模式，刪除蘋果默認的工具欄和菜單欄添加智能 App 廣告條 Smart App Banner(iOS 6+ Safari) 設置蘋果工具欄顏色 啟用360瀏覽器的極速模式(webkit) 避免IE使用兼容模式 不讓百度轉碼 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 微軟的老式瀏覽器 uc強制豎屏 QQ強制豎屏 UC強制全屏 QQ強制全屏 UC應用模式 QQ應用模式 windows phone 點擊無高光設置頁面不緩存

< meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">

詳細的描述一下position

1)position:absolute--絕對定位的元素,相對于其父元素進行定位。

2)position:relative--生成相對定位的元素,相對于其正常位置進行定位。

3)position:fixed--固定定位,相對于瀏覽器窗口進行定位。

4)position:static--默認值,沒有定位,元素在正常的文檔流

JavaScript

JavaScript的組成

1)ECMAScript:是JS的核心,描述了語言的基本語法和數據類型,是JS的語法規范

2)BOM:瀏覽器對象模型,通過BOM可以操作瀏覽器窗口,如:彈出框

3)DOM:文檔對象模型,一套操作頁面元素的API

JavaScript的輸入、輸出方式

輸出:

1)alert() --彈出一個提示框(提示/警告文字)

2)document.write() --會將輸入的內容放置到body標簽內部,作為html內容

3)console.log() --代碼后臺

輸入:

prompt('提示文字', 默認值);

對象的創建方式

1)對象字面量

var o = { name: 'jay', age: 18, sex: true, sayHi: function () { console.log(this.name); }};

2)new Object()創建對象

var person = new Object();person.name = 'Jolin';person.age = 16;person.job = 'actor';person.sayHi = function() { console.log('Hello,everyBody');}

3)工廠函數創建對象

function createPerson(name, age, job) { var person = new Object(); person.name = name; person.age = age; person.job = job; person.sayHi = function(){ console.log('Hello,everybody'); } return person;}var p1 = createPerson('Jay', 18, 'actor');

4)自定義構造函數

function Person(name, age, job){ this.name = name;//this是關鍵字，這里代表“自己”，“當前對象” this.age = age; this.job = job; this.sayHi = function(){ console.log('Hello,everybody'); }}var p1 = new Person('Jay', 18, 'actor');

new關鍵字運行機制

1)new會在內存中創建一個新的空對象

2)new會讓this指向這個新的對象

3)執行構造函數 目的是給這個新對象加屬性和方法

4)new會返回這個新對象

this的使用場景

1)普通函數調用時,指向全局window

2)構造函數調用時,指向實例對象

3)對象方法調用時,指向該方法的對象

4)事件綁定時,指向綁定事件的對象

5)箭頭函數中this指向外部函數作用域的this

==和===有什么區別

=是賦值

==(相等)返回一個布爾值，相等返回true，不相等返回false，允許不同數據類型的轉換。

===(全等)只要數據類型不一樣，就會返回false。

JavaScript內置對象之Math(求絕對值,取整,隨機數)

Math.random() 生成一個0-1之間的隨機小數

Math.floor()/Math.ceil() 向下取整/向上取整

Math.round() 取整,四舍五入

Math.abs() 絕對值

Math.max()/Math.min() 求最大值/最小值

Math.sin()/Math.cos() 正弦/余弦

Math.pow/Math.sqrt() 求指數次冪/求平方根

JavaScript內置對象之Date(處理時間和日期,基于1970年1月1日)

getTime() 返回毫秒數和valueOf()結果一樣

getMilliseconds()

getSeconds() 返回0-59

getMinutes() 返回0-59

getHours() 返回0-23

getDay() 返回星期幾 0代表是周日 6代表是周六

getDate() 返回當前月的第幾天

getMonth() 返回月份,從0開始

getFullYear() 返回4位的年份 如 2016

JavaScript內置對象之Array

push()/pop() 加入數組的末端/刪除數組的最后一項

unshift()/shift() 在數組最前面插入項/刪除數組中前面項

reverse() 翻轉數組

sort() 根據字符,從小到大排序

slice() 從當前數組中截取一個新的數組，不影響原來的數組，參數start從0開始,end從1開始

splice() 刪除或替換當前數組的某些項目，參數start, deleteCount, options(要替換的項目)

indexOf() 索引位置

forEach() 遍歷數組不返回值,返回參數

join() 把數組中的所有元素放入一個字符串

JavaScript內置對象之String

concat() 拼接字符串,等效于'+','+'更常用

slice(start,end) 從start位置開始,截取到end位置,end取不到

substring() 方法同slice

substr(start,length) 從start位置開始,截取到length個字符,如果沒有length參數,則截取到最后

toUpperCase() 轉換為大寫

toLowerCase() 轉換為小寫

search() 查找,返回找到的位置

replace() 替換,注意:一次只能替換一個

split() 將字符串以指定的字符分割為數組

JavaScript中動態操作DOM的方法

createElement 創建一個元素節點

creatTextNode 創建一個文本節點

appendChild 向元素的末尾追加一個節點

inserBefore(a,b) 意思是a節點會插入b節點的前面

removeChild 刪除一個子節點

cloneChild 復制節點,接收布爾值參數,true表示深復制(復制節點及其所有子節點),false表示淺復制(復制節點本身,不復制子節點)

replaceChild 替換節點

document.getElementsByTagName() 通過標簽名稱查找節點

document.getElementsByName() 通過元素的Name屬性的值查找節點

document.getElementById() 通過元素ID查找節點

事件的三個階段,如何阻止事件冒泡

答:目標、捕獲、冒泡

event.stopPropagation

call,apply,bind有什么區別

三者都是用來改變函數的this對象指向，調用其方法改變函數執行的上下文，從而改變this指向。

call()和apply()的第一個參數相同,是指定的對象,這個對象是該函數的執行上下文

call()可以接受多個參數，在第一個參數之后的后續所有參數就是傳入該函數的值

apply()只有兩個參數,第一個是對象,第二個是數組

bind()不會立即執行該函數,他的參數和call()相同

閉包函數

1.什么是閉包?

當函數執行時,首先會形成一個私有作用域,這個私有作用域保護私有變量不收外界的干擾,我們把這個體制稱為閉包。閉包是指有權訪問另一個函數作用域中變量的函數。

2.閉包優點:

1)保護函數內的變量安全,加強了封裝性;

2)在內存中維持一個變量,方便調用上下文的局部變量;

3.閉包缺點:

1)內存消耗;

2)濫用閉包函數會造成內存泄露,不能被垃圾回收機制所回收。

遞歸函數

1.什么是遞歸函數

答:遞歸函數即自調用函數,在函數體內直接或者調用自己本身函數

2.遞歸函數的優點

答:代碼更加簡潔清晰,可讀性更好

3.遞歸函數的缺點

答:大量使用遞歸函數,會消耗空間,造成系統卡頓,非必要時建議不要使用遞歸函數。

面向對象和面向過程

答:面向對象:開發過程中分析大體步驟,找到輔助的開發工具

面向過程:開發過程中專注于每個功能的具體實現方式

面向對象的三個特征

封裝性:多個相同操作的功能封裝到一個對象中

繼承性:讓功能復用

多態性:增強功能使用性靈活性

正則表達式

答:對字符串進行操作的一組工具,作用:匹配,替換,提取功能

/^$/ 這個是個通用的格式。

^ 匹配輸入字符串的開始位置；$匹配輸入字符串的結束位置

*匹配前面的子表達式零次或多次；

+匹配前面的子表達式一次或多次；

?匹配前面的子表達式零次或一次；

d 匹配一個數字字符，等價于[0-9]

校驗11位手機號案例:

function checkPhone(){ var phone = document.getElementById('phone').value; if(!(/^1[35678]d{9}$/.test(phone))){ alert("手機號碼有誤，請重新填寫"); return false; } }

校驗郵箱案例:

function isEmail(str){var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;return reg.test(str);}

原型三者關系

實例對象：實例對象都具有__proto__,就是原型對象

原型對象：原型對象都具有constructor屬性，就是構造函數

構造函數：構造函數都具有prototype屬性，就是原型對象

如何在JS中清空數組

如：var list = [1,2,3,4]

• 方法一：

list= []; //設置一個新的空數組，如果從另一個變量引用到這個數組，那么原始的引用數組將保持不變。

• 方法二：

list.length=0;//這種方式會更新指向原始數組的所有引用變量。

• 方法三：

list.splice(0,list.length);//也將更新對原始數組的所有引用。

• 方法四：

while(list.length){ list.pop();};//不建議經常使用該方式。

JS中的轉義字符是什么

能夠在不破壞應用程序的情況下編寫特殊字符，轉義字符()用于處理特殊字符，如單引號、雙引號、撇號和&號，在字符前放置。

如：console.log(" I am a "beautiful"girl")

原文鏈接：https://juejin.im/post/5cf725d6f265da1b8608754a

作者：HoneyCC魚瑜于

總結

以上是生活随笔為你收集整理的html中给div设置的属性怎么样才能拿得到_前端基础高频面试题(更新中)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。