摘要:有效防止黑客對某一個特定注冊用戶用特定程序暴力破解方式進(jìn)行不斷的登陸嘗試。可以通過指定候選樣式。存儲大小數(shù)據(jù)大小不能超過。初始化樣式會對有一定的影響,但魚和熊掌不可兼得,力求影響最小的情況下初始化樣式。二十和聯(lián)系他們都能讓元素不可見。
一、前端需要注意的SEO
(1)合理的 title、description 和 keywords,他們的搜索權(quán)重逐個減小
title 強調(diào)重點即可,重要關(guān)鍵詞出現(xiàn)不要超過2次,而且要靠前,不同頁面 title 要有所不同;description 把頁面內(nèi)容高度概括,長度合適,不可過分堆砌關(guān)鍵詞,不同頁面 description 有所不同;keywords 列舉出重要關(guān)鍵詞即可。
(2)語義化的 HTML 代碼,符合 W3C 規(guī)范
語義化代碼讓搜索引擎容易理解網(wǎng)頁。
(3)重要內(nèi)容 HTML 代碼放在最前
搜索引擎抓取 HTML 順序是從上到下,有的搜索引擎對抓取長度有限制,保證重要內(nèi)容一定會被抓取。
(4)重要內(nèi)容不要用JavaScript輸出
爬蟲不會執(zhí)行JavaScript獲取內(nèi)容。
(5)少用iframe
搜索引擎不會抓取
(6)非裝飾性圖片必須加 alt
(7)提高網(wǎng)站速度
網(wǎng)站速度是搜索引擎排序的一個重要指標(biāo)。
(1)區(qū)分用戶是計算機還是人的公共全自動程序。可以防止惡意破解密碼、刷票、論壇灌水。
(2)有效防止黑客對某一個特定注冊用戶用特定程序暴力破解方式進(jìn)行不斷的登陸嘗試。
三、網(wǎng)頁中使用字體在網(wǎng)頁中應(yīng)該使用偶數(shù)字體,偶數(shù)字號相對奇數(shù)字號更容易和 web 設(shè)計的其他部分構(gòu)成比例關(guān)系。四、瀏覽器內(nèi)核 1. 兩部分
渲染引擎(layout engineer或Rendering Engine)和JS引擎。2. 渲染引擎
負(fù)責(zé)取得網(wǎng)頁的內(nèi)容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等),以及計算網(wǎng)頁的顯示方式,然后會輸出至顯示器或打印機。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同,所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
3. JS引擎解析和執(zhí)行JavaScript來實現(xiàn)網(wǎng)頁的動態(tài)效果。
最開始渲染引擎和JS引擎并沒有區(qū)分的很明確,后來JS引擎越來越獨立,內(nèi)核就傾向于只指渲染引擎。五、瀏覽器標(biāo)準(zhǔn)模式和怪異模式的區(qū)別
(1)“標(biāo)準(zhǔn)模式”(Standards Mode) 頁面按照 HTML 與 CSS 的定義渲染。
(2)“怪異模式”(Quirks Mode)瀏覽器為兼容很早之前針對舊版本瀏覽器設(shè)計、并未嚴(yán)格遵循 W3C 標(biāo)準(zhǔn)的網(wǎng)頁而產(chǎn)生的一種頁面渲染模式。
(3)標(biāo)準(zhǔn)模式的排版和 JS 運作模式是以該瀏覽器支持的最高標(biāo)準(zhǔn)運行。
(4)怪異模式,頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。 不存在或格式不正確會導(dǎo)致文檔以怪異模式呈現(xiàn)。
六、漸進(jìn)增強 1. 概念漸進(jìn)增強是指在WEB設(shè)計時強調(diào)可訪問性、語義化HTML標(biāo)簽、外部樣式表和腳本。保證所有人都能訪問頁面的基本內(nèi)容和功能同時為高級瀏覽器和高帶寬用戶提供更好的用戶體驗。2. 原則
(1)所有瀏覽器都必須能訪問基本內(nèi)容
(2)所有瀏覽器都必須能使用基本功能
(3)所有內(nèi)容都包含在語義化標(biāo)簽中
(4)通過外部CSS提供增強的布局
(5)通過非侵入式、外部JavaScript提供增強功能
七、link和@import的區(qū)別(1)link是XHTML標(biāo)簽,無兼容問題;而@import只在 IE5 以上才能識別。
(2)頁面被加載的時,link會同時被加載;而@import引用的CSS會等到頁面被加載完再加載。
(3)link方式的樣式的權(quán)重 高于 @import的權(quán)重。
(4)link可以通過rel="alternate stylesheet"指定候選樣式。
(5)@import必須在樣式規(guī)則之前,可以在CSS文件中引用其他文件。
總結(jié)
link優(yōu)于@import八、PNG、JPG和GIF區(qū)別
PNG | JPG | GIF |
---|---|---|
PNG8和truecolor PNG,PNG8顏色上限為256 | 顏色上限為256 | 8位像素,256色 |
文件小 | 有損壓縮,可控制壓縮質(zhì)量 | 無損壓縮 |
支持alpha透明度 | 不支持透明 | 支持boolean透明 |
無動畫 | 支持簡單動畫 | |
適合背景、圖標(biāo)、按鈕 | 適合照片 |
(1)canvas輸出的是一整幅畫布。
(2)svg繪制出來的每一個圖形的元素都是獨立的DOM節(jié)點,能夠方便的綁定事件或用來修改。
(3)canvas輸出標(biāo)量畫布,就像一張圖片一樣,放大會失真或者鋸齒。
(4)svg輸出的圖形是矢量圖形,后期可以修改參數(shù)來自由放大縮小,不會是真和鋸齒。
十、ssessionStorage、localStorage和cookie 1. 概念(1)sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數(shù)據(jù)。
(2)sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web請求之間保存數(shù)據(jù)。有了本地數(shù)據(jù),就可以避免數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來回傳遞。
(3)sessionStorage 的概念很特別,引入了一個“瀏覽器窗口”的概念。sessionStorage 是在同源的同窗口(或tab)中,始終存在的數(shù)據(jù)。也就是說只要這個瀏覽器窗口沒有關(guān)閉,即使刷新頁面或進(jìn)入同源另一頁面,數(shù)據(jù)仍然存在。關(guān)閉窗口后,sessionStorage 即被銷毀。同時“獨立”打開的不同窗口,即使是同一頁面,sessionStorage 對象也是不同的。
(4)cookie是網(wǎng)站為了標(biāo)示用戶身份而儲存在用戶本地終端(Client Side)上的數(shù)據(jù)(通常經(jīng)過加密),cookie數(shù)據(jù)始終在同源的http請求中攜帶(即使不需要),也會在瀏覽器和服務(wù)器間來回傳遞。
2. 數(shù)據(jù)發(fā)送(1)sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)送到服務(wù)器端,僅在本地保存。
(2)cookies會把數(shù)據(jù)發(fā)送到服務(wù)器端。
3. 存儲大小(1)cookie數(shù)據(jù)大小不能超過4k。
(2)sessionStorage和localStorage雖然也有存儲大小的限制,但比cookie大得多,可以達(dá)到5M或更大。
4. 有期時間(1)cookie 設(shè)置的過期時間之前一直有效,即使窗口或瀏覽器關(guān)閉。
(2)sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動刪除。
(3)localStorage 存儲持久數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)。
十一、XHTML和HTML的對比 1. XHTML(1) xhtml 語法要求嚴(yán)格,區(qū)分大小寫。
(2)元素必須被正確嵌套,必須有根元素。
(3)每個 DOM 必須要閉合;空標(biāo)簽也必須閉合,例如,
, 等。
(4)屬性值使用雙引號。一旦遇到錯誤,立刻停止解析,并顯示錯誤信息。
2. HTML可兼容各大瀏覽器、手機以及 PDA,并且瀏覽器也能快速正確地編譯網(wǎng)頁。
十二、的特點(1)聲明必須處于HTML文檔的頭部,在標(biāo)簽之前,HTML5中不區(qū)分大小寫。
(2)聲明不是一個HTML標(biāo)簽,是一個用于告訴瀏覽器當(dāng)前HTMl版本的指令。
(3)現(xiàn)代瀏覽器的html布局引擎通過檢查doctype決定使用兼容模式還是標(biāo)準(zhǔn)模式對文檔進(jìn)行渲染,一些瀏覽器有一個接近標(biāo)準(zhǔn)模型。
十三、HTML5 標(biāo)簽(1)在HTML4.01中聲明指向一個DTD,由于HTML4.01基于SGML,所以DTD指定了標(biāo)記規(guī)則以保證瀏覽器正確渲染內(nèi)容。
(2)HTML5不基于SGML,所以不用指定DTD,但是需要來規(guī)范瀏覽器的行為。
十四、HTML5的新特性 1. 增加的元素(1)繪畫 canvas
(2)用于媒介回放的 video 和 audio 元素
(3)本地離線存儲 localStorage 長期存儲數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失;sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除
(4)語意化更好的內(nèi)容元素,比如 article、footer、header、nav、section
(5)表單控件,calendar、date、time、email、url、search
(6)新技術(shù),webworker, websocket, Geolocation
2. 移除的元素(1)純表現(xiàn)的元素,basefont,big,center,font, s,strike,tt,u
(2)對可用性產(chǎn)生負(fù)面影響的元素,frame,frameset,noframes
十五、HTML全局屬性(global attribute)全局屬性是所有HTML元素共有的屬性; 它們可以用于所有元素,即使屬性可能對某些元素不起作用。
屬性 | 描述 |
---|---|
accesskey | 提供了一種使用快捷鍵訪問當(dāng)前元素的途徑 |
class | 為元素設(shè)置類標(biāo)識,多個類名用空格分開,class允許css和javascript通過class選擇器或者類似下面的DOM方法來選擇和訪問element |
contenteditable | 指定元素內(nèi)容是否可編輯 |
contextmenu | 自定義鼠標(biāo)右鍵彈出菜單內(nèi)容 |
data-* | 為元素增加自定義屬性 |
dir | 設(shè)置元素文本方向 |
draggable | 設(shè)置元素是否可拖拽 |
dropzone | 設(shè)置元素拖放類型: copy, move, link |
hidden | 這個布爾(Boolean)屬性表示element還沒有或是不再存在。樣式上會導(dǎo)致元素不顯示,但是不能用這個屬性實現(xiàn)樣式效果 |
id | 唯一的標(biāo)識,它在整個document里應(yīng)該是唯一的。當(dāng)需要鏈接(使用片段標(biāo)識符,錨點),執(zhí)行腳本,控制樣式時,可以用它來定位識別元素。 |
lang | 元素內(nèi)容的的語言 |
spellcheck | 是否啟動拼寫和語法檢查 |
style | 行內(nèi)css樣式 |
tabindex | 設(shè)置元素可以獲得焦點,通過tab可以導(dǎo)航 |
title | 元素相關(guān)的建議信息 |
translate | 元素和子孫節(jié)點內(nèi)容是否需要本地化 |
參考文章 全局屬性-HTML(超文本標(biāo)記語言)| MDN
十六、的title和alt區(qū)別(1)title 是 global attributes(全局屬性) 之一,用于為元素提供附加的 advisory information。通常當(dāng)鼠標(biāo)滑動到元素上的時候顯示。
(2)alt 是 的特有屬性,是圖片內(nèi)容的等價描述,用于圖片無法加載時顯示、讀屏器閱讀圖片。可提高圖片可訪問性,除了純裝飾圖片外都必須設(shè)置有意義的值,搜索引擎會重點分析。
十七、初始化CSS樣式(1)瀏覽器的兼容問題,不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的,如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。
(2)初始化樣式會對SEO有一定的影響,但魚和熊掌不可兼得,力求影響最小的情況下初始化CSS樣式。
十八、CSS合并方法(1)避免使用@import引入多個CSS文件。
(2)可以使用CSS工具將CSS合并為一個CSS文件,例如使用 Sass、Compass 等。
十九、CSS Sprite 1. 概念將多個小圖片拼接到一個圖片中。通過 background-position 和元素尺寸調(diào)節(jié)需要顯示的背景圖案。2. 優(yōu)點
(1)減少HTTP請求數(shù),極大地提高頁面加載速度
(2)增加圖片信息重復(fù)度,提高壓縮比,減少圖片大小
(3)更換風(fēng)格方便,只需在一張或幾張圖片上修改顏色或樣式即可實現(xiàn)
3. 缺點(1)圖片合并麻煩
(2)維護(hù)麻煩,修改一個圖片可能需要從新布局整個圖片,樣式。
二十、display: none;和visibility: hidden; 1. 聯(lián)系他們都能讓元素不可見。2. 區(qū)別
display:none; | visibility: hidden; |
---|---|
會讓元素完全從渲染樹消失,渲染時不占據(jù)任何空間 | 不會讓元素從渲染樹消失,渲染時元素繼續(xù)占據(jù)空間,只是內(nèi)容不可見 |
非繼承屬性,子孫節(jié)點消失由于元素從渲染樹消失造成,通過修改子孫節(jié)點屬性無法顯示; | 繼承屬性,子孫節(jié)點消失由于繼承了hidden,通過設(shè)置visibility: visible;可以讓子孫節(jié)點顯式 |
修改常規(guī)流中元素的display通常會造成文檔重排。 | 修改visibility屬性只會造成本元素的重繪。 |
讀屏器不會讀取display: none;元素內(nèi)容; | 會讀取visibility: hidden;元素內(nèi)容 |
行內(nèi)元素 | 塊級元素 | 空元素 |
---|---|---|
a | div | meta |
span | h1-h6 | link |
img | p | img |
b | ul-li | input |
strong | dl-dt-dd | br |
input | hr | |
select |
(1)行內(nèi)元素浮動后,不會成為塊級元素,但是可以設(shè)置寬和高。
(1)行內(nèi)元素轉(zhuǎn)換為塊級元素,占一行,直接設(shè)置 display:block; 但若元素設(shè)置浮動后,再設(shè)置 display:block;則就不會占一行。
二十三、盒模型(1)在怪異模式下,盒模型為IE盒模型而非標(biāo)準(zhǔn)模式下的W3C 盒模型,在 IE 盒模型中
box width = content width + padding left + padding right + border left + border rightbox height = content height + padding top + padding bottom + border top + border bottom
(2)而在 W3C 標(biāo)準(zhǔn)的盒模型中,box 的大小就是 content 的大小。
二十四、Viewport(1)width 設(shè)置viewport寬度,為一個正整數(shù),或字符串‘device-width’
(2)device-width 設(shè)備寬度
(3)height 設(shè)置viewport高度,一般設(shè)置了寬度,會自動解析出高度,可以不用設(shè)置
(4)initial-scale 默認(rèn)縮放比例(初始縮放比例),為一個數(shù)字,可以帶小數(shù)
(5)minimum-scale 允許用戶最小縮放比例,為一個數(shù)字,可以帶小數(shù)
(6)maximum-scale 允許用戶最大縮放比例,為一個數(shù)字,可以帶小數(shù)
(7)user-scalable 是否允許手動縮放
閱讀更多
本文在GitHub的地址 GitHub Front-end-questions
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/94461.html
摘要:標(biāo)簽規(guī)定獨立的流內(nèi)容圖像圖表照片代碼等等。元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān),但如果被刪除,則不應(yīng)對文檔流產(chǎn)生影響。如果使用該屬性,則樣式僅僅應(yīng)用到元素的父元素及其子元素。中元素表現(xiàn)為一個超鏈接,支持任何行內(nèi)元素和塊級元素。 1. 是正確的HTML5標(biāo)簽嗎? 標(biāo)簽規(guī)定用于表單的密鑰對生成器字段。當(dāng)提交表單時,私鑰存儲在本地,公鑰發(fā)送到服務(wù)器。是正確的HTML5標(biāo)簽。 2. 標(biāo)簽是否可以改...
摘要:有效防止黑客對某一個特定注冊用戶用特定程序暴力破解方式進(jìn)行不斷的登陸嘗試。可以通過指定候選樣式。存儲大小數(shù)據(jù)大小不能超過。初始化樣式會對有一定的影響,但魚和熊掌不可兼得,力求影響最小的情況下初始化樣式。二十和聯(lián)系他們都能讓元素不可見。 一、前端需要注意的SEO (1)合理的 title、description 和 keywords,他們的搜索權(quán)重逐個減小title 強調(diào)重點即可,重要關(guān)...
摘要:有效防止黑客對某一個特定注冊用戶用特定程序暴力破解方式進(jìn)行不斷的登陸嘗試。可以通過指定候選樣式。存儲大小數(shù)據(jù)大小不能超過。初始化樣式會對有一定的影響,但魚和熊掌不可兼得,力求影響最小的情況下初始化樣式。二十和聯(lián)系他們都能讓元素不可見。 一、前端需要注意的SEO (1)合理的 title、description 和 keywords,他們的搜索權(quán)重逐個減小title 強調(diào)重點即可,重要關(guān)...
摘要:收集的一些前端面試題從面試題發(fā)現(xiàn)不足,進(jìn)而查漏補缺,比通過面試更難得及各大互聯(lián)網(wǎng)公司前端筆試面試題篇及各大互聯(lián)網(wǎng)公司前端筆試面試題篇面試題個和個經(jīng)典面試題前端開發(fā)面試題如何面試前端工程師很重要個變態(tài)題解析如何通過餓了么面試輕 收集的一些前端面試題 從面試題發(fā)現(xiàn)不足,進(jìn)而查漏補缺,比通過面試更難得 1 BAT及各大互聯(lián)網(wǎng)公司2014前端筆試面試題--Html,Css篇 2 BAT...
閱讀 561·2023-04-26 02:58
閱讀 2301·2021-09-27 14:01
閱讀 3605·2021-09-22 15:57
閱讀 1168·2019-08-30 15:56
閱讀 1043·2019-08-30 15:53
閱讀 787·2019-08-30 15:52
閱讀 645·2019-08-26 14:01
閱讀 2157·2019-08-26 13:41