HTML - 头部介绍 首页HTMLHTML - 头部

我们了解到,典型的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>

      <!-- Provide list of keywords -->
      <meta name="keywords" content="C, C++, Java, PHP, Perl, Python">

      <!-- Provide description of the page -->
      <meta name="description" content="Simply Easy Learning by Tutorials Point">

      <!-- Author information -->
      <meta name="author" content="Tutorials Point">

      <!-- Page content type -->
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">

      <!-- Page refreshing delay -->
      <meta http-equiv="refresh" content="30">

      <!-- Page expiry -->
      <meta http-equiv="expires" content="Wed, 21 June 2006 14:25:27 GMT">

      <!-- Tag to tell robots not to index the content of a page -->
      <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?imageView2/0/q/75|watermark/2/text/bGVhcm5may5jb20=/font/Y29uc29sYXM=/fontsize/400/fill/I0YxMTQxNA==/dissolve/100/gravity/SouthEast/dx/10/dy/10" 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>

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

这一章你学到了什么?做个笔记,好记忆不如烂笔头! 如果觉得对您有帮助,请分享给您的朋友。

祝学习愉快! (您也可以 选中需要修改的内容->右键->进行编辑)

点我分享笔记