前端必會html知識整理

2022-08-23 02:54:11 字數 2963 閱讀 1996

language),因此不需要對dtd(文件型別宣告/document type

declaration)進行引用,但是需要doctype來規範瀏覽器的行為(讓瀏覽器按照他們應該的方式來執行)

2、html4.01基於sgml,所以需要對dtd進行引用,才能告知瀏覽器文件所使用的文件型別。

5.什麼是bfc?

bfc (block formatting context塊級格式化上下文)

它是乙個獨立的渲染區域,它規定了內部如何布局,並且與這個區域外部毫不相干

什麼會生成bfc?  

根元素:html

float不為none的浮動框

position為absolute、fixed

display為:inline-block,table-cell,flex,table-caption,inline-flex非塊框的塊容器

overflow不為visible的塊框.

觸發ie的haslayout特性

(附1:display常用屬性拓展)

每個元素預設都有乙個display值,但是均可以被顯式設定重寫。

:none;將元素及其子元素從普通文件流中移除,如不存在過。

:inline;該元素生成乙個或多個行內框,行內級元素所佔的空間就是它的標籤所定義的大小,無法設定上下margin、padding和寬高。

:block;該元素生成塊級框。所有的塊級元素開始於新的一行,延展到其容器的寬度;

:list-item;元素被渲染為列表項呈現的方式,確切的說就像是乙個塊級元素,但是會生成乙個可以被list-style屬性進行樣式修飾的標記框。

:inline-

block;該元素生成乙個塊級別框,但是整個框的行為就像是乙個內聯元素。可以設定寬高等塊級元素素的屬性。然而ie6並不能識別該屬性,但是使用inline-block在ie下會觸發layout,從而使得內聯元素有了inline-block的表症(設定寬高)。

解決方法:1.div // 先觸發layout

div        //在設定inline  必須分開成兩步

2.直接設定為inline,再利用zoom來觸發layout實現類似效果

div               

(附1.1:zoom)

ie瀏覽器的專有屬性,設定或檢索物件的縮放比例,可以觸發ie的haslayout屬性,清除浮動、清除margin的重疊。

(附2:ie中的haslayout屬性摘要)

haslayout是ie瀏覽器渲染引擎的乙個內部組成部分,乙個元素要麼自己對自己的內容計算大小和組織。要麼依賴於父元素來計算尺寸和組織內容。為了調節這兩個不同的概念,渲染引擎採用了haslayout的屬性,屬性值可以為true或false。當乙個元素的haslayout屬性值為true時,我們說這個元素有乙個布局(layout),負責對自己和可能的子孫進行尺寸計算和定位.

6.quirks模式是什麼?它和standards模式有什麼區別?

在ie6之前版本,如果網頁沒有宣告dtd,瀏覽器會向前相容,採用相容之前的布局方式。就是quirks模式,也叫做怪異模式。

區別:盒模型:在w3c標準中,如果設定乙個元素的寬度和高度,指的是元素內容的寬度和高度,而在quirks模式下,ie的寬度和高度還包含了padding和border;

設定行內元素的高寬:在標準模式下,給行內元素設定寬高都不會生效,而在quirks模式下,則會生效,上下margin也會生效。

設定百分比的寬高:在standards模式下,乙個元素的寬高是由其包含的內容來決定的;如果父元素沒有設定百分比的寬高,子元素設定乙個百分比的寬高是無效的。而怪異模式下,子元素的百分比寬度生效,高度賊怪異(未找到解答)。

(附:父元素未設定寬高,子元素百分比寬高ie8以下版本一樣全部生效)

用margin:0 auto;設定水平居中:在標準模式下可以,而在怪異模式下則不行。

7.什麼是語義化的html?

直觀的認識標籤,讓頁面內容結構化,便於對瀏覽器、搜尋引擎解析,爬蟲依賴於標籤來確定上下文和各個關鍵字的權重,方便其他裝置解析(螢幕閱讀器、盲人閱讀器、移動裝置)。在沒有css樣式的時候也能以一種清晰的文件結構顯示。

8.div+css的布局較table有什麼優點?

改版的時候更方便,只需要更改css檔案

頁面載入速度更快、結構化清晰、頁面顯示簡潔。

表現與結構相分離

易於優化seo,排名更容易靠前。

9.img的alt和title有何區別?strong與em的區別?

alt屬效能在載入失敗的時候顯示作為替換文字。

title屬性可以為設定該屬性的元素設定說明或建議性的文字,在滑鼠移入時顯示。

strong  表示強調內容的重要性,同時它帶有預設樣式加粗的標籤;

em        表示更強烈的內容強調點,帶有預設樣式斜體的標籤。

10.漸進增強和優雅降級之間的不同?

漸進增強:首先針對低版本瀏覽器進行構建頁面,保證最基本的功能,然後在針對高階瀏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。

優雅降級:一開始就構建完整的功能,然後再針對低版本進行相容。

區別:優雅降級從複雜的情況開始,並試圖減少使用者體驗的供給,而漸進增強則是從乙個非常基礎的能夠起作用的版本開始,並不斷擴充,以適應未來環境的需要。降級意味著往回看,而漸進增強意味著朝前看,同時保證其根基處於安全地帶。

12.描述一下cookie、sessionstorage和localstorage的區別?

sessionstorage用於本地儲存乙個session中的資料,這些資料只有在同乙個會話頁面才能訪問並且當會話結束後資料也隨之銷毀。因此sessionstorage不是一種持久化的本地儲存。而localstorage用於持久化的本地儲存,除非主動刪除資料,否則資料是永遠不會過期的。

web storage(包含sessionstorage和localstorage)和cookie的區別:

web

reference/超文字引用)指向網路資源所在位置,建立和當前元素(錨點)或當前文件(鏈結)之間的鏈結,如果我們在文件中新增原文:

前端必會的js知識總結整理

1 晨曦。2 js是一門什麼樣的語言及特點?js是一種基於物件和事件驅動的並具有相對安全性的客戶端指令碼語言。也是一種廣泛用於web客戶端開發的指令碼語言,常用來給html網頁新增動態功能,如響應使用者的各種操作。主要的目的是為了解決伺服器端語言遺留的速度問題,為客戶提供更流暢的瀏覽效果。詳細拓展 ...

前端必會css整理

1.設定css樣式的三種方式?外部樣式表,引入乙個外部css檔案 內部樣式表,將css 放在標籤內部 內聯樣式,將css樣式直接定義在html元素內部 2.css有哪些選擇器?id選擇器 類選擇器 標籤選擇器 又可以細分為 派生選擇器 包括後代選擇器 子元素選擇器 相鄰兄弟選擇器 偽元素選擇器 屬性...

前端知識整理

如果修改的是left,top.需要加上position.例如 tooltip css 查詢原因才發現跟元素的定位型別有關,改為 tooltip css 在沒有宣告doctype的ie中,瀏覽器顯示視窗大小只能以下獲取 document.body.offsetwidth document.body.o...