Ch08_HTML和网页设计.ppt

第8章 HTML与网页制作 本章主要内容 8.1 HTML与网页简介 8.2 基本标记 8.3 链接与地址 8.4 图象 8.5 表格设计 8.6 表单设计 8.7 简单框架应用 8.8 多媒体应用 8.9 样式表 8.1 HTML与网页简介 1、HTML与网页概述 2、HTML文档结构 3、标记（元素） 4、html标记 5、head标记 6、body标记 1、HTML与网页概述 2、HTML文档结构 HTML文档编程说明 1. 网页文档以html开始，以/html结束。 2. 一个完整的网页文档由文档头和文档体组成。 3. 文档头，又称Head区。head和/head 4. 文档体，又称Body区。body和/body 5. 浏览器在解析HTML文档时，忽略空格与换行。 6. 对标记名称的大小写不敏感。 7. 注释行为“!—”和“--”所包含的部分。 3、标记（元素） 4、html标记 一个HTML文档必须以html开始，以/html结束。 6、head标记 head区：提供元信息。 元信息：描述信息的信息。 一个网页文档，只能有一个head标记。 常用的在head区中使用的标记有： ⑴ title标记 ⑵ link标记 ⑶ style标记 ⑷ script标记 7、body标记 body标记的常用属性： bgcolor = color_name | #RRGGBB background = 图象URL bgcolor：设置背景颜色。 使用red、green、blue、white、black等。 另一种方法是给出一个RGB值。 如： body bgcolor=#00ff00 Background：设置背景图片。 最常见的图片格式为“.gif”和“.jpg”。 如：body background=picture.gif 可以用frameset标记来替代body标记。 8.2 基本标记 1、核心属性 2、标题、段落和换行 3、文字修饰标记 4、字符实体 5、列表 1、核心属性 一个标记往往会定义若干个属性，来扩展标记功能与应用。 主要介绍id、class和title等3个属性。 id属性 用来标识文档中的某个标记，设置一个独一无二的名字。通过id应用样式表。 class属性 用来定义一个类，所谓类就是可以为若干个标记所共有。class属性也是应用样式表。 title属性 用来为相关标记提供文字的提示信息。 2、标题、段落和换行 ⑴ 标题标记h1 h2 …h6 ⑵ 分段标记p ⑶ 换行标记br ⑷ 居中标记center ⑸ 预格式化标记pre ⑹ 水平标尺线标记hr ⑴ 标题标记h1 h2 …h6 标题（Heading）标记用来在HTML文档中创建标题文字。 标题分6级，分别有6个标记来表示，它们是h1、h2、h3、h4、h5和h6。 其中一级标题h1最大、最突出，h6为最小，但其用法完全一样。 如：h1Heading 1/h1。定义了一个一级标题，标题内容为“Heading 1”。 ⑵ 分段标记p 分段标记p的常用属性：align，class，id和title等。 align = center | justify | left | right class = 在样式表中定义的类名 id = 在样式表中定义的标式名 title = 提示信息 属性align：段落的对齐方式，分别定义了居中、两边对齐、左对齐和右对齐4中方式。 浏览器在显示HTML文档时，会自动忽略空格、Tab键和回车键，如多个空格被压缩成一个。要保留原文中的段落，需要引入分段标记p。 ⑶ 换行标记br 浏览器在显示HTML文档时，会自动忽略回车键。 在需要换行的地方可以插入换行标记br。 换行标记br的用法最为简单，换行标记br没有属性，也没有结束标记。 ⑷ 居中标记center 居中标记的作用是将处在center和/center之间的对象显示在浏览器的中间，对象可以是文字、图片或表格等。 ⑸ 预格式化标记pre 预格式化标记pre可以完全保留在pre和/pre之间的所有格式，包括所有的空格、Tab键、回车键和字体字号等。 通过预格式化标记pre显示的文本，当调整浏览器大小时，其显示的文本不会随之调整。 用分段标记p显示的文本，当调整浏览器大小时，其显示的文本会自动随之调整。 ⑹ 水平标尺线标记hr 将HTML文档在视觉上分成几个独立的区域。 水平标尺线标记hr的3个常用属性： align = center | justify | left | right widt