网页设计与制作 高等教育应用型本科计算机类课程规划教材 胡一波 教学课件 第2章 HTML语言.pptVIP

尚辅网 尚辅网 第2章 HTML语言 本章内容提要： HTML是网页制作的基本语言，虽然不懂得HTML也能制作出漂亮的网页，但了解它可以更方便灵活地控制网页。本章主要内容有： HTML网页的基本组成与特点 文本格式标记 版面控制标记 图像与超链接标记 表格标记 表单标记 多媒体及其他常用标记 本章目标任务： 能够运用HTML语言常用标记制作基本网页文件。 2.1 HTML网页的基本组成与特点 HTML语言是超文本标记语言（Hypertext Mark-up Language）的缩写,主要用来创建与系统平台无关的网页文档,它不是编程语言，而是一种描述性的标记语言。 所有网页软件都是以HTML为基础，学会了它可以更方便灵活地控制网页。特别是在动态网页的设计中，常常需要利用ASP、JSP、PHP等代码来输出网页的部分HTML代码，此时就必须对HTML标记相当熟悉才行。 HTML文件是纯文本文件，能用任意的文本编辑器编辑，如：记事本、写字板、Word、Dreamweaver、Frontpage等。 本讲将对常用的HTML标记符进行介绍。 2.1.1 用HTML制作网页的简单实例 【实例2.1】制作李白诗《望庐山瀑布》 制作过程： （1）用任何文本编辑器（如记事本、写字板、WORD等）输入下列文本（代码）： !2-1.htm html head meta http-equiv=Content-Type content=text/html; harset=gb2312 title李白诗~望庐山瀑布/title /head body bgcolor=#FFFFFF text=#000000 p align=centerfont size=7 color=#0000ff望庐山瀑布/font/p p align=centerfont size=5 color=#0000ff李白/font/p p align=centerfont size=6 color=#0000ff日照香炉生紫烟/font/p p align=centerfont size=6 color=#0000ff遥望瀑布挂前川/font/p p align=centerfont size=6 color=#0000ff飞流直下三千尺/font/p p align=centerfont size=6 color=#0000ff疑是银河落九天/font/p /body /html （2）以纯文本格式存为2-1.htm文件（假设位置为：E:\example\2\2-1）。 （3）打开浏览器，在地址栏中输入E:\example\2\2-1.htm，就会看到所制作的网页。如图2-1所示。 2.1.1 用HTML制作网页的简单实例 图2-1 李白诗望庐山瀑布网页效果图 2.1.2 HTML网页的基本组成 启动Dreamweaver后，切换到代码浏览窗口，此时看到的HTML代码，即是网页的基本组成部分，其代码为： html head meta http-equiv=Content-Type content=text/html; harset=gb2312 title李白诗~望庐山瀑布/title /head body bgcolor=#FFFFFF text=#000000 /body /html 从中可见，一个最基本的网页一般由三个部分组成，分别是： （1）html/html html标记用于定义网页文件的开始，对应的结束标记为/html则定义网页的结束。 （2）head/head 该组标记用于定义网页的头，用来说明文件的一些基本信息，如文档标题、文档所用的字符集、搜索引擎可用的关键词、Javascript块以及不属于网页内容的其他信息等。 在这里，title和/title标记定义网页的标题，该标题将显示在浏览器的标题栏中。 meta标记有很多用法，这里是用于指定网页所使用的字符集，是可选项。 （3）body/body body用于定义网页的正文开始，/body用于定义网页正文的结束。网页的正文内容必须放在这两个标记之间，bgcolor为body标记的属性，用于指定网页的背景颜色，text也为body标记的属性，用于指定网页正文的前景色。 2.1.3 HTML的特点 HTML文件是标准的文本文件，以纯文本形式存放，扩展名为*.htm或*.html。若系统为UNIX系统,则扩展名为*.html。HTML是由若干标记符和文本构成，标记符适用于组织网页的内容和控制输出格式，HTML具有以下几个特点： （1）HTML标记的一般格式 HTML标记均是用括起来的，大多数标记是成对出现的，有开始标记和对应的结束标记，结束标记多一根斜杠。许多标记还有属性，用于对标记进行详细设置。HTML标记