1.2 HTML5基础_HTML5+CSS3网站设计基础教程-QQ阅读男生轻小说网

上QQ阅读APP看书，第一时间看更新

1.2 HTML5基础

HTML5是新的HTML标准，是对HTML及XHTML的继承与发展，越来越多的网站开发者开始使用HTML5构建网站。学习HTML5首先需要了解HTML5的语法基础。本节将针对HTML5文档基本格式、HTML5语法、HTML标记及其属性、HTML5文档头部相关标记进行讲解。

1.2.1 HTML5文档基本格式

学习任何一门语言，都要首先掌握它的基本格式，就像写信需要符合书信的格式要求一样。HTML5标记语言也不例外，同样需要遵从一定的规范。接下来将具体讲解HTML5文档的基本格式。

使用Dreamweaver新建HTML5默认文档时，会自带一些源代码，如例1-2所示。

例1-2 example02.html

    1   <! doctype html>
    2   <html>
    3   <head>
    4   <meta charset="utf-8">
    5   <title>无标题文档</title>
    6   </head>
    7   <body>
    8   </body>
    9   </html>

这些自带的源代码构成了HTML5文档的基本格式，主要包括<! doctype>文档类型声明、<html>根标记、<head>头部标记、<body>主体标记，具体介绍如下。

1.<! doctype>标记

<! doctype>标记标记位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML标准规范，HTML5文档中的DOCTYPE声明非常简单，代码如下：

    <! doctype html>

只有在开头处使用<! doctype>声明，浏览器才能将该网页作为有效的HTML文档，并按指定的文档类型进行解析。使用HTML5的DOCTYPE声明，会触发浏览器以标准兼容模式来显示页面。

2.<html>标记

<html>标记位于<! doctype>标记之后，也称为根标记，用于告知浏览器其自身是一个HTML文档，<html>标记标志着HTML文档的开始，</html>标记标志着HTML文档的结束，在它们之间的是文档的头部和主体内容。

3.<head>标记

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

一个HTML文档只能含有一对<head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。

4.<body>标记

<body>标记用于定义HTML文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标记内，<body>标记中的信息才是最终展示给用户看的。

一个HTML文档只能含有一对<body>标记，且<body>标记必须在<html>标记内，位于<head>头部标记之后，与<head>标记是并列关系。

1.2.2 HTML5语法

为了兼容各个浏览器，HTML5采用宽松的语法格式，在设计和语法方面做了一些变化。具体如下。

1．标签不区分大小写

HTML5采用宽松的语法格式，标签可以不区分大小写，这是HTML5语法变化的重要体现。例如：

    <p>这里的p标签大小写不一致</P>

在上面的代码中，虽然p标记的开始标记与结束标记大小写并不匹配，但是在HTML5语法中是完全合法的。

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

在HTML5语法中，属性值不放在引号中也是正确的。例如：

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

以上代码都是完全符合HTML5规范的，等价于：

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

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

在HTML5中，部分标志性属性的属性值可以省略。例如：

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

可以省略为：

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

从上述代码可以看出，checked="checked"可以省略为checked，而readonly="readonly"可以省略为readonly。

在HTML5中，可以省略属性值的属性如表1-1所示。

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

注意：

虽然HTML5采用比较宽松的语法格式，简化了代码。但是为了代码的完整性及严谨性，建议网站开发人员采用严谨的代码编写模式，这样更有利于团队合作及后期代码的维护。

1.2.3 HTML标记

在HTML页面中，带有“< >”符号的元素被称为HTML标记，如上面提到的<html>、<head>、<body>都是HTML标记。所谓标记就是放在“< >”标记符中表示某个功能的编码命令，也称为HTML标签或HTML元素，本书统一称作HTML标记。

1．单标记和双标记

为了方便学习和理解，通常将HTML标记分为两大类，分别是“双标记”与“单标记”。对它们的具体介绍如下。

（1）双标记

双标记是指由开始和结束两个标记符组成的标记。其基本语法格式为：

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

该语法中“<标记名>”表示该标记的作用开始，一般称为“开始标记”，“</标记名>”表示该标记的作用结束，一般称为“结束标记”。和开始标记相比，结束标记只是在前面加了一个关闭符“/”。

例如：

    <h2>传智播客网页平面设计免费公开课</h2>

其中<h2>表示一个标题标记的开始，而</h2>表示一个标题标记的结束，在它们之间是标题内容。

（2）单标记

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

    < 标记名 />

例如：

    <hr />

其中<hr />为单标记，用于定义一条水平线。

通过上面的学习，已经了解HTML文档中的单标记和双标记。下面通过一个案例进一步演示HTML标记的使用，如例1-3所示。

例1-3 example03.html

    1   <! doctype html>
    2   <html>
    3   <head>
    4   <meta charset="utf-8">
    5   <title>传智播客云课堂</title>
    6   </head>
    7   <body>
    8   <h2>传智播客云课堂上线了</h2>
    9   <p>更新时间：2015年07月28日14时08分 来源：传智播客</p>
    10  <hr/>
    11  <p>传智云课堂是传智播客在线教育平台，可以实现晚上在家学习、在线直播教学、实
  时互动辅导等多种功能，专注于网页、平面、UI设计以及Web前端的培训。</p>
    12  </body>
    13  </html>

在例1-3中，使用了不同的标记来定义网页，如标题标记<h2>、水平线标记<hr />、段落标记<p>。

运行例1-3，效果如图1-7所示。

图1-7 标记的使用

2．注释标记

在HTML中还有一种特殊的标记—注释标记。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标记。其基本语法格式为：

    <! -- 注释语句 -->

例如，下面为<p>标记添加一段注释：

    <p>这是一段普通的段落。</p>    <! --这是一段注释，不会在浏览器中显示。-->

需要说明的是，注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，可以被下载到用户的计算机上，查看源代码时就可以看到。

1.2.4 标记的属性

使用HTML制作网页时，如果想让HTML标记提供更多的信息，例如，希望标题文本的字体为“微软雅黑”且居中显示，段落文本中的某些名词显示为其他颜色加以突出。此时仅仅依靠HTML标记的默认显示样式已经不能满足要求，需要使用HTML标记的属性加以设置。其基本语法格式为：

    <标记名 属性1="属性值1" 属性2="属性值2" ⋯> 内容 </标记名>

在上面的语法中，标记可以拥有多个属性，必须写在开始标记中，位于标记名后面。属性之间不分先后顺序，标记名与属性、属性与属性之间均以空格分开。任何标记的属性都有默认值，省略该属性则取默认值。例如：

    <h1 align="center">标题文本<h1>

其中align为属性名，center为属性值，表示标题文本居中对齐，对于标题标记还可以设置文本左对齐或右对齐，对应的属性值分别为left和right。如果省略align属性，标题文本则按默认值左对齐显示，也就是说<h1></h1>等价于<h1 align="left"></h1>。

了解了标记的属性，下面在例1-3的基础上通过标记的属性对网页进一步修饰，如例1-4所示。

例1-4 example04.html

    1   <! doctype html>
    2   <html>
    3   <head>
    4   <meta charset="utf-8">
    5   <title>传智播客云课堂</title>
    6   </head>
    7   <body>
    8   <h2 align="center">传智播客云课堂上线了</h2>
    9   <p align="center">更新时间：2015年07月28日14时08分 来源：传智播客</p>
    10  <hr size="2"color="#CCCCCC"/>
    11  <p>传智云课堂是<strong>传智播客</strong>在线教育平台，可以实现晚上在家学习、在
  线直播教学、实时互动辅导等多种功能，专注于网页、平面、UI设计以及Web前端的培训。</p>
    12  </body>
    13  </html>

在例1-4的第8行代码，将标题标记<h2>的align属性设置为center，使标题文本居中对齐，第9行代码中同样使用align属性使段落文本居中对齐。另外，第10行代码使用水平线标记的size和color属性设置水平线为特定的粗细和颜色。

运行例1-4，效果如图1-8所示。

图1-8 使用标记的属性

通过例1-4可以看出，在页面中使用标记时，想控制哪部分内容，就用相应的标记选择它，然后利用标记的属性进行设置。

书写HTML页面时，经常会在一对标记之间再定义其他的标记，如例1-4中的第11行代码，在<p>标记中包含了<strong>标记。在HTML中，把这种标记间的包含关系称为标记的嵌套。例1-4中第11行代码的嵌套结构为：

    <p>传智云课堂是
      <strong>传智播客</strong>
      在线教育平台，可以实现晚上在家学习、在线直播教学、实时互动辅导等多种功能，
专注于网页、平面、UI设计以及Web前端的培训。
    </p>

需要注意的是，在标记的嵌套过程中，必须先结束最靠近内容的标记，再按照由内及外的顺序依次关闭标记。例如要想使段落文本加粗倾斜，可以将加粗标记<strong>和倾斜标记<em>嵌套在段落标记<p>中，示例如下。

    <p><strong><em>我们正在学习标记的嵌套。</strong></em></p>   <! --错误的嵌套顺
序-->
    <p><em><strong>我们正在学习标记的嵌套。</strong></em></p>   <! --正确的嵌套顺
序-->

需要说明的是，不合理的嵌套可能在一个甚至所有浏览器中通过，但是如果浏览器升级，新的版本不再允许这种违反标准的做法，那么修改源代码就会非常烦琐。

注意：

本书在描述标记时，经常会用到“嵌套”一词，所谓标记的嵌套其实就是一种包含关系。其实网页中所显示的内容都嵌套在<body></body>标记中，而<body></body>又嵌套在<html></html>标记中。

多学一招：何为键值对？

在HTML开始标记中，可以通过“属性="属性值"”的方式为标记添加属性，其中“属性”和“属性值”是以“键值对”的形式出现的。

所谓“键值对”，简单地说即为对“属性”设置“值”。它有多种表现形式，如color="red" 、width:200px；等，其中color和width即为“键值对”中的“键”（英文key）, red和200px为“键值对”中的“值”（英文value）。

“键值对”广泛地应用于编程中，HTML属性的定义形式“属性="属性值"”只是“键值对”中的一种。

1.2.5 HTML5文档头部相关标记

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

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

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

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

了解了页面标题标记<title>，下面通过一个简单的案例来演示<title>标记的用法，如例1-5所示。

例1-5 example05.html

    1   <! doctype html>
    2   <html>
    3   <head>
    4   <meta charset="utf-8">
    5   <title>标题标记title</title>
    6   </head>
    7   <body>
    8   <p>标题标记title用于显示网页标题名称，HTML文档的标题将显示在浏览器的标题栏
  里。</p>
    9   </body>
    10  </html>

在例1-5的第5行代码中，使用<title>标记设置HTML5页面的标题。

运行例1-5，效果如图1-9所示。

图1-9 设置页面标题标记<title>

在图1-9中，线框内显示的文本即为标题标记里的内容。

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

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

（1）<meta name="名称" content="值" />

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

● 设置网页关键字，如传智播客官网关键字的设置：

    <meta name="keywords"content="Java培训，.NET培训，PHP培训，C/C++培训，iOS培训，网页
设计培训，平面设计培训，UI设计培训"/>

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

● 设置网页描述，如传智播客官网描述信息的设置：

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

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

● 设置网页作者，如可以为传智播客官网增加作者信息：

    <meta name="author" content="传智播客网络部" />

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

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

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

● 设置字符集，如传智播客官网字符集的设置：

    <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。

● 设置页面自动刷新与跳转，如定义某个页面10秒后跳转至传智播客官网：

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

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

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

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

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

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

表1-2 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-6所示。

例1-6 example06.html

    1   <! doctype html>
    2   <html>
    3   <head>
    4   <meta charset="utf-8">
    5   <title>style标记的使用</title>
    6   <style type="text/css">
    7   h2{color:red; }
    8   p{color:blue; }
    9   </style>
    10  </head>
    11  <body>
    12  <h2>设置h2标题为红色字体</h2>
    13  <p>设置p段落为蓝色字体</p>
    14  </body>
    15  </html>

在例1-6中，使用style标记定义内嵌式的CSS样式，控制网页中文本的颜色。

运行例1-6，效果如图1-10所示。

图1-10 内嵌标记style的应用