《HTML中文字的使用.ppt》由会员分享，可在线阅读，更多相关《HTML中文字的使用.ppt（42页珍藏版）》请在三一文库上搜索。
1、二、 HTML中文字的使用,2.1 对文字的编排 例1：文字的普通显示 文字编排 子曰: “学而时习之，不亦说乎？ 有朋自远方来，不亦乐乎？ 人不知而不愠，不亦君子乎？” ,说明：在网页中添加文字只要在 之间，需要插入文字的地方输入文字即可。一般在HTML文件里，无论输入多少空格（按空格键）都将被视为一个空格，任何回车操作（按Enter键）都是无效的，因为浏览器不能识别输入的空格或回车，它只能按照HTML标记来执行,例2：空格和换行的显示 文字的空格、回车等使用 子曰: “学而时习之，不亦说乎？ 有朋自远方来，不亦乐乎？ 人不知而不愠，不亦君子乎？” 说明： :空格符号，输入显示一个
2、空格 :换行标记，将文字换行显示，是一个单个使用的标记，效果同 按“Enter”键,P标记换行 文字的空格、回车等使用 子曰: “学而时习之，不亦说乎？ 有朋自远方来，不亦乐乎？ 人不知而不愠，不亦君子乎？” 说明： ；段落标记，除同一样换行外，还用一空白行间隔，效果如同按连续按两下“Enter”。标记也可单独使用,但不建议用,例3:文字单行显示 强制不换行 子曰: “学而时习之，不亦说乎？ 有朋自远方来，不亦乐乎？ 人不知而不愠，不亦君子乎？” 子曰: “学而时习之，不亦说乎？ 有朋自远方来，不亦乐乎？ 人不知而不愠，不亦君子乎？” ,说明: 默认情况下,文字随浏览器窗口大小变化换行显示,采
3、用标记,不管窗口大小如何变动,文字都以一行显示 但在标记中插入成对的标记之间的内容会被强制换行！,例4:文字居中显示 居中显示 凉州曲 王翰 葡萄美酒夜光杯， 欲饮琵琶马上催。 醉卧沙场君莫笑， 古来征战几人回。 说明:居中标记作用是将文字以居中对齐方式显示,例5:文字段落的缩进 文字的缩进 凉州曲 王翰 葡萄美酒夜光杯， 欲饮琵琶马上催。 醉卧沙场君莫笑， 古来征战几人回。 ,说明: 右缩进标记,将某段文字向右缩进方式显示,同时用空白行间隔. 注意:不能与标记嵌套使用,标记属性的应用 例1:段落位置的控制 段落对齐方式 居中段落 靠左段落 靠右段落 说明:align属性名,控制文字的显示位置
4、,”center”、”left”、”right”为属性的属性值,一般来讲，html的标记有下列三种表示方法： 1)文件或超文本 2)文本成超文本 3) 第三种写法仅用于一些特殊的标记,比如分段标记P，它仅仅通知www浏览器在此处分段，因而不需要界定作用范围， 所以它没有结尾链接签。,另外： 大多数HTML标记中都可以加入属性控制，其作用是帮HTML标记进一步控制HTML文件的内容，一个标记可以有多个属性，属性及其属性值不分大小写 格式： 多个属性间用空格隔开,不同的标记可以使用相同的属性,例2:标题文字的位置控制 多标记同一属性 这些是标题 居中标题1 靠左标题2 靠右标题3 ,例3:设置网页
5、的背景 主体标记的属性 小孩与大人 说明:background控制网页背景图片,属性值为图片路径与图片名,标志中还可以有以下属性：,例4: 水平分割线的设置 水平分割线 秋歌 曾子曰：“慎终，追远，民德归矣。“ ,说明:水平分割线,单个使用,用来在网页上画出一条水平线,用以分割不同的文字或其它网页组件 ：可设置水平线粗细, #为数字,以像素为单位 ：设置水平线宽度，像素或百分比 #=left, right,center：对齐方式 :设置为实心线条 ：设置水平线颜色 Noshade:不显示水平线的立体阴影,例5:noshade属性的使用 水平分割线 ,水平线属性： size: 设置水平分隔线的高
6、度，单位：像素默认值是2 width: 设置水平分隔线的宽度， 单位：像素 % 默认值是100% align: 设置水平分隔线的对齐方式。 默认值是center 还有left right color: 设置水平分隔线的颜色。 默认值是black noshade: 取消水平线的3d阴影 -,例6:属性的就近原则 就近显示 观察文字颜色 观察文字颜色 说明:当出现两个属性同时控制网页中相同的组件时,组件离哪个标记近,就由哪个标记的属性控制,2.2 多种多样的网页文字 文字字体、颜色的设置 字体的大小、颜色 凉州曲 王翰 古来征战几人回。 ,说明； . #=字体名 . #=Black, Olive,
7、 Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua . 设置字体大小 #=1, 2, 3, 4, 5, 6, 7 or +#, -#,物理字体(Physical Style) 粗体 斜体 下划线 打字机风格字体 上标 下标 文字中间画线 文字中间画线 逻辑字体(Logical Style) 强调的文本 加重的文本 编码的字体 引用的文本 小号字体 大号字体,2.3 特殊字符的显示 专业符号 ”结尾,上下标标记的使用 如要在网页中显示: (6 3 + 3 6
8、) 2 1 = ? 结果以 表示。 H 2 + O 2 H 2 O HTML代码: 运算式 (6 3 + 3 6) H 2 O ,说明: :上标标记 :下标标记 代表”Word中没有该字符”,2.3 滚动字幕 例1： 滚动字幕 啦啦啦，我会移动耶！ ,例2：文字移动属性的设置 方向 #=left, right 滚动字幕 啦啦啦，我从右向左移！ 啦啦啦，我从左向右移！ ,例3：方式 #=scroll, slide, alternate 滚动字幕 啦啦啦，我一圈一圈绕着走！ 啦啦啦，我只走一次就歇了！ 啦啦啦，我来回走耶！ ,例4：方式 循环 #=次数；若未指定则循环不止(infinite) 滚动
9、字幕 啦啦啦，我只走 3 趟哟！ 啦啦啦，我只走 3 趟哟！ 啦啦啦，我只走 3 趟哟！ ,例5： 滚动字幕 滚动字幕内容第一行 滚动字幕内容第二行 滚动字幕内容第三行 ,说明: :滚动标记,控制文字的滚动 Align:设置字幕的对齐方式,值可以为left、right、center、top、bottom Bgcolor:设置字幕背景颜色,属性值为颜色的英文名称 Direction:设置文字滚动方向,值可以为left,right,up,down Behavior:设置文字滚动方式,属性值有3个,scroll表示一端滚到另一端,slide表示从一端快速滑动到另一端且不再重复,alternate表示
10、在两端来回滚动 Height:设置字幕宽度,属性值为数值(像素) Width:字幕长度,属性值为数值,Hspace:设置字幕左右方向空白区域的宽度,属性值为数值(像素) vspace:设置字幕上下方向空白区域的宽度,属性值为数值(像素) scrolldelay:设置滚动两次之间的延迟时间,属性值为数值,数字越大,延迟时间越长 Scrollamount:设定滚动速度,属性值为数值,数字越大,滚动速度越快 Loop:用于设定滚动的次数,属性值为数值,-1表示一直滚动下去,直到页面更新,2.4 文字列表的使用 例1: 编号列表1 提纲标题 大体构思 初步设计 完善设计 开始制作 反复修改 ,说明:
11、编号列表的结构 内容一 内容二 内容三 编号列表标记,例2:更改序列号样式 编号列表2 提纲标题 大体构思 初步设计 完善设计 开始制作 反复修改 说明:type属性用于设置序号的样式,如type=1或a或A或I或i(I表示大写罗马数字,i表示小写罗马数字),例3:从特定序列号开始 编号的开始顺序 提纲标题 大体构思 初步设计 完善设计 开始制作 反复修改 说明:start控制序号的开始位置.其结构为start=n,n为数字或字母,例4:非序列提纲 非编号列表 新闻标题 戴尔将在印度增加2000员工 将其设为开发中心 微软XBOX亮相软交会 将要正式登陆中国？ 中芯国际预计第二季芯片出货量增1
12、6-18% 惠普联手富士通日立希捷 开发新一代储存硬盘 松下发布电池工作12小时笔记本电脑 ,说明: 编号列表的结构 内容一 内容二 内容三 非编号列表标记,使用同编号列表标记一样,例5:更改标号样式 非编号列表 新闻标题 戴尔将在印度增加2000员工 将其设为开发中心 微软XBOX亮相软交会 将要正式登陆中国？ 中芯国际预计第二季芯片出货量增16-18% 惠普联手富士通日立希捷 开发新一代储存硬盘 松下发布电池工作12小时笔记本电脑 ,说明: Type属性: Circle: Disc: Square:,说明式列表标记 说明式标记的使用 大体构思 对网页的一个初步构想，不要求 有什么实质性的东东，反正就是随意。 初步设计 有了大体构思以后，开始画一些 草图，并不断修改完善。 ,格式: 项目一 说明内容1 项目2 说明内容2 . ,