html设置文本和图像(web编程基础)

信息工程学院《web编程基础》用HTML设置文本、图像、列表教师：刘欣欣年级：2014级时间：2015-2016学年第一学期联系方式：621422、13777131290办公室：21号楼3033知识回顾•什么是HMTL？–HTML（HypertextMarkupLanguage）是一种SGML(StandardforGeneralMarkupLanguage)定义下的一个描述性的语言，全称是超文本标记语言–是一种国际化标准语言，它用于在Web上发布超文本信息，是一种基于SGML，公开的资源描述格式–不是程序语言，只是标记语言，设计者只需要掌握各类标记的使用方法即可。4(X)HTML•什么是XHTML？•XHTML是TheExtensibleHypertextMarkupLanguage可扩展标识语言的缩写。在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。它实现HTML向XML的过渡。•什么是XML？•XML(ExtensibleMarkupLanguage)的出现，结构化文档和数据有了一个通用的、科适应的格式，不仅仅应用在web上，也可以应用在任何地方，标准成为可能，是Web未来的发展方向。5(X)HTML•为什么要使用XHMTL？•HTML没有足够的可扩展性。HTML文档创建要素是有限的，如无法处理非常规的内容：乐谱，数学表达式等。同时HTML不能很好地支持不断更新的显示媒体，如手机等。而XHMTL就可以很好地解决这一点。•XHMTL的优点有：•HTML没有非常良好的格式，所以当添加新的元素时，需更改文档类型定义。而XHMTL有良好的格式，极大简化了新元素的开发和集成。•HTML没有非常良好的格式，所以在计算能力较差的浏览设备上不能正常显示，而XHMTL有良好的格式，可在非台式设备中正常显示。•新建的Web文档使用XHTML，将会使文档具有更大的扩展性和兼容性6HTML文件的总体结构htmlheadtitle文件标题/title:/headbody::/body/html表头区主体区以html开头以/html结尾HTML页面结构7(X)HTML页面结构XHMTL页面结构•!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN关于文档类型的说明•htmlxmlns=声明名字空间•head•metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/•title页面标题/title•/head•body•这里是页面内容部分，注意内容与浏览器边缘的距离•/body•/html8XHTML文件基本结构说明说明：•1、HTML只是一个纯文本文件，由“显示内容”及“控制语句”两部分组成•2、规范的标记方法为：标签属性1=属性值属性2=属性值…受影响内容/标签•3、由英文””和””括起来的一个单词，例如html•4、在XHTML中大部分的标签是成对出现的，第一个成为“起始”标签，第二个叫做“结束标签”，结束标签比起始标签多一个”/”，例如/html•5、标签之间相互嵌套来定义网页中文字图片的板式，但是先后顺序必须一致。•6、两个标签之间定义的就是排版的内容。•7、html标签区分大小写，xhtml标签与属性必须小写。18XHTML与HTML的重要区别•XHTML与HTML的重要区别（代码规范）1.在XHTML中标记名称必须小写2.在XHTML中属性名称必须小写3.在XHTML中标记必须严格严格嵌套4.在XHTML中标记必须封闭5.在XHTML中，即使是空元素的标记也必须封闭6.在XHTML中属性值用双引号括起来7.在XHTML中属性值必须使用完整形式8.在XHTML中，应该区分“内容标记”与“形式标记”9.在XHTML1.0中,别用name用id:)name属性是不赞成使用的,在以后的XHTML版本中将被删除.21XHTML开发环境XHTML编写环境和测试方法1、记事本（1）打开记事本文件，编写HTML文件，保存为后缀为html的文件（2）双击打开该文件，即可在浏览器中查看2、Dreamweaver（1）启动Dreamweaver软件，新建HTML文件，在代码视图下编写HTML文件，保存；（2）F12或是选择菜单预览，即可在浏览器中查看22(X)HTML标签（一）1、规范的标记方法为：标签属性1=“属性值”属性2=“属性值”…受影响内容/标签2、html3、head4、title5、body主要属性：•bgcolor:背景颜色•background：背景图片•text：文字颜色•link：设置链接文字颜色•margin:边距23（一）段落段落标签p是处理文字时常用到的标签，成对出现的标签p…/p。见ch02\2.1\02.html文档（二）换行单标签br/例：见ch02\2.1\03.html文档使用段落标记后的效果在段落内部强制换行2.1文本排版1/10/2020（三）标题标题标签由6个级别从h1到h6,h1为最大标题，h6为最小标题，成对出现的标签，h1…/h1。例：见ch02\2.1\04.html文档属性：align；值：right，center，left。段落与标题的效果2.1.2设置标题25（四）居中对齐center/center例：见ch02\2.1\05.html文档居中显示2.1.3使文字水平居中1/10/20202.1.4设置文字段落的缩进（五）向右缩进五个字符blockquote/blockquote例：见ch02\2.1\06.html文档缩进显示27（六）预排版pre把预先排版好的格式保留下来，成对标签,pre/pre.（七）水平线hr/在页面中插入一条水平标尺线，使文字分隔开，单标签。•主要属性：•Width:宽度•Color:颜色•Align:对齐方式•Noshade:去掉水平线的阴影；XHTML常用标签：文本排版1/10/2020（八）文字标签font，成对标签，用于设置文字的大小、字体、字型、颜色、字号等，常用属性如下：size:设置文字大小，取值范围：1-7,-6~6face:设置字体，如：黑体、宋体、TimesNewRomancolor:设置文字颜色，如#000000,black文字列表的主要作用是有序地编排一些信息资源，使其结构化和条理化，并以列表的样式显示出来，以便浏览者能更加快捷地获得相应信息。HTML中，文字列表主要分为无序列表、有序列表、定义列表三种，第一种每个列表项的前面有一个圆点符号，第二种则对每个列表项依次编号，第三种用于关键词的解释说明。2.2文字列表项目列表使用的一对标记是ul/ul，其中每一个列表项使用li/li，其结构如下所示。ulli第1项/lili第2项/lili第3项/li/ul2.2.1建立无序列表无序列表有序列表和无序列表的使用方法基本相同，它使用标记ol/ol，每一个列表项前使用li。每个项目都有前后顺序之分，多数用数字表示，其结构如下所示。olli第1项/lili第2项/lili第3项/li/ol2.2.2建立有序列表有序列表2.2.3建立定义列表定义列表是一列事物以及其相关的解释，定义义列表的开始标签是dl，每个被解释的事物的开始标签为dt,每个解释的内容的开始标签是dd。（1）dl…/dl该元素用于定义一个释义列表的开始与结束（2）dt…/dt该元素用来在释义列表中创建一个上层项目（3）dd…/dd该元素用来在释义列表中创建一个上层项目1/10/2020通过上面几个实例的应用，用户对文字的排版已有了一个基本认识。到目前为止，都是通过HTML标记对文字进行编排，但版面编辑并不仅是如此，还可以利用一些HTML属性更加灵活地编排网页中的文字。在大多数HTML标记中都可以加入属性控制，属性的作用是帮助HTML标记进一步控制HTML文件的内容，如内容的对齐方式，文字的大小、字体、颜色，网页的背景样式，图片的插入等。2.3HTML标记与HTML属性上一节中介绍过使用center标记可以使文本水平居中，若希望右对齐，可以使用HTML的align属性。2.3.1控制段落的水平位置段落对齐方式HTML中，不同的标记会有各自不同的属性，例如在前面曾介绍过的body标记，使用它的属性就可以控制网页的背景以及文字字体的颜色。例如在上面的代码中，将body一行改为：bodytext=redbgcolor=#0000002.3.2设置背景颜色通过body标记的属性使用HTML标记和属性还可以设置文字的样式。2.3.3文字的特殊样式设置字体样式标记显示效果b/b文字以粗体方式显示i/i文字以斜体方式显示u/u文字以加下划线方式显示s/s文字以加删除线方式显示big/big文字以放大方式显示small/small文字以缩小方式显示strong/strong文字以加强强调方式显示em/em文字以强调方式显示address/address用来显示电子邮件地址或网址code/code用来说明代码与指令除了可以设置文字的样式外，还可以使用font标记设置字体相关的属性。font标记有3个主要属性，分别用于设置文字的字体、大小和颜色。2.3.4文字的字体大小和颜色使用font标记设置字体、大小和颜色前面介绍了HTML的标记和属性，但HTML样式标记和属性是有很大局限性的。前面介绍了很多HTML标记和HTML属性，目的是使读者更深入地理解HTML的原理，而实际上有一些标记现在已经过时了，并不鼓励用户使用，因为有更好的、更科学的方法已经出现了。这种更好、更科学的方法就是使用CSS来控制网页的样式。在互联网发展的初期，各种规范还远没有像今天这样完善和普及，因此当时为了更容易被大家和软件厂商所接受，网页主要是由HTML来完成的，这样写起来更简单。一个网页的两个方面—“结构”和“表现”都由HTML来承担，因此HTML标记就由两类构成——负责定义网页结构的标记和负责定义网页表现形式的标记。例如，p标记用来定义段落，这就是结构标记；而font标记用于定义网页元素的字体，这就是形式标记。2.4HTML标记和属性的局限性现在，网页的功能已不再单纯地传播一些信息，它还包括传播大量的专业技术知识，如数学、物理和化学知识等。HTML中有许多特殊符号，可以用来实现在网页上显示数学公式、化学方程式等特殊字符。2.5特殊文字符号在网页中使用特殊符号运算式图片是网页中不可缺少的元素，巧妙地在网页中使用图片可以为网页增色不少。这里首先介绍在网页中常用的3种图片格式，然后再介绍如何在网页中插入图片，以及设置图片的样式和插入的位置。通过对本章的学习，读者可以制作简单的图文网页，并根据自己的喜好制作出不同的图片效果。在本章中，我们将事先准备好的图像插入网页中，并使它按照我们需要的格式显示。而在实际的工作中，需要的图像可能并不存在，或者并不适合直接放入网页，因此网页设计师必须要掌握一定的图片处理和实践的能力。在本书后续章节将对网页设计师所需的美术方面的技能进行简要介绍，从而让用户掌握一定的图像和动画的设计、加工、处理能力，以更好地掌握网页设计的综合能力。2.6使用图像Web页中通常使用的图像文件有JPEG、GIF、PNG共3种格式，但大多数浏览器只支持JPEG、GIF两种图像格式。因为要保证浏览者下