例
一份在頭部帶有 <title> 標簽的 HTML 文檔:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標題</title>
</head>
<body>
文檔內容......
</body>
</html>
瀏覽器支持
所有主流瀏覽器都支持 <head> 標簽。
標簽定義及使用說明
<head> 元素是所有頭部元素的容器。
<head> 元素必須包含文檔的標題(title),可以包含腳本、樣式、meta 信息 以及其他更多的信息。
以下列出的元素能被用在 <head> 元素內部:
<title> (在頭部中,這個元素是必需的)
<style>
<base>
<link>
<meta>
<script>
<noscript>
HTML 4.01 與 HTML5之間的差異
HTML5 不再支持 profile 屬性。
屬性
屬性 | 值 | 描述 |
---|---|---|
profile | URL | HTML5 不支持。規定文檔 URL 的一系列規則。這些規則能被瀏覽器識別并且準確讀取 <meta> 標簽的內容屬性中的信息。 |
全局屬性
<head> 標簽支持 HTML 的全局屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
檔的標題
[demo]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>標題不會顯示在文檔區</title>
</head>
<body>
<p>這段文本會顯示出來。</p>
</body>
</html>
[/demo]
<title> 標題定義文檔的標題。
所有鏈接一個目標
[demo]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html" />
<meta http-equiv="Content-Language" content="zh-cn" />
<base target="_blank" />
</head>
<body>
<p>
<a target="_blank">這個連接</a> 將在新窗口中加載,因為 target 屬性被設置為 "_blank"。
</p>
<p>
<a >這個連接</a> 也將在新窗口中加載,即使沒有 target 屬性。
</p>
</body>
</html>
[/demo]
如何使用 base 標簽使頁面中的所有標簽在新窗口中打開。
文檔描述
[demo]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="author"
content="w3school.com.cn">
<meta name="revised"
content="David Yang,8/1/07">
<meta name="generator"
content="Dreamweaver 8.0en">
</head>
<body>
<p>本文檔的 meta 屬性標識了創作者和編輯軟件。</p>
</body>
</html>
[/demo]
使用 <meta> 元素來描述文檔。
文檔關鍵詞
[demo]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description"
content="HTML examples">
<meta name="keywords"
content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">
</head>
<body>
<p>本文檔的 meta 屬性描述了該文檔和它的關鍵詞。</p>
</body>
</html>
[/demo]
使用 <meta> 元素來定義文檔的關鍵詞。
重定向用戶
[demo]
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
</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>
<base />
<base target="_blank" />
</head>
HTML <link> 元素
<link> 標簽定義文檔與外部資源之間的關系。
<link> 標簽最常用于連接樣式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
HTML <style> 元素
<style> 標簽用于為 HTML 文檔定義樣式信息。
您可以在 style 元素內規定 HTML 元素在瀏覽器中呈現的樣式:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
HTML <meta> 元素
元數據(metadata)是關于數據的信息。
<meta> 標簽提供關于 HTML 文檔的元數據。元數據不會顯示在頁面上,但是對于機器是可讀的。
典型的情況是,meta 元素被用于規定頁面的描述、關鍵詞、文檔的作者、最后修改時間以及其他元數據。
<meta> 標簽始終位于 head 元素中。
元數據可用于瀏覽器(如何顯示內容或重新加載頁面),搜索引擎(關鍵詞),或其他 web 服務。
針對搜索引擎的關鍵詞
一些搜索引擎會利用 meta 元素的 name 和 content 屬性來索引您的頁面。
下面的 meta 元素定義頁面的描述:
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
下面的 meta 元素定義頁面的關鍵詞:
<meta name="keywords" content="HTML, CSS, XML" />
name 和 content 屬性的作用是描述頁面的內容。
HTML <script> 元素
<script> 標簽用于定義客戶端腳本,比如 JavaScript。
我們會在稍后的章節講解 script 元素。
HTML 頭部元素
標簽 描述
<head> 定義關于文檔的信息。
<title> 定義文檔標題。
<base> 定義頁面上所有鏈接的默認地址或默認目標。
<link> 定義文檔與外部資源之間的關系。
<meta> 定義關于 HTML 文檔的元數據。
<script> 定義客戶端腳本。
<style> 定義文檔的樣式信息。
<head> 元素包含了所有的頭部標簽元素。在 <head>元素中你可以插入腳本(scripts), 樣式文件(CSS),及各種meta信息。
可以添加在頭部區域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>
<title> 標簽定義了不同文檔的標題。
<title> 在 HTML/XHTML 文檔中是必須的。
<title> 元素:
一個簡單的 HTML 文檔:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標題</title>
</head>
<body>
文檔內容......
</body>
</html>
<base> 標簽描述了基本的鏈接地址/鏈接目標,該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<style> 標簽定義了HTML文檔的樣式文件引用地址.
在<style> 元素中你也可以直接添加樣式來渲染 HTML 文檔:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
meta標簽描述了一些基本的元數據。
<meta> 標簽提供了元數據.元數據也不顯示在頁面上,但會被瀏覽器解析。
META 元素通常用于指定網頁的描述,關鍵詞,文件的最后修改時間,作者,和其他元數據。
元數據可以使用于瀏覽器(如何顯示內容或重新加載頁面),搜索引擎(關鍵詞),或其他Web服務。
<meta> 一般放置于 <head> 區域
為搜索引擎定義關鍵詞:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
為網頁定義描述內容:
<meta name="description" content="免費 Web & 編程 教程">
定義網頁作者:
<meta name="author" content="tom">
每30秒鐘刷新當前頁面:
<meta http-equiv="refresh" content="30">
<script>標簽用于加載腳本文件或定義客戶端腳本,如: JavaScript。
<script> 元素既可包含腳本語句,也可通過 src 屬性指向外部腳本文件。
JavaScript 最常用于圖片操作、表單驗證以及內容動態更新。
下面的腳本會向瀏覽器輸出"Hello World!":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<script>
document.write("Hello World!")
</script>
</body>
</html>
<noscript> 標簽提供無法使用腳本時的替代內容,比方在瀏覽器禁用腳本時,或瀏覽器不支持客戶端腳本時。
<noscript>元素可包含普通 HTML 頁面的 body 元素中能夠找到的所有元素。
只有在瀏覽器不支持腳本或者禁用腳本時,才會顯示 <noscript> 元素中的內容:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標題</title>
</head>
<body>
<script>
document.write("Hello World!")
document.write("<h1>這是一個標題</h1>");
document.write("<p>這是一個段落。</p>");
</script>
<noscript>抱歉,你的瀏覽器不支持 JavaScript!</noscript>
<p>不支持 JavaScript 的瀏覽器會使用 <noscript> 元素中定義的內容(文本)來替代。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標題</title>
</head>
<body>
<h1>我的第一個 JavaScript </h1>
<p id="demo">
JavaScript 可以觸發事件,就像按鈕點擊。</p>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>
<button type="button" onclick="myFunction()">點我</button>
</body>
</html>
標簽 | 描述 |
<script> | 定義了客戶端腳本 |
<noscript> | 定義了不支持腳本瀏覽器輸出的文本 |
HTML使用標簽 <a>來設置超文本鏈接。
超鏈接可以是一個字,一個詞,或者一組詞,也可以是一幅圖像,您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。
當您把鼠標指針移動到網頁中的某個鏈接上時,箭頭會變為一只小手。
在標簽<a> 中使用了href屬性來描述鏈接的地址。
默認情況下,鏈接將以以下形式出現在瀏覽器中:
注意:如果為這些超鏈接設置了 CSS 樣式,展示樣式會根據 CSS 的設定而顯示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標題</title>
</head>
<body>
<p><a href="//www.microsoft.com/">本文本</a> 是一個指向萬維網上的頁面的鏈接。</p>
</body>
</html>
標簽 | 描述 |
<head> | 定義了文檔的信息 |
<title> | 定義了文檔的標題 |
<base> | 定義了頁面鏈接標簽的默認鏈接地址 |
<link> | 定義了一個文檔和外部資源之間的關系 |
<meta> | 定義了HTML文檔中的元數據 |
<script> | 定義了客戶端的腳本文件 |
<style> | 定義了HTML文檔的樣式文件 |
*請認真填寫需求信息,我們會在24小時內與您取得聯系。