第三章网页中的文本.

第三章网页中的文本本章要点3.1文本的基本编辑3.1.1插入文本、符号、日期、水平线3.1.2添加字体3.1.3设置文本的属性3.1.4建立列表3.2超链接3.2.1路径3.2.2建立超链接3.3样式3.3.1CSS语法3.3.2CSS样式应用3.3.3引用外部CSS文件与导出样式表3.1文本的基本编辑互联网上大量信息的传播以文本为主。因此，对于网页制作人员来说，文本的处理是最基本而重要的技巧之一。学习网页制作首先应掌握网页中文本的制作和编辑方法。3.1.1插入文本、符号、日期、水平线1.Enter插入p /p（硬回车）2.shift＋enter插入br/（软回车）3.Ctrl＋shift＋space插入一个 特殊字符日期分段换行htmlheadtitle分段换行与预格式/title/headbodyh3以下是直接写文本的情况：/h3星期一、星期二、星期三、星期四、星期五、星期六、星期日。h3以下是使用了三个换行标记的情况：/h3星期一、星期二、br/星期三、星期四、br/星期五、星期六、星期日。br/h3以下使用分段标记（分为两段）：/h3p星期一、星期二、星期三、/pp星期四、星期五、星期六、星期日。/ph3以下使用预格式：/h3pre星期一、星期二、星期三、星期四、星期五、星期六、星期日。/pre/body/html以下HTML代码显示了如何用HR标记符的各种属性控制水平线的显示，效果如下图所示。HTMLHEADTITLE水平线效果/TITLE/HEADBODY以下是默认水平线：HR以下是粗为5像素的水平线：HRsize=5以下是长度为100像素的水平线：HRwidth=100以下是长度为屏幕宽度50%的水平线：HRwidth=50%以下是粗为5像素的实心水平线：HRsize=5noshade以下是红色的水平线：HRcolor=red/BODY/HTML插入水平线3.1.2添加字体执行菜单命令“文本”|“字体”|“编辑字体列表”3.1.3设置文本的属性图3-4文本的“属性”面板【例3-1】设计一个只有文字的页面，以下网页为例，对文字的格式、字体、字号、颜色以及对齐格式等属性进行设置。学习双标签h1/h1、/p/p、span/span、pre/pre及单标签br/、hr/的使用文本的字体、字号、风格等属性以CSS样式写在head/head中自定义的CSS样式优先级高于网页样式body,td,th{}的优先级用hn设置标题的大小。htmlheadtitle网页设计/title/headbodyh1今天天气真好!/hlh2今天天气真好!/h2h3今天天气真好!/h3h4align=left今天天气真好!/h4h5align=center今天天气真好!/h5h6align=right今天天气真好!/h6h今天天气真好!h/body/html强制换行标记的使用htmlheadtitle强制换行标记的使用/title/headbody欢迎进入牡丹园!brbr新闻br    影视p聊天室br/body/html强制不换行标记nobr……/nobr，常用英文人名nobrBillGates/nobr“计算机简史”网页的显示效果设置文字格式1设置文字的大小设置文字的大小的格式为：fontsize=数字face=字体名color=颜色被设置的文字／fontfont标记可设定文字的字体、字号和颜色。size用来设置文字的大小。数字的取值范围从1～7，size取1时最小，取7时最大。face用来设置字体。如黑体、宋体、楷体—GB2312、仿宋—GB2312、隶书、TimesNewRoman等。color用来设置文字颜色。font和hn标记都可以设置文字的大小，当font中的size取7时的文字比h1要大。【例2-5】用font设置文字的大小。htmlheadtitle用font设置文字的大小／title/headbodyh1文字的大小!/h1fontsize=1文字的大小size=1/fontbrfontsize=2文字的大小size=2/fontbrfontsize=3文字的大小size=3/fontbrfontsize=4文字的大小size=4/fontbrfontsize=5文字的大小size=5/fontbrfontsize=6文字的大小size=6/fontbrfontsize=7文字的大小size=7/fontbr/body/html上标（sup）和下标（sub）标记用于书写数学公式或分子式。如：Hsub2/subO!--H2O--Xsup2/sup!--X2--由于字体标记属于对文本外观进行修饰的标记，是由于当时CSS语言尚未出现时html定义的表现的范畴，随着CSS的出现，这些表现功能均可以由CSS完成，所以不含有语义的字体标记慢慢过时了。3.1.4建立列表与列表有关的标签为ul、ol、li、menu、lh、dl、dt、dd等，格式。通过文本的“属性”面板建立列表创建有序列表创建有序列表创建有序列表需要使用有序列表标记符OL和列表项标记符LI，其中LI标记符的结束标记符可以省略，基本语法如下：OLLI列表项1LI列表项2LI列表项3/OLOL标记符具有两个常用的属性：type和start，分别用来设置数字序列样式和数字序列的起始值。start属性的值可以是任意整数，type属性的值如表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代码显示了如何创建不同的有序列表，效果如下图所示。pclass=STYLE2用大写罗马字母表示的有序列表：/poltype=Iclass=STYLE2li列表值1/lili列表值2/lili列表值3/li/olpclass=STYLE2数字序列的有序列表/poltype=1liclass=STYLE2张三/liliclass=STYLE2李四/liliclass=STYLE2王五/li/olpclass=STYLE3strong字母序列的有序列表/strong：/poltype=Aliclass=STYLE2列表值1/liliclass=STYLE2列表值1/liliclass=STYLE2列表值1/li/olpclass=STYLE3strong编号不连续的有序列表/strong：/poltype=1liclass=STYLE2列表值1/liliclass=STYLE2列表值1/lilivalue=5class=STYLE2列表值1/li/olpclass=STYLE2其实数字为3的有序列表：/polstart=3liclass=STYLE2列表值1/liliclass=STYLE2列表值2/liliclass=STYLE2列表值3/li/olHTMLHEADTITLE有序列表示例/TITLE/HEADBODY用大写罗马字母表示的有序列表：OLtype=ILI列表项1LI列表项2LI列表项3/OL起始数字为3的有序列表：OLstart=3LI列表项1LI列表项2LI列表项3/OL编号不连续的有序列表OLLI列表项1LI列表项2LIvalue=5列表项3/OL变换了数字样式的有序列表OLLI列表项1LI列表项2LItype=A列表项3/OL/BODY/HTML有序列表的嵌套以下HTML代码即显示了一个嵌套的有序列表，效果如下图所示。HTMLHEADTITLE嵌套的有序列表/TITLE/HEADBODYH2嵌套的有序列表/H2OLtype=ALI列表项1OLLI子列表项1LI子列表项2LI子列表项3/OLLI列表项2LI列表项3/OL/BODY/HTML创建无序列表无序列表使用ul和/ul标记，它包含的内容项没有指定顺序，表示彼此相关但却不遵循某一顺序的一组信息。无序列表的每一项不再用编号表示，而是用某种类型的标志（如实心圆、空心圆圈等）表示。一个典型的无序列表如下定义：ulli第1项/lili第2项/li……li第n项/li/ul列表项标志可以通过ul标记的type属性来设置。type属性可以选择以下几项之一：circle：空心圆点square：方块disc：实心圆点无序列表以下HTML代码显示了如何创建无序列表，效果如下图所示。HTMLHEADTITLE无序列表示例/TITLE/HEADBODY默认无序列表：ULLI列表项1LI列表项2LI列表项3/UL使用方块作为列表项标记的无序列表：ULtype=squareLI列表项1LI列表项2LI列表项3/UL/BODY/HTML嵌套的无序列表示例ulid=navliahref=文章/aulliahref=CSS教程/a/liliahref=DOM教程/a/liliahref=XML教程/a/li/ul/liliahref=参考/aulliahref=XHTML/a/liliahref=XML/a/liliahref=CSS/a/li/ul/li/ul定义项目列表定义项目列表用项目列表表示单词或语句,使之具有交互凹进的特点.定义项目列表使用标记dl、dt和dd。dt往往用于定义单词，dd用于定义语句。由dt定义的项目会自动换行左对齐，但项目之间没有空行。格式为：dldt定义单词1dd单词1的说明dt定义单词2dd单词2的说明……./dl项目列表应用示例htmlheadtitle项目列表应用/title/headbodypalign=center院系设置/pdldt计算机应用专业dd专业内容有……dt计算机软件专业dd专业内容有……dt计算机网络专业dd专业内容有……/dl/body/html课堂练习：定义列表项目dldt湖南城市/dtdd长沙/dddd衡阳/dddd常德/dd/dldldt湖北城市/dtdd武汉