1. 程式人生 > >HTML文件解析

HTML文件解析

2.1 <!DOCTYPE! html>
什麼是<!DOCTYPE html>?

在HTML文件初,往往會有這麼一句話<!DOCTYPE html>,那麼它的意義是什麼呢?它是html5標準網頁宣告,全稱為Document Type HyperText Mark-up Language,意思為文件種類為超文字標記性語言或超文字連結標示語言,現在是這個簡潔形式,支援html5標準的主流瀏覽器都認識這個宣告。表示網頁採用html5,<!DOCTYPE> 宣告位於文件中的最前面的位置,處於 <html> 標籤之前。此標籤可告知瀏覽器文件使用哪種 HTML 或 XHTML 規範。
這個標籤可宣告三種 DTD 型別,分別表示嚴格版本、過渡版本以及基於框架的 HTML 文件。
public 這行聲明瞭文件的根元素是 html,它在公共識別符號被定義為 "-//W3C//DTD XHTML 1.0 
Strict//EN" 的 DTD 中進行了定義。瀏覽器將明白如何尋找匹配此公共識別符號的 DTD。如果找不到,瀏覽器將使用公共識別符號後面的URL 作為尋找 DTD 的位置。

<!DOCTYPE html>的重要性?

1作用:宣告文件的解析型別(document.compatMode),避免瀏覽器的怪異模式。

document.compatMode:
BackCompat:怪異模式,瀏覽器使用自己的怪異模式解析渲染頁面。
CSS1Compat:標準模式,瀏覽器使用W3C的標準解析渲染頁面。

     這個屬性會被瀏覽器識別並使用,但是如果你的頁面沒有DOCTYPE的宣告,那麼compatMode預設就是BackCompat,

這也就是惡魔的開始 -- 瀏覽器按照自己的方式解析渲染頁面,那麼,在不同的瀏覽器就會顯示不同的樣式。

     如果你的頁面添加了<!DOCTYPE html>那麼,那麼就等同於開啟了標準模式,那麼瀏覽器就得老老實實的按照W3C的

標準解析渲染頁面,這樣一來,你的頁面在所有的瀏覽器裡顯示的就都是一個樣子了。

這就是<!DOCTYPE html>的作用。

2 使用:<!DOCTYPE html>

2.1 使用也很簡單,就是在你的html頁面的第一行新增"<!DOCTYPE html>"一行程式碼就可以了

2.2 jsp的話,新增在<%@ page %>的下一行。

2.3 不用區分大小寫

注意:上面這個<!DOCTYPE html> 參考自百度百科,博主月南,ITOYO博主憤怒的coder,感興趣的朋友可以繼續探索。

2.2<html lang="en">
 原形式是<html language="english">,這句話的作用是告訴搜尋引擎爬蟲,我們這個網站的內容是關於英語的,en在這裡是english,如果要告訴搜尋引擎爬蟲我們的內容是關於中文的,只要將“en”該為“zh”("中"拼音的前兩個字母組合),如果是德語的話,將“en”改為“de”。這裡需要注意的是除了“english”的縮寫是“en”,其他語言都是漢語拼音的前兩個字母組合。

2.3<meta>系列
2.3.1<meta charset="utf-8">

自己寫的html文件用瀏覽器開啟是亂碼的話,就是這裡出現了問題

這個charset原意是字符集,在這裡是編碼的意思,後面等於的值是指該文件字型的文字型別,這個編碼型別有四類。第一類: gb2312(國家標準第2312條例,可以理解為簡體中文)--->gb2312是中文的字符集,對中文支援比較好,但是如果網頁使用英文或者其他的外文比如日文韓文,gb2312就不能支援了;第二類: gbk(在gb2312基礎上加了繁體字型別);第三類: unicode(萬國碼),這個型別基本涵蓋所有的語言了;第四類: utf-8 (是unicode的升級版本),也是現在公司最常用的編碼型別。

2.3.2<meta content="" name="">

這個標籤有幾個型別,是由name值決定的,name值可以為description(描述),keywords(關鍵詞),這兩個是最常用的,content的話你可以根據需求來寫,這個標籤是為了別人輸入關鍵詞,能相應的找到對應的網站,比如我想了解一下淘寶網上的羽絨服,當你在淘寶網中輸入羽絨服時,相應的會出現各種各樣的羽絨服的連結,如果你是一個羽絨服店家,想讓你的羽絨服更靠前,(先假設淘寶網每家的羽絨服銷量,好評率等等都一樣的時候),這樣的話你就可以把這兩個屬性描述的誇張一點。

比如:

<meta content="羽絨服" name="keywords">

<meta content="這個羽絨服是你穿了就不想脫的羽絨服" name="description">

2.4<title> </title>
這是一個雙標籤,是標題的意思,中間是你要寫的標題

2.5<link href="" rel="stylesheet">
這個標籤是為了引入css檔案,css檔名稱寫在href(hypertext reference 超文字引用)裡,是為了渲染html文件的

2.6<body></body>
這是身體標籤,是你要寫的網頁的內容區,展示給使用者看的

2.7<script src=""></script>
這是為了引入js檔案,檔名稱寫在src裡,是為了給html增加一種動態渲染的功能,為什麼要將該標籤放在</body>之前,是因為我們在渲染html網頁時,瀏覽器遇到<link href="" rel="stylesheet">會同時(非同步載入)渲染html和CSS,而遇到

 
--------------------- 
作者:前端小白。 
來源:CSDN 
原文:https://blog.csdn.net/qq_40860137/article/details/83958992 
版權宣告:本文為博主原創文章,轉載請附上博文連結!