HTML - 头部标签

HTML - 头部标签 首页 / HTML入门教程 / HTML - 头部标签

无涯教程了解到,典型的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>

      <!-- 提供关键字列表 -->
      <meta name="keywords" content="C, C++, Java, PHP, Perl, Python">

      <!-- 提供页面描述 -->
      <meta name="description" content="Simply Easy Learning by Learnfk Point">

      <!-- 作者信息 -->
      <meta name="author" content="Learnfk Point">

      <!-- 页面内容类型 -->
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">

      <!-- 页面刷新延迟 -->
      <meta http-equiv="refresh" content="30">

      <!-- 页面过期 -->
      <meta http-equiv="expires" content="Wed, 21 June 2006 14:25:27 GMT">

      <!-- 标签告诉机器人不要索引页面的内容 -->
      <meta name="robots" content="noindex, nofollow">

   </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="https://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="https://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="https://www.learnfk.com/" />
      
      <style type="text/css">
         .myclass {
            background-color: #aaa;
            padding: 10px;
         }
      </style>
   </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="http://www.learnfk.com/" />
      
      <script type="text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

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

</html>

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

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

人工智能基础课 -〔王天一〕

研发效率破局之道 -〔葛俊〕

移动端自动化测试实战 -〔思寒〕

分布式系统案例课 -〔杨波〕

成为AI产品经理 -〔刘海丰〕

人人都用得上的数字化思维课 -〔付晓岩〕

零基础GPT应用入门课 -〔林健(键盘)〕

AI绘画核心技术与实战 -〔南柯〕

PPT设计进阶 · 从基础操作到高级创意 -〔李金宝(Bobbie)〕

好记忆不如烂笔头。留下您的足迹吧 :)