HTML进阶2.ppt

第3章HTML进阶 河北北方学院刘一斐2011 09 20afei2008 本章内容 3 1页面文本排版标签3 2图片及超级链接标签3 3列表标签3 4表格标签3 5框架标签 3 1页面文本的排版标签 文字是网页中最基本的信息载体 文字通过不同的排版方式 不同的设计风格排列在网页上 给我们提供了丰富的信息 在网页中添加文字并不困难 主要问题是如何编排这些文字 以及控制这些文字的显示方式 让文字看上去编排有序 整齐美观 1 标题标签Hn标签的格式 文本内容 文本内容标签说明 实际标签Hn是一系列以H开头的标签 使用H标签指定标签之间的文本的大小 共分为6级 数值越大字越小 专门用作标题 Hn标签有一个参数 align 它用于设置文本的对齐方式 取值为left 左对齐 center 居中对齐 right 右对齐 2 文本标签FONT标签的格式 标签说明 FONT标签是专门对文本进行设置的标签 该标签共有三个参数 face指定字体的名称 可以设置一种 也可以设置多种 字体名称之间用逗号隔开 Size参数指定字体的大小 字号 数值范围在绝对值1 7 相对值 4 4 之间 Color参数用于指定文本的颜色 属性值采用十六进制数值 HTML颜色参考 在HTML里 颜色有两种表示方式 一种是用颜色名称表示 比如blue表示蓝色 另外一种是用16进制的数值表示RGB的颜色值 RGB是Red Green Blue意思 RGB每个原色的最小值是0 最大值是255 如果换算成16进制表示 就是 00 FF 比如白色的RGB 255 255 255 就用 FFFFFF表示 还有黑色的RGB 0 0 0 就用 000000表示 注 在W3C制定的HTML4 0标准中 只有16种颜色可以用颜色名称表示 aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white andyellow 其它的颜色都要用16进制RGB颜色值表示 当然 现在的浏览器支持更多的颜色名称 不过为保险起见 建议你还是采用16进制RGB颜色值来表示颜色 并且在值前加上 这个符号 3 文本格式化标签 B标签 I标签 U标签 S标签这四个标签的格式为 文本文本文本文本标签说明 B标签用于将标签之间的文本设置成粗体 I标签用于将标签之间的文本设置成斜体 U标签用于将标签之间的文本加下划线 S标签用于将标签之间的文本添加删除线 4 BIG标签标签的格式 文本标签说明 BIG标签将使用比当前页面的字体更大的字体显示该标签之间的文本 例如 BIG标签这是正常字体 这是使用了big标签的文本 字符格式的常用标签 定义上标定义下标粗体斜体显示文字加下划线强调 通常用斜体 着重强调 通常用粗体 定义等宽字体 打字机字体 字符格式的常用标签举例 HTML学习这很有趣水的分子式是H2O 求圆的面积的公式为 pi r2足球是人们最喜爱的比赛 信息技术是发展的关键 我们玩得很开心 字符格式常用标签举例 5 段落标签P标签的格式 文本内容标签说明 一个标签表示起始一个段落 这个标签没有结束标签 每一个新的段落标签开始的同时 也就意味着上一个段落的结束 标签它只有一个参数align 用来设置被定义的文本内容的对齐方式 6 换行标签BR标签的格式 标签说明 BR标签的作用是在不另起一段的情况下将当前文本强制换行 用法非常简单 在准备换行的地方加个即可 7 水平线标签HR标签的格式 标签说明 HR标签用于在页面上划出一条水平线 和BR标签一样 它也不要求成对使用 该标签的参数中 width和size的单位是像素 8 超级链接标签A标签的格式 超级链接文本内容或图像标签说明 A标签表示建立一个链接 该标签一定要和href一起使用 用href参数告诉要链接的文件的地址和文件名 提示 如果要链接的文件与设计的页面同在一个文件夹中 此时路径名可以省略 只需输入链接的文件名 如果不同在一个文件夹内 路径名不能省略 绝对路径和相对路径 超链接标签 协议 主机 文件 附加资源 9 marquee标签 跑马灯标签 标签的格式 指明要滚动显示的文本内容标签说明 marquee标签用来设置标签之间的文本内容移动 它有三个参数 Direction 设置文本移动的起始方向 Scrollamount 设置文本每次移动的距离 像素 Scrolldelay 设置文本移动停留的时间 毫秒 说明 marquee标签可以单独使用 即不使用参数 当这个标签没有参数时 它的功能是 从左向右滚动 每次移动的距离是6 停留时间是90毫秒 10 特殊符号标签特殊符号的代码由前缀 组成 想在哪里插入特殊符号 就在那里插入特殊符号的代码就可以了 空格标签格式 标签说明 nbsp 标签用于设置空格 一个 nbsp 表示一个西文空格 该标签不必放在尖括号里面 nbsp HTML特殊符号大全 PRE标签 预先设置格式带格式的内容 DTD 文档类型定义HtmlPublicVersionURL 3 2图像标签 1 了解图像的格式 2 图像标签IMG标签的格式 标签说明 IMG标签表示插入一个图像 该标签一定要和src一起使用 用src参数告诉要插入的图像的地址和文件名 提示 图像的地址可以用相对路径 还可以用网址作为图片的绝对路径 3 图像标签IMG的常用属性 设置图片的提示文字 Alt 3 图像标签IMG的常用属性 设置图片的高度和宽度 设置图片的边框线border 10 4 图像的边距 排列 超链接 图像与文字之间的对齐 align 4 图像的边距 排列 超链接 设置图片的垂直边距 参数 Vspace 设置图片的水平边距 参数 Hspace 4 图像的边距 排列 超链接 给图像添加超级链接 图像标签 超级链接的妙用 书签效果锚点 内容使用时 定位位置电子邮件 多媒体应用 背景音乐插入多媒体文件 A标签的target属性 target属性指定所链接的页面在浏览器窗口中的打开方式 self 在同一框架或窗口中打开所链接的文档 此参数为默认值 通常不用指定 blank 在新浏览器窗口中打开链接文件 parent 将链接的文件载入含有该链接框架的父框架集或父窗口中 如果含有该链接的框架不是嵌套的 则在浏览器全屏窗口中载入链接的文件 就象 self参数一样 top 在当前的整个浏览器窗口中打开所链接的文档 因而会删除所有框架 3 3HTML语言的常用标签 列表 1 列表标签 Lists 1 有序列表 2 无序列表 3 定义列表 有序列表 有序列表 Orderedlist 也称数字式列表 它是一种在表的各项前显示有数字或字母的缩排列表 有序列表 定义有序列表需要使用有序列表标记符和列表项 Listitem 标记符 结束标记符可省略 语法如下 Listitem1Listitem2 有序列表 OL标记符具有两个常用的属性 TYPE和START 分别用来设置数字序列样式和数字序列起始值 START属性的值可以是任意整数 TYPE属性的值如书中表所示 有序列表 当位于OL标记符内时 LI标记具有两个常用的属性 TYPE和VALUE TYPE属性用于设置数字样式 取值与OL的TYPE属性相同 VALUE属性用于指定一个新的数字序列起始值 以获得非连续性的数字序列 示例 有序列表的嵌套例如 项目一项目二子项目A子项目B项目三 无序列表 无序列表 Unorderedlist 也称强调式列表 它是一种在表的各项前显示有特殊项目符号的缩排列表 无序列表 定义无序列表需使用无序列表标记符和列表项标记符 与OL标记符类似 UL标记符也包含一个常用的TYPE属性 用于控制列表项前特殊符号的显示 同时 无序列表中的LI标记符也具有相同的TYPE属性 注意 在InternetExplorer中 TYPE的值是区分大小写的 与有序列表类似 无序列表也可以嵌套 另外 有序列表和无序列表也可互相嵌套 3 无序号列表 UnorderedList 例如 第一章第二章下篇第一章 TYPE属性可以分别取三个值 DISC SQUARE CIRCLE 它们是用来控制强调符风格的属性 三个值分别对应实心圆点 实心方块 空心圆圈 列表嵌套示例 定义列表 定义列表 Definitionlist 用于定义术语 最早是为了实现术语解释而专门定义的一组标签 DL 定义列表DT 定义列表的术语标题DD 定义列表中对术语的介绍 定义列表 效果 术语本身定格显示 术语的解释缩进显示 网络用物理链路将各个孤立的工作站或主机相连在一起 组成的数据链路 3 4HTML语言的常用标签 表格 表格 Tables 可以用表格来精确定义页面文本或图片等的排版格式 这是一种常用的页面内容组织形式 许多网站的页面采用表格来布局网页内容 表格标记符table表格标题caption表格行tr tablerow 表格数据td tabledata 表格表头th tableheading 列 单元格 表格的基本元素 在HTML中 广泛使用表格控制文本和图像的位置 行 表头 表格标签的标识方法 首先定义表格 和标记表格由行组成 和标记每一行由单元格组成 和标记 表格示例 例 创建一个有三个单元格的表格 第一个单元格的内容是 足球 第二个单元格的内容是 篮球 第三个单元格的内容是 武术 表的边框不可见 使用表格足球篮球武术 表格示例 使用表BeckhamMichaelJordanBruceLeeRonaldoKobeBryantJackieChan 表格示例 表格标签的属性 标签属性 Align left center right表格对齐方式Border 表格边框线Width 表格宽度Height 表格高度Cellspacing单元格相互之间的空间Cellpadding单元格内容与边线的空间 的Border属性 使用表格BeckhamMichaelJordanBruceLeeRonaldoKobeBryantJackieChan 2 1表格边框 标记的BORDER属性用于指定表格的边框 如果将值设置为0 则不会显示边框 边框属性示例 2 2表格的标题 标记紧跟在标记后面 该标记用于指定表格的标题 简要说明 标记用于指定每一列的标题 使用表格体育项目足球篮球武术BeckhamMichaelJordanBruceLeeRonaldoKobeBryantJackieChan 标题标签及属性 AlignValign放在tr标签之前 放在table的内部使用 字段标签 和的用户一至文字是以粗体居中显示 示例 行标签及其属性 AlignValignbgcolor 列标签及其属性 WidthHeightAlign left center righValign top middle bottomColspanrowspan 2 3插入行和列 使用表格BeckhamMichaelJordanBruceLeeRichardGereRonaldoKobeBryantJackieChanJackZidaneRoseMaryRichard 可以使用和标记在表中插入行和列 示例 2 4合并单元格 列 COLSPAN属性用于创建跨多列的单元格 使用表格创建表格第一学期第二学期数学科学英语数学科学英语989580958788 示例 2 4合并单元格 行 ROWSPAN属性用于创建跨多行的单元格 使用表格创建表格螺母螺铨锤子 第一季度一月份250010001240二月份300025004000三月份320010002400 示例 2 5格式化表格 使用表格BeckhamMichaelJordanBruceLeeRonaldoKobeBryantJackieChan 将标记的WIDTH属性设置为50 这使得表格的宽度覆盖浏览器窗口的50 使用BGCOLOR属性设置表格的背景颜色 ALIGN属性指定水平对齐方式 而VALIGN用于指定垂直对齐方式 示例 2 6CELLSPACING属性和CELLPADDING属性 CELLPADDING属性定义单元格中的文本与单元格边框之间的间距 使用表格BeckhamMichaelJordanBruceLeeRonaldoKobeBryantJackieChan CELLSPACING属性定义单元格与单元格之间的间距 示例 什么是框架框架结构框架的初始化设置目标框架使用页内框架 3 5HTML语言常用标签 框架 框架 Frame 什么是框架 在同一个浏览器窗口中同时显示多个网页的交互式结构 演示 框架示例 框架标签 标签属性 rows cols 可以使用固定值 百分比和 三种border frameborder标签属性 src name scrolling noresize的target属性四个内置的取值 blank parent self top 框架结构 定义框架集位置 在head标签和body标签之间定义框架的结构 框架结构 框架集的定义Rows定义行结构框架Cols定义列结构框架 框架结构 水平分割和垂直分割Rows和cols的取值 Rows 像素数 N 嵌套框架 演示 定义框架结构 定义框架具体定义每个页面 框架的初始化 在frame标记符中使用src属性可以指定框架中最初显示的页面 frameset标记符的常用属性 使用frameboder属性可以指定框架