第 3 章 HTML 和 CSS

第 3 章 HTML 和 CSS

主讲：陶建平 E-mail ： [email protected] 华中科技大学网络与计算中心

3


本章学习内容

HTML 的文档结构常见 HTML 标记的作用与应用基本 CSS 选择器的用法 CSS 的实现方式使用 CSS 进行样式设计

4


具体要求

掌握 HTML 中标记的使用方法会用 HTML 的标记设置颜色、文本格式和列表理解表格、框架、表单的作用掌握 CSS 样式表的结构掌握在网页中添加 CSS 的方法

3.1 HTML 语言基础3.1.1 HTML 简介 HTML 全称为 Hypertext Markup Language （超文件标记语言）。 HTML 不是一种编程语言，而是一种描述性的标记语言，用于描述超文本中内

容的显示方式。

HTML 中的一些基本概念： 1 ．标记

1 ）单标记： < 标记 >

2 ）双标记： < 标记 >… 内容… </ 标记 >

2 ．标记属性： < 标记属性 1=“” 属性 2=“” …>

3 ．注释语句：

3.1.2 HTML 的文档结构和语法规则1.HTML 的文档结构

<html> <head>

　 …… </head> <body>　　 …… </body></html>

HTML 文档标记

文档的头部标记

文档的主体标记

<title> <base> <link> <meta>

<script> <style>

2.HTML 的语法规则

1 •HTML标记通常是成对使用，有一个开始标记就对应一个尾标记，尾标记只是在始标记的前面加上一个斜杠“/”表示结束。

2 •HTML标记不区分大小写。

3 •HTML标记可以嵌套，但不允许相互交叉。

4 •HTML文件一行可以写多个标记，一个标记也可以分多行书写，不用任何续行符号。

<body> <b><i> 这行文字以粗斜体显示 </i></b> </body>

<body> <b><i> 这行文字以粗斜体显示 </b></i> </body>

<font color=”#000000” face=” 宋体” > 网页设计与网站建设 </font>

<font color=”#000000” face=” 宋体” >网页设计与网站建设</font>

3.1.3 文本格式标记1. 段落和换行标记

HTML 文件中的换行、回车符和空格在显示效果中是无效的。见例3-1

对例 3-1 进行段落排版。

使用格式作用

段落标记 <p>… 文字内容… </p> 设置文章段落的开始和结束。

换行标记… 文字内容… <br>或…文字内容… <br/>

另起一行显示文字。

空格一个半角空格，多个空格需多次使用。

2. 标题和水平居中标记

在 HTML 中设定了 6 个标题标记，从 <h1> 到 <h6> 来分别显示不同级别的标题，

<h1> 标题的字号最大， <h6> 最小。见例3-2所示。

使用格式作用标题格式标记 <hn>… 文字内容… </hn> 定义文章内章节标题的显

示格式。水平居中标记 <center>… 文字内容 … </

center>显示文字水平居中。

3. 文字列表标记文字列表的主要作用是使图文信息有序地编列，使其条理化，并以列表的样式

显示出来。

见例3-3所示。

使用格式作用

无序列表标记

<ul><li> 列表项 </li><li> 列表项 </li>……</ul>

无序列表，小的列表项使用<li></li> 标记，放置在 <ul></ul>标记中间。

有序列表标记

<ol><li> 列表项 </li><li> 列表项 </li>……</ol>

有序列表，用法类似无序列表。

4. 段落缩进标记

见例3-4所示。

使用格式作用

段落缩进标记<blockquote>

… 文字内容…</blockquote>

实现文字的段落缩进，多次缩进可以叠加使用缩进标记。

3.1.4 表格标记

简单的 HTML 表格由 table 标记以及一个或多个 th 、 tr 或 td 标记组成。

基本表格见例3-5所示。表格的行、列合并，见例3-6所示。

表格基本标记使用格式作用table <table> 表格内容 </

table>创建一个表格。

tr <tr>……</tr> 创建表格的行。td <td>……</td> 每行中的单元格，即列。th <th>……</th> 创建表头，即表格的第一行。

caption <caption>……</caption> 表格标题

3.1.5 图像和多媒体标记1. 图像标记

图像在网页中是非常重要的元素， HTML 语言提供了 <img> 标记来处理图像的显示，下面介绍插入图像的格式：

<img src=”img-URL” alt=” 文字” width=”x” height=”y” border=”value” hspace=” x” vspace=” y” align=”left/right/center”> 。

网页中插入图像见例3-7所示。

2. 多媒体标记在当前位置插入其他媒体（视频、音频等）可使用 <embed></embed> 或<object></object> 标记。格式为：<embed src=”file-URL” height=”x” width=”y” hidden=”true/false” autostart=”true/false” ></embed>

3.1.6 超链接标记超链接标记

<a href=“http://www.artech.cn/study/index.htm”> 我的网页 </a>

链接标记链接地址链接文本

结束标记1. 文字链接 <a href=“link-URL”> 链接文字 </a>

2. 图像链接 <a href=“link-URL”><img src=“ 链接图片地址” ></img></a>

3. 电子邮件链接 <a href=“mailto:E-mail 地址” > 链接邮箱 </a>

网页中插入超链接，见例3-8所示。

3.1.7 框架标记

框架主要包括两个部分，一个是框架集 <frameset> ，另一个就是框架<frame> 。框架集定义了在一个窗口中显示的框架数、框架的尺寸、载入到框架的网页等。

而框架则是指在网页上定义的一个显示区域。该标记放在框架集标记之间。

框架集的应用见例3-9。

框架集框架 1

框架 2

框架 3

3.2 CSS 基础3.2.1 CSS 概述

CSS （ Cascading Style Sheet ），译为层叠样式表，它是用于控制网页样式并允

许将样式信息与网页内容分离的一种标记性语言。

它的引入弥补了传统HTML 的几个缺陷：

维护困难。标记不足。网页文件过于臃肿。定位困难。

3.2.2 CSS 选择器CSS 语法规则由两个主要的部分构成：选择器（ selector ），以及一条或多条声

明（ declaration ）。其格式为： selector {declaration1; declaration2; ... ;declarationN }

1. 标记选择器（ Type Selectors ）HTML 文件由多个不同的标记组成，而 CSS 标记选择器就是声明哪些标记采用

何种样式来显示。因此，每一个 HTML 标记的名称都可以作为相应的标记选择器的名称。

h1 { color:blue; font-size:14px}

标记选择器声明 1 声明 2

属性值

2. 类别选择器（ Class Selectors ）类别选择器以一个点号显示，名称可以由用户自定义，属性和值与标记选择器

一样，也必须符合 CSS 规范。类别选择器的格式如下：.class { text-align: center; font-family: arial; }

类别选择器的应用见例3-10。

3.ID 选择器（ ID Selectors ） ID 选择器可以为标有特定 id 的 HTML 元素指定样式，以“ #” 来定义。 ID

选择器的使用方法与类别选择器基本相同，不同之处在于 ID 选择器只能在页面中使用一次。 ID 选择器的格式如下：

#id { color:yellow; font-size:30px; }

ID 选择器的应用见例3-11。

CSS 属性值的书写规则：值的不同写法和单位：

– 除了英文单词 red ，我们还可以使用十六进制的颜色值： p { color:#ff0000; }– 还可以通过两种方法使用 RGB 值：

p { color:rgb(255,0,0); }

p { color:rgb(100%,0%,0%); } 如果值为若干单词，则要给值加引号： p { font-family: "sans serif"; } 多重声明：

p { text-align:center; color:black; font-family:arial; }

为增强样式定义的可读性，可在每行只描述一个属性： p {

text-align:center;

color:black;

font-family:arial;

}

当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。

3.2.3 CSS 在网页中的使用方法1. 内嵌样式

内嵌样式是直接在 HTML 的标记中使用 style 属性，并将 CSS代码写在属性中。当样式仅需要在一个元素上应用一次时，可使用内嵌样式。

CSS 的内嵌样式，见例3-12。

2. 内部样式表 (Internal Style Sheet)内部样式表是将 CSS 写在 HTML 文档的 <head> 和 </head> 之间，并且用

<style></style> 标记进行声明，它只对所在的页面有效。 CSS 的内部样式表，见例3-13。

3. 外部样式表 (External Style Sheet)如果很多网页需要用到同样的样式，可以将样式写在一个以 .css 为后缀的 CSS 文件里，然

后在每个需要用到这些样式的网页里引用这个 CSS 文件。外部样式表调用方法有 2 种：1 ）链接式

<head>

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

</head>

链接外部样式表，见例3-14。

2 ）导入式导入样式表与链接样式表的功能基本相同，只是语法和运作方式上略有区别：

<head>

<style type=“text/css”>



</style>

</head>

除了上面的写法外，还可以采用以下几种写法：@import url(“mystyle.css”);

@import url(‘mystyle.css’);

@import mystyle.css;

@import “mystyle.css”;

@import ‘mystyle.css’;

4. 各种方式的优先级1 ）内嵌样式 > 内部样式 >外部样式；2 ）外部样式中，出现在后面的优先级高于出现在前面的。

两种方式的区别：• import导入方式的样式表，在 HTML 文件初

始化时，会被导入文件内，作为文件的一部分，类似内部样式的效果；

• link 链接方式：在 HTML 的标记需要格式时才以链接的方式引入。

3.2.5 用 CSS 设置图像效果1. 设置图片边框

在 CSS 中，可以通过下面三个边框的属性来添加各种边框效果：• border-width : length /*边框宽度 */• border-color : color /*边框颜色 */• border-style : none | hidden | dotted | dashed | solid | double | groove | ridge |

inset | outset /*边框的线型 */

见例3-15。

2. 图文混排在 CSS 中主要通过设置图片的 float 属性来实现。 float 的取值有 3 个： none（不设置）， right （图片在文字右侧）和 left （图片在文字左侧）。

见例3-16。

3.2.6 CSS伪类和滤镜1. CSS伪类

在 CSS 中，伪类用于向某些选择器添加特殊的效果。锚伪类

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：a:link /*未被访问状态 */

a:visited /*已被访问状态 */

a:hover /*鼠标悬停状态 */

a:active /*活动状态 */

见例3-17。

2. CSS滤镜使用滤镜可以把可视化的效果添加到一个标准的 HTML 元素上，例如图片、文

本容器、以及其他一些对象。常用的 CSS滤镜有： Alpha：调整对象内容的透明度（整体透明度，线性渐变或放射渐变的透明度）； Blru：制作对象内容的模糊效果； DropShadow：制作对象的阴影效果； FlipH/V：水平 /垂直翻转对象内容； Glow ：为对象的外边界增加光效。

本章内容结束谢谢！

第 3 章 HTML 和 CSS

Documents

Transcript of 第 3 章 HTML 和 CSS