第2章 HTML与CSS网页开发基础

第2章 HTML与CSS网页开发基础

知识点：

（1） 掌握HTML文档的基本结构

（2） 运用HTML的各种常用标记

（3） 了解HTML 5新增部分的内容

（4） 使用CSS样式表控制页面

（5） 了解CSS 3的新特征

本章概述：

HTML是一种在互联网上常见的网页制作标记性语言。严格地说，HTML并不能算作是一种程序设计语言，因为它缺少了程序设计语言所应有的特征。HTML是通过浏览器的翻译，将网页中的内容呈现给用户的。对于网站设计人员来说，只使用HTML是不够的，还需要在页面中引入CSS（层叠样式表（Cascading Style Sheets））样式。HTML与CSS的关系是“内容”与“形式”的关系，由HTML来确定网页的内容，由CSS来实现页面的表现形式。HTML与CSS的完美搭配，可使页面更加美观、大方，且容易维护。

2.1 HTML标记语言

相信所有读者都有上网冲浪的习惯。在浏览器的地址栏中输入一个网址，就会查阅到相应的网页内容。在网页中包含很多内容，如文字、图片、动画，以及声音和视频等。网页的最终目的是为访问者提供有价值的信息。提到网页设计，不得不提到HTML标记语言，HTML的全称是Hypertext(超文本（含有指向其它文本文件链接的文本）) Markup Language,即超文本标记语言。HTML用于描述超文本中内容的显示方式。使用HTML可以实现在网页中定义一个标题、文本或者表格等。本节详细介绍HTML标记语言。

2.1.1 创建第一个HTML文件

编写HTML文件可以通过两种方式：一种是手工编写HTML代码，另一种是借助一些开发软件，例如Adobe公司的Dreamweaver或者微软公司的Expression Web等。在Windows操作系统中，最简单的文本编辑软件就是记事本。

注：Adobe Dreamweaver，简称"DW"，中文名称 "梦想编织者"，是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

Macromedia公司成立于1992年，2005年被Adobe公司收购。

Expression Web 是一个专业的设计工具，可用来建立现代感十足、且以标准为基础的网站，让您在 Web 上提供绝佳的质量。透过使用强大的设计工具和工作窗格快速地合并 XML 数据，减少复杂度和简化数据整合。透过 Expression Web 和 Visual Studio 对于 XML、ASP.NET 和 XHTML 的绝佳支持，您可以顺畅地整合 Web 设计和开发团队。透过复杂的 CSS 设计功能，释放您的创意点子，并替您的网站注入活力。可视化的设计工具、专门的工作窗格和工具列，让您精确地控制版面配置和格式。

下面介绍应用记事本编写第一个HTML文件。HTML文件的创建方法非常简单，具体步骤如下：

（1）选择“开始”/“程序”/ “附件”/“记事本”命令。

（2）在打开的“记事本”窗口中编写代码，如图2.1所示。

<html>

<head>

<title>HTML页面</title>

</head>

<body>

<b>

应用记事本编写HTML代码

</b>

</body>

</html>

（3）编写完成之后，需要将其保存为HTML格式文件。具体步骤为：选择记事本菜单栏中的“文件”/“另存为”命令，在弹出的“另存为”对话框的“保存类型”下拉列表框中选择“所有文件”选项，然后在“文件名”文本框中输入一个文件名。需要注意的是，文件名的后缀应该是 .htm或者 .html，如图2.2所示。

说明：如果没有修改记事本的“保存类型”，那么记事本会自动将文件保存为.txt文件，即普通的文本文件，而不是网页类型的文件。

（4）设置完成后，单击“保存”按钮，则成功保存了HTML文件。此时，双击该HTML文件，就会显示页面内容，效果如图2.3所示。

这样，就完成了第一个HTML文件的编写。尽管该文件内容简单，但是却体现了HTML文件的特点。

技巧：在浏览器的显示页面中右击，在弹出的快捷菜单中选择“查看源代码”命令，这时会自动打开记事本程序，显示的则为HTML源文件。

2.1.2 HTML文档结构

HTML文档由4个主要标记组成，这4个标记是<html>、<head>、<title>和<body>。2.1.1节介绍的实例中就包含了这4个标记，它们构成了HTML页面最基本的元素。

1.<html>标记

<html>标记是HTML文件的开头。所有HTML文件都是以<html>标记开头，以</html>标记结束。HTML页面的所有标记都要放置在<html>与</html>标记中，<html>标记并没有实质性的功能，但却是HTML文件不可缺少的内容。

说明：HTML标记是不区分大小写的。

2.<head>标记

<head>标记是HTML文件的头标记，作用是放置HTML文件的信息。如定义CSS样式代码可放置在<head>与</head>标记中。

3.<title>标记

<title>标记为标题标记。可将网页的标题定义在<title>与</title>标记中。例如在2.1.1节中定义的网页的标题为“HTML页面”，如图2.4所示。<title>标记被定义在<head>标记中。

4.<body>标记

<body>是HTML页面的主体标记。页面中的所有内容都定义在<body>标记中。<body>标记也是成对使用的，以<body>标记开头，以</body>标记结束。<body>标记本身也具有控制页面的一些特性，例如控制页面的背景图片和颜色等。

本节中介绍的是HTML页面最基本的结构。要深入学习HTML语言，创建更加完美的网页，必须学习HTML语言的其他标记。

2.1.2 HTML常用标记

HTML中提供了很多标记，可以用来设计页面中的文字、图片，定义超链接等。这些标记的使用可以使页面更加生动，下面介绍HTML中的常用标记。

1.换行标记

要让网页中的文字实现换行，在HTML文件中输入换行符（Enter键）是没有用的，必须用一个标记告诉浏览器在哪里要实现换行操作。在HTML语言中，换行标记为<br>。

注：barter['bɑːtə] vi. 进行易货贸易；[贸易] 作物物交换；讨价还价 vt. 以…作为交换；拿…进行易货贸易 n. 易货贸易；物物交换；实物交易

与前面介绍的HTML标记不同，换行标记是一个单独标记，不是成对出现的。下面通过实例来介绍换行标记的使用。

例2.1 创建HTML页面，实现在页面中输出一首古诗。

关键代码如下：

<html>


	<head>
	<title>应用换行标记实现页面文字换行</title>
	</head>
	<body>
	<b>
	黄鹤楼送孟浩然之广陵
	</b><br>
	故人西辞黄鹤楼，烟花三月下扬州。<br>
	孤帆远影碧空尽，唯见长江天际流
	</body>
	</html>

运行本实例，结果如图2.5所示。

2.段落标记

HTML中的段落标记也是一个很重要的标记，段落标记以<p>标记开头，以</p>标记结束。段落标记在段前和段后各添加一个空行，而定义在段落标记中的内容不受该标记的影响。

注：paragraph['pærəgrɑːf] n. 段落；短评；段落符号 vt. 将…分段

3.标题标记

在Word文档中，可以很轻松地实现不同级别的标题。如果要在HTML页面中创建不同级别的标题，可以使用HTML语言中的标题标记。在HTML中设定了6个标题标记，分别为<h1>~<h6>，其中<h1>代表1级标题，<h2>代表2级标题……<h6>代表6级标题。数字越小，表示级别越高，文字的字号也就越大。

例2.2 在HTML页面中定义文字，并通过标题标记和段落标记设置页面布局。

关键代码如下：

	<html>
	<head>
	<title>设置标题标记</title>
	</head>
	<body>
	<h1>java开发的3个方向</h1>
	<h2>Java SE</h2>
	<p>主要用于桌面程序的开发。它是学习Java EE和Java ME的基础，也是本书的重点内容。 </p>
	<h2>Java EE</h2>
	<p>主要用于网页程序的开发。随着互联网的发展，越来越多的企业使用Java语言来开发自己的官方网站，其中不乏世界500强企业。</p>
	<h2>Java ME</h2>
	<p>主要用于嵌入式系统程序的开发。</p>
	</body>
	</html> 运行本实例，结果如图2.6所示。
	4.居中标记

HTML页面中的内容有一定的布局方式，默认的布局方式是从左到右依次排序。如果想让页面中的内容在页面的居中位置显示，可以使用HTML中的<center>标记。<center>标记以<center>标记开头，以</center>标记结尾。标记中的内容为居中显示。

对例2.2中的代码进行修改，使用居中标记将页面内容居中。

例2.3 使用居中标记对页面中的内容进行居中处理。

关键代码如下：

<html>


	<head>
	<title>设置标题标记</title>
	</head>
	<body>
	<center>
	<h1>java开发的3个方向</h1>
	<h2>Java SE</h2>
	<p>主要用于桌面程序的开发。它是学习Java EE和Java ME 的基础，也是本书的重点内容。</p>
	<h2>Java EE</h2>
	<p>主要用于网页程序的开发。随着互联网的发展，越来越多的企业使用Java语言来开发自己的官方网站，其中不乏世界500强企业。</p>
	<h2>Java ME</h2>
	<p>主要用于嵌入式系统程序的开发。</p>
	</center>
	</body>
	</html>

将页面中的内容进行居中后的效果如图2.7所示。

5.文字列表标记

HTML语言中提供了文字列表标记，文字列表标记可以将文字以列表的形式依次排列。这种形式可以更加方便网页的访问者。HTML中的列表标记主要有无序的列表和有序的列表两种。

（1）无序列表

无序列表是在每个列表项的前面添加一个圆点符号。通过符号<ul>可以创建一组无序列表，其中每个列表项以<li>表示。下面的实例为大家演示了无序列表的应用。

例2.4 使用无序列表对页面中的文字进行排序。

关键代码如下：

<html>


	<head>
	<title>无序列表标记</title>
	</head>
	<body>
	编程词典有以下几个品种
	<p>
	<ul>
	<li>Java编程词典
	<li>VB编程词典
	<li>VC编程词典
	<li>.net编程词典
	<li>C#编程词典
	</ul>
	</body>
	</html>

本实例的运行结果如图2.8所示。

（2）有序列表

有序列表和无序列表的区别是，使用有序列表标记可以将列表项进行排号。有序列表的标记为<ol>，每一个列表项前使用<li>。有序列表中的项目是有一定顺序的。下面对例2.4进行修改，使用有序列表进行排序。

例2.5 使用有序列表对页面中的文字进行排序。

关键代码如下：

<html>

<head>


	<title>有序列表标记</title>
	</head>
	<body>
	编程词典有以下几个品种
	<p>
	<ol>
	<li>Java编程词典
	<li>VB编程词典
	<li>VC编程词典
	<li>.net编程词典
	<li>C#编程词典
	</ol>
	</body>
	</html>

运行本实例，结果如图2.9所示。

2.1.4 表格标记

表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号<table>表示。定义表格仅使用<table>是不够的，还需要定义表格中的行、列、标题等内容。在HTML页面中定义表格，需要学会以下几个标记。

（1）表格标记<table>

<table>…</table>标记表示整个表格。<table>标记中有很多属性，例如width属性用来设置表格的宽度，border属性用来设置表格的边框，align属性用来设置表格的对齐方式，bgcolor属性用来设置表格的背景色等。

（2）标题标记<caption>

标题标记以<caption>开头，以</caption>结束，标题标记也有一些属性，例如align、valign等。

（3）表头标记<th>

表头标记以<th>开头，以</th>结束，也可以通过align、background、colspan、valign等属性来设置表头。

（4）表格行标记<tr>

表格行标记以<tr>开头，以</tr>结束，一组<tr>标记表示表格中的一行。<tr>标记要嵌套在<table>标记中使用，该标记也具有align、background等属性。

（5）单元格标记<td>

单元格标记<td>又称为列标记，一个<tr>标记中可以嵌套若干个<td>标记。该标记也具有align、background、valign等属性。

例2.6 在页面中定义学生成绩表。

关键代码如下：

<body>

<table width= “318” height= “167” border= “1” align= “center”>

<caption> 学生考试成绩单 </caption>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

运行本实例，结果如图2.10所示。

说明：表格不仅可以用于显示数据，在实际开发中，还常常用来设计页面。在页面中创建一个表格，并设置没有边框，之后通过该表格将页面该表格将页面划分为几个区域，并分别对几个区域进行设计，这是一种非常方便的设计页面的方式。

2.1.5 HTML表单标记

对于经常上网的人来说，对网站中的登录等页面肯定不会感到陌生。在登录页面中，网站会提供给用户用户名文本框与密码文本框，以供访客输入信息。这里的用户名文本框与密码文本框就属于HTML中的表单元素。表单在HTML页面中起着非常重要的作用，是用户与网页交互信息的重要手段。

<form>…</form>表单标记

表单标记以<form>标记开头，以</form>标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。<form>标记的基本语法如下：

</form>

<form>标记的各属性说明如下。

（1） action属性

该属性用来指定处理表单数据程序的URL地址。

（2） method属性

该属性用来指定数据传送到服务器的方式。它有两种属性值，分别为get与post。get属性值表示将输入的数据追加在action指定的地址后面，并传送到服务器。当属性值为post时，会将输入的数据按照HTTP协议中的post传输方式传送到服务器。

（3） name属性

该属性指定表单的名称，程序员可以自定义其值。

（4） onSubmit属性

该属性用于指定当用户单击提交按钮时触发的事件。

（5） target属性

该属性指定输入数据结果显示在哪个窗口中，其属性值可以设置为_blank、_self、_parent和_top。其中，_blank表示在新窗口中打开目标文件；_self表示在同一个窗口中打开，该项一般不用设置；_parent表示在上一级窗口中打开，一般使用框架页时经常使用；_top表示在浏览器的整个窗口中打开，忽略任何框架。

例2.7 创建表单，设置表单名称为form，当用户提交表单时，提交至action.html页面进行处理。定义表单元素，代码如下：

</form>

<input>表单输入标记

表单输入标记是使用最频繁的表单标记，通过这个标记可以向页面中添加单行文本、多行文本、按钮等。<input>标记的语法格式如下：

<input>标记的属性如表2.1所示。

表2.1 <input>标记的属性

属性	描述
type	用于指定添加的是哪种类型的输入字段，共有10个可选值，如表2.2所示。
disabled	用于指定输入字段不可用，即字段变成灰色。其属性值可以为空值，也可以指定为disabled。
checked	用于指定输入字段是否处于被选中状态，用于type属性值为radio和checkbox的情况下。其属性值可以为空值，也可以指定为checked。
width	用于指定输入字段的宽度，用于type属性值为image的情况下。
height	用于指定输入字段的高度，用于type属性值为image的情况下。
maxlength	用于指定输入字段可输入文字的个数，用于type属性值为text和password的情况下，默认没有字数限制。
readonly	用于指定输入字段是否为只读。其属性值可以为空值，也可以指定为readonly。
size	用于指定输入字段的宽度，当type属性为text何password时，以文字个数为单位，当type属性为其他值时，以像素为单位
src	用于指定图片的来源，只有当type属性为image时有效。
usemap	为图片设置热点地图，只有当type属性为image时有效。属性值为URI，URI格式为 “#+<map>标记的name属性值”。例如，<map>标记的name属性值为Map，该URI为#Map
alt	用于指定当图片无法显示时显示的文字，只有当type属性为image时有效
name	用于指定输入字段的名称
value	用于指定输入字段默认的数据值，当type属性为checkbox和radio时，不可省略此属性；为其他值时，可以省略。当type属性为button、reset和submit时，指定的是按钮上的显示文字；当type属性为checkbox和radio时，指定的是数据项选定时的值

注：URI:统一资源标识符（Uniform Resource Identifier）

type属性是<input>标记中非常重要的内容，决定了输入数据的类型。该属性值父的可选项如表2.2所示。

表2.2 type属性的属性值

可选值	描述	可选值	描述
text	文本框	submit	提交按钮
password	密码域	reset	重置按钮
file	文件域	button	普通按钮
radio	单选按钮	hidden	隐藏域
checkbox	复选框	image	图像域

例2.8 在该文件中首先应用<form>标记添加一个表单，将表单的action属性设置为register_deal.jsp，method属性设置为post，然后应用<input>标记添加获取用户名和E-mail的文本框、获取密码和确认密码的密码域、选择性别的单选按钮、选择爱好的复选框、提交按钮和重置按钮（例2.7）。

<select>…</select>下拉列表框标记

<select>标记可以在页面中创建下拉列表框，此时的下拉列表框是一个空的列表，要使用<option>标记向列表中添加内容。<select>标记的语法格式如下：

</select>

<select>标记的属性如表2.3所示。

表2.3 <select>标记的属性

属性	描述
name	用于指定列表框的名称
size	用于指定列表框中显示的选项数量，超出该数量的选项可以通过拖动滚动条查看
disabled	用于指定当前列表框不可使用（变成灰色）
multiple	用于让多行列表框支持多选

例2.9 在页面中应用<select>标记和<option>标记添加下拉列表框和多行下拉列表框。关键代码如下：

下拉列表框：

<select name= “select”>

<option>数码相机区</option>

<option>摄影器材</option>

<option>MP3/MP4/MP5</option>

<option>U盘/移动硬盘</option>

</select>

多行列表框（不可多选）:

<select name= “select2” size= “2”>

<option>数码相机区</option>

</select>

多行列表框（可多选）:

<select name= “select3” size= “3”>

<option>数码相机区</option>

</select>

运行本程序，可发现在页面中添加了下拉列表框，如图2.12所示。

<textarea>多行文本标记

<textarea>为多行文本标记，与单行文本相比，多行文本可以输入更多的内容。通常情况下，<textarea>标记出现在<form>标记的标记内容中。<textarea>标记的语法格式如下：

<textarea cols= “digit” rows= “digit” name= “name” disabled= “disabled” readonly= “readonly” wrap= “value”> 默认值

</textarea>

<textarea>标记的属性如表2.4所示。

表2.4 <textarea>标记的属性

属性	描述
cols	用于指定多行文本框显示的列数（宽度）
rows	用于指定多行文本框显示的行数（高度）
name	用于指定多行文本框的名称，当表单提交后，在服务器端获取表单数据时应用
disabled	用于指定多行文本框不可使用（变成灰色）
readonly	用于指定当前多行文本框为只读
wrap	用于设置多行文本中的文字是否自动换行，可选值如表2.5所示

表2.5 wrap属性的可选值

可选值	描述
hard	默认值，表示自动换行，如果文字超过cols属性所指的列数就自动换行，并且提交到服务器时换行符同时被提交
soft	表示自动换行，如果文字超过cols属性所指的列数就自动换行，但提交到服务器时换行符不被提交
off	表示不自动换行，如果想让文字换行，只能按下Enter键强制换行

例2.10 在页面中创建表单对象，并在表单中添加一个多行文本框，文本框的名称为content，6行30列，文字换行方式为hard。关键代码如下：

</forms>

运用本实例，在页面中的多行文本框中可输入任意内容，运行结果如图2.13所示。

2.1.6 超链接与图片标记

HTML语言的标记有很多，本书由于篇幅有限，只能介绍一些常用标记。除了上面介绍的常用标记外，还有两个标记需要介绍，即超链接标记和图片标记。

超链接标记

超链接标记是页面中非常重要的元素，在网站中实现从一个页面跳转到另一个页面，这个功能就是通过超链接标记来完成的。超链接标记的语法非常简单。其语法格式如下：

属性href用来设定链接到哪个页面中。

图片标记

在浏览网站时通常会看到各式各样的漂亮图片，在页面中添加的图片是通过<img>标记来实现的。

<img>标记的属性如表2.6所示。

表2.6 <img>标记的属性

属性	描述
src	用于指定图片的来源
width	用于指定图片的宽度
height	用于指定图片的高度
border	用于指定图片外边框的宽度，默认值为0
alt	用于指定图片无法显示时显示的文字

下面给出具体实例，为读者演示超链接和图片标记的使用。

例2.11 在页面中添加表格，在表格中插入图片和超链接（例2.8）。

关键代码如下：

<tr>

<img src= “images/ASP.NET.jpg”/>

</td>

<img src= “images/C#.jpg”/>

</td>

</tr>

<tr>

</tr>

<tr>

<img src= “images/Java.jpg”/></td>

</tr>

<tr>

</tr>

</table>

运行本实例，结果如图2.14所示。

页面中的“查看详情”为超链接，当用户单击该超链接后，将转发至message.html页面，如图2.15所示。

2.2 HTML 5 新增内容

自从2010年HTML 5正式推出以来，就以一种惊人的速度被迅速地推广，世界各知名浏览器厂商也对HTML 5 有很好的支持。例如，微软就对IE 9做了标准上的改进，使其能够支持HTML 5。而且HTML 5还有一个特点，就是在老版本的浏览器上也可以正常运行。本节将为大家介绍与HTML 4相比，HTML 5新增的元素与属性。

注意：HTML 5 的出现代表着Web开发进入了一个新的时代。但这并不表示现在用HTML 4开发的网站要重新创建，因为HTML 5内部功能并不是革命性的，而是发展性的。这正是HTML 5兼容性的表现。

2.2.1 新增的元素

在HTML 5中新增了以下元素。

（1）<section> 元素

<section>元素表示页面中的一个区域，例如章节、页眉、页脚或页面中的其他部分。可以与h1、h2、h3、h4等元素结合起来使用，标示文档结构。

例2.12 应用<section>标记在页面中定义一个区域（例2.9）（code_add 2.12_2.9）

）。代码如下：

<section>

<h2>section 标记的使用</h2>

<p>完成百分比： 100%</p>

</section>

上面这段代码相当于在HTML 4中使用<div>标记在页面中定义了一个区域。

注：section ：n. 截面；部分；部门；地区；章节；vi. 被切割成片；被分成部分；vt. 把…分段；将…切片；对…进行划分。

（2）<article> 元素

<article>元素表示页面中的一块与上下文不相关的独立内容，例如博客中的一篇文章、一段用户评论等。除了内容部分，一个<article>元素通常有自己的标题、脚注等内容。

例2.13 应用<article>元素在页面中定义一个区域（例2.10）（代码2.13_2.10）。代码如下：

<article>

</header>

<p>苹果素有“水果之王”的美称，它含有丰富的维生素C，能让皮肤细嫩、柔滑而白皙。</p>

</footer>

</article>

（3）<header> 元素

<header>元素表示页面中一个内容区域或整个页面的标题。在例2.13中就为大家演示了<header>元素的应用。

注：<head>标记是HTML文件的头标记，作用是放置HTML文件的信息。如定义CSS样式代码可放置在<head>与</head>标记中。

（4）<footer> 元素

<footer>元素表示整个页面或页面中一个内容区域块的脚注，例如日期、作者信息等。在例2.13中就为大家演示了<footer>元素的应用。

（5）<aside> 元素

<aside>元素用来表示当前页面或文章的附属部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等信息。

例2.14 应用<aside>元素定义页面侧栏（例2.11）。

<aside>

<nav>

<ul>

<li>

<a href= “#”>明日图书</a> 2017-2-27

</li>

<li>

<a href= “#”>明日软件</a> 2017-2-27

</li>

<li>

<a href= “#”>编程词典</a> 2017-2-27

</li>

</ul>

</nav>

</aside>

页面运行结果如图2.16所示。

注：HTML <nav> 标签：<nav> 标签是 HTML 5 中的新标签，<nav> 标签定义导航链接的部分。Internet Explorer 9, Firefox, Opera, Chrome 以及 Safari 支持 <nav> 标签。Internet Explorer 8 以及更早的版本不支持 <nav> 标签。

internet explorer：因特网浏览器；微软网页浏览器

Firefox [faifɔ:ks]：火狐浏览器。Mozilla Firefox，中文俗称"火狐"(正式缩写为Fx或fx，非正式缩写为FF)，是一个自由及开放源代码网页浏览器。Mozilla Firefox，非正式中文名称火狐，是一个开源网页浏览器，使用Gecko引擎(即非ie内核)，由Mozilla 基金会与数百个志愿者所开发。原名“Phoenix”（凤凰），之后改名“Mozilla Firebird”（火鸟），再改为现在的名字Firefox。目前最新的正式版本为Firefox 53.0.2。根据英国防病毒公司Sophos的最新调查数据显示，Firefox连续三年成为互联网用户最受信赖的浏览器

Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器，是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。Opera浏览器创始于1995年4月。2018.7.26日最新版本54.0(54.0.2952.64)。2016年2月确定被奇虎360和昆仑万维收购。 2018年6月29日，Opera向SEC提交了上市申请。

奇虎360是（北京奇虎科技有限公司）的简称，由周鸿祎于2005年9月创立，主营360杀毒为代表的免费网络安全平台和拥有问答等独立业务的公司。该公司主要依靠在线广告、游戏、互联网和增值业务创收。北京昆仑万维是一家全球领先、业内前沿的综合性互联网集团。

Google Chrome浏览器

Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。

2.2.2 新增的input元素类型

在HTML 5中新增了很多input元素类型。这些新增的元素可以使程序员更加方便地创建页面。HTML 5新增的input元素类型如下：

（1） email

将input元素的类型设置为email，表示文本框必须输入E-mail地址。

（2） url

url表示必须输入URL地址。

（3） number

number表示必须输入数值的文本框。

（4） range

range表示必须输入一定范围内数值的文本框。

2.3 CSS样式表

CSS是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准。CSS标准中重新定义了HTML中原来的文字显示样式，增加了一些新概念，如类、层等，可以对文字重叠、定位等。在CSS还没有引入到页面设计之前，传统的HTML语言要实现页面美化在设计上是十分麻烦的，例如要设计页面中文字的样式，如果使用传统的HTML语句来设计页面就不得不在每个需要设计的文字上都定义样式。CSS的出现改变了这一传统模式。

注：W3C：万维网路联盟（World Wide Web Consortium [kən'sɔːtɪəm],简称W3C）。万维网联盟，又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立。建立者是万维网的发明者蒂姆·伯纳斯·李。

2.3.1 CSS 规则

在CSS样式表中包括3部分内容：选择符、属性和属性值。语法格式如下：

选择符{属性；属性值}

参数说明：

（1）选择符：又称选择器，是CSS中很重要的概念，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。

（2）属性：主要包括字体属性、文本属性、背景属性、布局属性、边界属性、列表项目属性、表格属性等内容。其中一些属性只有部分浏览器支持，因此应用起来有些复杂。

（3）属性值：为某属性的有效值。属性与属性值之间以“：”分隔。当有多个属性时，使用“；”分隔。图2.17为大家标注了CSS语法中的选择符、属性与属性值。

2.3.2 CSS 选择器

CSS选择器常用的是标记选择器、类别选择器、id选择器等。使用选择器可对不同的HTML标签进行控制，从而实现各种效果。下面对各种选择器进行详细介绍。

标记选择器

HTML页面是由很多标记组成的，例如图像标记<img>、超链接标记<a>、表格标记<table>等。CSS标记选择器就用于声明页面中哪些标记采用了哪些CSS样式。例如a选择器，就声明了页面中所有<a>标记的样式风格。

例2.15 定义a标记选择器，在该标记选择器中定义超链接的字体与颜色。代码如下：

<style>

font-size:9px;

color:#F93

}

</style>

类别选择器

使用标记选择器非常快捷，但却有一定的局限性。声明一个标记选择器后，页面中所有该标记的内容都会有相应的变化。例如页面中有3个<h2>标记，如果想要每个<h2>的显示效果都不一样，使用标记选择器就无法实现了，这时就需要引入类别选择器。

类别选择器的名称由用户自己定义，并以“.”开头，定义的属性与属性值也要遵循CSS规范。要应用类别选择器的HTML标记，只需使用class属性来声明即可。

例2.16 使用类别选择器控制页面中字体的样式（例2.12）。

关键代码如下：

//以下为定义的CSS样式

<style>

.one{ //定义类名为one的类别选择器

font-family:宋体; //设置字体

font-size:24px; //设置字体大小

color:red; //设置字体颜色

}

.two{

font-family:宋体；

font-size:16px;

color:red;

}

.three{

font-family:宋体；

font-size:12px;

color:red;

}

</style>

</head>

<body>

<h2 class= “one”>应用了选择器one</h2>

// 定义样式后页面会自动加载样式

<h2 class= “two”>应用了选择器two</h2>

<h2 class= “three”>应用了选择器three</h2>

</body>

在上面的代码中，页面中的第一个<h2>标记应用了one选择器，第二个<h2>标记应用了two选择器，第三个<h2>标记应用了three选择器。运行结果如图2.18所示。

说明：在HTML标记中，不仅可以应用一种类别选择器，也可以应用多种类别选择器，这样可使HTML标记同时加载多个类别选择器的样式。在多种类别选择器之间，用空格进行分隔，例如 “<size color>”（代码2.16_2.12_sm）

id选择器

id选择器是通过HTML页面中的id属性来选择增添样式，与类别选择器基本相同。但需要注意的是，由于HTML页面中不能包含两个相同的id标记，因此定义的id选择器也就只能被使用一次。

命名id选择器要以“#”开始，后加HTML标记中的id属性值。

例2.17 使用id选择器控制页面中字体的样式（例2.12）。

关键代码如下：

<style>

#first{ //定义id选择器

font-size:18px

}

#second{

font-size:24px

}

#three{

font-size:36px

}

</style>

<body>

<p id= “first”>id 选择器</p> //在页面中定义标记，则自动应用样式

</body>

运行本实例，结果如图2.19所示。

2.3.3 在页面中包含CSS

在对CSS有了一定的了解后，下面介绍在页面中包含CSS样式的几种方式，其中包括行内样式、内嵌式和链接式。

行内样式

行内样式是比较直接的一种样式，直接定义在HTML标记之内，通过style属性来实现。这种方式比较容易令初学者接收，但是灵活性不强。

例2.18 通过行内定义样式的形式，实现控制页面文字的颜色和大小（例2.13，代码11）。

关键代码如下：

//在页面中定义表格

<tr>

<td><p style= “color:#F00; font-size:36px;”> 行内样式一</p></td> <!—在页面文字中定义CSS样式-->

</tr>

<tr>

<td><p style= “color:#F00; font-size:24px;”> 行内样式二</p></td>

</tr>

<tr>

<td><p style= “color:#F00; font-size:18px;”> 行内样式三</p></td>

</tr>

<tr>

<td><p style= “color:#F00; font-size:14px;”> 行内样式四</p></td>

</tr>

</table>

运行本实例，结果如图2.20所示。

内嵌式

内嵌式样式表就是在页面中使用<style></style>标记将CSS样式包含在页面中。例2.16就是使用这种内嵌样式表的模式。内嵌式样式表的形式没有行内标记表现的直接，但是能够使页面更加规整。

与行内样式相比，内嵌式样式表更加便于维护。但是每个网站都不可能由一个页面构成，而每个页面中相同的HTML标记又都要求有相同的样式，此时使用内嵌式样式表就显得比较笨重，而使用连接式样式表即可轻松解决这一问题。

链接式

链接外部CSS样式表是最常用的一种引用样式表的方式，将CSS样式定义在一个单独的文件中，然后在HTML页面中通过<link>标记引用，是一种最为有效的使用CSS样式的方式。

参数说明：

（1） rel:定义外部文档和调用文档间的关系。

（2） href: CSS文档的绝对或相对路径。

（3） type: 指的是外部文件的MIME类型。

注：MIME（multipurpose internet mail extensions）

(多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。)

例2.19 通过链接式样式表的形式在页面中引入CSS样式（例2.14，代码12）。

（1）创建名称为css.css的样式表，在该样式表中定义页面<h1>、<h2>、<h3>、<p>标记的样式。

关键代码如下：

h1,h2,h3{ //定义CSS样式

color:#6CFw;

font-family: “Trebuchet MS”, Arial,Helvetica, sans-serif;

}

color:#FOCs; //定义颜色

font-weight:200; //设置文本的粗细

font-size: 24px; //设置字体大小

}

注： font-weight 属性设置文本的粗细。

该属性用于设置显示元素的文本中所用的字体加粗。数字值 400 相当于关键字 normal，700 等价于 bold。每个数字值对应的字体加粗必须至少与下一个最小数字一样细，而且至少与下一个最大数字一样粗。

可能的值

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100 200 300 400 500 600 700 800 900	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。

Trebuchet ['trebjʊʃet; -bəʃet] n. 抛石机；分析天平；捕机

Trebuchet MS是微软公司的网页核心字体之一，与Arial相似，Trebuchet MS比Arial看起来优雅、古典一点。可以用来做标题，但小字号阅读起来会很困难（低于13px阅读起来就很累了，不太推荐用来做正文字体）。在苹果系统上也可以用Helvetica做替代。

Arial是一套随同多套微软应用软件所分发的无衬线体TrueType字型。

（2）在页面中通过<link>标记将CSS样式表引入到页面中，此时CSS样式表定义的内容将自动加载到页面中。关键代码如下：

<title>通过链接形式引入CSS样式</title>

</head>

<body>

<h2>页面文字一</h2> //在页面中添加文字

<p>页面文字二</p>

</body>

运行程序，结果如图2.21所示。

2.4 CSS 3的新特征

国际标准化组织HTML 5 和CSS 3曾是互联网技术中最受关注的两个话题。CSS 3是CSS技术的一个升级版本，是由Adobe Systems、Apple、Google、HP、IBM、Microsoft、Mozilla、Opera、Sun Microsystems(已被甲骨文收购)等许多Web界的巨头联合组成一个名为CSS Working Group的组织共同协商策划的。

2.4.1 模块与模块化结构

在CSS 3中，并没有采用总体结构，而是采用了分工协作的模块化结构。采用这种模块化结构，是为了避免产生浏览器对于某个模块支持不完全的情况。如果把整体分成几个模块，各浏览器可以选择支持哪个模块，不支持哪个模块。例如，普通电脑中的浏览器和手机上用的浏览器应该针对不同的模块进行支持。如果采用模块分工协作的话，不同设备上所用的浏览器都可以选用不同模块进行支持，方便了程序的开发。CSS 3中的常用模块如表2.7所示。

表2.7 CSS 3中的模块

模块名称	功能描述
basic box model	定义各种与盒子相关的样式
Line	定义各种与直线相关的样式
Lists	定义各种与列表相关的样式
Text	定义各种与文字相关的样式
Color	定义各种与颜色相关的样式
Font	定义各种与字体相关的样式
Background and border	定义各种与背景和边框相关的样式
Paged Media	定义各种页眉、页脚、页数等页面元素数据的样式
Writing Modes	定义页面中文本数据的布局方式

2.4.2 一个简单的CSS 3实例

对CSS 3中模块的概念有了一定的了解之后，本节通过实例介绍CSS 3 与CSS 2 在页面设计中的区别。

在CSS 2中，如果要对页面中的文字添加彩色边框，可以通过DIV层来进行控制。

例2.20 在CSS 2中使用DIV层对页面中的文字添加彩色边框（例2.15，代码13）。

关键代码如下：

<title>使用CSS 2对页面中的文字添加彩色边框</title>

<style>

#boarder{

margin:3px;

width:180px;

padding-left:14px;

border-width:5px;

border-color:blue;

border-style:solid;

height:104px;

}

</style>

</head>

<body>

文字二<br>

文字三<br>

文字四<br>

文字五<br>

</div>

</body>

在Firefox浏览器中运行该实例，结果如图2.22所示。

注：DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。DIV在编程中又叫做整除，即只得商的整数。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。

定义

<div> 可定义文档中的分区或节(division/section)。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

注释:<div> 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。

提示:请使用 <div> 元素来组合块级元素，这样就可以使用样式对它们进行格式化。

在CSS 3中添加了一些新的样式，例如本实例中的边框，就可以通过CSS 3 中的border-radius属性来实现。border-radius属性指定好圆角的半径，即可绘制圆角边框。

例2.21 在CSS 3中使用border-radius属性对页面中的文字添加边框（例2.16，代码14）。

<style>

#boarder{

border:solid 5px blue;

border-radius:20px;

-moz-border-radius:20px;

padding:20px;

width:180px;

}

</style>

</head>

<body>

文字二<br>

文字三<br>

文字四<br>

文字五<br>

</div>

</body>

说明：在使用border-radius属性时，如果使用Firefox浏览器，需要将样式代码书写成“-moz-border-radius”；如果使用Safari浏览器，需要将样式代码书写成“-webkit-border-radius”；如果使用Opera浏览器，需要将样式代码书写成“border-radius”；如果使用Chrome浏览器，需要将样式代码书写成“border-radius”或“-webkit-border-radius”的形式。

在Firefox浏览器中运行该实例，结果如图2.23所示。

在上面的两个实例中，都是对页面中的文字添加了边框，但是如果在这两个实例中多添加几行文字，即可发现运行结果的变化，如图2.24和图2.25所示。

从图2.24和图2.25中的运行结果不难看出CSS 2与CSS 3 的区别，对于界面设计者来说，这无疑是个好消息。在CSS 3中新增的各种各样的属性，可以摆脱CSS 2中存在的很多束缚，从而使整个网站的界面设计迈上一个新的台阶。

2.5 小结

本章介绍了网页设计中不可缺少的内容，即HTML标记与CSS样式。HTML是构成网页的灵魂，对于制作一般网页，尤其是静态网页来说，HTML完全可以胜任，但如果要制作漂亮的网页，CSS是不可缺少的。本章除了对HTML与CSS样式表的基础内容进行讲解外，还对HTML 5 与CSS 3 进行了简单的介绍，以此来带领广大读者进入Web学习之旅。

2.6 实践与练习

1. 创建HTML页面，实现在页面中使用删除线样式标注商品特价。（代码2.15）

注：text-decoration[dekə'reɪʃ(ə)n] n. 文字修饰；文本装饰

<span> 标签被用来组合文档中的行内元素。span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

" "是网页编辑中常用的代码，表示空格。

http://www.w3school.com.cn/tags/tag_meta.asp

https://www.jb51.net/web/158860.html

提示和注释：

注释：<meta> 标签永远位于 head 元素内部。

注释：元数据总是以名称/值的形式被成对传递的。

必需的属性

属性	值	描述
content	some_text	定义与 http-equiv 或 name 属性相关的元信息

可选的属性

属性	值	描述
http-equiv	content-type expires refresh set-cookie	把 content 属性关联到 HTTP 头部。
name	author description keywords generator revised others	把 content 属性关联到一个名称。
scheme	some_text	定义用于翻译 content 属性值的格式。

http-equiv 属性

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：

这样发送到浏览器的头部就应该包含：

content-type: text/html

charset:iso-8859-1

expires:31 Dec 2008

当然，只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。

content 属性

content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。

content 属性始终要和 name 属性或 http-equiv 属性一起使用。

scheme 属性

scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义。

全局属性

2. 创建HTML页面，并在其中添加表格，实现在浏览网站消息时鼠标经过表格的某个单元格，会显示相关的提示信息。（代码2.16）

3. 创建HTML页面，并在其中添加超链接，实现当鼠标经过超链接时，鼠标指针变为不同的形状。（代码2.17）

注：cursor ['kɜːsə] n. 光标；（计算尺的）[计] 游标，指针

posted @ 2020-03-17 09:14 小西贝呦阅读(569) 评论(0) 编辑收藏举报

刷新页面返回顶部

小西贝

let's go laker

第2章 HTML与CSS网页开发基础

注：MIME（multipurpose internet mail extensions）

可能的值

必需的属性

可选的属性

http-equiv 属性

content 属性

scheme 属性

全局属性

公告