第2章 HTML和CSS(HTML)

1、连接 其他 网络 打印机 2.1 HTML基础 2.2 XML基础 2.3 使用CSS布局网页 Web应用程序主要通过HTML和XML来表达信息。 HTML确定了网页的文档结构，而XML则定义了信息自身 的结构。层叠样式表（Cascading Style Sheet，CSS） 用于定义HTML网页在浏览器中的显示效果。 本章主要对这三方面的技术进行详细介绍。 网上自学网站： w3school 在线教程 http:/ HTML是创建Web页面的基本框架语言，它利用标记 （tag）来描述网页的字体、大小、颜色及页面布局。 自1990年以来HTML就一直被用作WWW上的信息表 示语言，用于描述网页的

2、格式设计和它与WWW上其他网 页的链接信息。 可以说，HTML是整个Web开发技术的基础， ASP.NET网页上的影像、语音、图片和文字，甚至后台程 序都是通过HTML连接起来的。 为了方便浏览器的开发，W3C组织为HTML制定了 相应的国际标准，目前常用的版本为4.01。 但这一标准并不严格，而且由于历史原因，一些老的 HTML网页并不规范，例如，在有的网页中起始标签与 结束标签并没有严格对应，而且也不区分大小写。 由于HTML的老版本并不统一，所以在解析老版本的 HTML网页时，各种浏览器的开发者往住自行其是，从 而导致同一个网页在不同种类的浏览器（甚至是同一种 浏览器的不同版本）中显示效

3、果不一样。 为了统一网页的编写规则，在原有HTML规范的基础 之上，W3C制定了更为严格的XHTML（eXtensible HyperText Markup Language）规范，它是“遵循 XML规范”的HTML： XHTMLXML+HTML 引入了XML文档的一些特性（如起始标签与结束标 签必须严格对应，整个文档只能有一个根节点等）。 用HTML编写的超文本称为HTML文件，它能独立于 各种操作系统平台。 HTML文件是一个放置了标签的ASCII文件，可以使 用任何一种文本编辑器来编辑，例如： 记事本； Dreamweaver； Microsoft Visual Studio 2010；

4、 HTML文件的扩展名是：“.html”或“.htm”。 HTML文档中的DOCTYPE指令用于声明它所遵循的 规范。例如：使用Dreamweaver创建一个网页在开始的 代码中出现：（p16p16说明）说明） 或 W3C建议编写新的网页时遵循XHTML规范，简单总 结如下。 （1）标签名称必须小写。 （2）属性名称必须小写，属性值用双引号括起来。 （3）标签必须严格嵌套。 （4）标签必须严格配对，即使是空元素也要封闭。 例：传统的HTML中允许以下代码 这是一段文字 换行 但在XHTML中，必须改为： 这是一段文字 换行 （5）XHTML区分“内容标签”与“结构标签”。 像之类的属于内容标签

5、，它所包围的内容往往具 有一定的含义，而、之类的则属于结构标 签，多用于定义文档的总体结构。XHTML要求不要将结 构标签嵌入内容标签中。例如，以下代码不符合不符合XHTMLXHTML 规范规范。 HTML使用描述性的标记符，即标签，来指明文档的 不同内容。起始标签用角括号将特定字符串括起来表示特 定的含义，结束标签还需要在特定字符串前面增加一个斜 线“/”，其余部分和起始标签相同。一个标准的HTML 页面应该包含几个重要的标签，如和标 签、和标签、和标签 等。 HTML的格式没有具体要求，但建议写成缩排格式， 以便检查。HTML标签不区分大小写，但在默认情况下， ASP.NET中系统提供的H

6、TML标签都用小写字母表示。 HTML标签可以分为两类：单标签和双标签。 （1）单标签：只需单独使用就能完整表达意思的标 签，格式为： （2）双标签：由“始标签”和“尾标签”两部分构 成，必须成对使用。格式为： 内容内容/ 例如：用粗体书显示标签间的内容。 这是一个简单的HTML页面的例子 大多数标签都拥有一些属性，大部分属性都有默认值， 利用这些属性可以定制各种效果。设置和改变属性时，将 “属性名=属性值”放在单标签和双标签的始标签内，其 格式为： 2 各属性之间无先后次序，属性值也可省略（即取默认 值）。 这些标签告诉浏览器HTML文档的结构和文本的含义。 例如： 这是一个段落这是一个段落

7、 起始标签内容结束标签 起始标签、结束标签再加上其中的内容称为“元素元素 （ElementElement）”。 空元素（Empty Element）：内容为空。例： 14 例 ： H T M L 文 档 的 基 本 结 构 ， 标 签 属 性 设 置 。 （SimpleHTML.htm） 一个简单的HTML例子 这是一个简单的HTML页面的例子。 这是一个到华东交通大学 的超级链接。 HTML定义了网页的逻辑结构，浏览器（Web Browser）是专门设计出来解析HTML代码的程序，由它 负责将网页呈现在屏幕上。 html标签定义一个网页 head定义网页的头部， title定义网页的标题 b

8、ody定义网页的主体 p启动一个段落 HTML文档拥有一种“嵌套”结构 一个基本的HTML文档通常包含以下3对顶级标记。 （1 1）文件标记：）文件标记： 整个HTML文档内容均在标记之中。 （2 2）头部标记：）头部标记： 整个HTML文档分头部和主体部分。凡是在头部标记 之内的内容，例如标题等，均属于头部信息。头部信息不 显示在Web页中。 头部标题标记：头部标题标记： 在此标记之间的内容将作为标题显示在浏览器的标题 栏。它标记只能放在标记之间。 （3 3）主体标记：）主体标记： 主体是Web页的主要部分，用BODY 标记定义的信息将显示在Web页中。 这3个标签是最基本的标签最基本的标签

9、，指明了一个HTML文档 的基本结构。主体标记的常用属性及说明（P19）。 各个颜色属性的值有两种表示方法：使用颜色名称来 指定，如红色、绿色和蓝色分别用red、green和blue表 示；使用十六进制格式数值#RRGGBB来表示，RR、 GG和BB分别表示颜色中的红、绿、蓝三基色的两位十六 进制数。 Page Title Contents of page HTML页面的两个主要部分是和。 是放置标记和标记（附带各种元数据） 的区域。包含要显示的元素 。其它常用标记见教材 表2-2 所示。 1. 1. 注释：注释： 不会在网页上显示注释内容 2. 2. 段落与换行段落与换行 : : 和 例：B

10、lock.htm、 Block1.htm、 Block2.htm 3. 3. 预先格式化文本预先格式化文本: : 例：按原始格式显示文本Block3.htm(Block.htm 加上 标签)。 4. 4. 分级标题：分级标题：,等 例：标题效果示例 20 5. 5. 列表：列表：HTMLHTML定义了种列表样式。定义了种列表样式。 无序列表：无序列表：列表前有一个小的项目符号 是列表元素的定界符 用于定界列表项 有序列表：有序列表：列表前有序号 是列表元素的定界符 用于定界列表项 定义列表表项：定义列表表项：列表分为两部分术语和相对的解释 是列表元素的定界符 和 用于定界列表项 21 HTML

11、 HTML列表列表 HTML HTML中的列表中的列表 无序列表无序列表 列表项一列表项一 列表项二列表项二 有序列表有序列表 列表项一列表项一 列表项二列表项二 22 定义列表定义列表 TCP 一种互联网通讯协议一种互联网通讯协议 ASP 微软早期的动态网页技术微软早期的动态网页技术 6. 6. 常用的字体样式：常用的字体样式： HTML提供了许多标签用于设置文字的各种样式。 例：字符样式标签。例：字符样式标签。 23 标签名标签名说明说明 粗体 斜体 删除线 下划线 和下标和上标 用等宽字体显示文本 符号符号说明说明转义符转义符 “双引号（英文）双引号（英文） 大于号大于号 版权号版权号

12、注册商标注册商标 乘号乘号 章节号章节号 人民币符号人民币符号 点号（居于中部，常用于点号（居于中部，常用于 人名）人名） 英镑符号英镑符号 注册商标注册商标 24 例：显示特殊字符例：显示特殊字符 显示特殊字符 HTML的一些特殊字符 HTML的标记符： 注册商标： 人民币符号： 元素放置在元素中，通常用来指明如 关键字、作者、网页制作工具等信息。这些信息不会在浏 览器中显示出来，但可以帮助搜索引擎为其建立更好的索 引。 除描述网页之外， 元素另一项功能是用来创 建HTTP响应头，以便让浏览器知道如何去处理这个网页， 比如网页什么时候过期？隔多少时间自动刷新等。 通常使用三个属性：name、

13、http-equiv和 content，其中name和http-equiv可任选一个与content配 合使用。 name： 它的属性值通常有keywords、description和author。其中 keywords用于指明网页的关键字，description用于描述网页，这两个 属性值通常就是搜索引擎所需要检索的信息。Author描述的是文件的 作者。比如下面的HTML代码，就是微软公司主页 （http:/ http-equiv： 用来构造HTTP头信息，它的属性值常用的有content-type 、 refresh和和expires 。 content-type：用来指明，以便浏览器能

14、使用 正确的字符集来显示网页。 例： refresh用于指明该网页的刷新周期，也就是说，隔多少时间自动 刷新一次。比如： refresh属性还可以指示。例： 例：网页自动跳转。例：网页自动跳转。 expires：用于表明这个网页过期的时间，这个时 间用GMT格式表示。如果设为0，则表示立即过期。比 如下面的例子，就表明该文件在2012年8月12日3时过 期。 . .定义超链接定义超链接 a href=“ 在标记对之间可指定作为超链接的文本或图像。 例如，指定超链接及其文本： 打开一个新窗口显示目标页 重要属性： hrefhref属性: : url target属性：指明显示的目标窗口。如果不使

15、用target属性，当浏 览者点击了链接之后将在原来的浏览器窗口中显示HTML文档。 target的值有：“_blank”、 “_top” 、“_parent” 和 “_search” 。 2. 2. 相对链接与绝对链接相对链接与绝对链接 是指链接对象的路径，绝对路径是指要链接对象的完整 URL。相对路径是指元素所在的网页路径相比较的结果。 例：相对路径举例。例：相对路径举例。 打开一个新窗口 点击查看图片 访问父文件夹中的网页 例：绝对路径举例。例：绝对路径举例。 用绝对路径访问网页 31 . . 定义书签定义书签 定义书签： 跳转到书签： 跳转到本页书签处 4. 图像链接：图像链接：嵌套使

16、用和 5. 定义定义Email链接链接 给作者发邮件 例：超链接例：超链接 32 1. Web1. Web图像的类型：图像的类型： Gif特点：显示256色，支持透明的背景，支持隔行扫描， 一个文件可含多帧图片。 JPEG特点：显示真彩色，不支持透明的背景，支持隔 行扫描。 PNG特点：支持数百万种颜色，支持透明的背景，支持 隔行扫描。 专业图像制作工具：dobe 公司的PhotoshopPhotoshop 33 2. 2. 显示图像显示图像 img标签的重要属性： src：图像的url alt:替换文本 width、height：图像的宽度和高度 例：显示图像。例：显示图像。 34 1. 1

17、. 表格标签表格标签 （用于制作表格或网页结构）（用于制作表格或网页结构） （1 1）（创建一个表格）（创建一个表格） 标签的属性与用途如表1-1所示： 标记属性功能 border=sizeborder=size设置表格边框大小 width= size设置表格的宽度，其值是像素或是百分比。 height=size设置表格的高度，其值是像素或是百分比。 cellspacing=size设置单元格间距 cellpadding =size设置单元格的内容到表格边框线的最短距离。 background =URL设置表格背景图片 bgcolor =colorvalue设置表格背景色 align=alig

18、nstyle设置对齐方式 cols =size设置表格的列数 （2 2）定制表格格式：）定制表格格式：。功能：定义表格的一行。 。功能：定义单元格。 ：表明这是表格一行中的一列，但是这 一列通常是表头，其内容会加粗显示。 标记属性标记属性功能功能 bgcolor=colorvaluebgcolor=colorvalue 设置单元格背景颜色设置单元格背景颜色 rowspan=num设置单元格所占的行数设置单元格所占的行数 colspan =num设置单元格所占的列数设置单元格所占的列数 align =alignstyle设置对齐方式设置对齐方式 valign =valignstyle设置单元格垂

19、直对齐方式设置单元格垂直对齐方式 width =size设置单元格宽度设置单元格宽度 height=size设置单元格高度设置单元格高度 A对齐属性对齐属性 align：用来设置单元格的内容在单元格内水平方向 上的对齐方式，其值有：left、right、center。 valign：用来设置单元格的内容在单元格内垂直方 向上的对齐方式，其值有：baseline、bottom、middle 和top。 BNowrap属性属性 Nowrap：设置即使内容的宽度超过单元格的宽度也 不换行，如果没有这个参数，将自动换行。 1. 1. 创建表格创建表格 例: Table.htm ：表示表格本身 ：表示表

20、格的标题 ：表示一行 ：表示每列的开头 ：表示表格的内容单元格 38 表格示例 列标题1 列标题2 行标题一 内容 内容 行标题二 内容 内容 39 2. 2. 设计表单设计表单 例：Form.html 一个HTML窗体由多个HTML输 入控件组成，用于供用户输入 数据 HTML使用标签定义一 个窗体 40 表单是用户和Web应用程序、Web数据库等进行交互的界面。在 Web上，通过表单可以完成用户和计算机或服务器之间进行的信息交 换。 form元素用来标识一个表单，其他的表单元素，如input、 select及textarea都应嵌在form元素中。form的语法结构如下： Name=”fo

21、rmName” action的值是处理程序的程序名(包括网络路径：网址 或相对路径），如：，当 用户提交表单时，服务器将执行counter.asp程序。 method用来定义处理程序从表单中获得信息的方式， 可取值为 get 或postpost。 get是将表单数据放在HTTP头中，作为URL的参数传 送，所以有一定的字符数限制，则只接受低于1K的资料。 post是将表单数据放在HTTP正文中传送，所以可以 传送较大的数据。你若看过别人的表单原始码的话，你会 发现申请表单用的是post 而搜寻器用的是get。 target用来指定显示表单的目标窗口。 （2 2） 标签标签 INPUT是最重要的

22、表单元素，因为按钮、文本框、密码框、图片按钮、文 件选择框、单选钮、复选框和隐藏控件都使用的是INPUT元素，然后通过type 属性进行区分。 表单控件表单控件对应的表单元素对应的表单元素说明说明 普通按钮普通按钮INPUT，type =“button”通过通过Onclick来设置按钮的点击事件来设置按钮的点击事件 提交按钮提交按钮INPUT，type =“submit”将表单提交到由将表单提交到由action属性所指定的属性所指定的URL 重置按钮重置按钮INPUT，type =“reset”表单内所有其他控件的内容重置表单内所有其他控件的内容重置 文本框文本框INPUT，type =“te

23、xt”用来输入单行文本用来输入单行文本 密码文本框密码文本框INPUT，type =“password”与文本框一样，区别是用与文本框一样，区别是用*字符代替内容字符代替内容 单选钮单选钮INPUT，type =“radio”对多个选项进行惟一选择时使用对多个选项进行惟一选择时使用 复选钮复选钮INPUT，type =“checkbox”经常用于多项选择经常用于多项选择 图片按钮图片按钮INPUT，type =“image”显示图片，具有提交按钮的功能显示图片，具有提交按钮的功能 文件选择框文件选择框INPUT，type =“file”用来选择文件用来选择文件 隐藏控件隐藏控件INPUT，ty

24、pe =“hidden”不显示，用来实现参数传递和过程控制不显示，用来实现参数传递和过程控制 标签用来定义一个用户输入区，用户可在其中 输入信息。此标记必须放在标记对之间。标记中共提供文本框、按钮、复选框、单选钮等八种类型 的输入区域，通过type属性进行区分。例如： 属性说明 TYPE设置输入域的类型 NAME设置表项的控制名，在表单处理时起作用 VALRE设置输入域的值（适用于radio和checkbox类型） CHECKED设置是否被选中（适用于radio，button，checkbox类型） SIZE建议文本输入字符数 MAXLENGTH最大文本输入字符数 SRC图像源 ALT图像输入

25、的替换文本 ALIGN图像输入的对齐方式 DISABLED被禁用 READONLY只读 ONFOCUS当元素获得焦点 ONBLUR当元素失去焦点 ONSELECT当文本被选中 例：文本输入框、复选框与单选框例：文本输入框、复选框与单选框 表单示例 文本输入框、复选框与单选框 请输入您的姓名： 请选择您的性别： 男 女 不告诉你 请选择您的年龄： 20岁以下 2030 30以上 您喜欢什么运动： 篮球 足球 排球 其他球 用来创建一个下拉列表框或可以复选的列表框。此标记 对用于标记之间。具有multiple、 name和size属性。例如： 请选择最喜欢的男歌星: 刘德华 张学友 郭富城 黎明

26、标记指定列表框中的一个选项，此标记具有 selected和value属性。value指定选项值，这个值要传 送到服务器上。服务器正是通过调用区域的 名字的value属性来获得该区域选中的数据项的。 创建可以输入多行的文本框，此标记对用于 标记对之间。 有name、cols和rows属性。 name 、 cols和rows属性分别用来设置文本框的名称、列数和行数。 列与行以字符数为单位。例如： 请输入密码： 在网页中可加入多媒体元素，如声音、视频和动画等。 注意： 1. 在网页中嵌入的多媒体元素能否在浏览器中播放取 决于客户端是否安装了相关的浏览器插件。 2. 设置查找多媒体元素的路径是否正确。

27、 3. 嵌入的多媒体元素 W3C推荐使用的标签： 实际广泛使用的标签： 标签也可以播放媒体文件 1 1播放播放FlashFlash动画动画 src属性：背景音乐文件名。 quality 属性：消除锯齿功能 。 pluginspage属性：标识 Flash Player 插件的位置， 以便在尚未安装该插件时，用户可以下载它。 例：例：播放播放Flash文件文件 2 2播放播放声音声音 例：播放声音 例：背景音乐背景音乐 Src属性：背景音乐文件名。 autostart属性：是否自动播放音乐。 controls属性：呈现播放控制界面 。 Loop属性：播放音乐循环次数。 3 3插入视频插入视频 使

28、用使用 标签播放视频标签播放视频: : 使用标签播放： 一段小视频 网页中显示视频网页中显示视频 网页中显示视频加背景音乐网页中显示视频加背景音乐 标签属性：标签属性： 标记属性功能 dynsrc=URL设置多媒体来源位置设置多媒体来源位置 loop=size设置视频播放的次数设置视频播放的次数 loopdelay=time设置两次播放的间隔时间设置两次播放的间隔时间 start=value指定何时开始播放视频文件指定何时开始播放视频文件 Src =URL 在浏览器尚未读入视频文件之前，在视在浏览器尚未读入视频文件之前，在视 频文件显示区显示该图像文件。频文件显示区显示该图像文件。 XML主要

29、用于表达数据，由于其具有很强的表达能力和 高度的灵活性，并且易于扩展，因此得到了广泛的应用。 XML不是要替换HTML，可以视作对HTML的补充。 HTML+XML+CSS构成了当代互联系网技术的三大三大基 石。 HTML：定义文档结构 XML：表达信息本身 CSS：确定了信息的外在表现形式 可扩展标记语言（eXtensible Markup Language， XML）是用于标记电子文档，使其具有结构性的标记语言， 是W3C组织于1998年2月发布的标准。XML是标准通用 标记语言（Standard Generalized Markup Language， SGML）的一个子集，是一个精简的SGML . XML保留了 SGML的可扩展功能，它不再像HTML那样使用固定的标 记，而是允许定义数量不限的标记来描述文档中的资料， 允许嵌套的信息结构，它的功能远远超过了HTML。 HTML只是Web显示数据的通用方法，而XML提供了一个 直接处理Web数据的通用方法。HTML着重描述Web页面 的显示格式，而XML着重描述Web页面的内容。 XML与HTML相比较，存在如下主要的区别。 （1）内容与形式分离。 在HTML中数据内容和表现形式是混在一起的，而在 XML文档中，标签仅包含特定的信息而不理