❶ web考試簡答題目
1、什麼是靜態網頁和動態網頁？
答：靜態網頁，即純粹的HTML網頁。網頁代碼除了包含完整的HTML代碼外，還可能包含運行於客戶端的JavaScript程序，網頁內代碼都是在客戶端的瀏覽器中執行。
動態網頁，指網頁的內容可根據某種條件的改變而自動改變。網頁內代碼在存放網頁的伺服器上執行，完成資料庫操作後，生成的HTML代碼網頁發送給客戶端的瀏覽器執行。
2、獲取網頁源文件的方法有哪些？
答：方法一：在網頁的空白處，點擊滑鼠右鍵，在彈出的菜單中，選擇「查看源文件」命令即可看到該網頁的源文件。
方法二： 打開瀏覽器，選擇菜單欄中的「查看->源文件到該網頁的源文件。」命令也可看
3、什麼是格式良好的XML文檔？
答：1.第一行必須是XML聲明語句。
2.在XML文檔中有且僅有一個根元素。
3.文檔中所有元素的標記必須正確地關閉。
4.各個元素的標記間可以正確嵌套，但不得交叉。
5.屬性值必須用單引號、雙引號括起來。
6.文檔中的英文字母嚴格區分大小寫。
4、在HTML中使用CSS的有哪些方法及它們的優先順序？
答：方法有四種：行內樣式、嵌入樣式、鏈接樣式、導入樣式。
優先順序最高的是行內樣式，其次是嵌入樣式，最低是鏈接樣式和導入樣式。
5、什麼叫Div+CSS？
答：Div+CSS 是一種網頁的布局方法, 主要採用div 標簽進行網頁布局，而控制布局的工具的CSS代碼。這種布局方法用於XHTML技術，有別於傳統的HTML網頁設計語言中的表格（table）定位方式，真正地實現內容與表現相分離，使網頁符合Web標准。
6、使用滑動門技術來設置標題樣式有哪些前提條件？具體如何實現？
答：前提條件：在同一個網頁中，需要顯示多個標題，而這些標題的寬度各不相同，但是具有相同背景圖像，且圖像的左右兩側有各自的花紋。
滑動門技術的實現：1.在標題中使用兩個嵌套的元素；2.每個元素各自使用一個相同的背景圖像，使二者中間部分重疊，兩端不重疊，把左右兩端的的花紋就可以被顯示出來；
7、JavaScript可以完成哪些功能？
答：1.控制文檔的外觀和內容
2.控制瀏覽器的行為,…交互操作
4.讀寫部分客戶端信息
8、列出瀏覽器對象模型中對象，並簡要說明其用途。（列出四個對象，給全分）
答：window對象：是最頂層的對象，表示一個瀏覽器窗口或一個框架。
navigator對象：包含了有關訪問者瀏覽器的所有信息。
location對象：用於設置和返回當前網頁的URL信息。
history 對象：包含用戶（在瀏覽器窗口中）訪問過的 URL。
screen 對象：包含訪問者系統顯示屏幕的信息。
9、JavaScript中的三種彈出式消息提醒的命令是什麼？並簡要說明。（少一個扣3分）
答：alert() ：警告窗口，顯示帶有一段消息和一個確認按鈕的警告框
confirm()：確認窗口，顯示帶有一段消息以及確認按鈕和取消按鈕的對話框
prompt() : 信息輸入窗口，顯示可提示用戶輸入的對話框
❷ Web前端企業面試題
答：
一、display和visibility的相同與不同點
1、相同點：display和visibility都有講元素隱藏的意思
2、不同點：display是元素隱藏，隱藏的元素不佔文檔流
而visibility隱藏的元素仍然占文檔流
二、display和visibility的屬性值
1、display
2、visibility
答：
在開發過程中經常需要循環遍歷數組或者對象，使用最多的方法 forEach、for…in 、 for…of ，整理一下他們的異同點
for循環
其實除了這三種方法以外還有一種最原始的遍歷，自Javascript誕生起就一直用的 就是for循環，它用來遍歷數組
for循環中可以使用return、break等來中斷循環
結果：
forEach
對數組的每一個元素執行一次提供的函數（不能使用return、break等中斷循環），不改變原數組，無返回值undefined。
輸出結果：
for…in
循環遍歷的值都是數據結構的鍵值
總結一句: for in也可以循環數組但是特別適合遍歷對象
結果：
for…of
它是ES6中新增加的語法，用來循環獲取一對鍵值對中的值
循環一個數組
循環一個普通對象（報錯）
答：
px：像素（Pixel）,相對長度單位。像素px是相對於顯示器屏幕解析度而言的 。--即解析度不同的機型當前對應的距離可能發生變化。(1Inches=xPx)。
所以相對於同一機型來說是一個絕對的長度單位。
em：是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸 。
以其父級元素為基準來變化長度。所以其演算法不是一個固定的值。
rem：是CSS3新增的一個相對單位（root em，根em） 。
那麼其好用在用可以直接設置HTML的font-size，然後在其子類都是以這個大小為基準變化的值。
在移動設備上，我們常常設置
此方式的目的是為了將當前屏幕(PC)解析度的px轉化成手機端的px，讓px在手機上能夠兼容此方式。
因此，此時看見的12px與PC端的12px無異。但是，如果不寫著個meta的話，那麼，瀏覽器會一直以PC的視圖來決定手機端的px的大小，讓視圖看起來變小了很多。
那麼，響應式頁面則經常配合媒體查詢media 來設置不同解析度下手機的各種不同的配置機構，然後根據父級來變化所有的相對長度。
基礎篇
1.shift
// 刪除原數組的第一項，並返回刪除元素的值，如果數組為空則返回undefined
2.unshift
// 將參數添加到原數組開頭，並返回數組的長度
//註：此方法在ie6.0下
// 測試的返回值始終為undefined，在firefox下測試的返回值為7，所以此方法不可靠
// 一般需要用返回值時可用splice代替
3.pop
// 刪除原數組的最後一項，並返回刪除元素的值；如果數組為空則返回undefined
4.push
// 將參數添加到原數組末尾，並返回數組的長度
5.concat
// 返回一個新數組，是將參數添加到原數組中構成的
6.splice
7.reverse
8.sort(orderfunction)
9.slice(start,end)
10.join(separator)
11.indexOf
12.lastIndexOf
13. Array.isArray()
14. Array.toString()
進階篇
1.forEach
是最為常用的情景，它至於遍歷，可以在獲取當前數據項的前提下，對數據進行修改。它沒有返回值。理解起來也是最容易的。
2.map
map的本意就是映射，也就是將一個值從一種形式映射到另一種形式，比如將key映射到value。它的每一次遍歷都會有一個返回值。這些返回值組合成最終的結果數組。事實就是如此
forEach和map對比
相同點
1）都是循環遍歷數組中的每一項；
2）forEach()和map()匿名函數的參數相同，參數分別是item（當前每一項）、index（索引值）、arr（原數組）；
3）this都是指向調用方法的數組；
4) 只能遍歷數組；
不相同點
1）map()創建了新數組，不改變原數組；forEach()可以改變原數組。
2）遇到空缺的時候map()雖然會跳過，但保留空缺；forEach()遍歷時跳過空缺，不保留空缺。
3）map()按照原始數組元素順序依次處理元素；forEach()遍歷數組的每個元素，將元素傳給回調函數。
3.filter
它致力於從已有的數組中篩選出符合一定條件的數據項，最後的返回值是所有符合條件的數據項構成的數組。它不會修改原來的數組。記住，它的立足點就是篩選。也僅僅是篩選。還有一點需要注意：每一次遍歷都會有一個返回值，它的類型是布爾類型。返回值只有是true，當前遍歷項才會被篩選中。不要試圖在filter中去修改原始數組。
理解: 就是在一堆數據裡面去篩選你需要的數據 或者 剔除你不需要的數據
4.find()
返回通過測試的數組的第一個元素的值,
理解:假如你去一個一群人的地方去找人 你說我找xxb 他要是在那裡就找到 不在那裡就是undefined
在第一次調用 callback 函數時會確定元素的索引范圍，因此在 find 方法開始執行之後添加到數組的新元素將不會被 callback 函數訪問到。如果數組中一個尚未被callback函數訪問到的元素的值被callback函數所改變，那麼當callback函數訪問到它時，它的值是將是根據它在數組中的索引所訪問到的當前值。被刪除的元素仍舊會被訪問到。
語法
array.find(function(value, index, arr),thisValue)
value:必須，代表當前元素，其他四個參數都是可選，index代表當前索引值，arr代表當前的數組，thisValue代表傳遞給函數的值，一般用this值，如果這個參數為空，undefined會傳遞給this值
返回值：返回符合測試條件的第一個數組元素的值，如果沒有符合條件的則返回undefined。
擴展: findIndex()方法的用法與find()方法非常類似，返回第一個符合條件的數組成員的位置，如果所有成員都不符合條件，則返回-1。自己try吧
5.every
理解: 這個就像 上課了 老師說 昨天布置的作業 只要有一個人沒有寫完 今天就不講課 然後挨個檢查 當檢查到有一個沒有寫完的時候 就不檢查了 返回 不講課了(false)
6.some
理解: 相當於在一個數組裡面找你想要的那個數 找到了 就返回true 找不到就返回false
7.rece
它這個方法是接收一個函數作為累加器,將數組中的值(從左向右)開始合並,最總為一個值 然後返回出來,callback
他可以傳四個參數:
1,previousValue:上一次調用回調返回的值,或者是提供的初始值(initialValue)
2,currentValue:數組中當前被處理的元素
3,index:不啰嗦,自己顧名思義去吧
4,array:返回調用rece的數組
彩蛋: 這里附上前幾天某某人比較喜歡的切割字元串的方法
substring() 和 substr()
相同點： 如果只是寫一個參數，兩者的作用都一樣：都是是截取字元串從當前下標以後直到字元串最後的字元串片段。
不同點： 第二個參數
substr(startIndex, lenth) // 第二個參數是截取字元串的長度（從起始點截取某個長度的字元串）；
substring(startIndex, endIndex) // 第二個參數是截取字元串最終的下標 （截取2個位置之間的字元串,『含頭不含尾'）。
1：在使用vue框架的過程中，我們經常需要給一些數據做一些初始化處理，這時候我們常用的就是在created與mounted選項中作出處理。
首先來看下官方解釋，官方解釋說created是在實例創建完成後唄立即調用。在這一步，實例已完成以下配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。
這話的意思我覺得重點在於說掛架階段還沒開始，什麼叫還沒開始掛載，也就是說，模板還沒有被渲染成html，也就是這時候通過id什麼的去查找頁面元素是找不到的。下面看下實例來證明。
所以，一般creadted鉤子函數主要是用來初始化數據。
2：mounted鉤子函數一般是用來向後端發起請求拿到數據以後做一些業務處理。官方解釋如下：
el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用該鉤子。如果 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。
這意思是該鉤子函數是在掛在完成以後也就是模板渲染完成以後才會被調用。下面看實例
下面是結果
nihao
取到了值，這說明這時候vue模板已經渲染完畢。因此，Dom操作一般是在mounted鉤子函數中進行的
computed:{} 計算屬性，什麼是計算屬性呢，我個人理解就是對數據進行一定的操作，可以包含邏輯處理操作，對計算屬性中的數據進行監控。計算屬性是基於它的以來進行更新的，只有在相關依賴發生改變時側能更新變化，以函數的形式返回結果。然後可以像綁定普通屬性一樣在模板中綁定計算屬性。
總結：
通常created使用的次數多，而mounted通常是在一些插件的使用或者組件的使用中進行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常會有這一步，而如果你寫入組件中，你會發現在created中無法對chart進行一些初始化配置，一定要等這個html渲染完後才可以進行，那麼mounted就是不二之選。
methods:{}中的方法都需要主動去觸發，比如點擊click之類的
而created(){}、mounted(){}、裡面的代碼都是自動去執行的，即vue生命周期到了哪一步就直接去執行對應鉤子函數裡面的代碼了，無需手動去執行
created中主要放初始化獲取數據之類，mounted()中掛載到具體的DOM節點
computed:{} 計算屬性，什麼是計算屬性呢，我個人理解就是對數據進行一定的操作，可以包含邏輯處理操作，對計算屬性中的數據進行監控。計算屬性是基於它的以來進行更新的，只有在相關依賴發生改變時側能更新變化，以函數的形式返回結果。然後可以像綁定普通屬性一樣在模板中綁定計算屬性。
mounted 是生命周期鉤子，vue的生命周期中一個實例的mounted只會運行一次。mounted在vue的渲染模板掛載到$el元素上才會調用，很顯然你export的時候el都么有自然不會運行mounted鉤子函數了。
所有的方法都應該在methods里定義，然後在created或者mounted里 使用this調用方法，用這種方式實現初始化
6、Vue中組件之間的傳參方式有哪些方式？
Vue 組件傳參的八種方式總結
Vue 組件的使用不管是在平常工作還是在面試面試中，都是頻繁出現的。因此系統的梳理一下組件之間的傳參還是非常有必要的
一、props 傳參
子組件定義 props 有三種方式:
// 第一種數組方式
// 第二種對象方式
// 第三種對象嵌套對象方式
第三種對象默認支持 4 種屬性，並且都是非必填的。可以隨意使用
父組件傳參的倆種方式
第一種靜態屬性傳參
注意：
1、在不定義 props 類型的情況下 props 接受到的均為 String。
2、當 props 屬性指定為 Boolean 時，並且只有屬性 key 沒有值 value 時接受到的是 true
第二種動態屬性傳參
注意：
1、需要區分非簡寫形式傳入的值是對象，則會對應 props 中多個值
2、會保留傳入值的類型
3、如果是表達式則獲取到的是表達式的計算結果
二、attrs 和listeners
$attrs
$attrs 會獲取到 props 中未定義的屬性（class 和 style 屬性除外）,支持響應式。常用的場景有倆種：
組件嵌套組件時可以使用 $attrs 來支持過多的屬性支持。比如 elementUI 的 table 組件。支持的屬性十幾個，而平常封裝的時候用的最多的也就一倆個。
屬性默認是添加在父組件上的，有時候想把多餘的屬性添加在子組件上（可以結合 inheritAttrs: false 屬性，讓父屬性不接受多餘的屬性）
$listeners 定義的事件都在子組件的根元素上，有時候想加到其他元素上。就可以使用 $listerners。它包含了父組件中的事件監聽器(除了帶有 .native 修飾符的監聽器)
三、$emit 通知
這里有一道考題: for 循環的時候如何拿到子組件的傳值和 for 中循環的值
答案有倆種，一是 $event, 二是 閉包。只是需要注意 $event 只能獲取到第一個值
四、v-model
這個其實是一種通過 emit，on 的組合方式。優點再於同步值方便,寫法優雅。下面三種寫法其實是一個意思
五、插槽
六、$refs, $root, $parent, $children
$root 獲取根組件
$parent 獲取父組件
$children 獲取子組件(所有的子組件，不保證順序)
$refs 組件獲取組件實例，元素獲取元素
七、project / inject
注意：注入的值是非響應的
八、Vuex
這個相當於單獨維護的一組數據，就不過多的說了。
watch，computed和methods的關系
1.watch和computed都是以Vue的依賴追蹤機制為基礎的 ，它們都試圖處理這樣一件事情：當某一個數據（稱它為依賴數據）發生變化的時候，所有依賴這個數據的「相關」數據「自動」發生變化，也就是自動調用相關的函數去實現數據的變動。
2.對methods:methods裡面是用來定義函數的，很顯然，它需要手動調用才能執行。而不像watch和computed那樣，「自動執行」預先定義的函數
watch和computed各自處理的數據關系場景不同
1. watch 擅長處理的場景： 一個數據影響多個數據
2. computed 擅長處理的場景： 一個數據受多個數據影響
watch用法 監聽下記haiZeiTuan_Name的值，會改變其他所有的值
結果：this.suoLong會變為 '橡膠海賊團索隆',以此類推
computed用法 監聽下記firstName，secName，thirdName的值，會改變luFei_Name的值
methods和computed的區別例子
注意兩次點擊computed返回的時間是相同的！！
1.兩次點擊methods返回的時間是不同的
2.注意兩次點擊computed返回的時間是相同的
【注意】為什麼兩次點擊computed返回的時間是相同的呢？new Date()不是依賴型數據 （不是放在data等對象下的實例數據） ，所以computed只提供了緩存的值，而沒有重新計算
只有符合：1.存在依賴型數據 2.依賴型數據發生改變這兩個條件 ,computed才會重新計算。
參考：http://www.cnblogs.com/penghuwan/p/7194133.html
答：https://codecat.blog.csdn.net/article/details/100031285
1、Promise
Promise 是非同步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大，簡單地說，Promise好比容器，裡面存放著一些未來才會執行完畢（非同步）的事件的結果，而這些結果一旦生成是無法改變的
2、async await
async await也是非同步編程的一種解決方案，他遵循的是Generator 函數的語法糖，他擁有內置執行器，不需要額外的調用直接會自動執行並輸出結果，它返回的是一個Promise對象。
兩者的主要用法、語法就不贅述了，感興趣的同學可以自行查閱 es6中文文檔
兩者的區別
1、Promise的出現解決了傳統callback函數導致的「地域回調」問題，但它的語法導致了它向縱向發展行成了一個回調鏈，遇到復雜的業務場景，這樣的語法顯然也是不美觀的。而async await代碼看起來會簡潔些，使得非同步代碼看起來像同步代碼，await的本質是可以提供等同於」同步效果「的等待非同步返回能力的語法糖，只有這一句代碼執行完，才會執行下一句。
2、async await與Promise一樣，是非阻塞的。
3、async await是基於Promise實現的，可以說是改良版的Promise，它不能用於普通的回調函數。
簡單來看，這兩者除了語法糖不一樣外，他們解決的問題、達到的效果是大同小異的，我們可以在不同的應用場景，根據自己的喜好來選擇使用。
❸ Web前端基礎】css中浮動屬性有什麼
float right none(不浮動) inherit從父元素繼承浮動的屬性值
❹ Web前端工程師要了解的html+css基礎知識
今天小編要跟大家分析的文章是關於Web前端工程師要了解的html+css基礎知識。正在從事Web前端工作的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對正在從事Web前端工作和學習的小夥伴們有所幫橡鎮助。一、什麼是HTML？
HTML即超文本標記語言(HyperTextMarkupLanguage)，是用來描述網頁的一種語言。
超文本標記語言的結構包括"頭"部分（外語：Head）、和"主體"部分（外語：Body），其中"頭"部提供關於網頁的信息，"主體"部分提供網頁的具體內容。
標記語言是一套標記標簽(markuptag)
HTML使用標記標簽來描述網頁
如下代碼：
MyFirstHeading
Myfirstparagraph.
例子解釋:
與之間的文本描述網頁
與之間的文本是可見的頁面內容
與
之間的文本被顯示為標題與
之間的文本被顯示為段落二、HTML元素
HTML文檔是由HTML元素定義的。
HTML元素指的是從開始標簽（starttag）到結束標簽（end
tag）的所有代碼。
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
開始標簽
元素內容
結束標簽
Thisisaparagraph
href="default.htm">
Thisisalink注釋：啟梁開始標簽常被稱為開放標簽（openingtag），結束標簽常稱為閉合標簽（closingtag），大多數HTML元素可擁有屬性。
空的HTML元素：
沒有內容的HTML元素被稱為空元素。在XHTML、XML以及未來版本的HTML中，所有元素都必須被關閉。
在開始標簽中添加斜杠，比如:
就是沒有關閉標簽的空元素,而
是關閉空元素的正確方法，HTML、XHTML和XML都接受這種方式。
即使
在所有瀏覽器中都是有效的，但使用
其實是更長遠的保障。
HTML提示：使用小寫標簽
HTML標簽對大小寫不敏感：
等同於
。許多網站都使用大寫的HTML標簽。 ❺ web應用程序的上下文路徑指的是什麼路徑舉出web配置例子，謝謝
1.在%CATALINA_HOME%\conf\context.xml這個文件中，編輯Context元素屬性 例： <Context path="/MyPro" docBase="F:\MyProject\MyPro" reloadable="true"> </Context> path屬性代表web應用程序的上下文根路徑 docBase屬性指定了web應用程序的文檔基目錄 reloadable屬性，如果指定為true，Tomcat伺服器在運行時，會監視WEB-INF/classes和WEB-INF/lib目錄下的類的改變，如果發現有類被更新，Tomcat伺服器將自動重新載入該web應用程序。 2..%CATALINA_HOME%\conf\[enginename]\[hostname]xxx.xml，enginename是在server.xml文件中設置的<Engine>元素的name屬性的值，[hostname]是在server.xml文件中設置的<Host>元素的name屬性的值 這個xxx.xml文件的文件名「xxx」被作為web應用程序的上下文根路徑，而不管你在xxx.xml文件中的<Context>元素的path屬性是什麼
W3School使用的是小寫標簽，因為萬維網聯盟（W3C）在HTML4中推薦使用小寫，而在未來(X)HTML版本中強制使用小寫。
三、HTML屬性
HTML標簽可以擁有屬性。屬性提供了有關HTML元素的更多的信息。
屬性總是以名稱/值對的形式出現，比如：name="value"。
屬性總是在HTML元素的開始標簽中規定。
屬性實例:
HTML鏈接由標簽定義。鏈接的地址在href屬性梁旁粗中指定：
Thisisa
link
注釋：屬性值應該始終被包括在引號內。雙引號是最常用的，不過使用單引號也沒有問題。在某些個別的情況下，比如屬性值本身就含有雙引號，那麼您必須使用單引號，例如：name='Bill"HelloWorld"Gates'。
HTML提示：使用小寫屬性
屬性和屬性值對大小寫不敏感。
不過，萬維網聯盟在其HTML4推薦標准中推薦小寫的屬性/屬性值。
而新版本的(X)HTML要求使用小寫屬性。
一些常見HTML屬性:
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
屬性
值
描述
class
classname
規定元素的類名（classname）
id
id
規定元素的唯一id
style
style_definition
規定元素的行內樣式（inline
style）
title
text
規定元素的額外信息（可在工具提示中顯示）
四、HTML編輯器
使用Notepad或TextEdit來編寫HTML
可以使用專業的HTML編輯器來編輯HTML：
AdobeDreamweaver
MicrosoftExpressionWeb
CoffeeCupHTMLEditor
五、HTML標題
標題（Heading）是通過-
等標簽進行定義的。
Thisisaheading
定義最大的標題。
Thisisaheading
定義最小的標題。
注釋：瀏覽器會自動地在標題的前後添加空行。
注釋：默認情況下，HTML會自動地在塊級元素前後添加一個額外的空行，比如段落、標題元素前後。
以上就是小編今天為大家分享的關於Web前端工程師要了解的html+css基礎知識的文章，希望本篇文章能夠對正在從事Web前端工作的小夥伴們有所幫助，想要了解更多Web前端相關知識記得關注北大青鳥Web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的Web前端工程師。