网页设计与制作——HTML语言.ppt

网页设计与制作 ——HTML语言 李京文 教学目标 1．熟悉HTML标记语言的基础知识 2．熟悉HTML语法基础 3．掌握文本格式相关标记的使用 4．掌握有序列表和无序列表的设置与使用 5．掌握表格的设置及表格的使用 6．掌握表单及表单控件的使用 7．掌握超链接的类型和超链接的设置 8．熟悉图像、音乐及滚动字幕的插入与设置 9．熟悉框架的使用 10．熟练的利用标记编写页面代码 本章内容 HTML基础 文本格式标记 列表标记 多媒体元素标记 超链接标记 表格标记 表单标记 框架标记 CSS样式 案例解析 HTML基础 本章的引例是利用HTML标记实现的，本节首先介绍HTML基础知识。 HTML是Hypertext Markup Language的英文缩写，其含义为超文本标记语言。 一、 基本概念 超文本（Hypertext）：被定义了某些特征的普通文本。 HTML标记（Markup）：用于标识页面中各部分的符号。在HTML中每个用来作标记的符号都是一条命令，它告诉浏览器如何显示信息。所有的标记都必须用尖括号（即小于号“”和大于号“”）括起来。 HTML标记的属性：大多数标记都拥有一个属性集，通过这些属性可以对作用的内容进行更多的控制。 HTML语言（Language）：即超文本标记语言，在HTML文档中，以超文本格式，利用标记及其属性进行网页设计的语言，它有自己特定的语法规则。 HTML文档：即页面，它是文本文档，其扩展名为.htm或.html。 HTML基础 二、HTML文档的基本结构 1．HTML结构标记 HTML文档都是由HTML标记构成的，一个基本的HTML文档通常包括以下三对顶级标记。 (1)HTML标记html…/html (2)头部标记head…/head (3)主体标记body…/body HTML基础 使用标记或标记属性时应注意以下几点： ①属性一定要包含在标记中。 ②一个标记中可以包含多个属性，属性之间至少用一个空格隔开。 ③属性值可以用双引号括起来，也可以省略双引号。 ④颜色属性值的表示方法有两种：一种是使用英文颜色单词表示，如red、blue等；另一种是使用六位十六进制数值格式#rrggbb表示，其中rr、gg和bb分别表示红、绿、蓝三基色的两位十六进制数据。 ⑤多个标记可以写在同一行。 HTML基础 2．HTML文档的基本结构 html head title……/title /head body …… /body /html 2.2 文本格式标记 文本是页面上出现较多的信息，利用HTML标记可以设置文本，以满足用户要求。 2.2.1 标题标记 标题标记的作用是设置文档的各级标题。标题标记为hn…/hn，其中n的取值是1~6，h1…/h1定义一级标题，字体最大；h6…/h6定义六级标题，字体最小。标题标记的常用属性是align，用于定义标题的对齐方式。 2.2 文本格式标记 标题标记应用示例： htmlheadtitle标题标记应用示例/title/headbodyh3 align=center 这是标题实验/h3 h1 align=left这是一级标题左对齐/h1 h2 align=right这是二级标题右对齐/h2 h3这是三级标题/h3h4这是四级标题/h4 h5这是五级标题/h5h6这是六级标题/h6/body /html 2.2 文本格式标记 2.2.2 换行标记 换行标记的作用是使该标记后面的文本换行显示。换行标记为br，换行标记没有需要设置的属性。 2.2 文本格式标记 2.2.3 段落标记 段落标记的作用是使该标记后面的文本另起一段，而且下一段内容同前一段之间要空一行显示。段落标记可以为单标记p，也可以为双标记p…/p。使用双标记时，段落的内容放在p…/p之间，使用单标记时，p放在段落末尾。段落标记的常用属性为align，用于设置段落对齐方式。 2.2 文本格式标记 2.2.4 字体标记 字体标记作用是设置标记之间文本的字体、大小、颜色等。字体标记为font…/font，该标记的常用属性及其作用如下表所示。 2.2 文本格式标记 以下为换行标记、段落标记和字体标记应用示例： html headtitle字体标记应用示例/title/head body h3 align=“center”字体标记/h3 font color=“red” face=黑体 size=4红色、黑体、4号字 /fontbr