网页基础-第2章Web页面制作基础.pptVIP

第2章 Web页面制作基础 2.1 HTML语言概述 2.2 文档的格式与风格 2.3 加入多媒体与超级链接 2.4 制作表格 2.5 制作表单 2.6 框架结构 2.7 CSS基础 本章学习目标 本章将详细介绍使用HTML语言（Hyper Text Markup Language）编辑绚丽多彩的Web页面。通过本章的学习，读者应掌握以下内容： Web页面文档格式的设计方法 如何加入多媒体和超级链接 表单的制作 框架的使用 CSS基础知识 2.1 HTML语言概述 2.1.1 HTML概述 2.1.2 HTML文档的结构 2.1.3 HTML标记 2.1.4 常用HTML编辑工具 2.1.1 HTML概述 HTML是（Hyper Text Markup Language，超文本标记语言）的缩写，最早源于SGML语言（Standard General Markup Language，标准通用化标记语言），是由Web页面的发明者Tim Berners-Lee和同事Daniel W.Connolly于1990年创立的一种新颖的标记式语言，它是SGML的应用。到90年代后期，由于网络的飞速发展，使得HTML也达到了空前的繁荣，在WWW革命中扮演了核心技术的角色。 2.1.2 HTML文档的结构 HTML语言的基本结构： HTML HEAD 头部信息 /HEAD BODY 正文部分 /BODY /HTML 2.1.3 HTML标记 1．HTML文档标记 格式：HTML…/HTML 功能：标志文档开始和结尾的标记。 2．HTML文件头标记 格式：HEAD…/HEAD 功能：用于包含文件的基本信息。 3．HTML文件主体标记 格式：BODY…/BODY 功能：文件主体标记。 2.1.4 常用HTML编辑工具 使用HTML编辑器可以很容易的设计精彩的网页，实际上，任何一个文档编辑器都是HTML编辑器，这也是网页制作之所以流行的一个原因。 HTML作为最基本的网页编辑语言，能够实现网页的各种效果。但是，它毕竟是一种语言，需要记住一些标记。 2.2 文档的格式与风格 2.2.1 设置BODY的属性 2.2.2 段落格式化 2.2.3 建立列表 2.2.4 字符的格式化 2.2.1 设置BODY的属性 BODY…/BODY作为网页的主体部分，有很多的内置属性，这些属性用于设定网页的总体风格。例如，定义页面的背景图像、背景颜色、文字颜色以及超文本链接颜色等，主要属性如表2-1所示。 2.2.2 段落格式化 1．标题标记 格式：H1…/H1，H2…/H2…H6…/H6 功能：设置各种大小不同标题的标记。 2．段落标记 格式：P…/P 功能：设置段落标记。 3．预定义格式标记 格式：PRE…/PRE 功能：在浏览器中浏览时，按照文档中预先排好的形式显示内容。 4．分区显示标记 格式：DIV…/DIV 功能：分区显示标记。 5．换行标记 格式：BR 功能：强制换行。 6．水平线标记 格式：HR 功能：插入水平线标记。 7．注释标记 格式：!--注释内容-- 功能：注释标记。 标题标记 例2-2： HTML HEAD TITLE标题示例！ /TITLE /HEAD BODY text=#0000ff H1hello world!/H1 H2hello world!/H2 H3hello world!/H3 H4hello world!/H4 H5hello world!/H5 H6hello world!/H6 /BODY /HTML 预定义格式标记 例2-3： HTML HEAD TITLE显示lt;pgt;与lt;pregt;的区别 /TITLE /HEAD BODY P春晓 春眠不觉晓，处处闻啼鸟。 夜来风雨声，花落知多少。 /P PRE width=1春晓 春眠不觉晓，处处闻啼鸟。 夜来风雨声，花落知多少。 /PRE /BODY /HTML 水平线标记 注释标记 例2-4： HTML HEADTITLE标记的使用/TITLE /HEAD BODY ！--注释 本程序的功能是： 制作简单网页熟悉基本标记的使用！ -- P align=center三种标记的使用！/P HR DIV align=center我在中间！BR中间/DIV HR DIV align=left我在左边！BR左边/DIV HR DIV align=right我在右边！BR右边/DIV HR/BODY /HTML 2.2.3 建立列表 1．有序列表 格式： OL type=符号类型 LI type=符号类型…/LI LI ty