第三章__HTML语言.ppt

西南交大经管院 杨莉 第三章 HTML语言 3.1 HTML语言概述 HTML是Hyper Text Markup Language（超文本标记语言）的缩写，它是构成Web页面（Page）的主要工具，是用来表示网上信息的符号标记语言。 HTML是一种用于网页制作的排版语言，是Web最基本的构成元素。HTML并非一种编程语言。用HTML标记文档或给文档添加标记，使文档可在WWW上发布。用HTML准备的文档包含引用图形和格式标记。用Web浏览器可以查看这些HTML文档。 用HTML的语法规则建立的文档可以运行在不同操作系统的平台上。因此，HTML文档属于纯文本文件（它能用任意的文本编写器书写）。 3.1.1 HTML的作用 HTML语言作为一种网页编辑语言，易学易懂，能制作出精美的网页效果，其作用如下： 格式化文本。如设置标题、字体、字号、颜色；设置文本的段落、对齐方式等。 建立超链接。通过超链接检索在线的信息，只需用鼠标单击，就可以到达任何一处。 创建列表。把信息用一种易读的方式表现出来。 插入图像。使网页图文并茂，还可以设置图像的各种属性，如大小、边框、布局等。 建立表格。表格为浏览者提供了快速找到需要信息的显示方式，还可以用表格来设定整个网页的布局。 加入多媒体。可以在网页中加入音频、视频、动画，还能设定播放的时间和次数。 交互式窗口、计数器等。为获取远程服务而设计窗体，可用于检索信息、定购产品等。 3.1.2 HTML的编辑环境 HTML的编辑环境很简单，任何一台计算机都可以编辑网页。但要看到用户自己设计的网页效果，就需要安装一个浏览器，如Internet Explorer，Netscape Navigator等。因此，只要计算机能运行某个浏览器，就具备了网页制作的硬件环境。HTML要求的软件环境更为简单，任何文本编辑器都可以用来制作网页，包括记事本、写字板、Word、WPS等编辑程序。 HTML文件的设计制作与一般程序设计语言之间最大的不同在于，HTML具有跨平台的处理能力。也就是说，只要有适当的浏览器，不管使用何种操作系统，都能阅读制作的HTML文件。 3.2 HTML基础 3.2.1 HTML文件的组成 3.2.2 标记 3.2.3 标记的属性 3.2.4 HTML文件的基本结构 3.3 HTML入门 1. HTML文档标记HTML…/HTML 2. HTML文件头标记HEAD…/HEAD 3. HTML文件标题标记TITLE…/TITLE 4. HTML文件主体标记BODY…/BODY 5. 注释标记 习题 第七、八章后的习题 说明HTML文件的结构标记有哪几个，并顺序写出HTML语法的 主要格式结构。 根据右图示效果写出 该页面的HTML代码 除此之外，使用P标记的align属性或CENTER标记也可以实现相应的功能。 当设置文本环绕方式（left或right）后，将一直有效，如果想取消环绕方式，可使用BR标记的clear属性，其后的文本将不再环绕图片。格式为： BR clear=left或right或all 【例3-12】文本环绕图片及其解除。 HTML HEAD TITLE设定图片的对齐方式/TITLE /HEAD BODY H4 align=center设定图片的对齐方式/H4 IMG src=daisy.jpg align=left nbsp;nbsp; 如果不设置文本对图片的环绕， 图片在页面会占一片空白。利用标记的属性， 可以使文本环绕图片。br nbsp;nbsp; 其中align的值可取：br nbsp;nbsp; aleft图片居左，文本在图片的右边。br nbsp;nbsp; right图片居右，文本在图片的左边。br clear=left IMG src=daisy.jpg align=right nbsp;nbsp;nbsp;nbsp;使用该标记设置文本环绕方式后，将一直 有效，直到遇到下一个设置标记。如果想取消文本环绕图片，可使用 标记，其后的文本将不再环绕图片。 /BODY /HTML 在浏览器中的显示效果。 (3) 设置图片与文本之间的空白。 适当在图片与文本之间留下空白，可使页面看起来不至于太紧密。IMG标记的hspace和vspace属性可实现该功能。 【例3-13】设置图片与文本之间的空白。 HTML HEAD TITLE设置图片与文本之间的空白/TITLE /HEAD BODY H4 align=cent