HTML頭部 &lt;head&gt;

lt;title> - 定義了HTML文檔的標題

使用 <title> 標簽定義HTML文檔的標題

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

使用 <base> 定義頁面中所有鏈接默認的鏈接目標地址。

使用 <meta> 元素來描述HTML文檔的描述，關鍵詞，作者，字符集等。

HTML <head> 元素

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

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

HTML <title> 元素

<title> 標簽定義了不同文檔的標題。

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

<title> 元素:

定義了瀏覽器工具欄的標題
當網頁添加到收藏夾時，顯示在收藏夾中的標題
顯示在搜索引擎結果頁面的標題

一個簡單的 HTML 文檔:

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>文檔標題</title></head><body>文檔內容......</body></html>

HTML <base> 元素

<base> 標簽描述了基本的鏈接地址/鏈接目標，該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:

<head>

</head>

HTML <link> 元素

<head>

</head>

HTML <style> 元素

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

<head>

body {background-color:yellow}

p {color:blue}

</style>

</head>

HTML <meta> 元素

meta標簽描述了一些基本的元數據。

META元素通常用于指定網頁的描述，關鍵詞，文件的最后修改時間，作者，和其他元數據。

元數據可以使用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他Web服務。

為搜索引擎定義關鍵詞:

為網頁定義描述內容:

定義網頁作者:

每30秒中刷新當前頁面:

HTML <script> 元素

HTML head 元素

標簽	描述
<head>	定義了文檔的信息
<title>	定義了文檔的標題
<base>	定義了頁面鏈接標簽的默認鏈接地址
<link>	定義了一個文檔和外部資源之間的關系
<meta>	定義了HTML文檔中的元數據
<script>	定義了客戶端的腳本文件
<style>	定義了HTML文檔的樣式文件

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

來看下常用的標簽列表，后文會一一介紹：

<!DOCTYPE html>

<head>

</head>

基本標簽

使用 HTML5 doctype，不區分大小寫。

<!DOCTYPE html>

聲明文檔使用的字符編碼

更加標準的 lang 屬性寫法 http://zhi.hu/XyIa

簡體中文
<html lang="zh-cmn-Hans">
繁體中文
<html lang="zh-cmn-Hant">

很少情況才需要加地區代碼，通常是為了強調不同地區漢語使用差異，例如：

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

</p>

優先使用 IE 最新版本和 Chrome

SEO 優化

頁面描述

每個網頁都應有一個不超過 150 個字符且能準確反映網頁內容的描述標簽。文檔

頁面關鍵詞

定義頁面標題

定義網頁作者

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

可選標簽

為移動設備添加 viewport

content 參數：

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

iOS 設備

添加到主屏后的標題（iOS 6 新增）

是否啟用 WebApp 全屏模式

設置狀態欄的背景顏色

content 參數：

default 默認值。
black 狀態欄背景是黑色。
black-translucent 狀態欄背景是黑色半透明。

如果設置為 default 或 black ,網頁內容從狀態欄底部開始。

如果設置為 black-translucent ,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。

禁止數字識自動別為電話號碼

iOS 圖標

rel 參數：

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

apple-touch-icon-precomposed 禁止系統自動添加效果，直接顯示設計原圖。

iPhone 和 iTouch，默認 57x57 像素，必須有

iPad，72x72 像素，可以沒有，但推薦有

Retina iPhone 和 Retina iTouch，114x114 像素，可以沒有，但推薦有

Retina iPad，144x144 像素，可以沒有，但推薦有

iOS 啟動畫面

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

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

iPad 的啟動畫面是不包括狀態欄區域的。

iPad 豎屏 768 x 1004（標準分辨率）

iPad 豎屏 1536x2008（Retina）

iPad 橫屏 1024x748（標準分辨率）

iPad 橫屏 2048x1496（Retina）

iPhone 和 iPod touch 的啟動畫面是包含狀態欄區域的。

iPhone/iPod Touch 豎屏 320x480 (標準分辨率)

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 標簽，用來控制選項卡顏色。

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

Windows 8

Windows 8 磁貼顏色

Windows 8 磁貼圖標

其他

添加 RSS 訂閱

添加 favicon icon

禁止 Chrome 瀏覽器中自動提示翻譯

檔的標題

[demo]

<html>

<head>

<title>標題不會顯示在文檔區</title>

</head>

<body>

<p>這段文本會顯示出來。</p>

</body>

</html>

[/demo]

<title> 標題定義文檔的標題。

所有鏈接一個目標

[demo]

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

<a target="_blank">這個連接</a> 將在新窗口中加載，因為 target 屬性被設置為 "_blank"。

</p>

<p>

<a >這個連接</a> 也將在新窗口中加載，即使沒有 target 屬性。

</p>

</body>

</html>

[/demo]

如何使用 base 標簽使頁面中的所有標簽在新窗口中打開。

文檔描述

[demo]

<html>

<head>

<meta name="author"

content="w3school.com.cn">

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

content="Dreamweaver 8.0en">

</head>

<body>

<p>本文檔的 meta 屬性標識了創作者和編輯軟件。</p>

</body>

</html>

[/demo]

使用 <meta> 元素來描述文檔。

文檔關鍵詞

[demo]

<html>

<head>

content="HTML examples">

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

</head>

<body>

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

</body>

</html>

[/demo]

使用 <meta> 元素來定義文檔的關鍵詞。

重定向用戶

[demo]

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<p>

對不起。我們已經搬家了。您的 URL 是 <a >http://www.w3school.com.cn</a>

</p>

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

<p>如果超過 5 秒后您仍然看到本消息，請點擊上面的鏈接。</p>

</body>

</html>

[/demo]

如何把用戶重定向到新的網址。

HTML <head> 元素

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

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

HTML <title> 元素

<title> 標簽定義文檔的標題。

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

title 元素能夠：

定義瀏覽器工具欄中的標題

提供頁面被添加到收藏夾時顯示的標題

顯示在搜索引擎結果中的頁面標題

一個簡化的 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> 標簽為頁面上的所有鏈接規定默認地址或默認目標（target）：

<head>

</head>

HTML <link> 元素

<head>

</head>

HTML <style> 元素

您可以在 style 元素內規定 HTML 元素在瀏覽器中呈現的樣式：

<head>

body {background-color:yellow}

p {color:blue}

</style>

</head>

HTML <meta> 元素

元數據（metadata）是關于數據的信息。

典型的情況是，meta 元素被用于規定頁面的描述、關鍵詞、文檔的作者、最后修改時間以及其他元數據。

元數據可用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他 web 服務。

針對搜索引擎的關鍵詞

一些搜索引擎會利用 meta 元素的 name 和 content 屬性來索引您的頁面。

下面的 meta 元素定義頁面的描述：

下面的 meta 元素定義頁面的關鍵詞：

name 和 content 屬性的作用是描述頁面的內容。

HTML <script> 元素

我們會在稍后的章節講解 script 元素。

HTML 頭部元素

標簽描述

<head> 定義關于文檔的信息。

<title> 定義文檔標題。

<base> 定義頁面上所有鏈接的默認地址或默認目標。

在線咨詢

上一篇：數據可視化神器:Pyecharts
下一篇：重蔚的php學習第二天之HTML篇

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

您的項目需求

HTML頭部 <head>