制作网页时,经常需要设置页面的基本信息,如页面的标题、作者、和其他文档的关系等。为此HTML提供了一系列的标记,这些标记通常都写在<head>标记内,因此被称为头部相关标记。
1.<title></title>标记
<title>标记用于定义HTML页面的标题,即给网页取一个名字,必须位于<head>标记之内。一个HTML文档只能含有一对<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> |
图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> |
图1-17 style标记