无涯教程-HTML - 头部标签无涯教程了解到，典型的HTML文档将具有以下结构- Document declarat

无涯教程了解到，典型的HTML文档将具有以下结构-

Document declaration tag 
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>

<head>标签是各种重要标签的容器，例如<title>，<meta>，<link>，<base>，<style>，<script>和<noscript>标签。

Title 标签

HTML <title>标签用于指定HTML文档的标题。以下是为HTML文档赋予标题的示例-

<!DOCTYPE html>
<html>
<head>
<title>HTML Title Tag Example</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>

这将产生以下输出-

Meta 标签

HTML <meta>标签用于提供有关HTML文档的元数据，其中包括有关页面有效期，页面作者，关键字列表，页面描述等的信息。

以下是HTML文档中<meta>标签的一些重要用法-

<!DOCTYPE html>
<html>
<head>
<title>HTML Meta Tag Example</title>
  </span><span class="com">&lt;!-- 提供关键字列表 --&gt;</span><span class="pln">
  </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"keywords"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"C, C++, Java, PHP, Perl, Python"</span><span class="tag">&gt;</span><span class="pln">

  </span><span class="com">&lt;!-- 提供页面描述 --&gt;</span><span class="pln">
  </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"description"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"Simply Easy Learning by Learnfk Point"</span><span class="tag">&gt;</span><span class="pln">

  </span><span class="com">&lt;!-- 作者信息 --&gt;</span><span class="pln">
  </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"author"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"Learnfk Point"</span><span class="tag">&gt;</span><span class="pln">

  </span><span class="com">&lt;!-- 页面内容类型 --&gt;</span><span class="pln">
  </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">http-equiv</span><span class="pun">=</span><span class="atv">"content-type"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"text/html; charset=UTF-8"</span><span class="tag">&gt;</span><span class="pln">

  </span><span class="com">&lt;!-- 页面刷新延迟 --&gt;</span><span class="pln">
  </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">http-equiv</span><span class="pun">=</span><span class="atv">"refresh"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"30"</span><span class="tag">&gt;</span><span class="pln">

  </span><span class="com">&lt;!-- 页面过期 --&gt;</span><span class="pln">
  </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">http-equiv</span><span class="pun">=</span><span class="atv">"expires"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"Wed, 21 June 2006 14:25:27 GMT"</span><span class="tag">&gt;</span><span class="pln">

  </span><span class="com">&lt;!-- 标签告诉机器人不要索引页面的内容 --&gt;</span><span class="pln">
  </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"robots"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"noindex, nofollow"</span><span class="tag">&gt;</span><span class="pln">

</head>
<body>
<p>Hello, World!</p>
</body>
</html>

这将产生以下输出-

Base 标签

HTML <base>标签用于为页面中的所有相对URL指定基本URL，这意味着在查找给定项目时，所有其他URL将被串联到基本URL中。

如，在给定URL加上基本URL http://www.learnfk.com/目录之后，将搜索所有给定的页面和图像-

<!DOCTYPE html>
<html>
<head>
<title>HTML Base Tag Example</title>
<base href="www.learnfk.com/" />
</head>
<body>
<img src="/images/logo.png" alt="Logo Image"/>
<a href="/html/index.htm" title="HTML Tutorial"/>HTML Tutorial</a>
</body>
</html>

Link 标签

HTML <link>标签用于指定当前文档和外部资源之间的关系。以下是链接外部根样式表文件的示例，该文件在Web根目录下的css子目录中可用-

<!DOCTYPE html>
<html>
<head>
<title>HTML link Tag Example</title>
<base href="www.learnfk.com/" />
<link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>

这将产生以下输出-

Style 标签

HTML <style>标签用于为当前HTML文档指定样式表。以下是在<style>标签内定义一些样式表规则的示例-

<!DOCTYPE html>
<html>
<head>
<title>HTML style Tag Example</title>
<base href="www.learnfk.com/" />
  </span><span class="tag">&lt;style</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/css"</span><span class="tag">&gt;</span><span class="pln">
     </span><span class="pun">.</span><span class="pln">myclass </span><span class="pun">{</span><span class="pln">
        background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#aaa;</span><span class="pln">
        padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln">
     </span><span class="pun">}</span><span class="pln">
  </span><span class="tag">&lt;/style&gt;</span><span class="pln">

</head>
<body>
<p class="myclass">Hello, World!</p>
</body>
</html>

这将产生以下输出-

注意-要了解级联样式表的工作方式,请查看css上的单独教程。

Script 标签

HTML <script>标签用于包含外部脚本文件或定义HTML文档的内部脚本。以下是无涯教程使用JavaScript定义简单JavaScript函数的示例-n -

<!DOCTYPE html>
<html>
<head>
<title>HTML script Tag Example</title>
<base href="www.learnfk.com/" />
  </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/JavaScript"</span><span class="tag">&gt;</span><span class="pln">
     </span><span class="kwd">function</span><span class="pln"> </span><span class="typ">Hello</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        alert</span><span class="pun">(</span><span class="str">"Hello, World"</span><span class="pun">);</span><span class="pln">
     </span><span class="pun">}</span><span class="pln">
  </span><span class="tag">&lt;/script&gt;</span><span class="pln">

</head>
<body>
<input type="button" onclick="Hello();" name="ok" value="OK"  />
</body>
</html>

这将产生以下输出，您可以在其中尝试单击给定的按钮-

无涯教程-HTML - 头部标签

Title 标签

Meta 标签

Base 标签

Link 标签

Style 标签

Script 标签

参考链接