搜尋

首頁 >web前端 >html教學 >HTML中的標籤及其內容的詳細介紹

HTML中的標籤及其內容的詳細介紹

巴扎黑
巴扎黑原創
2017-06-27 10:05:033720瀏覽




    • ##title

    • base

    • meta

    • ##link

    • ##script

    • style

#93f0f5c25f18dab9d176bd4f6de5d30e

#93f0f5c25f18dab9d176bd4f6de5d30e

93f0f5c25f18dab9d176bd4f6de5d30e 標籤用於定義文件的頭部，它是所有頭部元素的容器。
93f0f5c25f18dab9d176bd4f6de5d30e
中的元素可以： - 引用腳本

-

指示瀏覽器在哪裡找到樣式表 - 提供元信息 - 等等 文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題、在Web 中的位置以及和其他文件的關係等。絕大多數文檔頭部包含的資料都不會真正作為內容顯示給讀者。 下面這些標籤可用在head 部分：dde6fb694e6711ae5e6f381704c04ae4, 2cdf5bf648cf2f33323966d7f58a7f3f

,

e8e496c15ba93d81f6ea4fe5f55a2244, 3f1c4e4b6b16bbbd69b2ee476dc4f83a

,
c9ccee2e6ea535a969eb3f532ad9fe89

,  b2386ffb911b14667cb8f0f91ea547a7。 b2386ffb911b14667cb8f0f91ea547a7

#b2386ffb911b14667cb8f0f91ea547a7 定義文件的標題，

它是head 部分中唯一必需的元素

。 

<html><head><title>我的第一个HTML页面</title></head><body><p>body 元素的内容会显示在浏览器中。</p><p>title 元素的内容会显示在浏览器的标题栏中。</p></body></html>

瀏覽器會以特殊的方式來使用標題，並且通常會把它放置在瀏覽器視窗的標題列或狀態列上。同樣，當把文件加入使用者的連結清單或收藏夾或書籤清單時，標題將成為該文件連結的預設名稱。


dde6fb694e6711ae5e6f381704c04ae4#dde6fb694e6711ae5e6f381704c04ae4標籤為頁面上的所有連結規定預設位址或預設目標。 通常情況下，瀏覽器會從目前文件的URL中提取對應的元素來填寫相對URL中的空白。 使用

dde6fb694e6711ae5e6f381704c04ae4

標籤可以改變這一點。瀏覽器隨後將不再使用目前文件的URL，而使用指定的基本URL來解析所有的相對URL。這其中包括3499910bf9dac5ae3c52d5ede7383485、a1f02c36ba31691bcfe87b2722de723b、

2cdf5bf648cf2f33323966d7f58a7f3f
、

ff9c23ada1bcecdd1a0fb5d5a0f18437標籤中的URL 。 

<html><head><base href="http://www.w3school.com.cn/i/" /><base target="_blank" /></head><body><img src="eg_smile.gif" /><br /><p>图像的地址为相对地址。由于我们已经在 head 部分规定了一个基准 URL，浏览器将在如下地址寻找图片：</p><p>"http://www.w3school.com.cn/i/eg_smile.gif"</p><br /><br /><p><a href="http://www.w3school.com.cn">W3School</a></p><p>请注意，链接会在新窗口中打开，即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p></body></html>

dde6fb694e6711ae5e6f381704c04ae4

必要的屬性：href

href

，值為URL，規定頁面中所有相對連結的基準URL。

dde6fb694e6711ae5e6f381704c04ae4

可選的屬性：target

target，值為_blank、_parent、_self、_top、framename等，顯示在何處開啟頁面中所有的連結。例如”_blank”意為在新視窗中開啟。

e8e496c15ba93d81f6ea4fe5f55a2244

#e8e496c15ba93d81f6ea4fe5f55a2244元素可提供有關頁面的元資訊（meta-information ），例如針對搜尋引擎和更新頻度的描述和關鍵字。元資料總是以「名稱/值」的形式被成對傳遞的。

e8e496c15ba93d81f6ea4fe5f55a2244
標籤位於文件的頭部，不包含任何內容。

e8e496c15ba93d81f6ea4fe5f55a2244標籤的屬性定義了與文件相關聯的「名稱/值」對。 

<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="author"content="w3school.com.cn"><meta name="revised"content="David Yang,8/1/07"><meta name="generator"content="Dreamweaver 8.0en"></head>

e8e496c15ba93d81f6ea4fe5f55a2244

必要的屬性：

content

content，值為一些文本，定義了與http-equiv或name屬性相關的元資訊。元資料總是以名稱/值的形式被成對傳遞的。

eg：

<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
e8e496c15ba93d81f6ea4fe5f55a2244

主要的可選屬性：
http-equiv

、
name

http-equiv
，值是content-type、expires、refresh、set-cookie等，把content 屬性關聯到HTTP 頭。

http-equiv 屬性為「名稱/值」對提供了名稱。並指示伺服器在發送實際的文件之前先在要傳送給瀏覽器的封包頭部包含「名稱/值」對。

eg：
<meta http-equiv="charset" content="iso-8859-1"><meta http-equiv="expires" content="31 Dec 2008">

重定向（用於網頁搬家）：

<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /></head>

描述關鍵字：

<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="description"content="HTML examples"><meta name="keywords"content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"></head>
#########name###，值為author、description、keywords、generator、revised、others等，把content 屬性關聯到一個名稱。 #########HTML 和 XHTML 標籤都沒有指定任何預先定義的  名稱。通常情況下，您可以自由使用對自己和來源文件的讀者來說具有意義的名稱。 ###“keywords” 是一個常用到的名稱。它為文檔定義了一組關鍵字。某些搜尋引擎在遇到這些關鍵字時，會用這些關鍵字來分類文件。 ###eg：###
<meta name="keywords" content="HTML,ASP,PHP,SQL">

2cdf5bf648cf2f33323966d7f58a7f3f

2cdf5bf648cf2f33323966d7f58a7f3f链接一个外部样式表。属于在HTML中插入CSS样式表的三种方法之一。

<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>

2cdf5bf648cf2f33323966d7f58a7f3f的主要属性：href，rel，type，charset

charset，指明被链接文档的字符集，如UTF-8。但是几乎没有主流浏览器支持 link标签的charset 属性。

在下面的例子中，charset 属性指示被链接文档是用英文编写的：

<head><link href="shanghai.htm" rel="parent" charset="en" /></head>

href，规定被链接文档的位置（URL）。

这个不解释了。

rel 属性指示被链接的文档是一个样式表。它的属性值只有 “stylesheet” 得到了所有浏览器的支持。其他值只得到了部分地支持。

<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>

type 属性规定被链接文档的 MIME 类型。该属性最常见的 MIME 类型是 “text/css”，该类型描述样式表。

<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>

3f1c4e4b6b16bbbd69b2ee476dc4f83a

3f1c4e4b6b16bbbd69b2ee476dc4f83a 标签用于定义客户端脚本，比如 JavaScript。

script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。

  • 直接包含脚本语句

<html><body><script type="text/javascript">document.write("<h1>Hello World!</h1>")</script> </body></html>

  • 通过 src 属性指向外部脚本文件

<script type="text/javascript" src="myscripts.js"></script>

3f1c4e4b6b16bbbd69b2ee476dc4f83a必需的属性：type

type，规定脚本的 MIME 类型。

对于不支持脚本的浏览器：

<!DOCTYPE html><html><body><script type="text/javascript">document.write("Hello World!")</script><noscript>Sorry, your browser does not support JavaScript!</noscript><p>不支持 JavaScript 的浏览器将显示 noscript 元素中的文本。</p></body></html>

c9ccee2e6ea535a969eb3f532ad9fe89

c9ccee2e6ea535a969eb3f532ad9fe89 标签用于为 HTML 文档定义样式信息。

在HTML中插入CSS样式表的另外两种方法都是通过style完成的——内部样式表、内联样式。只不过内部样式表用的是style标签c9ccee2e6ea535a969eb3f532ad9fe89，内联样式用的是style属性。

  • 内联样式

<p style="color:blue;margin-left:20px">This is a paragraph.</p>

  • 内部样式表

<html><head><style type="text/css">h1 {color: red}p {color: blue}</style></head><body><h1>header 1</h1><p>A paragraph.</p></body></html>

也可以通过“id选择器”和“class选择器”进行：

  • id选择器

<!DOCTYPE html><html><head><style>#liuhaibo{text-align:center;color:red;} </style></head><body><p id="liuhaibo">Hello World!</p><p>This paragraph is not affected by the style.</p></body></html>

  • class选择器

<!DOCTYPE html><html><head><style>.center{text-align:center;}</style></head><body><h1 class="center">标题居中</h1><p class="center">段落居中。</p> </body></html>

你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class=”center” 让该元素的文本居中，而h1则不可以。

<!DOCTYPE html><html><head><style>p.center{text-align:center;}</style></head><body><h1 class="center">This heading will not be affected</h1><p class="center">This paragraph will be center-aligned.</p> </body></html>

c9ccee2e6ea535a969eb3f532ad9fe89必需的属性：type

type，唯一可能的值是“text/css”，规定样式表的 MIME 类型。

也可以通过style标签创建一个没有下划线的链接：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Content-Language" content="zh-cn" /></head><body><a href="/example/html/lastpage.html" style="text-decoration:none">这是一个链接！</a></body></html>

Note：只有title标签b2386ffb911b14667cb8f0f91ea547a7、script标签3f1c4e4b6b16bbbd69b2ee476dc4f83a和style标签c9ccee2e6ea535a969eb3f532ad9fe89有完整的关闭标签。



  • head

    • title

    • #base

    • meta

    • #link

    • script

    • style

93f0f5c25f18dab9d176bd4f6de5d30e

93f0f5c25f18dab9d176bd4f6de5d30e 標籤用於定義文件的頭部，它是所有頭部元素的容器。

93f0f5c25f18dab9d176bd4f6de5d30e 中的元素可以：
- 引用腳本
- 指示瀏覽器在哪裡找到樣式表
- 提供元信息
- 等等
文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題、在Web 中的位置以及和其他文件的關係等。絕大多數文檔頭部包含的資料都不會真正作為內容顯示給讀者。

下面這些標籤可用在head 部分：dde6fb694e6711ae5e6f381704c04ae4, 2cdf5bf648cf2f33323966d7f58a7f3f, e8e496c15ba93d81f6ea4fe5f55a2244, 3f1c4e4b6b16bbbd69b2ee476dc4f83a, c9ccee2e6ea535a969eb3f532ad9fe89,  b2386ffb911b14667cb8f0f91ea547a7。

b2386ffb911b14667cb8f0f91ea547a7

#b2386ffb911b14667cb8f0f91ea547a7 定義文件的標題，它是head 部分中唯一必需的元素。 

<html><head><title>我的第一个HTML页面</title></head><body><p>body 元素的内容会显示在浏览器中。</p><p>title 元素的内容会显示在浏览器的标题栏中。</p></body></html>

瀏覽器會以特殊的方式來使用標題，並且通常會把它放置在瀏覽器視窗的標題列或狀態列上。同樣，當把文件加入使用者的連結清單或收藏夾或書籤清單時，標題將成為該文件連結的預設名稱。

dde6fb694e6711ae5e6f381704c04ae4

#dde6fb694e6711ae5e6f381704c04ae4標籤為頁面上的所有連結規定預設位址或預設目標。

通常情況下，瀏覽器會從目前文件的URL中提取對應的元素來填寫相對URL中的空白。
使用dde6fb694e6711ae5e6f381704c04ae4標籤可以改變這一點。瀏覽器隨後將不再使用目前文件的URL，而使用指定的基本URL來解析所有的相對URL。這其中包括3499910bf9dac5ae3c52d5ede7383485、a1f02c36ba31691bcfe87b2722de723b、2cdf5bf648cf2f33323966d7f58a7f3f、ff9c23ada1bcecdd1a0fb5d5a0f18437標籤中的URL 。 

<html><head><base href="http://www.w3school.com.cn/i/" /><base target="_blank" /></head><body><img src="eg_smile.gif" /><br /><p>图像的地址为相对地址。由于我们已经在 head 部分规定了一个基准 URL，浏览器将在如下地址寻找图片：</p><p>"http://www.w3school.com.cn/i/eg_smile.gif"</p><br /><br /><p><a href="http://www.w3school.com.cn">W3School</a></p><p>请注意，链接会在新窗口中打开，即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p></body></html>

dde6fb694e6711ae5e6f381704c04ae4必要的屬性：href

href，值為URL，規定頁面中所有相對連結的基準URL。

dde6fb694e6711ae5e6f381704c04ae4可選的屬性：target

target，值為_blank、_parent、_self、_top、framename等，顯示在何處開啟頁面中所有的連結。例如”_blank”意為在新視窗中開啟。

e8e496c15ba93d81f6ea4fe5f55a2244

#e8e496c15ba93d81f6ea4fe5f55a2244元素可提供有關頁面的元資訊（meta-information ），例如針對搜尋引擎和更新頻度的描述和關鍵字。元資料總是以「名稱/值」的形式被成對傳遞的。

e8e496c15ba93d81f6ea4fe5f55a2244標籤位於文件的頭部，不包含任何內容。 e8e496c15ba93d81f6ea4fe5f55a2244標籤的屬性定義了與文件相關聯的「名稱/值」對。 

<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="author"content="w3school.com.cn"><meta name="revised"content="David Yang,8/1/07"><meta name="generator"content="Dreamweaver 8.0en"></head>

e8e496c15ba93d81f6ea4fe5f55a2244必要的屬性：content

content，值為一些文本，定義了與http-equiv或name屬性相關的元資訊。元資料總是以名稱/值的形式被成對傳遞的。

eg：

<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">

e8e496c15ba93d81f6ea4fe5f55a2244主要的可選屬性：http-equiv、name

http-equiv，值是content-type、expires、refresh、set-cookie等，把content 屬性關聯到HTTP 頭。

http-equiv 屬性為「名稱/值」對提供了名稱。並指示伺服器在發送實際的文件之前先在要傳送給瀏覽器的封包頭部包含「名稱/值」對。
eg：

<meta http-equiv="charset" content="iso-8859-1"><meta http-equiv="expires" content="31 Dec 2008">

重定向（用於網頁搬家）：

<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /></head>

描述關鍵字：

<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="description"content="HTML examples"><meta name="keywords"content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"></head>

name，值為author、description、keywords、generator、revised、others等，把content 屬性關聯到一個名稱。

HTML 和 XHTML 標籤都沒有指定任何預先定義的  名稱。通常情況下，您可以自由使用對自己和來源文件的讀者來說具有意義的名稱。
“keywords” 是一個常用到的名稱。它為文檔定義了一組關鍵字。某些搜尋引擎在遇到這些關鍵字時，會用這些關鍵字來分類文件。
eg：

<meta name="keywords" content="HTML,ASP,PHP,SQL">

2cdf5bf648cf2f33323966d7f58a7f3f

2cdf5bf648cf2f33323966d7f58a7f3f链接一个外部样式表。属于在HTML中插入CSS样式表的三种方法之一。

<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>

2cdf5bf648cf2f33323966d7f58a7f3f的主要属性：href，rel，type，charset

charset，指明被链接文档的字符集，如UTF-8。但是几乎没有主流浏览器支持 link标签的charset 属性。

在下面的例子中，charset 属性指示被链接文档是用英文编写的：

<head><link href="shanghai.htm" rel="parent" charset="en" /></head>

href，规定被链接文档的位置（URL）。

这个不解释了。

rel 属性指示被链接的文档是一个样式表。它的属性值只有 “stylesheet” 得到了所有浏览器的支持。其他值只得到了部分地支持。

<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>

type 属性规定被链接文档的 MIME 类型。该属性最常见的 MIME 类型是 “text/css”，该类型描述样式表。

<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>

3f1c4e4b6b16bbbd69b2ee476dc4f83a

3f1c4e4b6b16bbbd69b2ee476dc4f83a 标签用于定义客户端脚本，比如 JavaScript。

script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。

  • 直接包含脚本语句

<html><body><script type="text/javascript">document.write("<h1>Hello World!</h1>")</script> </body></html>

  • 通过 src 属性指向外部脚本文件

<script type="text/javascript" src="myscripts.js"></script>

3f1c4e4b6b16bbbd69b2ee476dc4f83a必需的属性：type

type，规定脚本的 MIME 类型。

对于不支持脚本的浏览器：

<!DOCTYPE html><html><body><script type="text/javascript">document.write("Hello World!")</script><noscript>Sorry, your browser does not support JavaScript!</noscript><p>不支持 JavaScript 的浏览器将显示 noscript 元素中的文本。</p></body></html>

c9ccee2e6ea535a969eb3f532ad9fe89

c9ccee2e6ea535a969eb3f532ad9fe89 标签用于为 HTML 文档定义样式信息。

在HTML中插入CSS样式表的另外两种方法都是通过style完成的——内部样式表、内联样式。只不过内部样式表用的是style标签c9ccee2e6ea535a969eb3f532ad9fe89，内联样式用的是style属性。

  • 内联样式

<p style="color:blue;margin-left:20px">This is a paragraph.</p>

  • 内部样式表

<html><head><style type="text/css">h1 {color: red}p {color: blue}</style></head><body><h1>header 1</h1><p>A paragraph.</p></body></html>

也可以通过“id选择器”和“class选择器”进行：

  • id选择器

<!DOCTYPE html><html><head><style>#liuhaibo{text-align:center;color:red;} </style></head><body><p id="liuhaibo">Hello World!</p><p>This paragraph is not affected by the style.</p></body></html>

  • class选择器

<!DOCTYPE html><html><head><style>.center{text-align:center;}</style></head><body><h1 class="center">标题居中</h1><p class="center">段落居中。</p> </body></html>

你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class=”center” 让该元素的文本居中，而h1则不可以。

<!DOCTYPE html><html><head><style>p.center{text-align:center;}</style></head><body><h1 class="center">This heading will not be affected</h1><p class="center">This paragraph will be center-aligned.</p> </body></html>

c9ccee2e6ea535a969eb3f532ad9fe89必需的属性：type

type，唯一可能的值是“text/css”，规定样式表的 MIME 类型。

也可以通过style标签创建一个没有下划线的链接：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Content-Language" content="zh-cn" /></head><body><a href="/example/html/lastpage.html" style="text-decoration:none">这是一个链接！</a></body></html>

Note：只有title标签b2386ffb911b14667cb8f0f91ea547a7、script标签3f1c4e4b6b16bbbd69b2ee476dc4f83a和style标签c9ccee2e6ea535a969eb3f532ad9fe89有完整的关闭标签。

以上是HTML中的標籤及其內容的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：frameset標籤設計頁面注意事項下一篇：frameset標籤設計頁面注意事項

相關文章

看更多