検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML_html/css_WEB-ITnose の タグとそのコンテンツ

HTML_html/css_WEB-ITnose の タグとそのコンテンツ

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
2016-06-24 11:38:061267ブラウズ

  • ヘッド
  • タイトル
  • ベース
  • メタ
  • リンク
  • スクリプト
  • スタイル

    • 900b5bb597a524d01f1dff3eb9a16827 の要素は次のことができます:

    -
    参照スクリプト -
    スタイルシートの場所をブラウザに指示する -
    メタ情報を提供する - など
    ドキュメントのヘッダーはドキュメントを説明しますドキュメントのタイトル、Web 上の場所、他のドキュメントとの関係など、さまざまな属性と情報。ほとんどのドキュメントのヘッダーに含まれるデータは、実際にはコンテンツとして読者に表示されません。
    ヘッド セクションでは次のタグを使用できます:

    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 要素は、検索エンジンの説明やキーワード、更新頻度などのページに関するメタ情報を提供します。メタデータは常に名前と値のペアで渡されます。

    タグはドキュメントの先頭にあり、コンテンツは含まれません。 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 属性に関連するメタ情報を定義するテキストです。メタデータは常に名前と値のペアで渡されます。 例: 

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

    e8e496c15ba93d81f6ea4fe5f55a2244主なオプション属性:

    http-equiv

    、name

    http-equiv

    、値はcontent-type、expires、refresh、set-cookieなどです。 ., put content 属性は HTTP ヘッダーに関連付けられます。 http-equiv 属性は、名前と値のペアの名前を提供します。また、実際のドキュメントを送信する前に、ブラウザに送信されるメッセージのヘッダーに「名前/値」のペアを含めるようサーバーに指示します。

    例: 

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

    リダイレクト (Web ページの再配置用): 

    <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

    、値は作成者、説明、キーワード、ジェネレーター、改訂版、その他などで、content 属性を名前。 HTML タグにも XHTML タグにも、事前定義された名前は割り当てられません。一般に、あなた自身とソース文書の読者にとって意味のある名前を自由に使用できます。

    「キーワード」はよく使われる名前です。ドキュメントの一連のキーワードを定義します。一部の検索エンジンは、ドキュメントに遭遇したときにこれらのキーワードを使用してドキュメントを分類します。

    例:
    rrree
    2cdf5bf648cf2f33323966d7f58a7f3f

    2cdf5bf648cf2f33323966d7f58a7f3f外部スタイルシートへのリンク。 CSS スタイル シートを HTML に挿入する 3 つの方法のうちの 1 つ。 

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

    2cdf5bf648cf2f33323966d7f58a7f3f の主な属性:

    href

    、rel、type、charset

    charset

    。UTF-8 など、リンクされたドキュメントの文字セットを示します。しかし、リンク タグの charset 属性をサポートする主流ブラウザはほとんどありません。 次の例では、charset 属性は、リンクされたドキュメントが英語で書かれていることを示しています: 

    <head><link rel="stylesheet" type="text/css" href="theme.css" /></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有完整的关闭标签。

    版权声明：本文为博主原创文章，未经博主允许不得转载。

    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：CSS の！ important_html/css_WEB-ITnose次の記事：CSS の！ important_html/css_WEB-ITnose

    関連記事

    続きを見る