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