1.6 HTML的基本结构_网页设计与制作-QQ阅读男生玄幻网

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

1.6 HTML的基本结构

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

1.6.1 <html>标签

在任何一个HTML文件里，最先出现的HTML标签就是<html>，它用于表示该文件是以超文本标识语言（HTML）编写的。<html>是成对出现的，始标签<html>和尾标签</html>分别位于文件的最前面和最后面，文件中的所有文本和HTML标签都包含在其中。例如：

      <html>
      文件的全部内容
      </html>

该标签不带任何属性。

事实上，现在常用的Web浏览器（Netscape和IE）都可以自动识别HTML文件，并不要求有<html>标签，也不对该标签进行任何操作。但是，为了提高文件的适用性，使编写的HTML文件能适应不断变化的Web浏览器，还是应该养成使用这个标签的习惯。

1.6.2 <head>标签

习惯上，把HTML文件分为文件头和文件主体两个部分。文件主体部分就是在Web浏览器窗口的用户区内看到的内容，而文件头部分用来规定该文件的标题（出现在Web浏览器窗口的标题栏中）和文件的一些属性。

<head>标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在<html>标记之后，主要用来封装其他位于文档头部的标记，例如<title>、<meta>、<link>、<style>等，用来描述文档的标题、作者，以及和其他文档的关系等。

1．设置页面标题标记<title>

每个HTML文件都需要有一个文件名称。在浏览器中，文件名称作为窗口名称显示在该窗口的最上方。这对浏览器的收藏功能很有用。如果浏览者认为某个网页对自己非常有用，今后会经常阅读，可以选择IE浏览器的“收藏”菜单中的“添加到收藏夹”命令将它保存起来，供以后调用。网页的名称要写在<title>和</title>之间，并且<title>标签应包含在<head>与</head>标签之中。

HTML文件的标签是可以嵌套的，即在一对标签中可以嵌入另一对子标签，用来规定母标签所含范围的属性或其中某一部分内容，嵌套在<head>标签中使用的主要有<title>标签。

2．定义页面元信息标记<meta/>

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

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

在<meta>标记中使用name、content属性可以为搜索引擎提供信息，其中name属性提供搜索内容名称，content属性提供对应的搜索内容值。具体应用如下：

（1）设置网页关键字

      <meta name="keywords" content="java, PHP, C/C++, ios，网页设计，平面设计，UI"/>

其中，name属性的值为keywords，用于定义搜索内容名称为网页关键字；content属性的值用于定义关键字的具体内容。多个关键字内容之间可以用“, ”分隔。

（2）设置网页描述

      <meta name="description" content="IT培训的优秀培训机构，口碑最好的java培训，.net培
  训，php培训"/>

其中，name属性的值为description，用于定义搜索内容名称为网页描述；content属性的值用于定义描述的具体内容。需要注意的是，网页描述的文字不必过多。

（3）设置网页作者

      <meta name="author" content="北京理工大学出版社"/>

其中，name属性的值为author，用于定义搜索内容名称为网页作者；content属性的值用于定义具体的作者信息。

在<meta/>标记中使用http-equiv/content属性可以设置服务器发送给浏览器的HTTP头部信息，为浏览器显示该页面提供相关的参数。其中，http-equiv属性提供参数类型，content属性提供对应的参数值。默认会发送<meta http-equiv="Content-Type"content="text/html"/>，通知浏览器发送的文件类型是HTML。具体应用如下：

（1）设置字符集

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

其中，http-equiv属性的值为Content-Type; content属性的值为text/html和charset=utf-8，中间用“; ”隔开，用于说明当前文档类型为HTML，字符集为utf-8（国际化编码）。

UTF-8是目前最常用的字符集编码方式，常用的字符集编码方式还有GBK和GB2312。

（2）设置页面自动刷新与跳转

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

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

3．引用外部文件标记<link>

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

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

该语法中，<link>标记的几个常用属性见表1-1。

表1-1 <link>标记的几个常用属性

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

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

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

4．内嵌样式标记<style>

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

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

为了加深初学者对<style>标记的理解，下面通过一个案例来演示其用法。

例题1-1：<style>标签的使用。

      <! 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>头部相关标记style的使用</title>
      <style type="text/css">
      h2{color:red; }
      p{colr:blue; }
      </style>
      </head>
      <body>
      <h2>h2标题标记红色字体</h2>
      <p>p段落标记蓝色字体</p>
      </body>
      </html>

在例题1-1中，使用style标记定义内嵌式的CSS样式，控制HTML网页中文本的颜色。预览效果如图1-14所示。

图1-14 浏览器预览效果

1.6.3 <body>标签

<body>标签是成对出现的。网页中的主体内容应该写在<body>和</body>之间，而<body>标签包含在<html>标签里面。

1.6.4 标签

注释是在HTML代码中插入的描述性文本，用来解释该代码或提示其他信息。注释只出现在代码中，在浏览器的页面中不显示。在HTML源代码中适当地插入注释语句是一种非常好的习惯。对于设计者日后的代码修改、维护工作很有好处。另外，如果将代码交给其他设计者，其他人也能很快读懂前者所编写的内容。其具体语法格式如下：

1-5 了解HTML的代码注释

      <! --注释的内容-->

注意：注释语句元素由前后两半部分组成，前半部分由一个左尖括号、一个半角感叹号和两个连字符组成，后半部分由两个连字符和一个右尖括号组成。

1.6.5 HTML5语法的变化

为了兼容各个不统一的页面代码，HTML5的设计在语法方面做了以下变化。

1．标签不再区分大小写

标签不再区分大小写是HTML5语法变化的重要体现，例如以下例子的代码。

例题1-2：HTML5实例。

      <! DOCTYPE html>
      <html>
      <head>
      <title>大小写标签</title>
      </head>
      <body>
      <p>这里的标签大小写不一样</p>
      </body>
      </html>

在浏览器中预览，效果如图1-15所示。

图1-15 浏览器预览效果

虽然“<p>这里的标签大小写不一样</p>”中开始标记和结束标记不匹配，但是这完全符合HTML5的规范。用户可以通过W3C提供的在线验证页面来测试上面的网页，验证网址为http://validator.w3.org/。

2．允许属性值不使用引号

在HTML5中，属性值不放在引号中也是正确的，例如以下代码片段：

      <input checked="a" type="checkbox"/>
      <input readonly type="text"/>
      <input disabled="a" type="text"/>

上述代码片段与下面的代码片段效果是一样的：

      <input checked=a type=checkbox/>
      <input readonly type=text/>
      <input disabled=a type=text/>

注意：尽管HTML5允许属性值可以不使用引号，但是仍然建议读者加上引号，因为如果某个属性的属性值中包含空格等容易引起混淆的属性值，此时可能会引起浏览器的误解。例如以下代码：

      <img src=mm 01.jpg/>

此时浏览器就会误以为src属性的值就是mm，这样就无法解析路径中的01.jpg图片，如果想正确解析到图片的位置，只有添加上引号。

3．允许部分属性值的属性省略

在HTML5中，部分标志性属性的属性值可以省略。例如，以下代码是完全符合HTML5规划的：

      <input checked type="checkbox"/>
      <input readonly type="text"/>

其中checked="checked"省略为checked，而readonly="readonly"省略为readonly。

在HTML5中，可以省略属性值的属性见表1-2。

表1-2 可以省略属性值的属性