个性化阅读
专注于IT技术分析

html header元素 – HTML教程

上一章HTML教程请查看:html字幕marquee

我们知道,一个典型的HTML文档将具有以下结构:

文档声明标签
<html>
   
   <head>
   文档头相关标签
   </head>

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

本章将更详细地介绍由HTML <head>标记表示的页眉部分,<head>标签是各种重要标签的容器,如<title>, <meta>, <link>, <base>, <style>, <script>, <noscript>标签。

HTML <title>标签

HTML <title>标记用于指定HTML文档的标题。下面是一个给HTML文档起标题的例子:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML标题标签例子</title>
   </head>

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

</html>

HTML <meta>标签

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

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

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Meta元标签例子</title>

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

      <!-- 提供页面的描述 -->
      <meta name = "description" content = "HTML教程 By srcmini02.com">

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

      <!-- 页面内容类型 -->
      <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 2040 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加上基本URL http://www.srcmini02.com/目录之后,将搜索所有给定的页面和图像:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Base标签例子</title>
      <base href = "https://www.srcmini02.com/" />
   </head>

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

</html>

但是如果你改变了基地URL到其他东西,例如,如果基地URL是http://www.srcmini02.com/home,那么图像和其他给定的链接将变成http://www.srcmini02.com/home/images/logo.png和http://www.srcmini02.com/html/index.htm

HTML <link>标签

HTML <link>标记用于指定当前文档和外部资源之间的关系。下面是一个链接到web根目录中的css子目录中的外部样式表文件的示例:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML link标签例子</title>
      <base href = "https://www.srcmini02.com/" />
      <link rel = "stylesheet" type = "text/css" href = "/css/style.css">
   </head>
    
   <body>
      <p>Hello, World!</p>
   </body>
    
</html>

HTML <style>标签

HTML <style>标记用于指定当前HTML文档的样式表。下面是一个在<style> 标签内定义少量样式表规则的示例:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML link标签例子</title>
      <base href = "https://www.srcmini02.com/" />
      <link rel = "stylesheet" type = "text/css" href = "/css/style.css">
   </head>
    
   <body>
      <p>Hello, World!</p>
   </body>
    
</html>

注意:要了解层叠样式表是如何工作的,请查看css中的单独教程

HTML <script>标签

HTML <script>标记用于包含外部脚本文件或定义HTML文档的内部脚本。下面是一个例子,我们使用JavaScript来定义一个简单的JavaScript函数

<!DOCTYPE html>
<html>

   <head>
      <title>HTML script标签例子</title>
      <base href = "http://www.srcmini02.com/" />
      
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

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

</html>

要了解JavaScript是如何工作的,请查看JavaScript提供的单独教程。

赞(0)
未经允许不得转载:srcmini » html header元素 – HTML教程

评论 抢沙发

评论前必须登录!