當(dāng)前位置：首頁 >

007_html头部元素

發(fā)布時(shí)間：2025/4/17 80 豆豆

生活随笔收集整理的這篇文章主要介紹了 007_html头部元素小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1. html頭部元素

2. <head>元素

2.1. <head>元素用于定義文檔的頭部, 它是所有頭部元素的容器。<head>內(nèi)的元素可包含標(biāo)題、腳本、樣式信息、元數(shù)據(jù)、指示瀏覽器在何處可以找到外部資源等等。

2.2. 以下標(biāo)簽都可以添加到head部分:

<title>、<base>、<link>、<meta>、<script> 以及 <style>。

2.3. 始終把<head>標(biāo)簽放在文檔的開始處, 緊跟在<html>后面, 并處于<body>標(biāo)簽或<frameset>標(biāo)簽之前。

3. <title>元素

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

3.2. title元素在所有html/xhtml文檔中都是必需的。

3.3. title元素能夠:

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

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

?3.3.3. 顯示在搜索引擎結(jié)果中的頁面標(biāo)題。

3.4. title的標(biāo)準(zhǔn)屬性

4. <base>元素

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

4.2. 規(guī)定默認(rèn)地址

?4.2.1. 通常情況下, 瀏覽器會(huì)從當(dāng)前文檔的URL中提取相應(yīng)的元素來填寫相對(duì)URL中的空白。

?4.2.2. 使用<base>標(biāo)簽可以改變這一點(diǎn)。瀏覽器隨后將不再使用當(dāng)前文檔的URL, 而使用指定的基本URL來解析所有的相對(duì)URL。這其中包括<a>、<img>、<link>、<form>標(biāo)簽中的URL。

4.3. base的href屬性和target屬性

?4.3.1. href屬性

?4.3.2.?target屬性

4.4. base規(guī)定默認(rèn)地址例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta charset="utf-8" /><title>base target屬性的使用</title><base href="http://www.w3school.com.cn/i/" /></head><body><img src="eg_smile.gif" /><br /><p>請(qǐng)注意, 我們已經(jīng)為圖像規(guī)定了一個(gè)相對(duì)地址。由于我們已經(jīng)在head部分規(guī)定了一個(gè)基準(zhǔn)URL, 瀏覽器將在如下地址尋找圖片:</p><p>"http://www.w3school.com.cn/i/eg_smile.gif"</p></body> </html>

4.5. base在自身窗口和新窗口打開鏈接例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta charset="utf-8" /><title>base target屬性的使用</title><base target="_blank" /></head><body><p><a href="http://www.w3school.com.cn" target="_self">這個(gè)連接</a> 將在自身窗口中加載, 因?yàn)閠arget屬性被設(shè)置為"_self"。</p><p><a href="http://www.w3school.com.cn">這個(gè)連接</a> 也將在新窗口中加載, 即使沒有target屬性。</p></body> </html>

5. <link>元素

5.1. <link>標(biāo)簽定義文檔與外部資源之間的關(guān)系。

5.2. <link>標(biāo)簽最常用于鏈接樣式表:

5.3. link元素是空元素, 它僅包含屬性。

5.4. link元素只能存在于head部分, 不過它可出現(xiàn)任何次數(shù)。

5.5.?link的屬性

5.6. <link>標(biāo)簽給文檔指定一個(gè)icon:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta charset="utf-8" /><title>link標(biāo)簽給文檔指定一個(gè)icon</title><link rel="icon" type="image/png" sizes="32x32" href="index.png" /></head><body></body> </html>

6. <style>元素

6.1. <style>標(biāo)簽用于為html文檔定義樣式信息。

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

<head><style type="text/css">body {background-color:yellow}p {color:blue}</style> </head>

6.3. type屬性是必需的, 定義style元素的MIME類型(媒體類型)。唯一可能的值是"text/css"。

6.4. style元素位于head部分中。

6.5. 必需的屬性

6.6. 可選的屬性

7. <script>元素

7.1. <script>標(biāo)簽用于定義客戶端腳本, 比如: JavaScript。

<head><script type="text/javascript">document.getElementById("demo").innerHTML = 5 + 6; </script><script type="text/javascript" src="myscript.js"></script> </head>

7.2. script元素既可以包含腳本語句, 也可以通過src屬性指向外部腳本文件。

7.3. 必需的type屬性規(guī)定腳本的MIME類型(媒體類型)。

7.4. 必需的屬性

7.5. 可選的屬性

8. <meta>元素

8.1. <meta>元素可提供有關(guān)頁面的元信息(meta-information), 比如針對(duì)搜索引擎和更新頻度的描述和關(guān)鍵詞。

8.2. <meta>標(biāo)簽提供關(guān)于html文檔的元數(shù)據(jù)。元數(shù)據(jù)不會(huì)顯示在頁面上, 但是對(duì)于機(jī)器是可讀的。

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

8.4. meta屬性

?8.4.1. 必須屬性

?8.4.2. 可選屬性

8.5. name屬性

?8.5.1. name屬性提供了名稱/值對(duì)中的名稱。html和xhtml標(biāo)簽都沒有指定任何預(yù)先定義的<meta>名稱。通常情況下, 您可以自由使用對(duì)自己和源文檔的讀者來說富有意義的名稱。

8.6. http-equiv屬性

?8.6.1. http-equiv屬性為名稱/值對(duì)提供了名稱。并指示服務(wù)器在發(fā)送實(shí)際的文檔之前先在要傳送給瀏覽器的MIME文檔頭部包含名稱/值對(duì)。

?8.6.2. 當(dāng)服務(wù)器向?yàn)g覽器發(fā)送文檔時(shí)，會(huì)先發(fā)送許多名稱/值對(duì)。雖然有些服務(wù)器會(huì)發(fā)送許多這種名稱/值對(duì), 但是所有服務(wù)器都至少要發(fā)送一個(gè): content-type:text/html。這將告訴瀏覽器準(zhǔn)備接受一個(gè)html文檔。

?8.6.3. 使用帶有http-equiv屬性的<meta>標(biāo)簽時(shí), 服務(wù)器將把名稱/值對(duì)添加到發(fā)送給瀏覽器的內(nèi)容頭部。例如, 添加:

這樣發(fā)送到瀏覽器的頭部就應(yīng)該包含:

content-type:text/html refresh:5;url=http://www.w3school.com.cn expires:31 Dec 2008

當(dāng)然, 只有瀏覽器可以接受這些附加的頭部字段, 并能以適當(dāng)?shù)姆绞绞褂盟鼈儠r(shí), 這些字段才有意義。

8.6.4. html5中規(guī)定文檔字符編碼使用如下方式:

charset屬性是html5中的新屬性, 且替換了: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

8.7. content屬性

?8.7.1. content屬性提供了名稱/值對(duì)中的值。該值可以是任何有效的字符串。

?8.7.2. content屬性始終要和name屬性或http-equiv屬性一起使用。

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

?8.8.1. 一些搜索引擎會(huì)利用meta元素的name和content屬性來索引您的頁面。

?8.8.2. 使用<meta>元素來描述文檔和定義文檔的關(guān)鍵詞。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta charset="utf-8" /><title>meta元素來描述文檔和定義文檔的關(guān)鍵詞</title><meta name="description" content="HTML examples" /><meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript" /></head><body><p>本文檔的meta屬性描述了該文檔和它的關(guān)鍵詞。</p></body> </html>

8.9. 使用<meta>元素來描述文檔, 指明創(chuàng)作者和編輯軟件。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta charset="utf-8" /><title>meta元素來指明創(chuàng)作者、修改者和編輯軟件</title><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屬性標(biāo)識(shí)了創(chuàng)作者和編輯軟件。</p></body> </html>

8.10. 使用<meta>元素把用戶重定向到新的網(wǎng)址。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta charset="utf-8" /><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>meta元素把用戶重定向到新的網(wǎng)址</title><meta http-equiv="refresh" content="5;url=http://www.w3school.com.cn" /></head><body><p>對(duì)不起。我們已經(jīng)搬家了。您的URL是<a href="http://www.w3school.com.cn">http://www.w3school.com.cn</a></p><p>您將在5秒內(nèi)被重定向到新的地址。</p><p>如果超過5秒后您仍然看到本消息, 請(qǐng)點(diǎn)擊上面的鏈接。</p></body> </html>

總結(jié)

以上是生活随笔為你收集整理的007_html头部元素的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

007_html头部元素

總結(jié)