1、第 1 页 共 17 页 HTML 标记目录1 HTML 基本结构 12 列表控制标记 .43 表格 .64 图像 .95 超链接 .106 表单 .127 框架 .138 多媒体 .159 其他标记 .161 HTML 基本结构1 HTML 的基本结构-根控制标记-头控制标记标题 -标题标记-头控制标记（尾）-网页显示区域-根控制标记(尾)(1).根控制标记开头和结尾成对出现，双标签(2).头控制标记1.很单纯的文件标题声明2.控制标记的动态文件转换声明3.超链接网址基准参考点4.Javascript 和 VBScript 程序5.stylesheet 可用来设置排版来的声明6.可引用外部文
2、件，如 CSS 排版样本第 2 页 共 17 页 HTML 标记(3).设置浏览器的视窗标题(4).页面可见内容2 HTML 控制标记的格式(1).单一型,无设置值的。如：(2).单一型，有设置值的。如：(3).对称型，无设置值。如：(4).对称型，有设置值。如：3 最常用的控制标记(1).跳行 格式：无属性设置(2).段落 格式：属性名称 属性值 说明align left 往左靠（默认）center 往中靠right 往右靠(3).水平直线 格式：属性名称 属性值 说明size 像素 绝对设置，以数字表示，属性值越大，线越粗百分比 相对设置，以%表示，属性值越大，线越粗width 像素 绝对
3、设置，长度不会应视窗的改变而改变百分比 相对设置，长度会随着视窗宽度而改变noshade 实体线(4).向中对齐 (被废弃的标签)格式：第 3 页 共 17 页 HTML 标记(5).背景色与文字设置格式：整体页面的边距，行距 (6).标题文字设置格式：属性名称 属性值 说明align left 靠左center 靠中right 靠右(7).特殊字符设置格式： gt;“ quot;(8).在 HTML 备注格式：(9).实体字符控制标记1. 粗2. 斜3. 删4. 下划5. 电报6. 下标7. 上标(10).语意字符控制1. 地址2. 大字3. 删除4 修改5. 小字6. 加强语气(加粗)7
4、加强语气(倾斜)(11).字体控制 (被废弃的标签)第 4 页 共 17 页 HTML 标记格式：属性名称 属性值 说明size 0-7 字体大小color 英文或十六 颜色face 字体 字体(12).格式化格式：让书写的文字格式化！(13).引用文本格式：.属性名称 属性值 说明cite url 被引用的地址2 列表控制标记1 无序号条例式清单与格式: 功能: 无序条列清单的开始.表示结束 .表示一个项目.的属性属性名称 属性值 说明type dise 实心圆(默认值)circle 空心圆square 实心方块2 有序号条例式清单与格式:功能: 有序条列清单的开始.表示结束 .第 5 页
5、共 17 页 HTML 标记表示一个项目.的属性属性名称 属性值 说明type 1 表示以 1,2,3,4 来表示a 表示以 a,b,c,d 来表示A 表示以 A,B,C,D 来表示i 表示以 i,ii ,iii 来表示I 表示以 I,II,III 来表示3 无序列表和有序列表的结合应用格式:.4 叙述式清单(定义列表)格式:功能: 叙述清单的开始表示一个项目表示一个项目下的更详细的内容第 6 页 共 17 页 HTML 标记3 表格在网页中表格是一种经常使用到得设计结构，就像表格的内容中可以包含任何的数据，如文字、图像、表单、超链接、表格等等，所有在 HTML 中可以使用的数据，都可以被设置
6、在表格中，所以有关表格设置的标记与属性页特别多。1 表格的基本格式格式: 功能: 用来声明表格开始与结束.用来设置表格的行.用来设置标题栏位.用来设置数据栏位.2 标签下的属性属性名称 属性值 说明border 像素 设置表格的边线cellspacing 像素 绝对设置,存储格框线宽度百分比 相对设置,存储格框线宽度cellpadding 像素 绝对设置,数据与框线的距离百分比 相对设置,数据与框线的距离width 像素 绝对设置,像素表示表格宽度百分比 相对设置,百分比表表格宽度height 像素 绝对设置,像素表示表格宽度百分比 绝对设置,百分比表表格宽度align left 表格往左靠(
7、默认)center 表格往中靠right 表格网右靠bgcolor 英文/十六 表格的背景颜色background URL 表格的背景图片summary 字符串 用来描述表格数据说明第 7 页 共 17 页 HTML 标记bordercolor 英文/十六 边框的颜色bordercolorlight 同上 边框的亮色bordercolordark 同上 边框的暗色3 标签下的边框设置属性名称 属性值 说明frame void 不要显现表格的边线above 只要显现出表格的上边线below 只显现出表格的下边线hsides 只显示表格的上下边线vsides 只显现表格的左右边线lhs 只显现表格
8、的左边线rhs 只显现表格的右边线border/box 会显现出表格的所有边线rules rows 只显示出横行的格框线cols 只显示出直行的格框线all 显示全部格框线groups 表示列组合水平部分none 不显示任何格框线4 标签下的常用属性属性名称 属性值 说明width 像素 绝对设置,以像素值设置宽百分比 相对设置,以百分比设置宽height 像素 绝对设置,以像素值设置高百分比 相对设置,以百分比设置宽bgcolor 英文/十六 数据栏的颜色设置align(水平方向) left 数据靠左center 数据靠中right 数据靠右valign(垂直方向) top 数据靠上midd
9、le 数据靠中bottom 数据靠下nowrap 无 在单元格中换行5 拆分与合并单元格属性名称 属性值 说明colspan 数字 向两边扩展栏位rowspan 数字 向下扩展栏位该属性必须在 border的属性值不为 0 的状态下!第 8 页 共 17 页 HTML 标记6 表格的结构化、直列化、标题(1).结构化格式： -表头区 -表体区 -表尾区(2).直列化格式：.属性名称 属性值 说明align left 靠左center 靠中right 靠右valign top 靠上middle 靠中bottom 靠下span 数字 直列数目width 像素/百分比 宽度个别直列设置格式:功能完全
10、和一样.第 2 章 .表格的标题：.下的属性值有:属性名称 属性值 说明align top 标题在表格上方bottom 标题在表格下方第 9 页 共 17 页 HTML 标记7 嵌套表格的应用: 看实例 .4 图像1 背景图案的设置格式：2 将图片插入到网页中去格式:功能:将图片插入到网页中去,单一标签下的属性属性名称 属性值 说明src URL 图片的路径图片的注解属性名称 属性值 说明alt 字符串 给图片做注解图象大小的设置属性名称 属性值 说明width 像素 绝对设置,宽百分比 相对设置,宽height 像素 绝对设置,高百分比 相对设置,高图象边框的设置属性名称 属性值 说明bor
11、der 数字 图象边框第 10 页 共 17 页 HTML 标记文字图象的排列属性名称 属性值 说明align left 图象靠左,文字靠右right 图片靠右,文字靠左top 文字往上靠middle 文字靠中bottom 文字靠下空隙的设置属性名称 属性值 说明vspace 像素 垂直上下两端与物件的距离hspace 像素 水平左右两段与物件的距离3 用图像作为超链接格式:注意点:边框的问题.4 地图索引格式:声明整张图使用地图链接方式进行连接.name,id指此图的名称.表示我们所要链接其中一点的区快shape表示我们所选择的形状,如:rect矩形 circle圆 poly多边形coord
12、s 表示地图的坐标位置!5 切片索引使用Firework来进行!用表格进行定位!6 为网站添加图标5 超链接超链接也叫 URL 中文翻译为资源定址器.这个定址器的功能主要告诉浏览器根据 URL 的地址找到所需的资源。1 超链接的基本格式第 11 页 共 17 页 HTML 标记格式:scheme:/host:post/path/filenamescheme 指的是 http,ftp,file,mailto,news,gopher,telnet 七种host 指的是 IP 地址或计算机名称post 指的是服务器端口path 指的是文件路径filename 指的是文件名2 超链接的种类一般常用的分
13、为四种:1. http声明 网易 logo2. file声明 图片3. ftp声明 进入4. mailto E-MAIL3 相对链接和绝对链接1. index.htm2. page/index.htm3. page/top/index.htm4. /index.htm5. /index.htm6. /page/index.htm4 书签的链接下的属性属性名称 属性值 说明 name 字符串 设置超链接的标记基本格式：瞄点链接点链接到别的网页的书签项目：第 12 页 共 17 页 HTML 标记基本格式：瞄点链接点5 超链接事件LINK 颜色的设置基本格式：link 超链接尚被选中的文字alin
14、k 超链接点选但未被放开的颜色vlink 超链接已被点选过的颜色6 表单表单是提供让读者在网页上输入，勾选和选取数据，以便提交给服务器数据库的工具。1 表单的功能结构：主标记结构：属性 值 说明name 字符串 给这个表单起个名字method get/post 表单的传输方式action url 传输目标2 文本栏、密码栏、隐藏栏文本栏：密码栏：隐藏性栏位：3 复选栏、单选栏多重勾选栏位：单选栏位:4 窗体栏位、区块栏位第 13 页 共 17 页 HTML 标记窗体选项栏位设置:/分组/多选 multiple文字区块的设置:5 按钮、图像按钮按钮设置: 按钮图像:图像按钮:6 允许上传文件上传
15、栏位:7 表单加上外框和标题外 边 框:. 标 题:.7 框架浏览器视窗本身就是一个框架，网页就是显示在该单一的框架内，本章将介绍另一种网页呈现的方式，那就是可将原先单一的框架分割成多个框架，且每个框架中可以分别显示出指定的网页，当然这种框架仍然是结构于单一的视窗中。1 多窗框的基本结构格式：第 14 页 共 17 页 HTML 标记功能说明:用来设置多窗框结构的声明下的属性：属性名称 属性值 说明cols 像素 设置直排的多窗框环境百分比 同上rows 像素 设置横排的多窗框环境百分比 同上border 像素 边框的宽度framespacing 像素 页面与页面的边距属性格式：下的属性：属性
16、名称 属性值 说明src URL 链接的页面noresize true 允许浏览器自行改变框架大小false 不允许scrolling yes 不管网页内容的大小，都出现滚动条no 不管网页内容的大小，都不现滚动条auto 浏览器自动判断，是否需要滚动条marginheight 像素 设置垂直方向，窗体内容与边界的距离marginwidth 像素 设置水平方向，窗体内容与边界的距离frameborder 01 不出现框体边/出现窗体边线属性格式：2 嵌套多窗体设置：格式：第 15 页 共 17 页 HTML 标记3 多框架与超链接框架式网站的好处就是在同一张页面可以显示多个页面，而且可以跟方便
17、的进行链接。相关属性说明：的命名属性：格式：超链接 多窗体链接的属性：属性名称 属性值 说明target _blank 打开一个新建的页面4 悬浮窗体的设置格式:功能:设置悬浮窗框属性名称 属性值 说明height 像素/% 绝对/相对 高度width 像素/% 绝对/相对 宽度其余属性除了 noresize 外,其他都和 frameset 一样.8 多媒体使用 Web 如此流行的原因之一是可以再网页上加入图像、声音、动画和电影文件。虽然过去对这些文件大小的限制局限了它们的作用，但是新技术（比如流技术及宽带）已经使多媒体网页成为了可能。1 FLASH 动画的插入使用.标记插入 FLASH 动画
18、属性 值 说明 src url flash 路径width 像素/百分比 flash 宽度height 像素/百分比 flash 高度wmode window 使 flash 自身的矩形窗口来播放opaque 使 flash 隐藏页面上位于它后面transparent 使 flash 某一部分透明使用.标记插入 flash 动画第 16 页 共 17 页 HTML 标记属性 值 说明type application/x-shockwave-flash flash 类型data url flash 路径width 像素/百分比 flash 宽度height 像素/百分比 flash 高度注意：必
19、须再使用子标签完成 flash 插入属性 值 说明name 属性 flash 属性value 值 flash 值3 MP3 音频及 WMV 视频的插入使用.标记插入 FLASH 动画属性 值 说明 autostart true/false 自动/非自动播放loop 数字 音乐循环的次数它的前身是使用.标记插入 MP3 音乐属性 值 说明 name src(路径 ) 音乐路径autoplay(true/false) 是否自动播放9 其他标记1 自动展示网页内容：格式：1. meta 文件头声明2. http-equiv=”refresh” 表示网页要重新下载显示3. content=”time;
20、URL” time 表示秒数，URL 网页显示内容例：2 如何让别人找到你的网页：下的属性：属性名称 属性值 说明name author 描述作者资料description 描述网页的内容keywords 关键字，多个可用逗号隔开generator 描述网页是通过那种软件产生revised 描述网页的版本others 可设置其他网页信息content 字符串 配合 name,http-equive 设置第 17 页 共 17 页 HTML 标记例：3 活动文字：属性名称 属性值 说明behavior scroll 从右到左移动slide 从右到左停止alternate 两边移动direction left 向左移动right 向右移动up 向上移动down 向下移动bgcolor 英文/十六 背景颜色height 像素/百分比 高度width 像素/百分比 宽度scrollamount 数字 播放的速度vspace 像素 左右两侧间距hspace 像素 上下两侧间距4 在网页中加入脚本程序：举例：1.alert(“欢迎使用 JavaScript 脚本“);2.var ans=prompt(“请输入你的性别“);if (ans) alert(“您的性别为：“+ans); else alert(“您没有输入你的性别!“);
