前端基礎總結之HTML

2021-08-21 00:01:05 字數 2781 閱讀 2202

html語義化

語義化的含義就是用正確的標籤做正確的事情,html語義化就是讓頁面的內容結構化,便於對瀏覽器、搜尋引擎解析;在沒有樣式css情況下也以一種文件格式顯示,並且是容易閱讀。

搜尋引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重,利於seo。

xhtml和html有什麼區別

html是一種基本的web網頁設計語言,xhtml是乙個基於xml的置標語言

最主要的不同:

功能上的差別,主要是xhtml可相容各大瀏覽器、手機以及pda,並且瀏覽器也能快速正確地編譯網頁。 

在xhtml中,所有的標籤都必須小寫

xhtml 元素必須被正確地巢狀,標籤順序必須正確

xhtml 元素必須被關閉,標籤必須成雙成對

所有屬性都必須使用雙引號

xhtml 文件必須擁有根元素

核心(渲染引擎)

1、trident核心:代表作品是ie,因ie**在windows中,此核心只能用於windows平台,且不是開源的,存在很多的相容性問題。

2、gecko核心:代表作品是firefox,即火狐瀏覽器。因火狐是最多的使用者,故常被稱為firefox核心它是開源的,最大優勢是跨平台,在microsoft windows、linux、macos x等主要作業系統中使用。

3、webkit核心:代表作品是safari、曾經的chrome,是開源的專案。

4、presto核心:代表作品是opera,presto是由opera software開發的瀏覽器排版引擎,它是世界公認最快的渲染速度的引擎。

5、blink核心:由google和opera software開發的瀏覽器排版引擎,2023年4月發布。現在chrome核心是blink。

文件宣告的作用

doctype 是document type(文件型別)的縮寫。用來說明文件是什麼版本。建立符合標準的網頁 doctype宣告是必不可少的。一般放在文件的最頂部。

一定要在html文件的最前面,在標籤之前。宣告之後表明你的內容使用html5。會讓不支援html5的瀏覽器採用標準模式解析。

html5 為什麼只需要寫 !doctype html?

html5 不基於 sgml(標準通用標記語言),因此不需要對dtd(文件型別定義)進行引用,但是需要doctype來規範瀏覽器的行為(讓瀏覽器按照它們應該的方式來執行);而html4.01基於sgml,所以需要對dtd進行引用,才能告知瀏覽器文件所使用的文件型別。

!doctype宣告位於位於html文件中的第一行,處於html 標籤之前。告知瀏覽器的解析器用什麼文件標準解析這個文件。doctype不存在或格式不正確會導致文件以相容模式呈現。

盒子模型

元素的內容(content),元素的內邊距(padding),元素的邊框(border),元素的外邊距(margin)

元素分類:

行內元素:a、b、span、img、input、strong、select、label、em、button、textarea

塊級元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素:即係沒有內容的html元素,例如:br、meta、hr、link、input、img

src與href

href 是指向網路資源所在位置,建立和當前元素(錨點)或當前文件(鏈結)之間的鏈結,用於超連結。

html5

新特性1.語意特性,新增等標籤

2.多**, 用於媒介回放的 video 和 audio 元素

3.影象效果,用於繪畫的 canvas 元素,svg元素等

4.離線 & 儲存,對本地離線儲存的更好的支援,local store,cookies等

5.裝置相容特性 ,html5提供了前所未有的資料與應用接入開放介面,使外部應用可以直接與瀏覽器內部的資料直接相連。

7.效能與整合特性,html5會通過xmlhttprequest2等技術,幫助您的web應用和**在多樣化的環境中更快速的工作

新增標籤

1.多**:, ,, ,

2.新表單元素:,,

3.新文件節段和綱要:頁面頭部、章節、邊欄、文件內容、頁面底部、章節、邊欄、文件內容、頁面底部等

meta標籤

標籤有兩個屬性:name和http-equiv。

name="viewport",主要是為了適應移動裝置。

name="description",主要是用來告訴搜尋引擎,**的主要內容是什麼。

name="keywords",用來告訴搜尋引擎,**的主題是什麼,比如說偏重於前端後端或者是某種程式語言等等。

name="robots",告訴爬蟲哪些頁面需要索引,哪些頁面不需要索引。提供html文件的元資料, 常用於告知瀏覽器如何顯示內容和搜尋引擎優化

//宣告文件的編碼方式

//告知瀏覽器以什麼版本渲染文件

//告知瀏覽器選擇什麼核心渲染

//禁止瀏覽器從本地計算機的快取中訪問頁面內容。大概就是你訪問乙個頁面後本地會有快取,此時斷網瀏覽該**將會無法顯示內容。

共有以下幾種用法:

no-cache: 先傳送請求,與伺服器確認該資源是否被更改,如果未被更改,則使用快取。

public : 快取所有響應,但並非必須。因為max-age也可以做到相同效果

private : 只為單個使用者快取,因此不允許任何中繼進行快取。(比如說cdn就不允許快取private的響應)

maxage : 表示當前請求開始,該響應在多久內能被快取和重用,而不去伺服器重新請求。例如:max-age=60表示響應可以再快取和重用 60 秒。

//cookies的有效期。過了這個時間,網頁儲存在本地的cookies將會被刪除。時間格式必須是gmt的時間格式。

前端 html基礎總結

自己購買的資料 固定模式 處理格式 段落,標題,換行,水平線,刪除線,強調,斜體,粗體,強調,下標,上標,小號字 這是乙個鏈結 屬性包括 class,id,title,style,name,center,font,bgcolor,backgroud,size,color 超 框架 表單知識點1 為排...

前端基礎之HTML

html 作為超文字標記語言主要是用來製作靜態頁面 html有標準 html4 標籤 原生標籤.標籤 橫線.結構標籤 字型標籤 使用 文字 標籤的屬性 標籤 屬性名 屬性值 屬性名 屬性值 段落標籤 p標籤 字型加粗標籤 b標籤 字型斜體標籤 i標籤 字型下劃線 u標籤 居中標籤 標籤 html的標...

前端基礎之HTML

目錄web服務的本質 響應格式 響應狀態碼 請求方式 post請求 xml也可以書寫前端頁面,主要用於odoo框架中,書寫企業內部管理軟體 html注釋 由於html頁面結構比較複雜,內容比較多,不便於後期的維護,修改,通常在寫頁面的時候,習慣用下面的方式來人為的劃分 區域 html文件結構 hea...