ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML の
タグとそのコンテンツの詳細な紹介HTML の タグとそのコンテンツの詳細な紹介
- 巴扎黑オリジナル
- 2017-06-27 10:05:033826ブラウズ
ヘッド
タイトル
ベース
メタ
スクリプト
スタイル
标签用于定义文档的头部，它是所有头部元素的容器。
中的元素可以：
- 引用脚本
- 指示浏览器在哪里找到样式表
- 提供元信息
- 等等
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script></script>, <style></style>, <title></title>。
<title></title>
<title></title>定义文档的标题，它是 head 部分中唯一必需的元素。
<html><head><title>我的第一个HTML页面</title></head><body><p>body 元素的内容会显示在浏览器中。</p><p>title 元素的内容会显示在浏览器的标题栏中。</p></body></html>
浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。
<base>
<base>标签为页面上的所有链接规定默认地址或默认目标。
通常情况下，浏览器会从当前文档的URL中提取相应的元素来填写相对URL中的空白。
使用<base>标签可以改变这一点。浏览器随后将不再使用当前文档的URL，而使用指定的基本URL来解析所有的相对URL。这其中包括 <a></a>、<img src="/static/imghwm/default1.png" data-src="eg_smile.gif" class="lazy" alt="HTML の <head> タグとそのコンテンツの詳細な紹介" >、<link>、<form></form>标签中的 URL。
<html><head><base href="http://www.w3school.com.cn/i/" /><base target="_blank" /></head><body><img src="/static/imghwm/default1.png" data-src="eg_smile.gif" class="lazy" / alt="HTML の <head> タグとそのコンテンツの詳細な紹介" ><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>
<base>必需的属性：href
href，值为URL，规定页面中所有相对链接的基准URL。
<base>可选的属性：target
target，值为_blank、_parent、_self、_top、framename等，表明在何处打开页面中所有的链接。比如”_blank”意为在新窗口中打开。
<meta>
<meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。元数据总是以“名称/值”的形式被成对传递的。
<meta>标签位于文档的头部，不包含任何内容。<meta>标签的属性定义了与文档相关联的“名称/值”对。
<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>
<meta>必需的属性：content
content，值为一些文本，定义了与http-equiv或name属性相关的元信息。元数据总是以名称/值的形式被成对传递的。
eg：
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<meta> タグは、すべての head 要素のコンテナであるドキュメントの head を定義するために使用されます。 の要素は次のことができます:
参照スクリプト-- スタイルシートの場所をブラウザに指示
メタ情報を提供
その他
ドキュメントのヘッダーには、ドキュメントのタイトル、Web 上の位置、他のドキュメントとの関係など、ドキュメントのさまざまな属性と情報が記述されます。ほとんどのドキュメントのヘッダーに含まれるデータは、実際にはコンテンツとして読者に表示されません。
head セクションでは次のタグを使用できます:
<base>、<link>、<meta>、<script></script>、<style></style>、<title></title>。
<title></title>
<title></title> はドキュメントのタイトル、これは、head セクションで唯一必須の要素です。。 <meta http-equiv="charset" content="iso-8859-1"><meta http-equiv="expires" content="31 Dec 2008">
ブラウザはタイトルを特別な方法で使用し、通常はブラウザ ウィンドウのタイトル バーまたはステータス バーに配置します。同様に、ドキュメントがユーザーのリンク リスト、お気に入り、ブックマーク リストに追加されると、タイトルがドキュメントへのリンクのデフォルト名になります。
<base>
🎜🎜<base> タグは、ページ上のすべてのリンクのデフォルトのアドレスまたはデフォルトのターゲットを指定します。 🎜🎜🎜通常、ブラウザは現在のドキュメントの URL から対応する要素を抽出して、相対 URL のギャップを埋めます。 🎜これを変更するには、<base> タグを使用します。ブラウザは現在のドキュメントの URL を使用しなくなり、指定されたベース URL を使用してすべての相対 URL を解決します。これらには、<a></a>、<img src="/static/imghwm/default1.png" data-src="myscripts.js" class="lazy" alt="HTML の <head> タグとそのコンテンツの詳細な紹介" >、<link>、<form></form> が含まれます。タグ内のURL。 🎜<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /></head>🎜
<base>必須属性: 🎜href🎜🎜🎜🎜🎜href🎜、値は URL で、ページ内のすべての相対リンクのベース URL を指定します。 🎜🎜🎜<base> オプションの属性: 🎜target🎜🎜🎜🎜🎜target🎜、値は _blank、_parent、_self、_top、framename などで、どこで開くかを示します。ページすべてのリンク。たとえば、「_blank」は新しいウィンドウで開くことを意味します。 🎜🎜<meta>
🎜🎜<meta> 要素は、検索の説明やキーワードなど、ページに関するメタ情報を提供できますエンジンの種類と更新頻度。メタデータは常に名前と値のペアで渡されます。 🎜🎜🎜 <meta> タグはドキュメントの先頭にあり、コンテンツは含まれません。 <meta> タグの属性は、ドキュメントに関連付けられた名前と値のペアを定義します。 🎜<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>🎜
<meta>必須属性: 🎜content🎜🎜🎜🎜🎜content🎜、値は、http-equiv または name 属性に関連するメタ情報を定義するテキストです。メタデータは常に名前と値のペアで渡されます。 🎜🎜🎜例: 🎜<meta name="keywords" content="HTML,ASP,PHP,SQL">🎜
<meta>主なオプション属性: 🎜http-equiv🎜、🎜name🎜🎜🎜🎜🎜http-equiv🎜、値はcontent-type、 expires、refresh、set-cookie などは、content 属性を HTTP ヘッダーに関連付けます。 🎜🎜🎜http-equiv 属性は、名前と値のペアの名前を提供します。また、実際のドキュメントを送信する前に、ブラウザに送信されるメッセージのヘッダーに「名前/値」のペアを含めるようサーバーに指示します。 🎜例: 🎜<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>🎜リダイレクト (Web ページの再配置用): 🎜
<head><link href="shanghai.htm" rel="parent" charset="en" /></head>🎜説明キーワード: 🎜
<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>🎜🎜🎜name🎜、値は作成者、説明、キーワード、ジェネレーター、改訂版、その他などです。 content 属性を名前に設定します。 🎜🎜🎜 HTML タグにも XHTML タグにも、事前定義された名前は割り当てられません。一般に、あなた自身とソース文書の読者にとって意味のある名前を自由に使用できます。 🎜「キーワード」はよく使われる名前です。ドキュメントの一連のキーワードを定義します。一部の検索エンジンは、ドキュメントに遭遇したときにこれらのキーワードを使用してドキュメントを分類します。 🎜例:🎜
<meta name="keywords" content="HTML,ASP,PHP,SQL">
<link>
<link>链接一个外部样式表。属于在HTML中插入CSS样式表的三种方法之一。
<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>
<link>的主要属性：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>
<script></script>
<script></script>标签用于定义客户端脚本，比如 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" ></script>
<script></script>必需的属性：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><style></style>
<style></style>标签用于为 HTML 文档定义样式信息。
在HTML中插入CSS样式表的另外两种方法都是通过style完成的——内部样式表、内联样式。只不过内部样式表用的是style标签<style></style>，内联样式用的是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><style></style>必需的属性：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标签<title></title>、script标签<script></script>和style标签<style></style>有完整的关闭标签。
ヘッド
タイトル
ベース
メタ
リンク
スクリプト
スタイル
< ;head>
标签用于定义文档的头部，它是所有头部元素的容器。
中的元素可以：
- 引用脚本
- 指示浏览器在哪里找到样式表
- 提供元信息
- 等等
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script></script>, <style></style>, <title></title>。
<title></title>
<title></title>定义文档的标题，它是 head 部分中唯一必需的元素。
<html><head><title>我的第一个HTML页面</title></head><body><p>body 元素的内容会显示在浏览器中。</p><p>title 元素的内容会显示在浏览器的标题栏中。</p></body></html>
浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。
<base>
<base>标签为页面上的所有链接规定默认地址或默认目标。
通常情况下，浏览器会从当前文档的URL中提取相应的元素来填写相对URL中的空白。
使用<base>标签可以改变这一点。浏览器随后将不再使用当前文档的URL，而使用指定的基本URL来解析所有的相对URL。这其中包括 <a></a>、<img src="/static/imghwm/default1.png" data-src="eg_smile.gif" class="lazy" alt="HTML の <head> タグとそのコンテンツの詳細な紹介" >、<link>、<form></form>标签中的 URL。
<html><head><base href="http://www.w3school.com.cn/i/" /><base target="_blank" /></head><body><img src="/static/imghwm/default1.png" data-src="eg_smile.gif" class="lazy" / alt="HTML の <head> タグとそのコンテンツの詳細な紹介" ><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>
<base>必需的属性：href
href，值为URL，规定页面中所有相对链接的基准URL。
<base>可选的属性：target
target，值为_blank、_parent、_self、_top、framename等，表明在何处打开页面中所有的链接。比如”_blank”意为在新窗口中打开。
<meta>
<meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。元数据总是以“名称/值”的形式被成对传递的。
<meta>标签位于文档的头部，不包含任何内容。<meta>标签的属性定义了与文档相关联的“名称/值”对。
<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>
<meta>必需的属性：content
content，值为一些文本，定义了与http-equiv或name属性相关的元信息。元数据总是以名称/值的形式被成对传递的。
eg：
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<meta> タグは、すべての head 要素のコンテナであるドキュメントの head を定義するために使用されます。 の要素は次のことができます:
参照スクリプト-- スタイルシートの場所をブラウザに指示
メタ情報を提供
その他
ドキュメントのヘッダーには、ドキュメントのタイトル、Web 上の位置、他のドキュメントとの関係など、ドキュメントのさまざまな属性と情報が記述されます。ほとんどのドキュメントのヘッダーに含まれるデータは、実際にはコンテンツとして読者に表示されません。
head セクションでは次のタグを使用できます:
<base>、<link>、<meta>、<script></script>、<style></style>、<title></title>。
<title></title>
<title></title> はドキュメントのタイトル、これは、head セクションで唯一必須の要素です。。 <meta http-equiv="charset" content="iso-8859-1"><meta http-equiv="expires" content="31 Dec 2008">
ブラウザはタイトルを特別な方法で使用し、通常はブラウザ ウィンドウのタイトル バーまたはステータス バーに配置します。同様に、ドキュメントがユーザーのリンク リスト、お気に入り、ブックマーク リストに追加されると、タイトルがドキュメントへのリンクのデフォルト名になります。
<base>
🎜🎜<base> タグは、ページ上のすべてのリンクのデフォルトのアドレスまたはデフォルトのターゲットを指定します。 🎜🎜🎜通常、ブラウザは現在のドキュメントの URL から対応する要素を抽出して、相対 URL のギャップを埋めます。 🎜これを変更するには、<base> タグを使用します。ブラウザは現在のドキュメントの URL を使用しなくなり、指定されたベース URL を使用してすべての相対 URL を解決します。これらには、<a></a>、<img src="/static/imghwm/default1.png" data-src="myscripts.js" class="lazy" alt="HTML の <head> タグとそのコンテンツの詳細な紹介" >、<link>、<form></form> が含まれます。タグ内のURL。 🎜<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /></head>🎜
<base>必須属性: 🎜href🎜🎜🎜🎜🎜href🎜、値は URL で、ページ内のすべての相対リンクのベース URL を指定します。 🎜🎜🎜<base> オプションの属性: 🎜target🎜🎜🎜🎜🎜target🎜、値は _blank、_parent、_self、_top、framename などで、どこで開くかを示します。ページすべてのリンク。たとえば、「_blank」は新しいウィンドウで開くことを意味します。 🎜🎜<meta>
🎜🎜<meta> 要素は、検索の説明やキーワードなど、ページに関するメタ情報を提供できますエンジンの種類と更新頻度。メタデータは常に名前と値のペアで渡されます。 🎜🎜🎜 <meta> タグはドキュメントの先頭にあり、コンテンツは含まれません。 <meta> タグの属性は、ドキュメントに関連付けられた名前と値のペアを定義します。 🎜<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>🎜
<meta>必須属性: 🎜content🎜🎜🎜🎜🎜content🎜、値は、http-equiv または name 属性に関連するメタ情報を定義するテキストです。メタデータは常に名前と値のペアで渡されます。 🎜🎜🎜例: 🎜<meta name="keywords" content="HTML,ASP,PHP,SQL">🎜
<meta>主なオプション属性: 🎜http-equiv🎜、🎜name🎜🎜🎜🎜🎜http-equiv🎜、値はcontent-type、 expires、refresh、set-cookie などは、content 属性を HTTP ヘッダーに関連付けます。 🎜🎜🎜http-equiv 属性は、名前と値のペアの名前を提供します。また、実際のドキュメントを送信する前に、ブラウザに送信されるメッセージのヘッダーに「名前/値」のペアを含めるようサーバーに指示します。 🎜例: 🎜<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>🎜リダイレクト (Web ページの再配置用): 🎜
<head><link href="shanghai.htm" rel="parent" charset="en" /></head>🎜説明キーワード: 🎜
<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>🎜🎜🎜name🎜、値は作成者、説明、キーワード、ジェネレーター、改訂版、その他などです。 content 属性を名前に設定します。 🎜🎜🎜 HTML タグも XHTML タグも、事前定義された名前は割り当てられません。一般に、あなた自身とソース文書の読者にとって意味のある名前を自由に使用できます。 🎜「キーワード」はよく使われる名前です。ドキュメントの一連のキーワードを定義します。一部の検索エンジンは、ドキュメントに遭遇したときにこれらのキーワードを使用してドキュメントを分類します。 🎜例:🎜
<meta name="keywords" content="HTML,ASP,PHP,SQL">
<link>
<link>链接一个外部样式表。属于在HTML中插入CSS样式表的三种方法之一。
<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>
<link>的主要属性：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>
<script></script>
<script></script>标签用于定义客户端脚本，比如 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" ></script>
<script></script>必需的属性：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><style></style>
<style></style>标签用于为 HTML 文档定义样式信息。
在HTML中插入CSS样式表的另外两种方法都是通过style完成的——内部样式表、内联样式。只不过内部样式表用的是style标签<style></style>，内联样式用的是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><style></style>必需的属性：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标签<title></title>、script标签<script></script>和style标签<style></style>有完整的关闭标签。
以上がHTML の
タグとそのコンテンツの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。