第2章文本格式_第1页
第2章文本格式_第2页
第2章文本格式_第3页
第2章文本格式_第4页
第2章文本格式_第5页
已阅读5页，还剩53页未读， 继续免费阅读

下载本文档

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

文档简介

第2章文本格式2.1文本分段2.2

控制文本的显示效果

2.3列表格式2.1文本分段2.1.1段落标记符P和换行标记符BR以下HTML代码显示了P和BR标记符的用法，效果如图2-1所示。<HTML><HEAD><TITLE><P>与<BR>的用法</TITLE></HEAD><BODY><P>第一段<P>第二段，用<BR>标记符控制断行<BR>仍然为第二段，但此行已经断开<P>第三段<P>第四段，多个<P>标记符并没有起到产生多个空行的效果<P><P><P><P>但多个<BR>标记符可以产生多个空行效果<BR><BR><BR><BR><P>此为最后一段</BODY></HTML>图2-1P与BR的用法2.1.2水平线标记符HRsize属性width属性noshade属性color属性以下HTML代码显示了如何用HR标记符的各种属性控制水平线的显示，效果如图2-2所示。<HTML><HEAD><TITLE>水平线效果</TITLE></HEAD><BODY>以下是默认水平线：<HR>以下是粗为5像素的水平线：<HRsize="5">以下是长度为100像素的水平线：<HRwidth="100">以下是长度为屏幕宽度50%的水平线：<HRwidth="50%">以下是粗为5像素的实心水平线：<HRsize="5"noshade>以下是红色的水平线：<HRcolor="red"></BODY></HTML>图2-2水平线效果2.1.3标题标记符Hn以下HTML代码显示了1至6级标题的效果，如图2-3所示。<HTML><HEAD><TITLE>标题效果</TITLE></HEAD><BODY><H1>此为一级标题</H1><H2>此为二级标题</H2><H3>此为三级标题</H3><H4>此为四级标题</H4><H5>此为五级标题</H5><H6>此为六级标题</H6><P>此为正常文本</P></BODY></HTML>图2-3标题效果可以看出，浏览器在解释标题标记符时，会自动改变文本的大小并将字体设为黑体，同时自动将内容设置为一个段落。2.1.4段落对齐

align属性align属性可应用于多种标记符，例如前面介绍的P、Hn、HR等。以下HTML代码显示了align属性的效果，如图2-4所示。<HTML><HEAD><TITLE>使用align属性</TITLE></HEAD><BODY><P>本行为默认对齐的段落，相当于align="left"<Palign="center">本行为居中对齐的段落<Palign="right">本行为右对齐的段落<H1align="center">本行为居中对齐的一级标题</H1>以下为左对齐的水平线：<HRalign="left"width="50%"></BODY></HTML>图2-4使用align属性注意：对于不同的标记符，默认的align属性值不同。P和Hn标记符的默认align属性值是left，而HR标记符的默认align属性值是center。DIV标记符与CENTER标记符如果需要将多个段落使用相同的对齐方式，那么可以不必在每个段落中设置align属性，而是使用DIV标记符将所有段落包括起来，然后在DIV标记符中设置align属性。例如，以下HTML代码将多个段落的内容都设置为居中对齐，效果如图2-5所示。<HTML><HEAD><TITLE>使用DIV标记符</TITLE></HEAD><BODY><DIValign="center"><H1>浣溪沙</H1><H4>晏殊</H4><HRwidth="400">

<P>一曲新词酒一杯，</P><P>去年天气旧池台，</P><P>夕阳西下几时回？</P><P>无可奈何花落去，</P><P>似曾相识燕归来，</P><P>小园香径独徘徊。</P></DIV></BODY></HTML>图2-5使用DIV标记符格式的嵌套（1）如果所设置的格式是相容的，则取格式叠加的效果。例如，如果为一段文字同时设置了粗体和斜体格式，则该段文字将以粗斜体显示。（2）如果所设置的格式是冲突的，则取最近样式符的修饰效果。例如，如果同时在不同标记符中设置了段落对齐方式，那么相应内容的对齐方式以最近的标记符为准。例如，以下HTML代码可以说明浏览器如何解释格式嵌套，效果如图2-6所示。<HTML><HEAD><TITLE>格式嵌套示例</TITLE></HEAD><BODY><DIValign="center">本行使用<DIValign="center">对齐<Palign="right">本行的对齐方式被更改了</P></DIV><P>本行文字显示了如何同时应用<B><I>粗体和斜体</I></B></P><!--B标记符和I标记符将在2.2.2节中介绍--></BODY></HTML>图2-6格式嵌套示例2.2

控制文本的显示效果2.2.1字体控制标记符FONT

size属性以下HTML代码显示了size属性的用法，效果如图2-7所示。<HTML><HEAD><TITLE>FONT标记符的size属性示例</TITLE></HEAD><BODY><P>正常文本<P><FONTsize="7">这些是大字体的文本</FONT><P><FONTsize="1">这些是小字体的文本</FONT><P><FONTsize="+2">这些文字的字体比正常文本大2号</FONT><P><FONTsize="-2">这些文字的字体比正常文本小2号</FONT><P><FONTsize="+2">混</FONT>合<FONTsize="-1">字</FONT><FONTsize="+3">体</FONT>大小</BODY></HTML>图2-7FONT标记符的size属性用法示例color属性face属性常用的一些中英文字体的示例如图2-8所示，相应的HTML代码如下：<HTML><HEAD><TITLE>字体示例</TITLE></HEAD><BODY><DIValign="center"><P>以下是常用中文字体：</P><FONTface="宋体">宋体</FONT><BR><FONTface="楷体_GB2312">楷体</FONT><BR><FONTface="黑体">黑体</FONT><BR><FONTface="隶书">隶书</FONT><BR><FONTface="幼圆">幼圆</FONT><P>以下是常用英文字体：</P><FONTface="TimesNewRoman">TimesNewRoman</FONT><BR><FONTface="Arial">Arial</FONT><BR><FONTface="ArialBlack">ArialBlack</FONT><BR><FONTface="CourtierNew">CourtierNew</FONT><BR>

<FONTface="ComicSansMS">ComicSansMS</FONT><BR><FONTface="Verdana">Verdana</FONT><BR></DIV></BODY></HTML>图2-8常用字体示例2.2.2物理字符样式所谓物理字符样式，是指标记符本身就说明了所修饰文字的效果的标记符。例如，B标记符表示粗体，SUB标记符表示下标——因为B是Bold（粗体）这个单词的首字母，而SUB是subscript（下标）这个单词的前三个字母。常用的物理字符样式标记符有：黑体标记B、斜体标记I、下划线标记U等，如表2-1所示。表2-1常用物理字符样式标记符功能标记符功能<B></B>粗体<STRIKE></STRIKE>删除线<BIG></BIG>大字体<SUB></SUB>下标<I></I>斜体<SUP></SUP>上标<S></S>删除线<TT></TT>固定宽度字体<SMALL></SMALL>小字体<U></U>下划线使用这些物理字符样式时，只需将设置格式的字符括在标记符之间即可。例如，以下HTML代码在浏览器中的显示如图2-9所示。图2-9物理字符样式效果<HTML><HEAD><TITLE>物理字符样式效果示例</TITLE></HEAD><BODY><P><B>此处为粗体显示文本</B><P><BIG>此处为大字体文本</BIG><P><SMALL>此处为小字体文本</SMALL><P><I>此处为斜体文本</I><P><TT>此处为等宽字体文本</TT><P><U>此处为下划线文本</U><P><S>此处为使用<S>标记设置的删除线文本</S><P><STRIKE>此处为使用<STRIKE>标记设置的删除线文本</STRIKE><P>此处为上标示例：x<SUP>2</SUP>+y<SUP>2</SUP>=R<SUP>2</SUP><P>此处为下标示例：H<SUB>2</SUB>SO<SUB>4</SUB></BODY></HTML>2.1.1逻辑字符样式所谓逻辑字符样式是指标记符本身表示了所修饰效果的逻辑含义。例如，ADDRESS标记符本身的逻辑意义为“地址”，但并没有说明具体的物理效果。常用的逻辑字符样式如表2-2所示。

表2-2常用逻辑字符样式标记功能<ADDRESS></ADDRESS>用于指定网页创建者或维护者的信息，通常显示为斜体<CITE></CITE>用于表示文本属于引用，通常显示为斜体<CODE></CODE>用于表示程序代码，通常显示为固定宽度字体<DFN></DFN>用于表示定义了的术语，通常显示为黑体或斜体<EM></EM>用于强调某些字词，通常显示为斜体<KBD></KBD>用于表示用户的键盘输入，通常显示为固定宽度字体<SAMP></SAMP>用于表示文本样本，通常显示为固定宽度字体<STRONG></STRONG>用于特别强调某些字词，通常显示为粗体<VAR></VAR>用于表示变量，通常是斜体使用这些逻辑样式时，也只需将设置格式的字符括在标记符之间即可。例如，以下HTML代码在浏览器中的显示如图2-10所示。图2-10逻辑字符样式<HTML><HEAD><TITLE>HTML逻辑字符样式</TITLE></HEAD><BODY><P><EM>此为强调文本</EM><P><STRONG>此为特别强调文本</STRONG><P><CITE>此为引用文本</CITE><P><DFN>此为一个术语定义</DFN><P><CODE>代码格式：Thisisanexampleofcodeformatting</CODE><P><VAR>变量格式：Thisisanexampleofvariableformatting</VAR><P><SAMP>样本字符格式：Thisisasampleofliteralcharacters</SAMP><P><KBD>键盘输入格式：Thisisanexampleofkeyboardinputformat</KBD><P><ADDRESS>地址格式：Thisisanaddress</ADDRESS></BODY></HTML>2.3.1有序列表创建有序列表创建有序列表需要使用有序列表标记符OL和列表项标记符LI，其中LI标记符的结束标记符可以省略，基本语法如下：<OL><LI>列表项1<LI>列表项2<LI>列表项3</OL>OL标记符具有两个常用的属性：type和start，分别用来设置数字序列样式和数字序列的起始值。start属性的值可以是任意整数，type属性的值如表2-3所示：2.3

列表格式表2-3有序列表的type属性值值含义1阿拉伯数字：1、2、3等，此选项为默认值A大写字母：A、B、C等a小写字母：a、b、c等I大写罗马数字：I、II、III、IV等i小写罗马数字：i、ii、iii、iv等当位于OL标记符内时，LI标记符具有两个常用的属性：type和value。type属性用于设置数字样式，取值与OL的type属性相同；value属性用于指定一个新的数字序列起始值，以获得非连续性的数字序列。例如，以下HTML代码显示了如何创建不同的有序列表，效果如图2-11所示。图2-11有序列表示例

<HTML><HEAD><TITLE>有序列表示例</TITLE></HEAD><BODY>用大写罗马字母表示的有序列表：<OLtype="I"><LI>列表项1<LI>列表项2<LI>列表项3</OL>起始数字为3的有序列表：<OLstart="3"><LI>列表项1<LI>列表项2<LI>列表项3</OL>编号不连续的有序列表<OL><LI>列表项1<LI>列表项2<LIvalue="5">列表项3</OL>变换了数字样式的有序列表<OL><LI>列表项1<LI>列表项2<LItype="A">列表项3</OL></BODY></HTML>有序列表的嵌套

以下HTML代码即显示了一个嵌套的有序列表，效果如图2-12所示。<HTML><HEAD><TITLE>嵌套的有序列表</TITLE></HEAD><BODY><H2>嵌套的有序列表</H2><OLtype="A"><LI>列表项1<OL><LI>子列表项1<LI>子列表项2<LI>子列表项3</OL><LI>列表项2<LI>列表项3</OL></BODY></HTML>图2-12嵌套有序列表2.3.2无序列表创建无序列表以下HTML代码显示了如何创建无序列表，效果如图2-13所示。<HTML><HEAD><TITLE>无序列表示例</TITLE></HEAD><BODY>默认无序列表：<UL><LI>列表项1<LI>列表项2<LI>列表项3</UL>使用方块作为列表项标记的无序列表：<ULtype="square"><LI>列表项1<LI>列表项2<LI>列表项3</UL></BODY></HTML>图2-13无序列表示例混合嵌套列表

有序列表和无序列表也可互相嵌套，如以下HTML代码所示（效果如图2-14所示）：<OL><LI>列表项1<LI>列表项2<UL><LI>子列表项1<LI>子列表项2</UL><LI>列表项3</OL>图2-14混合嵌套列表

2.4创建超链接一、超级链接定义：就是当鼠标单击一些文字、图片或其他网页元素时，浏览器就会根据指示载入一个新的页面或调转到页面的其他位置。2.4创建超链接二、相对地址与绝对地址1.什么是URL，统一资源定位器，资源的地址三部分组成：协议代码；装有所需文件的计算机地址；具体的文件地址和文件名协议表明应使用何种方式获取所需信息常用的有：超文本传输协议；文件传输协议；电子邮件协议；远程登陆协议等/cartoon.htm2.4创建超链接2.绝对URL和相对URL绝对URL(完整地址)例：http///public/html/example.htm协议计算机域名包含路径的文件名相对URL相对于当前页面的地址，包含从当前页面指向目的页面位置的路径基于根目录的路径三、页面链接是指指向其他网页的超链接<A>

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

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

最新文档

评论

0/150

提交评论