重學前端之HTML(二)HTML頁面的主要標籤詳解

時間 2020-01-10

標籤前端 html 頁面主要標籤詳解欄目 HTML 简体版

原文原文鏈接

這篇文章主要是講構成一個HTML頁面的主要標籤的功能詳解。涉及到的標籤有:<!DOCTYPE>、<head>、<meta>、<title>、<link>、<body>、<script>、<noscript>。css

標籤詳解

<!DOCTYPE>的做用: 告知瀏覽器使用哪一種HTML規範或XHTML規範來解析頁面。如果沒有<!DOCTYPE>或者形式不正確,會致使HTML和XHTML文檔以混雜模式呈現,就是把如何渲染html頁面的權利交給瀏覽器,而每一個瀏覽器的展示方式都不一樣。因此想要提升瀏覽器兼容性就必須重視<!DOCTYPE>。
瀏覽器渲染方式:
嚴格模式: 又稱標準模式,是指瀏覽器按照W3C標準來解析代碼,呈現頁面。
混雜模式: 又稱爲怪異模式或者兼容模式,是指瀏覽器按照本身的方式來解析代碼,使用一種比較寬鬆的向後兼容的方式來顯示頁面。
參考博客: 深刻理解DOCTYPE的做用
html

<head>標籤: HTML頭部都是包含在<head>元素裏面的內容,head裏面的內容不會在瀏覽器中顯示。web

<meta>標籤:
1、做用
設置meta標籤的主要做用是描述網頁,便於搜索引擎抓取,兼容瀏覽器,適配移動端,開啓或者是禁止一些默認樣式和默認事件等等。
2、經常使用例子
1)chrome

<meta name="author" content="yywy"> 
   <meta name="description" content="This is a test page">

定義了頁面的做者和描述
name: 指定了meta元素的類型,說明該元素包含了什麼類型的信息
content: 指定了實際的元數據內容
2)瀏覽器

<meta  name="viewport"  content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

該meta標籤的做用是讓當前viewport的寬度等於設備的寬度，同時不容許用戶手動縮放。name 爲 viewport 的 meta,它沒有在 HTML 標準中定義，倒是移動端開發的事實標準。移動頁面使用。
width：頁面寬度，能夠取值具體的數字，也能夠是 device-width，表示跟設備寬度相等。
height：頁面高度，能夠取值具體的數字，也能夠是 device-height，表示跟設備高度相等。
initial-scale：初始縮放比例。
minimum-scale：最小縮放比例。
maximum-scale：最大縮放比例。
user-scalable：是否容許用戶縮放。
3)框架

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

具備http-equiv屬性的meta標籤,表示執行一個命令。X-UA-Compatible表示強制瀏覽器的渲染方式。
做用：IE = edge告訴IE使用最新的引擎渲染網頁，chrome = 1則能夠激活Goole Chrome Frame(谷歌瀏覽器內嵌瀏覽器框架GCF,須要下載,2014年就再也不提供支持)。若是安裝了GCF，則使用GCF來渲染頁面，若是沒安裝GCF，則使用最高版本的IE內核進行渲染。Google Chrome Frame（谷歌內嵌瀏覽器框架GCF）。這個插件可讓用戶的IE瀏覽器外觀不變，但用戶在瀏覽網頁時，實際上使用的是Google Chrome瀏覽器內核。
X-UA-Compatible的值，能夠指定網頁的兼容性模式設置。
4)yii

<meta http-equiv="Refresh" content="1, URL=http://127.0.0.1/index.html">

做用: 隔1秒後,跳轉到指定頁面
5)ui

<meta name="renderer" content="webkit"> <!-- 默認webkit內核 -->
<meta name="renderer" content="ie-comp"> <!-- 默認IE兼容模式 -->
<meta name="renderer" content="ie-stand"> <!-- 默認IE標準模式 -->

renderer是爲雙核瀏覽器準備的，用於指定雙核瀏覽器默認以何種方式渲染頁面。好比說360瀏覽器。
6)搜索引擎

<meta name="keywords" content="">

告訴搜索引擎,網頁的關鍵字是什麼,對於 SEO 場景很是關鍵。關鍵詞通常不超過3個,每一個關鍵詞不宜過長,並且詞語之間要用英文「,」隔開(由於計算機只對英語的敏感度較高),儘可能將重要的關鍵字靠前放,由於靠後的關鍵字排名較差,除非你站有很高的權重。
7)編碼

<meta name="format-detection" content="telephone=no, email=no" />

做用：telephone=no就禁止了把數字轉化爲撥號連接！告訴設備不識別郵箱，點擊以後不自動發送email=no禁止做爲郵箱地址！
8)

<meta charset="utf-8">

charset: 規定 HTML 文檔的字符編碼。
做用: 告訴瀏覽器以 utf-8 的編碼格式來解析代碼
參考連接: 移動端meta標籤:
淺析網頁meta標籤中X-UA-Compatible屬性的使用:

<title>做用: 用來表示整個HTML文檔標題的元數據(不是文檔的內容)。

<link>標籤:
1、做用
1) 定義文檔與外部資源的關係
2) 連接樣式表
2、經常使用例子
1) 頁面圖標

<link  rel="shortcut icon"  type="image/x-icon"  href="favicon.ico">

頁面添加圖標,以.ico格式保存(大多瀏覽器將支持更通用的格式,如.gif或png,單使用.ico格式將確保它能在IE6同樣久遠的瀏覽器顯示)
2) 連接樣式表

<link  rel="stylesheet"  href="index.css">

3、相關問題
link和@import的區別:
相同: 均可以引入外部樣式
不一樣:
1) @import是 CSS 提供的語法規則，只有導入樣式表的做用；link是HTML提供的標籤，不只能夠加載 CSS 文件，還能夠定義 RSS、rel(rel 此屬性命名連接文檔與當前文檔的關係,該屬性必須是連接類型值的用空格分隔的列表)等屬性。
2) 加載頁面時，link標籤引入的 CSS 被同時加載；@import引入的 CSS 將在頁面加載完畢後被加載,因此網速很差時瀏覽@import加載CSS的頁面有時會沒有樣式(也就是閃爍)
3) @import是 CSS2.1 纔有的語法，故只可在 IE5+ 才能識別；link標籤做爲 HTML 元素，不存在兼容性問題。
4) 能夠經過 JS 操做 DOM ，插入link標籤來改變樣式；因爲 DOM 方法是基於文檔的，沒法使用@import的方式插入樣式。
5) 在link標籤引入的 CSS 文件中，使用@import時需注意，若是已經存在相一樣式，@import引入的這個樣式將被該 CSS 文件自己的樣式層疊掉，表現出link標籤引入的樣式權重大於@import引入的樣式這樣的直觀效果。
參考: link和@import的區別

<body>標籤: HTML body 元素表示文檔的內容。

<script>標籤: HTML <script> 元素用於嵌入或引用可執行腳本。

<noscript>: 若是頁面上的腳本類型不受支持或者當前在瀏覽器中關閉了腳本，則在 HTML <noscript> 元素中定義腳本未被執行時的替代內容。若是瀏覽器支持腳本,則不會顯示noscript標籤的內容。

以上內容若有不對,但願你們指出,謝謝。