网页设计与制作项目教程(微课版)
上QQ阅读APP看书,第一时间看更新

HTML入门

2.1 HTML文档基本格式、HTML标记及其属性、头部标记

2.1.1 认识HTML文档基本格式

学习任何一门语言,都要首先掌握它的基本格式,就像写信需要符合书信的格式要求一样。HTML 也不例外,同样需要遵从一定的规范。

使用Dreamweaver新建默认文档时会自带一些源代码,代码如下所示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

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

    <title>无标题文档</title>

  </head>

  <body>

  </body>

</html>

这些源代码构成了HTML文档的基本格式,其中主要包括<!DOCTYPE>文档类型声明、<html>根标记、<head>头部标记、<body>主体标记。

<!DOCTYPE>标记位于文档的最前面,用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范。该标签可声明3种DTD类型,分别表示严格版本、过渡版本以及基于框架的HTML文档。

<html>标记标志着HTML文档的开始,</html>标记标志着HTML文档的结束。

<head>标记用于定义HTML文档的头部信息,也称为头部标记。

<body>标记用于定义HTML文档所要显示的内容,也称为主体标记。

最重要的4个HTML标记:<html>、<head>、<title>和<body>已经简要介绍过了。下面,我们将学习HTML的基本标记。

2.1.2 HTML标记及其属性

在HTML页面中,带有“< >”符号的元素被称为HTML标记,HTML标记要有语义性。HTML标记可以分为单标记、双标记、注释标记。

一、单标记

单标记也称空标记,是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下:

< 标记名 />

例如代码:

<hr />

二、双标记

双标记也称体标记,是指由开始和结束两个标记符组成的标记。其基本语法格式如下:

<标记名>内容</标记名>

例如代码:

<h2>中国禁止进口洋垃圾 美国恐慌:放废金属一马</h2>

三、注释标记

如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标记。其基本语法格式如下:

<!-- 注释语句 -->

浏览器窗口只显示普通的段落文本,而不会显示注释文本。

2.1.3 头部标记

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

一、设置页面标题标记<title>

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

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

二、定义页面元信息标记<meta />

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

下面介绍<meta />标记常用的几组设置,具体如下:

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

在<meta>标记中使用name/content属性可以为搜索引擎提供信息,其中name属性提供搜索内容名称,content属性提供对应的搜索内容值。

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

在<meta>标记中使用http-equiv/content属性可以设置服务器发送给浏览器的HTTP头部信息,为浏览器显示该页面提供相关的参数。其中,http-equiv属性提供参数类型,content属性提供对应的参数值。

其中http-equiv属性的值为refresh,content属性的值为数值和url地址,中间用“;”隔开,用于指定在特定的时间后跳转至目标页面,该时间默认以秒为单位。

三、引用外部文件标记<link>

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

<link 属性="属性值" />

例如,使用<link>标记引用外部CSS样式表:

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

上面的代码,表示引用当前HTML页面所在文件夹中,文件名为“style.css”的CSS样式表文件。

四、内嵌样式标记<style>

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

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

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