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