HTML 页面头部

时间:2019-06-08 23:19:24  来源:igfitidea点击:

一个典型的HTML文档将具有以下结构:

文档定义标签
<html>
   
   <head>
      文档标题相关标记
   </head>

   <body>
      文档正文相关标记
   </body>
   
</html>

<head>标记是各种重要标记的容器,如<title><meta><link><base><style><script><noscript>标记。

HTML <title>标签

HTML<title>标记用于指定HTML文档的标题。

<!DOCTYPE html>
<html>

   <head>
      <title>文档的标题</title>
   </head>

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

</html>

HTML <meta>标签

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

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Meta标签示例</title>

      <!-- 关键字列表 -->
      <meta name = "keywords" content = "HTML, C++, Java, PHP, Perl, 之路教程">

      <!-- 页面描述 -->
      <meta name = "description" content = "在之路教程,可以学习各种编程语言">

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

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

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

      <!-- 页面过期时间 -->
      <meta http-equiv = "expires" content = "Wed, 11 June 2016 14:25:27 GMT">

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

   </head>

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

HTML <base>标签

HTML <base>标记用于为页面中的所有相对URL指定基URL。

例如,在给定的URL前面加上基URL之后,所有其他URL将连接到http://www.theitroad.com/中。

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Base Tag Example</title>
      <base href = "https://www.theitroad.com/" />
   </head>

   <body>
      <img src = "/static/images/logo.png" alt = "Logo图片"/>
      <a href = "/html/index.html" title = "HTML教程">HTML教程</a> 
   </body>

</html>

链接URL变成

https://www.theitroad.com/static/images/logo.png
https://www.theitroad.com/html/index.html

HTML<link>标签

HTML<link>标记用于指定当前文档和外部资源之间的关系。

下面的示例链接到外部样式表文件 /css/style.css

<!DOCTYPE html>
<html>

   <head>
      <title>HTML link 链接</title>
      <base href = "https://www.theitroad.com/" />
      <link rel = "stylesheet" type = "text/css" href = "/css/style.css">
   </head>
	
   <body>
      <p>Hello, World!</p>
   </body>
	
</html>

HTML<style>标签

HTML<style>标记用于指定当前HTML文档的样式表。

<!DOCTYPE html>
<html>

   <head>
      <title>HTML style 标签示例</title>
      <base href = "https://www.theitroad.com/" />
      
      <style type = "text/css">
         .myclass {
            background-color: #aaa;
            padding: 10px;
         }
      </style>
   </head>
	
   <body>
      <p class = "myclass">Hello, World!</p>
   </body>

</html>

HTML<script>标签

HTML<script>标记用于包括外部脚本文件或为HTML文档定义内部脚本。

下面的例子: 使用JavaScript定义一个简单JavaScript函数

<!DOCTYPE html>
<html>

   <head>
      <title>HTML script Tag Example</title>
      <base href = "http://www.theitroad.com/" />
      
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

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

</html>