网站设计与开发技术教程 第2章 HTML标签.ppt

HTML常用标签1.什么是HTML（HyperTextMarkupLanguage）语言？nHTML（HyperTextMarkupLanguage）语言是一种描述文本的标记性语言。标记是一些字母或单词，并被放在中，格式为：显示内容通过浏览器解释标记的含义，显示文件的内容。n当我们第一次启动Dreamweaver时会自动打开一个空文档，点击按钮切换到“显示代码视图”就可以看到一个网页的HTML语言结构。如下图：网页的HTML结构网页的标题头部体部网页的代码结构1.文本段落标记2.字体格式：n标记有3个属性分别用于控制字体的颜色、样式和大小。（1）size属性：其值越大显示的文字越大，字号大小有7个等级，默认为3。可以直接使用字号设置字体的大小，也可以使用+1、-2等数值来指定字号的大小，这表示它比默认的3号字体的大1号和小2号，即4号和1号字。例如：杭州世界动漫节n(2)color属性color属性用于控制内的文字颜色，默认字体的颜色是黑色。可以使用Color属性来改变字体的颜色，其值可以是颜色的名称或是一组十六进制的数值。例如：杭州世界动漫节杭州世界动漫节n（3）face属性用来指定字体的样式。中文默认字体是“宋体”，英文字体是“TimeNewRoman”，使用face属性设置字体时，可以使用多个字体名称作为face的属性值。当浏览器显示含有多个字体的网页时，浏览器将逐个搜索系统字体以得到匹配。例如：杭州世界动漫节平行线地址信息3.列表列表n 无序列表无序列表 无序列表的各个项目可以按任意次序排列，项目之无序列表的各个项目可以按任意次序排列，项目之间相互独立。列表的各个项目前使用特定的符号做标记。间相互独立。列表的各个项目前使用特定的符号做标记。如下图：如下图：无序列表必须由标记开始，标记结束。所有的列表项都在标记中。列表中的项目由标记定义，项目的条数由的个数确定。列表项目1列表项目2列表项目3下图是源代码：n有序列表有序列表有序列表是将列表的中的各项进行编号，各个项有序列表是将列表的中的各项进行编号，各个项目之间有一定的逻辑次序。目之间有一定的逻辑次序。有序列表由标记开始，标记结束。所有的列表项都在标记中。列表中的项目由标记定义，项目的条数由的个数确定。列表项目1列表项目2列表项目3源代码如下图：4.使用超链接.链接接到站点中的其他网页链接接到站点中的其他网页网页在浏览器中打开后，网页中的超文本链接通常显示为蓝颜色，带下划线的文本。下图是一个超链接的示例网页。超链接代码，设置格式为：描述文字n链接到互联网中的某一资源链接到互联网中的某一资源超链接不仅可以链接到指定的站点内的资源，也可以链接到互联网中的任何站点。4.网页中添加图像网页中添加图像1 在网页中添加图像在网页中添加图像2 使用图像做项目符号使用图像做项目符号3 图片超链接图片超链接 返回章目录返回章目录1 在网页中添加图像在网页中添加图像n图像的格式图像的格式n网页中加入图片会使页面更加美观、生动、有吸引力。网页中可以添加的图片文件类型是扩展名为jpg、gif和png的图片文件。n图像的位置图像的位置n网页中插入的图片即可以是站点中的图片文件，也可以是互联网中任何网站中的图片文件。n添加图像的标记添加图像的标记标记可以实现在网页中加入图片。使用标记加入图片时必须指定标记的src属性值来确定图像文件的位置。在网页“显示代码视图”中的代码如下图：插入图像的宽度像素值 插入图像的高度像素值 n固定网页背景图片固定网页背景图片在标记中的属性bgproperties=fixed的设置，可以使网页内容长度超过一屏时，在网页内容滚动时背景图片静止不动。2 使用图像做项目符号使用图像做项目符号n在网页中常常看到列表项的标记不是黑的实心圆点，也不是黑色方块或者空心圆圈。而是彩色的漂亮图片或具有动态效果的动画。如下图：其实很简单，在每一行的文本前都插入一个图片文件即可。不用再设置列表标记。在网页“显示代码视图”中的代码如下图：添加的部分3 图片超链接图片超链接n很多网页中的图片不仅仅是一张图片，当鼠标指针在图片上方悬停时会变成手型，点击图片后会打开其他的网页或资源。实现这样效果的图片就是给插入的图片添加超链接。图2.22图2.23设置图片超链接的源代码为：图片所设置的超链接插入的图片文件5.表格的基本语法表格的基本语法一个表格的所有内容都在标记中。一个标记中，表格的行数由标记的个数确定，表格的列数由在一个标记中包含的标记的个数确定。单元格的内容由标记定义。标记定义表格开始标记定义表格第一行 标记定义该行第一个单元格的内容 标记定义该行第二个单元格的内容 标记定义该行第三个单元格的内容标记结束表格第一行标记定义表格下一行 标记定义该行第一个单元格的内容 标记定义该行第二个单元格的内容 标记定义该行第三个单元格的内容标记结束表格下一行标记结束表格定义n表格的嵌套就是在某一单元格内标记中，添加表格标记。效果如图所示：n设置表格头:通常是黑体居中文字当在属性面板中选中了“标题”后面的复选框，当前单元格的标记将转变为标记（表头标记）。显示效果为单元格的内容居中对齐，并显示为黑体加粗。效果如图：6.滚动标签n选中文字，在Dreamweaver8中选择【插入】|【标签】命令，然后选择marquee标签就可以了。例如：csscss.htm文件nbehavior属性:指定文本的滚动方式，分为三种:Scroll:从一端消失后，在另一端出现并继续滚动。例如(用插入标签的方式）：一圈一圈地滚动Slide:从一端滚动，接触到另一端后停止。例如：只滚动一次就停止Alternate:从一端滚动到另一端后，反向滚动。例如：来回滚动nBGCOLOR属性：用于设定字幕的背景颜色。背景颜色可用RGB、16进制值的格式或颜色名称来设定。例(用插入标签的方式）：用颜色名称设定滚动文字背景颜色为红色用16进制值设定滚动文字背景颜色为红色用RGB设定滚动文字背景颜色为红色nDIRECTION属性：用于设定文本滚动的方向，可以设定的值有：left，down.up.right。此属性不是必须使用的。例：文字向左边滚动文字向右边滚动文字向上滚动nHEIGHT属性：用于设定滚动字幕的高度，高度可用像素或可视页面的百分比来表示。此属性不是必须使用的。例：滚动字幕的高度是可视页面的10%滚动字幕的高度是12像素nWIDTH属性：用于设定字幕的宽度，宽度可用像素或可视页面的百分比来表示。此属性不是必须使用的。例：滚动字幕的宽度是可视页面的90%滚动字幕的宽度是200像素nLOOP属性：用于设定滚动字幕的滚动次数。当LOOP的值为INFINITE或是-1时，则文字会无限制地滚动。此属性不是必须使用的。例：文字滚动无数次文字滚动5次7.VBScript代码块标签n例如加入当前时间代码：综合举例：n选择“查看”|“源文件”命令：n复制：