ホームページ > 記事 > ウェブフロントエンド > HTMLのheadヘッダーの実装

HTMLのheadヘッダーの実装

零到壹度オリジナル: 2018-03-29 14:39:142140ブラウズ

この記事では主に HTML ヘッダーの実装に関する記事を紹介します。参考になると思います。編集者をフォローして見てみましょう。

HTML Head

head 要素は、... タグの間に表示されるコンテンツのヘッダー情報を定義します。文書。ヘッダーで定義した内容はブラウザウィンドウのテキスト部分には表示されません。

head 要素は特殊であり、、<base>、<link> の特定のタグのみを配置できます。 ; 、<style> 次に、これらのタグを個別に紹介します。 <p><p><title> タグ <strong><title> タグの唯一の機能は、ページのタイトルを定義することです。例: <p><title> Hello world! </style>

ほとんどのブラウザでは、ページのタイトルはブラウザウィンドウまたはタブのタイトルバーに表示され、訪問者の閲覧履歴リストにも表示されます。そしてブックマーク。

さらに重要なことは、検索エンジンはページのタイトルを使用してページの内容を大まかに把握し、ページのタイトルを検索結果の各エントリのリンクテキストとして使用することも判断する際の重要な要素です。検索結果におけるページの関連性。したがって、ページタイトルはSEOの重要なコンテンツであり、適切なページタイトルは検索エンジンの結果のランキングを向上させ、より良いユーザーエクスペリエンスを得ることができます。

タグ

タグは、ページ上のすべてのリンクのデフォルトのアドレスとデフォルトのターゲットウィンドウを指定し、href 属性を通じてデフォルトの URL アドレスを設定します。ターゲット属性ターゲットウィンドウ。

デフォルトのアドレスまたはデフォルトのターゲットウィンドウを指定した後、ページ上のリンクをクリックすると、http のないリンクの場合、ブラウザは、target 属性が設定されていないリンクのアドレスの前に、href で設定された URL アドレスを挿入します。ブラウザはベースのターゲットによって設定されたターゲットに従ってウィンドウを開きます。例:

<!DOCTYPE html>
<html>
<head>
<base href="http://www.abc.wcom
<body>
<a href="http://www.abc.com/ ">首页</a>
<a href="bbs/index.html" target="_self ">论坛</a>
</body>
</html>

上記のコードでは、リンクを新しいウィンドウで開くことを意味します。

「ホームページ」リンクにはhttpが含まれており、ターゲットが設定されていない場合は、新しいWebサイトが新しいウィンドウで開きます。「フォーラム」リンクには http がありませんが、target 属性が設定されており、アドレスの前に http://www.abc.com/

タグが挿入されます。 Web ページ内のすべての相対 URL が正しいアドレスに解決できることを確認し、ドキュメントが移動された場合にすべての相対 URL が正しく解決されるようにします。

タグ

は、Webページのヘッダーにある補助タグです。通常、ページのキーワード、ページの説明などを定義するために使用されます。

タグによって提供される情報はユーザーには表示されず、ページには表示されませんが、検索エンジンには表示されるため、検索エンジンスパイダーがこのページの情報を検索しやすくなります。したがって、この情報はSEOにとって重要なコンテンツであり、Webサイトが検索エンジンに検索される可能性を大幅に高めることができます。

タグには、name 属性と http-equiv 属性という 2 つの重要な属性があります。メタデータの種類は name または http-equiv 属性によって指定され、メタデータの内容は content によって指定されます。異なるメタデータデータにより、異なる Web ページ機能が可能になります。

1. name 属性

name 属性は主に Web ページを説明するために使用され、最も一般的なものは、Web ページを説明するキーワード、Web ページのコンテンツの説明、検索エンジンのガイド、作成者、著作権記述などです。 Web ページ上の情報を検索および検索できます。例:

<head>
<meta name="keywords" content="HTML, CSS, RWD" />
<meta name="description" content="Study HTML, CSS, RWD for free" />
<meta name="robots" content="all" />
<meta name="author" content="歪脖网, www.waibo.wang" />
<meta name="copyright" content="创意共享，只要保持署名和非商用，可以自由转载" />
</head>

name 属性の主な値と機能を表 1-1 に示します。

表 1-1 name 属性の値と機能

HTMLのheadヘッダーの実装

2。 equiv 属性

名前が示すように、http-equiv は HTTP ヘッダーの役割に相当し、ブラウザーが Web ページのコンテンツを正確かつ正確に表示できるように、ブラウザーに有用な情報を提供するために使用されます。

http-equiv 属性は、主に Web ページのエンコード文字セット、更新頻度、有効期間などを定義するために使用されます:

1) Web ページのエンコード文字セット

HTML4 では、ファイルのメディア形式Content-Type 属性値 Type (MIME タイプ) と使用されるエンコード文字セットを通じて指定されると、ブラウザーはこれを使用して、ファイルを読み取り、ファイルのコンテンツを表示する形式とエンコードを決定します。

HTMLファイルのMIMEタイプはtext/htmlに固定されており、エンコード文字セットは必要に応じて指定できます。例:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

HTML5 では、Web ページで使用されるエンコード文字セットを定義するために、meta 要素の charset 属性を直接使用するだけで済みます。例:

<meta charset="utf-8" />

在HTML5中，上述两种方式均有效，但只能使用一种，不能同时混合使用两种方式。并且，推荐使用 utf-8 编码字符集。

2）刷新频率Refresh

通过 refresh 属性值来指定让网页多长时间（秒）刷新自己，或在多长时间后自动跳转到指定的网页。如，让网页在当前页面停留 5 秒后，自动跳转到 http://www.abc.com/：

<meta http-equiv="refresh" content="5; url=http://www.abc.com/" />

3）网页的有效期

通过Expires属性值来指定网页在缓存中的过期时间，一旦网页过期，必须从服务器上重新加载。时间必须使用GMT格式（格林威治时间格式）。如：

说明：

网页头部的这些元素中，title、keywords、description的作用非常重要，因为搜索引擎的机器人会自动检索页面的keywords和decription，并将其加入到自己的数据库，再根据关键词的密度对网站进行排序。

对于任何站长而言，可能都有同样的感受，无论网站做得再精彩，在浩如烟海的网络世界中，也如一叶扁舟，不为人知。

人们往往忙于在搜索引擎中提交自己的网站，或在知名网站加入自己网站的链接，或在各大论坛中发帖子宣传自己的网站，忙得不亦乐乎，却忽视了标签的强大功效。

因此，要让网站获得很好的排名，必须充分利用 meta标签，设置好每个页面的 keywords 和 decription，来增加网站对各大搜索引擎的曝光率，提高网站的访问量，进而提升网站的收益。

样式表

样式表，即CSS（Cascading Style Sheet层叠样式表），用它来控制网页的表现，如果要让网站看起来很吸引人，就离不开CSS。

在HTML文档的头部，可以通过两种方式来为网页定义样式：

(1) 使用link元素

在HTML文档的头部，可以通过link元素链接到外部样式表，让网页应用该外部样式表定义的样式规则。

在link 标签中，通过的 rel 属性来定义本HTML文档与被链接文档之间的关系，rel = "stylesheet" 表明引入的文件是样式表；通过href属性定义外部资源（即CSS文件）的URL地址，URL可以是相对路径，也可以是相对路径，相对路径是相对于本HTML文档而言的。

可以在一个HTML文档中添加多个 link 元素，让它们分别指向不同的样式文件，就可以给一个网页添加多个样式表。

由于 link 元素为空元素，它只有开始标签，没有结束标签，所以，要在开始标签的结尾处加上 / 来结束该元素。如：

<link rel="stylesheet" href="reset.css" />

上述代码表示，为本文档引入文件名称为 reset.css 的外部样式表，该样式表文件与本文档位于相同目录下。

(2) 使用style元素

可以在HTML文档的头部插入一个 style 元素，让网页应用该 style 元素中定义的样式规则。如：

<style>
body { background-color:yellow; }
p { color:blue; }
</style>

上述代码表示，指定本HTML文档的背景颜色为黄色（yellow）、本HTML文档中的所有段落的文本颜色为蓝色（blue）。

脚本

在HTML文档中，可以通过Javascript 脚本主要用来定义特殊的行为，但Javascript并不是必需的。

大多数情况下，Javascript 都是在由HTML和CSS 构建的核心体验的基础上，增强访问者的体验，主要用来增强页面的交互性，如实现表单验证、动态显示隐藏内容、加载数据并动态地更新页面、操作 audio 和 video 元素控件等等。

HTML文档中，有两个用于标识脚本的元素，它们是 script 元素和 noscript 元素：

1、script 元素

script 元素既可以直接在页面中嵌入Javascript脚本，也可以从外部文件加载脚本。

(1) 嵌入脚本

就是直接在 script 元素中书写Javascript代码。如：

<script>
   alert("Hello, world!");
</script>

一个HTML文档，也支持多个 script 元素。这种方式定义的脚本，只对本文档有效，并且脚本代码需要放在HTML文件，而不是脚本文件中，脚本通常会散落在多个地方，不便于维护，也容易出错。所以，不推荐使用这种方法。

(2) 加载外部脚本

通过 script 元素的 src 属性指定外部脚本文件的URL，可以把外部脚本加载到本HTML文档中。URL可以是绝对路径，也可以是相对路径。相对路径是相对本HTML文档而言的。

在一个HTML文档中，可以添加多个 script 元素，让它们分别指向不同的脚本文件，就可以为一个网页载入多个脚本文件。当加载外部脚本时，script 元素必须是空元素，即在开始和结束标签之间不得有任何内容。如：

<script src="engine.js"></script>

上述代码表示，文档会载入外部脚本，脚本文件名称是engine.js，脚本文件与本HTML文档位于相同目录下。

这种方式是最好的引入的脚本方法，多个页面可以加载同一个脚本文件。并且，脚本存放在单独的文件中，需要对脚本进行修改时，只需编辑一个文件，而不是在各个页面中更新相似的脚本，维护起来极其方便。

2、noscript 元素

noscript 元素是一个检测工具，当检测到 script 中的脚本内容无法执行时，即如果浏览器不支持Javascript或用户禁用了Javascript时，就会显示 noscript 元素中的文本。如：

<noscript>您的浏览器不支持Javascript</noscript>

注意：

默认情况下，浏览器会按照脚本在HTML中出现的顺序，依次对每个脚本进行下载（对于外部脚本）、解析和执行。

在处理脚本的过程中，浏览器既不会下载该 script 元素后面出现的内容，也不会呈现这些内容，这称为阻塞行为（blocking behavior）。

这条规则对嵌入脚本和外部脚本都有效。可以想象，阻塞行为会影响页面的呈现速度，影响的程度取决于脚本的大小和它执行的动作。

因此，建议最好在页面的最末尾加载脚本，即应该尽可能地将脚本元素放在

以上がHTMLのheadヘッダーの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript html5 css html 表单验证 JS href 样式表数据库 http 搜索引擎 SEO

声明：

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

前の記事：HTML 本文に関するいくつかの問題についてのディスカッション次の記事：HTML 本文に関するいくつかの問題についてのディスカッション

続きを見る