整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
面渲染的全過程
輸入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為什么只需要寫<! DOCTYPE HTML>
答:這是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>，
如：<p><xmp><div></div></xmp></p>
什么是漸進式渲染
答:指打開頁面先加載首頁顯示內容;,之后再隨著時間或者滾動頁面進行后面的加載。
前端頁面有哪三層構成,分別是什么?作用是什么?
結構標準:制作網頁按照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標簽相關
<!DOCTYPE html> H5標準聲明，使用 HTML5 doctype，不區分大小寫 <head lang=”en”> 標準的 lang 屬性寫法 <meta charset=’utf-8′> 聲明文檔使用的字符編碼,防亂碼 <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> 優先使用 IE 最新版本和 Chrome <meta name=”description” content=”不超過150個字符”/> 頁面描述 <meta name=”keywords” content=””/> 頁面關鍵詞 <meta name=”author” content=”name, email@gmail.com”/> 網頁作者 <meta name=”robots” content=”index,follow”/> 搜索引擎抓取 <meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 為移動設備添加 viewport <meta name=”apple-mobile-web-app-title” content=”標題”> iOS 設備 begin <meta name=”apple-mobile-web-app-capable” content=”yes”/> 添加到主屏后的標題（iOS 6 新增） 是否啟用 WebApp 全屏模式，刪除蘋果默認的工具欄和菜單欄 <meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”> 添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari） <meta name=”apple-mobile-web-app-status-bar-style” content=”black”/> <meta name=”format-detection” content=”telphone=no, email=no”/> 設置蘋果工具欄顏色 <meta name=”renderer” content=”webkit”> 啟用360瀏覽器的極速模式(webkit) <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> 避免IE使用兼容模式 <meta http-equiv=”Cache-Control” content=”no-siteapp” /> 不讓百度轉碼 <meta name=”HandheldFriendly” content=”true”> 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 <meta name=”MobileOptimized” content=”320″> 微軟的老式瀏覽器 <meta name=”screen-orientation” content=”portrait”> uc強制豎屏 <meta name=”x5-orientation” content=”portrait”> QQ強制豎屏 <meta name=”full-screen” content=”yes”> UC強制全屏 <meta name=”x5-fullscreen” content=”true”> QQ強制全屏 <meta name=”browsermode” content=”application”> UC應用模式 <meta name=”x5-page-mode” content=”app”> QQ應用模式 <meta name=”msapplication-tap-highlight” content=”no”> windows phone 點擊無高光 設置頁面不緩存 <meta http-equiv=”pragma” content=”no-cache”> <meta http-equiv=”cache-control” content=”no-cache”> <meta http-equiv=”expires” content=”0″>
< 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魚瑜于
lt;hr>水平線
<hr size="9" /> 水平線(設定大小,單位:像素)
<hr width="80%" /> 水平線(設定寬度,單位:像素或百分比)
<hr color="#ff0000" /> 水平線對齊方式
<hr align="left" /> 水平線水平位置
<hr noshade /> 去掉水平線的陰影
align屬性值:center(默認值) left right
<hr width="30%" color="blue" size="9" align="left"/>
<center></center>水平居中.
<br/> 換行
<p></p> 標簽定義段落
<p align=""></p>將段落按左、中、右對齊;
align屬性值:left(默認值) right center justify
注意：
<h1>...<h6>標題標記與<p>段落標記都只有一個屬性align
<pre></pre> 定義預格式化的文本
<blockquote></blockquote> 設置段落縮進(可以縮進5個字符)
手冊上沒有的標記
<xmp></xmp> 忽略HTML標記
<nobr>…</nobr> 禁止換行
<wbr> 指定軟換行（或單詞換行），用在nobr標記中，即使用 <nobr> 禁止了換行，使用 <wbr> 仍然可以換行
<nobr>中華人民共和國上海市<wbr>黃浦區</wbr></nobr>
信所有已經步入Web前端開發領域的同學們，對于HTML超文本標記語言都不會感覺陌生。即便是正準備開始系統學習Web前端開發的同學，也多多少少了解這門語言。HTML語言由W3C互聯網聯盟制定其使用規范并對外發布。嚴格來說，HTML并不屬于編程語言，更多的是一種帶有“標記”性質的代碼集合。HTML語言所書寫的HTML文檔也都是由標記或標記對組成的。這種語言沒有邏輯流程，也就是說只要書寫正確，瀏覽器就可以直接將最終的效果呈現在頁面中。
W3C 互聯網聯盟
這里，小海老師想帶領大家重溫HTML語言，對前端開發中常用的HTML標記或標記對進行總結，對于標記或標記對中用到的屬性進行闡述。對于已經在前端開發領域摸爬滾動數年的老手們，這些內容一定是已經爛熟于心了，因此這篇文章更適合哪些剛剛接觸這個行業的新人們。
首先我要說明，本文章只收錄了HTML 4版本中包括的常用標記對和屬性，對于HTML 5新增的標記對和屬性，小海老師會在后續的文章中專門進行講解。
1、HTML文檔的基本結構：
HTML（Hyper Text Markup Language，超文本標記語言）在書寫時應該滿足它最基本的結構。HTML文檔就好像人體的結構似的，被分為“文件頭”和“文件體”兩部分。文件頭利用<head></head>標記對來實現，文件體利用<body></body>標記對來實現。
HTML語言的基本結構
2、HTML對標記和標記對的規定：
HTML語言中大部分的標記都是成對出現的，被人們稱為“標記對”，書寫時利用尖括號（也就是小于號和大于號）來進行包裹。格式為：
<標記對></標記對>
為了和早期的HTML版本兼容，W3C（World Wide Web Consortium，互聯網聯盟）在制定HTML標準的同時還保留了一小部分不成對的標記。因為不成對，所以被人們稱為“標記”，書寫時在標記的結束位置應該添加一個反斜杠。格式為：
<標記 />
3、HTML對屬性的規定：
屬性是為了拓展標記的功能書寫在起始標記中的，屬性分為“屬性名”和“屬性值”兩部分。屬性之間利用空格隔開，屬性值應該用雙引號引住，屬性名和屬性值之間利用等號連接。帶有屬性的標記對格式為：
<標記 屬性名1=“屬性值1” 屬性名2=“屬性值2”> </標記>
說到這里，我們應該繼續介紹HTML中包括的常用標記對與其對應的屬性。這里，首先我們將HTML標記對劃分為以下幾類：
HTML結構標記
文本段落標記
列表標記
超級鏈接標記
圖像標記
表格標記
表單標記
塊標記
一、HTML結構標記
支撐起HTML文檔結構的標記對包括以下幾個：
<html></html>：所有的HTML代碼必須書寫在該標記對內部。
<head></head>：文件頭標記對。
<body></body>：文件體標記對。
<title></title>：文檔標題標記對。
<meta />：元信息標記。
<link />：用于加載外部CSS文件的標記。
<style></style>：用于書寫內部CSS代碼的標記對。
<script></script>：用于書寫或加載腳本代碼的標記對。
HTML 結構標記
下面羅列了一些常用的結構用法：
1、加載字符集：<meta charset=“utf-8”/>
2、加載地址欄圖標：<link rel=“shortcut icon” href=“ico_URL” />
3、加載外部CSS文件：<link rel=“stylesheet” type=“text/css” href=“*.css” />
4、加載js文件：<script type=“text/javascript” src=“*.js”></script>
二、文本段落標記
用于在頁面中輸入文本和段落的標記對包括以下幾個：
<h1></h1>：標題標記對。共有六個，<h1>到<h6>。
<p></p>：段落標記對。
<font></font>：字體標記對。
<pre></pre>：預格式化文本標記對。
<center></center>：居中標記對。
<xmp></xmp>：忽略HTML標簽標記對。
<!--注釋內容-->：注釋標記。
文本段落標記
除了上述標記對之外，HTML還提供了一部分代碼用于在頁面中輸入特殊字符。這里我列舉了一部分常用的特殊字符，可以從下圖中看到。
特殊符號的表示
同時，HTML還提供了一組有關文本修飾的標記對，可以從下圖中看到。
文本修飾標記對
三、列表標記
用于在頁面中顯示列表的標記對包括以下幾個：
<ul></ul>：用于實現無序列表的標記對。
<ol></ol>：用于實現有序列表的標記對。
<li></li>：用于實現無序列表和有序列表列表項的標記對。
<dl></dl>：用于實現定義列表的標記對。
<dt></dt>：用于在定義列表列表項中實現定義名詞的標記對。
<dd></dd>：用于在定義列表列表項中對定義名詞進行解釋的標記對。
列表標記對
四、超級鏈接
用于在頁面中實現超級鏈接的標記對只有一個：
<a></a>：實現超級鏈接的標記對。
超級鏈接標記對有以下常用的屬性：
href：用于指定超級鏈接的目標地址。
title：用于指定當鼠標經過超級鏈接時給出的提示語。
target：用于指定打開鏈接地址頁面的方式。
name：用于指定錨的名稱。
超級鏈接標記對的屬性
五、圖像
用于在頁面中實現圖像的標記只有一個：
<img />：實現圖像的標記。
圖像標記有以下常用的屬性：
src：用于指定圖片所在的路徑和文件名。
width：用于指定圖片的寬度，單位為像素。
height：用于指定圖片的高度，單位為像素。
border：用于指定圖片的邊框粗細，單位為像素。
alt：用于指定圖片的替代文本。
align：用于指定圖片相對于周圍元素的對齊方式。
vspace：用于指定圖片與環繞在其一側的周圍元素之間的垂直距離。
hspace：用于指定圖片與環繞在其一側的周圍元素之間的水平距離。
圖像標記
由于篇幅問題，以上只是HTML常用標記對和屬性的第一部分，接下來我還會繼續發布第二部分，供廣大前端愛好者學習與參考。
由于考慮到大部分人對HTML語言的基本使用還是比較熟練的，所以本文僅僅是單純的列出了標記對的名稱和屬性名稱，并沒有詳細的講解這些標記對和屬性的使用方法。如果您大部分內容都是已經掌握了的，甚至是已經達到熟練使用的程度，可以略讀本文甚至忽略本文。如果您剛剛涉足HTML語言，對本文這種帶有列舉性質的具體使用方法并不清除，可以私信我，我可以為您免費發一份我自己編寫的關于HTML語言較為詳盡的PDF教材。歡迎廣大學習者索取。
【未完待續】
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
