HTML与页面开发之【文字网页】.ppt

讲师：余涛 —第二章 制作文字网页 HTML与页面开发 回顾 浏览HTML的原理 HTML是一种标记语言 使用记事本、专业工具都可编写HTML HTML主要结构 相对路径 绝对路径 本章目标 熟练使用各种排版标记定制HTML页面。 熟练使用各种字体标记修饰文字。 熟练使用各种列表标记创建列表。 熟练使用链接标记添加超级链接。 第1节 排版标记 排版标记 排版标记 p br/ center pre nobr wbr div hr/ 段落标记格式 段落标记为文字、图片、表格等之间留一空白行。 p align=center style=color:#ff0000 学习HTML其实很容易。 /p p只要熟悉HTML常用的标记的使用、特性、规则等等。 /p p title=看看工具提示！ 这样你就可以说已经掌握了HTML。 /p 段落标记属性 p class 设置CSS类 align 水平对齐方式 lang 语言信息 dir 文字方向 style 设置内嵌样式 title 设置工具提示 换行标记格式 在不另起一段的情况下将当前的强制文字、图片、表格等强制换行显示于下一行。 html head title/title /head body …… 如果你在文字排版中需要换行br/就加入“br”标记即可。 /body /html 水平标记格式 可以在浏览器上显示一条细线以分隔两个区域。 hr align=LEFT size=4 hr align=LEFT size=2 width=70% color=#0000FF noshade=“noshade” hr align=LEFT size=4 width=70 color=#008000 水平标记属性 hr/ size 设定线条厚度 align 水平对齐方式 width 设定线条长度 color 设定线条颜色 noshade 设定线条为平面 第2节 字体标记 字体标记 字体标记 strong i samp kbd h1 h4 small address b font em var cite code u strike big sup sub h2 h3 h5 h6 粗体标记格式 b、strong皆是文档中格式化粗体文本。 strong 2.2字体标记－Strong、B标记都用于字体加粗显示。 /strong br/ b Strong、B标记通常都可以加粗文字，显示效果一样。 /b 文本强调标记格式 所有文字将全部显示为斜体强调样式。包含 i、em、var、cite、dfn、address标记 i2.2字体标记－标记都用于文字斜体显示。/i br address看！用address标记同样有斜体效果。/address br em我是em标记，我还不是可以实现斜体效果。/em br 标题标记格式 h1 至 h6 变粗变大加宽程度逐渐减小。 h1这是H1标记效果/h1 h2这是H2标记效果/h2 h3这是H3标记效果/h3 h4这是H4标记效果/h4 h5这是H6标记效果/h5 h6这是H6标记效果/h6 字体标记格式 用来改变默认的字体、颜色、大小等属性。 font face=宋体 size=2 color=#008000 font标记更灵活地设置字体格式。 /font 项目实战 利用排版标记完成指定网页排版 第3节 列表标记 列表标记 列表标记 ul menu dl ol li dir dt dd 无序列表标记格式 无序列表中的项目符号是几何图形。 ul liUL称为无序清单标记。 /li li无序列表中的项目符号是几何图形。/li /ul 有序列表标记格式 有序列表中的项目符号是数字或字母序列。 ol type=1 start=2 liOL称为顺序清单标记。/li liLI则用以标示清单项目。/li li有序列表中的项目符号是数字或字母序列。/li /ol 列表项目标记格式 无论是有无序列表，列表项目都用li标记列出。 ul type=circle liWord/li …… liAccess/li /ul ol start=10 li巴黎/li …… li纽约/ol 第4节 链接标记 第5节 特殊字符显示 项目实战 1.将《清平调》这首诗在页面中显示出来，要求以诗的排版形式。 2.请插入一个5行数据的列表，内容不限，要求字体为“宋体”、20象素大小、粗体。 总结 排版标记包括 p、br/、hr/、center、pre、div、nobr、wbr 列表标记包括 ul、ol、li menu、dir dl、dt、dd 链接标记包括 a 由于标记繁多，标记需要自学，查看HTML参考书。 课后任务 查看所有HTML标签，理解其作用并举例。 预习第三章内容