html设置文本和图像(web编程基础)解说.ppt

信息工程学院《web编程基础》; 用HTML设置文本、图像、列表 教师：刘欣欣 年级： 2014级 时间： 2015-2016学年第一学期 联系方式：621422 办公室：21号楼303;*;*;*;*;*;*;*;*;*;*;*;*;*;*;*;*;*;*;*;*;*;*;*;*;*;*;文字列表的主要作用是有序地编排一些信息资源，使其结构化和条理化，并以列表的样式显示出来，以便浏览者能更加快捷地获得相应信息。HTML中，文字列表主要分为无序列表、有序列表、定义列表三种，第一种每个列表项的前面有一个圆点符号，第二种则对每个列表项依次编号，第三种用于关键词的解释说明。;项目列表使用的一对标记是ul/ul，其中每一个列表项使用li/li，其结构如下所示。 ul li第1项/li li第2项/li li第3项/li /ul ;有序列表和无序列表的使用方法基本相同，它使用标记ol/ol，每一个列表项前使用li。每个项目都有前后顺序之分，多数用数字表示，其结构如下所示。 ol li第1项/li li第2项/li li第3项/li /ol ;2.2.3　建立定义列表;通过上面几个实例的应用，用户对文字的排版已有了一个基本认识。到目前为止，都是通过HTML标记对文字进行编排，但版面编辑并不仅是如此，还可以利用一些HTML属性更加灵活地编排网页中的文字。 在大多数HTML标记中都可以加入属性控制，属性的作用是帮助HTML标记进一步控制HTML文件的内容，如内容的对齐方式，文字的大小、字体、颜色，网页的背景样式，图片的插入等。;上一节中介绍过使用center标记可以使文本水平居中，若希望右对齐，可以使用HTML的align属性。;HTML中，不同的标记会有各自不同的属性，例如在前面曾介绍过的body标记，使用它的属性就可以控制网页的背景以及文字字体的颜色。 例如在上面的代码中，将body一行改为： body text=red bgcolor=#000000 ;使用HTML标记和属性还可以设置文字的样式。;除了可以设置文字的样式外，还可以使用font标记设置字体相关的属性。font标记有3个主要属性，分别用于设置文字的字体、大小和颜色。;前面介绍了HTML的标记和属性，但HTML样式标记和属性是有很大局限性的。 前面介绍了很多HTML标记和HTML属性，目的是使读者更深入地理解HTML的原理，而实际上有一些标记现在已经过时了，并不鼓励用户使用，因为有更好的、更科学的方法已经出现了。 这种更好、更科学的方法就是使用CSS来控制网页的样式。在互联网发展的初期，各种规范还远没有像今天这样完善和普及，因此当时为了更容易被大家和软件厂商所接受，网页主要是由HTML来完成的，这样写起来更简单。一个网页的两个方面—“结构”和“表现”都由HTML来承担，因此HTML标记就由两类构成——负责定义网页结构的标记和负责定义网页表现形式的标记。例如，p标记用来定义段落，这就是结构标记；而font标记用于定义网页元素的字体，这就是形式标记。;现在，网页的功能已不再单纯地传播一些信息，它还包括传播大量的专业技术知识，如数学、物理和化学知识等。HTML中有许多特殊符号，可以用来实现在网页上显示数学公式、化学方程式等特殊字符。;图片是网页中不可缺少的元素，巧妙地在网页中使用图片可以为网页增色不少。这里首先介绍在网页中常用的3种图片格式，然后再介绍如何在网页中插入图片，以及设置图片的样式和插入的位置。通过对本章的学习，读者可以制作简单的图文网页，并根据自己的喜好制作出不同的图片效果。 在本章中，我们将事先准备好的图像插入网页中，并使它按照我们需要的格式显示。而在实际的工作中，需要的图像可能并不存在，或者并不适合直接放入网页，因此网页设计师必须要掌握一定的图片处理和实践的能力。在本书后续章节将对网页设计师所需的美术方面的技能进行简要介绍，从而让用户掌握一定的图像和动画的设计、加工、处理能力，以更好地掌握网页设计的综合能力。;Web页中通常使用的图像文件有JPEG、GIF、PNG共3种格式，但大多数浏览器只支持JPEG、GIF两种图像格式。因为要保证浏览者下载网页的速度，所以网站设计者也常使用JPEG和GIF这两种压缩格式的图像。 1．GIF文件 2．JPEG文件 3．PNG文件 ;在网页上使用图片，对于视觉效果而言，能使网页充满生机，并且直观且巧妙地表达出网页的主题，这是仅靠文字很难达到的效果。一个精美的图片网页不但能引起浏览者对网页浏览的兴趣，而且在很多时候要通过图片以及相关颜色的配合来做出本网