教学材料HTML DHTML教程-第二章

上传人：1*** IP属地：广东上传时间：2026-03-24 格式：PPT 页数：53 大小：788KB 积分：15 举报 版权申诉

已阅读5页，还剩48页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

2.1字符格式

HTML语言提供了一些用来修饰文字的标记符，可以用它们设置文字的字体、颜色、尺寸和样式等属性。下一页返回2.1字符格式2.1.1font语法说明:标记符可以控制字符的样式，它主要有三个属性:face,colo:和size.1.face属性

使用face属性可以设置文字的字体效果。在“face”中我们可以直接输入字体的名称，如“黑体”“宋体”等。也可以一次指定多种字体，字体之间用逗号分隔。浏览器首先按照定义的第一种字体显示文字，如果没有第一种字体，浏览器将自动使用第一种字体，依次类推。如果找不到匹配的字体，浏览器将使用默认的字体。计算机中的字体名称可通过双击“控制面板”中的“字体”选项来查看。上一页下一页返回2.1字符格式

需要注意的时，在设置文字的字体时一定要选择常用的字体(如Windows系统自带的字体)，而不要使用不常用的字体(如汉仪字体等)。如果浏览者的计算机中没有指定的这些字体，计算机将会使用它认为最接近的字体来替换指定的字体。下面是一个使用face属性的例了，其源代码如下所示(有关标记符 的详细情况清参见本章第二节):<html><head><title>Font实例face</title></head><body>上一页下一页返回2.1字符格式<fontface="黑体”>我是黑体< <fontface="宋体”>我是宋体< <fontface='，楷体_gb2312">我是楷体 <fontface="TimesNewRoman">TimesNewRoman <fontface="ArialBlack">ArialBlack</body></html>在浏览器中打开该文件，效果如图2.1所示。上一页下一页返回2.1字符格式2.color:属性使用color属性可以设置文字的颜色。在指定color属性时既可以使用颜色的名称，也可以使用颜色的代码(十六进制的数字)。下面是一个使用color属性的例子，注意每次只能指定一种颜色。将使文字以蓝色显小:<fontcolor="blue">我是蓝色的！3.size属性使用size属性可以设置文字的字体大小。在HTML规范中，+Size;size属性的取值可以取1~7中的任何一个数值。数值越大，字体越大。该属性的默认值是3。另外，该属性还可以使用“+”或“一”号来指定字体的相对大小。例如，+1表示比默认字体大1号，即4号字，-2表示比默认字体小两号，即1号字。

上一页下一页返回2.1字符格式需要注意的是，当数值大于7时将按照7来显示;当数值小于1时按照1来显示。下面是一个使用size属性的例子，其源代码如下所示(省略了html,head等标记符):<fontsize="5">我是一个好学生！<fontsize="+3">我<是一个好学生!<fontsize="-2">我是一个好学生!在浏览器中打开该文件，效果如图2.2所示。上一页下一页返回2.1字符格式2.1.2b,i和u等字体样式标记符语法说明:使用这些标记符可以设置字体的样式，常用的字体样式标记符如表2.1所示。

这些标记符既可以单独使用，也可以一起使用。一般情况下，我们将儿个标记符联合使用的情况称为标记符的嵌套，标记符中的内容具有所有标记符定义的显小特点。例如，我们可以使用嵌套标记符来设置文字，使文字既是粗体又是斜体。注意在指定嵌套标记符时应确保i1，确的层次。例如，就是错误的指定方式。下面是一个使用字体样式标记符的例子(省略了html,head等标记符):上一页下一页返回2.1字符格式

斜体文字。粗体文字。<s>删除线文字。</s>斜体加粗体文字。在浏览器中打开该文件，效果如图2.3所示。上一页下一页返回2.1字符格式2.1.3标题标记符hn语法<hn></hn>说明:可以使用该标记符设置文件中的标题，其中n是1~6的数字。<h1>表示最大的标题，<h6>表示最小的标题。在默认状态下，<hn>标记符中的文字在浏览器中显示时都是黑体，而且文字将自动在</hn>标记符后换行。下面是一个使用标题标记符的例子，其源代码如下所示(省略了html,head等标记符):<h1>更高、更快、更强</h1><h2>更高、更快、更强</h2><h4>更高、更快、更强</h4><h5>更高、更快、更强</h5>更高、更快、更强在浏览器中打开该文件，效果如图2.4所示。上一页下一页返回2.1字符格式2.1.4实例---设置文字的属性

以上几节介绍的属性不仅可以单独使用，而目还可以组合起来使用。下面将通过一个具体的例了进一步说明如何设置文字的属性，步骤如下:(1)打开记事本程序，输入网页的基本结构。

(2)按照如下所示设置网页的标题、背景颜色等属性。<html><head><title>聊天</title></head><bodybgcolor="gray"></body></html>上一页下一页返回2.1字符格式(3)按照如下所示分别输入几段文字。<html><head><title>聊天</title></head>

<bodybgcolor="gray">老板聊天是办公，主管聊天是沟通，员工聊天是怠工。</body></html>(4)将关键词“老板”“卞管”和“员工”的字体设置为黑体、颜色设置为蓝色、字号设置为5，样式为粗体，如下所示:上一页下一页返回2.1字符格式<html><head><title>聊天</title></head><bodybgcolor="gray"><fontface=“黑体”size=“5”color=“#OOOOFF”>老板聊天是办公，<fontface=“黑体”size=“5”color=“#OOOOFF”>主管聊天是沟通，<fontface=“黑体”size=“5”color=“#OOOOFF”>员工聊天是怠工。</body></html>上一页下一页返回2.1字符格式

(5)将关键词“办公”的字体设置为隶书、颜色设置为红色、尺寸设置为7，将关键词“沟通”的字体设置为隶书、颜色设置为红色、尺寸设置为5，将关键词“怠工”的字体设置为隶书颜色设置为红色、尺寸设置为3，如下所示:<html><head><title>聊大</title></head><bodybgcolor="gray"><fontface=“黑体”size=“5”color=“#OOOOFF”>老板聊天是<fontface="求书”size="7"color="red">办公,上一页下一页返回2.1字符格式<fontface=“黑体”size=“5”color=“#OOOOFF”>主管聊大是<fontface=“隶书”size="5"color="red">沟通,<fontface=“黑体”size=“5”color=“#0000FF”>员工聊大是<fontface=“隶书”size=“3”color=“red”>怠工，</body></html>(6)选择合适的目录，将文件保存为“talking.htm”，这样一个完整的例了就做完了。在IE浏览器中打开文件“talking.htm”，如图2.5所示。上一页返回2.2段落格式本节主要介绍用于修饰段落的HTML标记符，包括p,pre,hr和br.2.2.1p语法

说明:“P”是英文单词“paragraph"(段落)的缩写。印>标记符用来划分段落，不同的段落之间会自动换行并有一定的间距。使用p标记符时，可以添加“align(对齐)”属性控制段落的对齐方式。“align”的属性的取值可以是“left(左对齐)”“center(居中对齐)”“rightg(右对齐)”和"justify(两端对齐)”。例如，以下html代码将三段文字设置为不同的对齐方式:下一页返回2.2段落格式<html><head><title>对齐方式</title></head><bodybgcolor="#ccccff"><palign="left">我在左边.<palign="right">他在右边.<palign="center">你在中间.

</body></html>在浏览器中打开该文件，效果如图2.6所示:上一页下一页返回2.2段落格式2.2.2pre语法<pre></pre>

说明:pre标记符是预格式化标记符。浏览器将按照编辑文档时印re>和</pre>标记符之间字符的位置将内容毫无变动地显示出来。换句话说，在html文档中写的时候是什么样，在浏览器中显示的就是什么样。下面是一个使用pre标记符的例子，其源代码如下，显小效果如图2.7所示。<html><head><title>医院之最</title></head>上一页下一页返回2.2段落格式<body><pre>

挂号的时间址长，诊断的时间址短，收费的项目址多，体贴入微的大夫最少。</pre>挂号的时间最长，诊断的时间最短，收费的项目最多，体贴入微的大夫最少。</body></html>上一页下一页返回2.2段落格式2.2.3hr语法<hr>说明:hr是英文“HorizontalRule(水平线)”的缩写。hr标记符是独立使用的标记符(即没有结束标记符)，它的作用是换行并绘制一条水平直线，直线的上下两端都会留出一定的空白。hr标记符的主要属性如下所示:width:使用该属性可以设置水平线的长度。它的取值既可以是具体的数值(单位是像素)，也可以是百分比数值。当使用百分比值时，表示占浏览器窗口宽度的百分比。size:使用该属性可以设置水平线的粗细，它的单位是像素。noshade:尤阴影。此属性用于使水平线以尤阴影的样式显小(如果不使用此属性，水平线默认时有阴影)。此属性是一个布尔属性，即只有“有”和“尤”两种状态，而没有具体的取值。例如，<hrnoshade>将创建一条尤阴影水平线。上一页下一页返回2.2段落格式align:使用该属性可以设置水平线的对齐方式。该属性有二种不同的取值，分别为"left(左对齐)”"center(居中对齐)”"right(右对齐)”。注意，默认情况下水平线的对齐方式为居中。color:使用该属性可以设置水平线的颜色，注意只有InternetExplorer支持此属性。例如，以下代码创建了两条不同的水平线，其源代码如下所示:<html><head><title>水平线</title></head><body>上一页下一页返回2.2段落格式<hrwidth="80%"size="5"align="right"color="red"><hrwidth="90">

</body></html>在浏览器中打开该文件，效果如图2.8所示。上一页下一页返回2.2段落格式2.2.4br语法 说明:br是英文单词“break"的缩写，使用该标记符可以设置强制换行。与hr标记符一样，br标记符也是单独使用的标记符。需要注意的是，br和P虽然都有另起一行的作用，但是 是使当前行强行中断而另起一行，新的行与原来的行保持相同的属性，换句话说，新行与原来的行在同一个段落中，而P标记符则是另起一个新的段落。以下示例显示了标记符 与之间的区别:上一页下一页返回2.2段落格式<html><head><title>大的时间安排<</title></head><body><palign="left">1、早晨:跑步、买早点、听新闻; 2、上午:看书、上网、查资料一; 3、下午:看书、打篮球; 4、晚上:学习英语、听音乐。上一页下一页返回2.2段落格式<palign="right">1、早晨:跑步、买早点、听新闻;palign="left">2、上午:看书、上网、查资料;<palign="center">3、下午:看书、打篮球;4、晚上:学习英语、听音乐。

</body></html>该文档在浏览器中显示如图2.9所示上一页返回2.3表格式

列表是一种常用的组织信息的方式，HTML也提供了用于实现列表的标记符。HTML语言可以实现以下常用列表:有序列表、尤序列表、定义列表。2.3.1有序列表语法<o1><li>......</li><li>.......</li></ol>

说明:ol是英文“orderedlist(有序列表)”的缩写，使用该标记符可以设置一个有序列表。开始标记符<ol>和结束标记符</o1>之间的内容就是有序列表的内容，因此结束标记符是不可省略的。下一页返回2.3表格式

有序列表中的每一列表项必须用li(listitem)标记符进行标识。列表项标记符1i隐含着换行的作用，当浏览器读到结束标记符</1i>时会自动换行显示(不过，结束标记符</li>通常都会被省略)。浏览器在显示有序列表时，会按照一定的规律对列表进行排序，并在每一列表项开头加上一定形式的序号。有序列表标记符of包含两个卞要属性:type和starto

使用type属性可以设置列表编号的样式。HTML中有序列表的编号样式有以下几种:1:表示是十进制数，如1,2,3等，该样式是默认样式;a:表示是小写字母，如a,b,c等A:表示是大写字母，如A,B,C等i:表示是小写罗马数字，如i、ii、iii等；Ⅰ:表示是大写罗马字母，如I、Ⅱ、Ⅲ等上一页下一页返回2.3表格式

使用start属性可以设置列表的起始编号。它定义了有序列表的起始数字，通常不必设置。有序列表中的列表项标记符1i有两个常用的属性:type和value。type属性用来设置当前列表项的数字样式，取值与ol标记符中type属性相同;value属性使用指定一个新的数字序列起始值，使用该属性可以创建一个非连续性的数字序列。下面是一个有序列表的例子，其源代码如下，效果如图2.10所示。<html><head><title>考试不要作弊</title></head><body>

为什么要考试?上一页下一页返回2.3表格式<o1type="I"><1i>钡l试你对某门课的掌握程度。<1i>测试你的记忆力和学习技巧。<1i>评估老师的教学质量。<1i>址重要的是，测试你是否诚实。</oI></body></html>在浏览器中打开该文件，效果如图2.11所示。上一页下一页返回2.3表格式2.3.2无序列表语法<u1><li>......</li><li>......</li></ul>

说明:ul是英文“unorderedlist(无序列表)”的缩写。开始标记符<u1>和结束标记符</ul>之间的内容就是无序列表的内容。与有序列表一样，无序列表中的每一列表项也必须用<li>标记符进行标识。浏览器在显示无序列表时，将不会对列表项排序，而是采用特定的项目符号进行排列。上一页下一页返回2.3表格式

无序列表标记符u1只有一个属性“type(项日符号样式)”，它有二种取值:"Circle(实心圆)”"oirole(空心圆)”和"Square(方框)”。无序列表中的列表项标记符1i也是只有一个属性type，它的取值与u1标记符中的取值一样，用于控制当前列表项的项日符号样式。下面是一个使用无序列表的例子，其源代码如下所示:<html><head><title>考试不要作弊</title></head><body>

考试作弊的行为包括:<ultype="circle"><li>偷看别人的试卷。</li>上一页下一页返回2.3表格式<li>问别人如币」答题。</li><li>看事先写好的纸条。</li></ul></body></html>上一页下一页返回2.3表格式2.3.3嵌套列表

在HTML中也可以实现列表的嵌套，也就是说，一个列表的列表项可以是另一个相同或不同类型的列表。例如，有序列表中嵌套无序列表，或者是无序列表中嵌套另一层无序列表。以下是一个使用了嵌套列表的例子，其源代码如下所示:<html><head><title>奥运会的体育项目</title></head><body><palign="center">奥运会的体育项目<ultype="square"><li>田赛上一页下一页返回2.3表格式<u1type="circle"><1i>短跑</li><1i>中长跑</li><1i>长跑</li></ul></li><li>径赛

<u1type="disc"><1i>投掷</li><1i>跳高<</li><1i>跳远<</li></ul>上一页下一页返回2.3表格式</li><1i>竟技性比赛

<o1type="a"><1i>球类

<o1type="1"><1i>大球<</li><1i>小球<</li></ol></li><1i>游泳<</li><li>体操</li><li>举重</li>上一页下一页返回2.3表格式</ol></li></ul></body></html>在浏览器中打开该文件，效果如图2.12所示。上一页下一页返回2.3表格式2.3.4定义列表语法<dl><dt></dt><dd></dd><dt></dt><dd></dd>

</dl>

说明:dl是英文“definitionlist(定义列表)”的缩写。开始标记符<dl>和结束标记符</dl>之间的内容就是定义列表的内容。定义列表中的条目是通过使用术语标记符dt(definitionterm)和术语定义标记符dd(definitiondata)来创建的。上一页下一页返回2.3表格式

dt标记符和dd标记符的结束标记符可以省略。和1i标记符一样，<dt>和<dd>标记符也隐含换行的作用，浏览器在显示时会自动换行。

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

教学材料HTML DHTML教程-第二章

文档简介

温馨提示

最新文档

评论

教学材料HTML DHTML教程-第二章

文档简介

温馨提示

最新文档

评论

相关文档