【六六互联】长期出售【美国抗投诉服务器】【欧洲抗投诉服务器】【亚洲抗投诉服务器】

HTML5文档头部相关标记 

制作网页时,经常需要设置页面的基本信息,如页面的标题、作者、和其他文档的关系等。为此HTML提供了一系列的标记,这些标记通常都写在<head>标记内,因此被称为头部相关标记。

1.<title></title>标记

<title>标记用于定义HTML页面的标题,即给网页取一个名字,必须位于<head>标记之内。一个HTML文档只能含有一对<title>标记,<title>之间的内容将显示在浏览器窗口的标题栏中。其基本语法格式如下:

  <title>网页标题名称</title>

了解了页面标题标记<title>,下面通过一个简单的案例来演示<title>标记的用法,如例1-3,效果如图1-16所示。

     例1-3   example03.htm

  <!doctype html>

<html> 

<head>

    <title>卡梅隆</title>

    <meta  charset="utf-8">

</head>

<body>

詹姆斯-卡梅隆

代表作:《终结者》、《泰坦尼克号》、《阿凡达》、《真实的谎言》等

评价: 他在拍摄地是个苛求、专横的“暴君”;在家庭中是个不会体贴

并且见异思迁的丈夫;在好莱坞同行看来,卡梅隆是一个偏执狂和烧钱的机器。

但不能否认,卡梅隆是个天才。

</body>

</html>

HTML5文档头部相关标记 

图1-16设置网页标题标记

2.  <meta />标记

<meta/>标记用于定义页面的元信息,可重复出现在<head>头部标记中,在HTML中是一个单标记。<meta />标记本身不包含任何内容,通过“名称/值”的形式成对的使用其属性可定义页面的相关参数,例如为搜索引擎提供网页的关键字、作者姓名、内容描述,以及定义网页的刷新时间等。<meta />标记常用的几组设置,具体语法格式如下:

<meta name="名称"  content="值" />

  <meta http-equiv="名称"  content="值" />

例如以下设置代码

 

(1)设置网页关键字代码:<meta name="keywords" content="java培训" />


(2)设置网页描述代码:<meta name="description" content="IT培训" />

 

(3)设置字符集格式代码:

<meta  http-equiv="Content-Type" content="text/html;  charset=utf-8" />

 

(4)设置页面自动刷新与跳转:

  <meta  http-equiv="refresh"  content="10;url=http://www.itcast.cn" />

下面通过一个案例1-4来演示<meta />标记的用法,如例1-4所示。


                 例1-4  example04.htm

  <!doctype html>

  <html> 

  <head> 

    <title>meta标记使用</title>

    <meta charset="utf-8">

    <meta name="keywords" content="java培训,.net培训,PHP培训,C/C++培训,iOS培训,网页设计培训,平面设计培训,UI设计培训"  />

    <meta name="description" content="IT培训的龙头老大,口碑最好的java培训、.net培训、php培训、C/C++培训,iOS培训,网页设计培训,平面设计培训,UI设计培训机构,问天下java培训、.net培训、php培训、C/C++培训,iOS培训,网页设计培训,平面设计培训,UI设计培训机构谁与争锋? " />

     <meta http-equiv="refresh"  content="10;url=http://www.itcast.cn" /> 

</head>

<body>

</body>

</html>

3.<link>标记

一个页面往往需要多个外部文件的配合,在<head>中使用<link>标记可引用外部文件,一个页面允许使用多个<link>标记引用多个外部文件。其基本语法格式如下:

<link rel="stylesheet" type="text/css"  href="style.css" />

<link>标记常用属性,如表1-1所示:

                   表1-1  link标记常用属性

 

属性名

 
 

常用属性值

 
 

描述

 
 

href

 
 

URL

 
 

指定引用外部文档的地址

 
 

rel

 
 

stylesheet

 
 

指定当前文档与引用外部文档的关系,该属性值通常为stylesheet,表示定义一个外部样式表

 
 

type

 
 

text/css

 
 

引用外部文档的类型为CSS样式表

 

4.<style></style>标记

<style>标记用于为HTML文档定义样式信息,位于<head>头部标记中,其基本语法格式如下:

 

<style 属性=”属性值”>样式内容</style>

 

在HTML中使用style标记时,常常定义其属性为type,相应的属性值为text/css,表示使用内嵌式的CSS样式。

下面通过案例1-5来演示<style>标记的用法,最终效果如图1-17所示。

例1-5  example05.htm

 

<!doctype html>

<html>

 <head>

    <meta  charset="utf-8">

    <title>style标记的使用</title>

    <style  type="text/css">

 h2{color:red;}

         p{color:blue;}

    </style>

 </head>

 <body>

    <h2>设置h2标题为红色字体</h2>

     <p>设置p段落为蓝色字体</p>

 </body>

  </html>

 

HTML5文档头部相关标记 

图1-17 style标记