HTML之魂 HEAD元素

2021-08-06 05:48:02 字數 2422 閱讀 1509

看過**的朋友,人的元神分為七魂六魄,常常忽略的也就是乙個人的魂,html之魂正是聚集元資料的head元素。形容的比較誇張,接下具體講解下head元素。

head元素通常包含三位一體既(網頁基本資訊,其它外鏈資訊,廠商定製)。

先來看看乙個基本html格式

網頁的基本資訊,其資訊包含了這個頁面所需要告訴****或者搜尋引擎爬取程式這個頁面是什麼,大致含有什麼內容。

舉個栗子

head裡面可以包含如下元素:  meta元素 ,  title 元素 ,   link元素  , script元素

頁面基本資訊 主要有 title 和 meta

tite元素 :你好在這裡填寫整個文件的核心標題 < /title>

meta元素:

編碼格式 --- 表示這個頁面應該用什麼形式轉碼,通常建議用utf-8 

搜尋引擎相關 ---  

ie版本相關渲染  ---  這裡告訴如果是ie瀏覽器訪問,會建議用最新的edge來開啟網頁 ,避免ie瀏覽器的各種相容問題

視窗設定 --- viewport 適口 視窗設定  寬度等同於裝置寬度  縮放大小比例為1

其它外鏈資訊

link元素script元素: 我們把html看成乙個房子,如果單純的是html檔案的話也只能稱為乙個房子的框架,而沒有js和css等其它檔案引入,頂多算是乙個清水毛胚罷了。那麼要拎包入住還需要搬入家具和電器,好好裝修(渲染)下才行。

(**的家具和家電,**的互動,全靠js來負責)

--- 定義風格 (好比定義**由什麼色彩風格地板磚和牆壁)

廠商定製

現在越來越多的瀏覽器稱為雙核,當然這個不是cpu的雙核,而是擁有兩種不同渲染機制規則而已。打個比方我們開啟「搜狗瀏覽器」 「360瀏覽器」 「qq瀏覽器」 「獵豹瀏覽器」等 國內比較優秀的瀏覽器開啟網頁會有 極速模式,相容模式 等等。其也是代表用什麼機制來渲染頁面而已,為了就是滿足不同使用者的體驗。

<

meta

name

="renderer"

content

="webkit"

> 預設webkit模式

<

meta

name

="renderer"

content

="ie-stand"

> 預設為ie標準模式

<

meta

name

="renderer"

content

="ie-comp"

> 預設為ie相容模式

說說關於不同核心私有屬性: 

核心不是那麼神秘,說說主流的各家瀏覽器用的什麼瀏覽器核心(網頁渲染引擎)。而我們經常在**會看到各種不同的瀏覽器私有屬性寫法,這也是考慮相容的問題

background: -moz-linear-gradient( top,#ccc,#000);

-moz-  代表firefox瀏覽器私有屬性

-ms- 代表ie瀏覽器私有屬性

-webkit- 代表chrome、safari私有屬性

-o- 代表opera私有屬性

pritce:

1、 head元素裡主要包含了哪三塊內容?

2、外鏈元素是放在哪個標籤裡的?

3、廠商定製的大概有哪一些模式?

4、能否簡單說下視窗設定代表什麼意義?

HTML入門之head標籤學習

主要是配置 瀏覽器顯示資料的配置資訊 eg 字串編碼 一般是給瀏覽器進行使用 網頁標題標籤 告訴瀏覽器使用什麼標題顯示網頁 標題名編碼格式標籤 告訴瀏覽器使用指定的編碼格式解析文件 編碼格式 text html charset 編碼格式 html4 網頁搜尋優化標籤 提公升網頁在瀏覽器中的搜尋速度 ...

html網頁中head之meta標籤

什麼是meta標籤?在乙個網頁中meta標籤常常被用做網頁關鍵字 網頁介紹 作者 網頁編碼 robots 自動跳轉等宣告及說明標籤。網頁顯示字符集網頁編碼 簡體中文 中文 正體中文 英 語 2 網頁製作者資訊 3 網頁關鍵字宣告 搜尋引擎優化地方 4 網頁簡介說明 搜尋引擎優化地方 5 防止別人在框...

Html介紹,認識head標籤

標籤位於html文件的頭部,主要是用來描述文件的各種屬性和資訊,包括文件的標題等,當然文件頭部包含的資料都不會真正作為內容展示給訪客的。如下的一些標籤常用於標籤部分 標籤 在和之間的的文字內容是網頁的標題資訊,它會出現在瀏覽器的標題欄目中。網頁的標籤用於告訴使用者和搜尋引擎這個網頁的主要內容是什麼,...