HTML頭部 &lt;head&gt;

lt;title> - 定義了HTML文檔的標(biāo)題

使用 <title> 標(biāo)簽定義HTML文檔的標(biāo)題

<base> - 定義了所有鏈接的URL

使用 <base> 定義頁(yè)面中所有鏈接默認(rèn)的鏈接目標(biāo)地址。

使用 <meta> 元素來(lái)描述HTML文檔的描述，關(guān)鍵詞，作者，字符集等。

HTML <head> 元素

<head> 元素包含了所有的頭部標(biāo)簽元素。在 <head>元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。

可以添加在頭部區(qū)域的元素標(biāo)簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

HTML <title> 元素

<title> 標(biāo)簽定義了不同文檔的標(biāo)題。

<title> 在 HTML/XHTML 文檔中是必須的。

<title> 元素:

定義了瀏覽器工具欄的標(biāo)題
當(dāng)網(wǎng)頁(yè)添加到收藏夾時(shí)，顯示在收藏夾中的標(biāo)題
顯示在搜索引擎結(jié)果頁(yè)面的標(biāo)題

一個(gè)簡(jiǎn)單的 HTML 文檔:

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>文檔標(biāo)題</title></head><body>文檔內(nèi)容......</body></html>

HTML <base> 元素

<base> 標(biāo)簽描述了基本的鏈接地址/鏈接目標(biāo)，該標(biāo)簽作為HTML文檔中所有的鏈接標(biāo)簽的默認(rèn)鏈接:

<head>

</head>

HTML <link> 元素

<head>

</head>

HTML <style> 元素

在<style> 元素中你需要指定樣式文件來(lái)渲染HTML文檔:

<head>

body {background-color:yellow}

p {color:blue}

</style>

</head>

HTML <meta> 元素

meta標(biāo)簽描述了一些基本的元數(shù)據(jù)。

META元素通常用于指定網(wǎng)頁(yè)的描述，關(guān)鍵詞，文件的最后修改時(shí)間，作者，和其他元數(shù)據(jù)。

元數(shù)據(jù)可以使用于瀏覽器（如何顯示內(nèi)容或重新加載頁(yè)面），搜索引擎（關(guān)鍵詞），或其他Web服務(wù)。

為搜索引擎定義關(guān)鍵詞:

為網(wǎng)頁(yè)定義描述內(nèi)容:

定義網(wǎng)頁(yè)作者:

每30秒中刷新當(dāng)前頁(yè)面:

HTML <script> 元素

HTML head 元素

標(biāo)簽	描述
<head>	定義了文檔的信息
<title>	定義了文檔的標(biāo)題
<base>	定義了頁(yè)面鏈接標(biāo)簽的默認(rèn)鏈接地址
<link>	定義了一個(gè)文檔和外部資源之間的關(guān)系
<meta>	定義了HTML文檔中的元數(shù)據(jù)
<script>	定義了客戶端的腳本文件
<style>	定義了HTML文檔的樣式文件

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

來(lái)看下常用的標(biāo)簽列表，后文會(huì)一一介紹：

<!DOCTYPE html>

<head>

</head>

基本標(biāo)簽

使用 HTML5 doctype，不區(qū)分大小寫(xiě)。

<!DOCTYPE html>

聲明文檔使用的字符編碼

更加標(biāo)準(zhǔn)的 lang 屬性寫(xiě)法 http://zhi.hu/XyIa

簡(jiǎn)體中文
<html lang="zh-cmn-Hans">
繁體中文
<html lang="zh-cmn-Hant">

很少情況才需要加地區(qū)代碼，通常是為了強(qiáng)調(diào)不同地區(qū)漢語(yǔ)使用差異，例如：

<strong lang="zh-cmn-Hans-CN">菠蘿</strong>和<strong lang="zh-cmn-Hant-TW">鳳梨</strong>其實(shí)是同一種水果。只是大陸和臺(tái)灣稱謂不同，且新加坡、馬來(lái)西亞一帶的稱謂也是不同的，稱之為<strong lang="zh-cmn-Hans-SG">黃梨</strong>。

</p>

優(yōu)先使用 IE 最新版本和 Chrome

SEO 優(yōu)化

頁(yè)面描述

每個(gè)網(wǎng)頁(yè)都應(yīng)有一個(gè)不超過(guò) 150 個(gè)字符且能準(zhǔn)確反映網(wǎng)頁(yè)內(nèi)容的描述標(biāo)簽。文檔

頁(yè)面關(guān)鍵詞

定義頁(yè)面標(biāo)題

定義網(wǎng)頁(yè)作者

定義網(wǎng)頁(yè)搜索引擎索引方式，robotterms是一組使用英文逗號(hào)「,」分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。文檔

可選標(biāo)簽

為移動(dòng)設(shè)備添加 viewport

content 參數(shù)：

width viewport 寬度(數(shù)值/device-width)
height viewport 高度(數(shù)值/device-height)
initial-scale 初始縮放比例
maximum-scale 最大縮放比例
minimum-scale 最小縮放比例
user-scalable 是否允許用戶縮放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增屬性（注意：iOS8 中已經(jīng)刪除），可以在頁(yè)面加載時(shí)最小化上下?tīng)顟B(tài)欄。這是一個(gè)布爾值，可以直接這樣寫(xiě)：<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

iOS 設(shè)備

添加到主屏后的標(biāo)題（iOS 6 新增）

是否啟用 WebApp 全屏模式

設(shè)置狀態(tài)欄的背景顏色

content 參數(shù)：

default 默認(rèn)值。
black 狀態(tài)欄背景是黑色。
black-translucent 狀態(tài)欄背景是黑色半透明。

如果設(shè)置為 default 或 black ,網(wǎng)頁(yè)內(nèi)容從狀態(tài)欄底部開(kāi)始。

如果設(shè)置為 black-translucent ,網(wǎng)頁(yè)內(nèi)容充滿整個(gè)屏幕，頂部會(huì)被狀態(tài)欄遮擋。

禁止數(shù)字識(shí)自動(dòng)別為電話號(hào)碼

iOS 圖標(biāo)

rel 參數(shù)：

apple-touch-icon 圖片自動(dòng)處理成圓角和高光等效果。

apple-touch-icon-precomposed 禁止系統(tǒng)自動(dòng)添加效果，直接顯示設(shè)計(jì)原圖。

iPhone 和 iTouch，默認(rèn) 57x57 像素，必須有

iPad，72x72 像素，可以沒(méi)有，但推薦有

Retina iPhone 和 Retina iTouch，114x114 像素，可以沒(méi)有，但推薦有

Retina iPad，144x144 像素，可以沒(méi)有，但推薦有

iOS 啟動(dòng)畫(huà)面

官方文檔：https://developer.apple.com/library/ios/qa/qa1686/_index.html

參考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

iPad 的啟動(dòng)畫(huà)面是不包括狀態(tài)欄區(qū)域的。

iPad 豎屏 768 x 1004（標(biāo)準(zhǔn)分辨率）

iPad 豎屏 1536x2008（Retina）

iPad 橫屏 1024x748（標(biāo)準(zhǔn)分辨率）

iPad 橫屏 2048x1496（Retina）

iPhone 和 iPod touch 的啟動(dòng)畫(huà)面是包含狀態(tài)欄區(qū)域的。

iPhone/iPod Touch 豎屏 320x480 (標(biāo)準(zhǔn)分辨率)

iPhone/iPod Touch 豎屏 640x960 (Retina)

iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina)

添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari）文檔

Android

Android Lollipop 中的 Chrome 39 增加 theme-color meta 標(biāo)簽，用來(lái)控制選項(xiàng)卡顏色。

http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android

Windows 8

Windows 8 磁貼顏色

Windows 8 磁貼圖標(biāo)

其他

添加 RSS 訂閱

添加 favicon icon

禁止 Chrome 瀏覽器中自動(dòng)提示翻譯

檔的標(biāo)題

[demo]

<html>

<head>

<title>標(biāo)題不會(huì)顯示在文檔區(qū)</title>

</head>

<body>

<p>這段文本會(huì)顯示出來(lái)。</p>

</body>

</html>

[/demo]

<title> 標(biāo)題定義文檔的標(biāo)題。

所有鏈接一個(gè)目標(biāo)

[demo]

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

<a target="_blank">這個(gè)連接</a> 將在新窗口中加載，因?yàn)?target 屬性被設(shè)置為 "_blank"。

</p>

<p>

<a >這個(gè)連接</a> 也將在新窗口中加載，即使沒(méi)有 target 屬性。

</p>

</body>

</html>

[/demo]

如何使用 base 標(biāo)簽使頁(yè)面中的所有標(biāo)簽在新窗口中打開(kāi)。

文檔描述

[demo]

<html>

<head>

<meta name="author"

content="w3school.com.cn">

content="David Yang,8/1/07">

content="Dreamweaver 8.0en">

</head>

<body>

<p>本文檔的 meta 屬性標(biāo)識(shí)了創(chuàng)作者和編輯軟件。</p>

</body>

</html>

[/demo]

使用 <meta> 元素來(lái)描述文檔。

文檔關(guān)鍵詞

[demo]

<html>

<head>

content="HTML examples">

content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">

</head>

<body>

<p>本文檔的 meta 屬性描述了該文檔和它的關(guān)鍵詞。</p>

</body>

</html>

[/demo]

使用 <meta> 元素來(lái)定義文檔的關(guān)鍵詞。

重定向用戶

[demo]

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<p>

對(duì)不起。我們已經(jīng)搬家了。您的 URL 是 <a >http://www.w3school.com.cn</a>

</p>

<p>您將在 5 秒內(nèi)被重定向到新的地址。</p>

<p>如果超過(guò) 5 秒后您仍然看到本消息，請(qǐng)點(diǎn)擊上面的鏈接。</p>

</body>

</html>

[/demo]

如何把用戶重定向到新的網(wǎng)址。

HTML <head> 元素

<head> 元素是所有頭部元素的容器。<head> 內(nèi)的元素可包含腳本，指示瀏覽器在何處可以找到樣式表，提供元信息，等等。

以下標(biāo)簽都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

HTML <title> 元素

<title> 標(biāo)簽定義文檔的標(biāo)題。

title 元素在所有 HTML/XHTML 文檔中都是必需的。

title 元素能夠：

定義瀏覽器工具欄中的標(biāo)題

提供頁(yè)面被添加到收藏夾時(shí)顯示的標(biāo)題

顯示在搜索引擎結(jié)果中的頁(yè)面標(biāo)題

一個(gè)簡(jiǎn)化的 HTML 文檔：

[demo]

<!DOCTYPE html>

<html>

<head>

<title>Title of the document</title>

</head>

<body>

The content of the document......

</body>

</html>

[/demo]

HTML <base> 元素

<base> 標(biāo)簽為頁(yè)面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)（target）：

<head>

</head>

HTML <link> 元素

<head>

</head>

HTML <style> 元素

您可以在 style 元素內(nèi)規(guī)定 HTML 元素在瀏覽器中呈現(xiàn)的樣式：

<head>

body {background-color:yellow}

p {color:blue}

</style>

</head>

HTML <meta> 元素

元數(shù)據(jù)（metadata）是關(guān)于數(shù)據(jù)的信息。

典型的情況是，meta 元素被用于規(guī)定頁(yè)面的描述、關(guān)鍵詞、文檔的作者、最后修改時(shí)間以及其他元數(shù)據(jù)。

元數(shù)據(jù)可用于瀏覽器（如何顯示內(nèi)容或重新加載頁(yè)面），搜索引擎（關(guān)鍵詞），或其他 web 服務(wù)。

針對(duì)搜索引擎的關(guān)鍵詞

一些搜索引擎會(huì)利用 meta 元素的 name 和 content 屬性來(lái)索引您的頁(yè)面。

下面的 meta 元素定義頁(yè)面的描述：

下面的 meta 元素定義頁(yè)面的關(guān)鍵詞：

name 和 content 屬性的作用是描述頁(yè)面的內(nèi)容。

HTML <script> 元素

我們會(huì)在稍后的章節(jié)講解 script 元素。

HTML 頭部元素

標(biāo)簽描述

<head> 定義關(guān)于文檔的信息。

<title> 定義文檔標(biāo)題。

<base> 定義頁(yè)面上所有鏈接的默認(rèn)地址或默認(rèn)目標(biāo)。

在線咨詢

上一篇：如何做一個(gè)網(wǎng)站的優(yōu)化看這篇文章就夠了
下一篇：裝B技巧，讓頁(yè)面也 High 起來(lái)-一起搖擺

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

HTML頭部 &amp;lt;head&amp;gt;

您的項(xiàng)目需求

HTML頭部 <head>