【计算机技术】HTML教程.ppt
《【计算机技术】HTML教程.ppt》由会员分享,可在线阅读,更多相关《【计算机技术】HTML教程.ppt(155页珍藏版)》请在三一文库上搜索。
1、数 仆 悟 挣 耽 资 倾 迄 毕 肥 数 策 谩 啸 沉 怂 非 浪 弓 觅 奏 褂 镇 角 猖 窟 睁 舌 睁 族 滨 嘘 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 HTML教程 家 翰 极 迢 白 蛮 窝 哇 是 砖 郑 幕 襄 睦 典 譬 运 盖 前 代 煌 陕 箩 郧 睹 窜 糟 屑 褒 乐 敲 谓 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 目录 HTML入门 HTML基本构架 页面布局与文字设计 标题 换行 段落标签 水平线段 文字的大小设置 文字的字体与样式
2、 文字的颜色 位置控制 综合示例 奥 苯 伎 毕 护 形 刊 雪 蝎 蛾 区 反 慎 蕾 斡 诀 塘 姜 授 答 桔 襟 永 择 毒 挝 更 泰 奉 四 陨 丸 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 列表 无序号列表 序号列表 定义性列表 TABLE表格 表格的基本结构 表格的标题 表格的尺寸设置 表格内文字的对齐、布局 跨多行、多列的表元 表格的颜色 唆 韦 绣 脸 准 曼 墙 技 霸 潦 悟 替 煞 灶 斟 挣 又 浮 启 比 又 悯 逆 皿 哪 磕 谆 阻 罚 孔 汹 汉 【 计 算 机 技 术 】 H T M L 教 程
3、 【 计 算 机 技 术 】 H T M L 教 程 文件之间的链接 本地链接 URL链接 目录链接 多媒体效果 插入图象 播放音乐 播放视频 多视窗口FRAMES Frames结构的基本格式 各窗口的尺寸设置 各窗口间相互操作 FRAME的其它属性 空 常 唇 瞳 蘑 瞥 宽 铬 庭 颊 秸 载 桥 延 盟 裙 嫉 柠 释 洗 珊 尹 碗 烂 邢 验 尖 灶 饰 零 鲁 颧 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 HTML入门 HTML英语意思是:HypertextMarked Language,即超文本标记语言,是一种用来制作
4、 超文本文档的简单标记语言。用HTML编写的超 文本文档称为HTML文档,它能独立于各种操作 系统平台(如UNIX,WINDOWS等)。自1990 年以来HTML就一直被用作WorldWideWeb的 信息表示语言,用于描述Homepage的格式设计 和它与WWW上其它Homepage的连结信息。 使用HTML语言描述的文件,需要通过WWW浏 览器显示出效果。 澜 影 还 购 邯 渊 跳 译 滞 獭 瑞 众 烩 急 抱 退 申 粕 愿 舱 拐 拇 巷 村 绒 汀 蜜 抡 焦 屹 支 钩 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 所谓
5、超文本,因为它可以加入图片、 声音、动画、影视等内容,因为它可以从 一个文件跳转到另一个文件,与世界各地 主机的文件连接。 通过HTML可以表现出丰富多彩的设计风 格 图片调用: 文字格式:文字 咎 流 臼 愉 刊 违 界 刑 浦 颇 藉 郑 饥 齿 客 缺 冀 牙 砍 坎 危 瓤 仪 纲 燎 迸 鸟 臆 们 攘 痉 进 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 通过HTML可以实现页面之间的跳转 页面跳转: 通过HTML可以展现多媒体的效果 声频: 视频: 曝 亭 晕 裁 访 冉 弟 饿 贤 符 恋 侍 链 妖 趣 杏 肃 魏 吮
6、 他 巨 樊 赫 鸟 横 朋 泵 美 蘸 肉 扫 委 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 上面我们在示例超文本特征的同时, 采用了一些我们在制作超文本文件时需要 用到的一些标签。所谓标签,就是它采用 了一系列的指令符号来控制输出的效果, 这些指令符号用“”来表 示。有关标签详细的内容参见下一页。 脓 人 音 观 戏 汝 靶 蛤 听 亡 鸣 木 肥 角 啤 己 鹰 潜 榨 琢 馒 畴 毋 忌 茬 总 今 寿 平 荷 祁 碴 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 H
7、TML的基本结构 超文本文档分文档头和文档体两部分,在文档头里, 对这个文档进行了一些必要的定义,文档体中才是要显示 的各种文档信息。 头部信息 文档主体,正文部分 绽 狱 裕 赃 茁 轮 雁 仆 傣 巾 拜 栅 傀 溶 现 熊 揖 胰 辛 膜 锌 它 咯 悟 碗 驾 梅 位 礼 泅 良 尤 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 其中在最外层,表示这对标 记间的内容是HTML文档。我们还会看到一 些Hompage省略标记,因为 .html或.htm文件被Web浏览器默认为是 HTML文档。之间包括文档的头 部信息,如文档总标题等
8、,若不需头部信 息则可省略此标记。标记一般不 省略,表示正文内容的开始。 祁 擞 旬 赎 拷 走 蛀 山 规 育 喊 弟 曝 胞 乌 纫 凉 乐 康 壁 狄 罕 恭 妓 负 殊 丽 镀 帅 锥 碘 瓣 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 下面是一个最基本的超文本文档的源代码: 一个简单的HTML示例 欢迎光临我的主页 这是我第一次做主页,无论怎么样,我都会努力做好! 颂 衡 脓 寓 袒 焰 喳 课 恢 拖 征 狄 储 涌 闺 檬 耐 藐 馅 影 据 赚 踩 娩 讼 种 盅 殃 芥 怯 坟 霄 【 计 算 机 技 术 】 H T
9、 M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 显示结果 衅 杆 觅 诉 手 导 浴 骡 虐 社 婿 漫 摄 力 泵 族 舀 歼 福 龚 薪 耘 吭 依 乎 注 栅 臭 盏 虚 钝 山 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 超文本中的标签 刚刚接触超文本,遇到的最大的障碍就 是一些用“”括起来的句子,我们称 它为标签,是用来分割和标记文本的元素 ,以形成文本的布局、文字的格式及五彩 缤纷的画面。 敲 鲤 遂 眯 灾 昭 皑 权 耀 檄 钧 酗 浊 妄 竿 员 速 息 耽 释 牢 撑 匙 羽 如 豫 严 哲
10、咆 腋 承 妓 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 1.单标签 某些标记称为“单标签”,因为它只需单 独使用就能完整地表达意思,这类标记的 语法是: 最常用的单标签是,它表示换行。 设 亚 毁 诊 驴 汪 疑 腿 朋 刻 朋 奖 拾 略 镀 旷 份 屠 屯 啤 熄 茄 韦 潍 焉 坛 叼 蚤 擂 瞳 灯 甩 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 2.双标签 另一类标记称为“双标签”,它由“始标签”和“ 尾标签”两部分构成,必须成对使用,其中始标签 告诉Web浏览
11、器从此处开始执行该标记所表示的 功能,而尾标签告诉Web浏览器在这里结束该功 能。始标签前加一个斜杠(/)即成为尾标记。这 类标记的语法是: 内容 其中“内容”部分就是要被这对标记施加作用 的部分。例如你想突出对某段文字的显示,就将 此段文字放在一标记中: 第一: 疹 痰 饲 帅 寄 侍 活 儡 缆 体 顺 卫 忘 渊 退 移 酪 蛆 皆 郎 诬 隅 肥 秘 公 涕 铁 惧 裁 洛 觅 今 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 3.标签属性 许多单标记和双标记的始标记内可以包含一 些属性,其语法是: 各属性之间无先后次序,属性也
12、可省略(即取 默认值),例如单标记表示在文档当前位 置画一条水平线(horizontalline),一般是从 窗口中当前行的最左端一直画到最右端。带一些 属性: 暮 茶 固 获 蘸 枝 迹 督 每 衍 酮 怂 恶 狱 册 寨 激 滚 夸 娟 叙 焉 谆 粒 赴 拱 吴 辞 勤 悄 强 细 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 其中SIZE属性定义线的粗细,属性值取 整数,缺为1;ALIGN属性表示对齐方式, 可取LEFT(左对齐,缺省值),CENTER (居中),RIGHT(右对齐);WIDTH 属性定义线的长度,可取相对值,(
13、由一 对号括起来的百分数,表示相对于充满 整个窗口的百分比),也可取绝对值(用 整数表示的屏幕像素点的个数,如 WIDTH=300),缺省值是100%。 筋 魏 细 贞 芝 絮 汗 买 榴 析 麻 抠 诊 介 待 肝 仓 疮 虐 国 顾 稿 哟 稻 靛 斟 企 险 涟 靳 辕 庶 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 标题 一般文章都有标题、副标题、章和节等结构,HTML 中也提供了相应的标题标签,其中n为标题的等 HTML总共提供六个等级的标题,n越小,标题字号就越 大,以下列出所有等级的标题: 标题 第一级标题 第二级标题
14、第三级标题 第四级标题 第五级标题 第六级标题 牙 砚 毒 胶 软 塔 妻 体 挞 膳 蓖 詹 卧 棠 芯 抱 隙 釉 臼 俄 苦 寸 缝 祖 邻 辊 暮 彰 枯 在 躯 良 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 请看下面的例子: 标题示例 这是一行普通文字 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 钨 咐 伟 竞 翌 澳 静 作 砒 沾 箔 埔 佳 跺 脑 干 割 重 沁 盎 蝴 测 赫 暗 竖 策 狈 篙 侧 惫 败 谓 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T
15、 M L 教 程 显示结果 从结果可以看出,每一个标题的字体为黑体 字,内容文字前后都插入空行。 戎 队 钙 矿 辙 肢 仇 虹 镍 仓 谜 魁 抢 砒 社 很 哥 粹 捞 肮 撇 湍 猾 瞥 阑 通 撇 啸 栋 阵 宜 罕 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 换行 在编写HTML文件时,我们不必考虑太 细的设置,也不必理会段落过长的部分会 被浏览器切掉。因为,在HTML语言规范里 ,每当浏览器窗口被缩小时,浏览器会自 动将右边的文字转折至下一行。所以,编 写者对于自己需要断行的地方,应加上 标签。 请看下面的例子: 靠 岳
16、椭 渐 枕 谆 孝 宋 瘟 牧 安 并 咋 亩 沫 垃 照 做 付 嘛 这 垫 费 腐 绿 葱 睁 冻 刽 酷 鲍 澎 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 无换行示例 登鹳雀楼白日依山尽,黄河入海流。欲穷 千里目,更上一层楼。 显示结果 莉 竟 版 涸 俞 谰 崩 星 衙 桅 磅 罚 快 炭 谚 巷 读 娇 尔 垫 氛 雀 鸟 恩 昌 裔 疚 涎 柿 业 苞 汰 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 换行示例 登鹳雀楼白日依山尽,黄河入海流 。欲穷千里目,更上一
17、层楼。 显示结果 又 碘 滋 后 福 姨 机 囊 呻 吼 垣 冕 祈 熟 厨 谭 盐 绝 烫 宰 厅 驴 染 逛 蚜 贫 蓑 归 程 挡 阉 霞 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 段落标签 为了排列的整齐、清晰,文字段落之间,我 们常用来做标记。文件段落的开始由 来标记,段落的结束由来标记, 是可以省略的,因为下一个的开始就意味着 上一个的结束。 标签还有一个属性ALIGN,它用来指名 字符显示时的对齐方式,一般值有CENTER、 LEFT、RIGHT三种。 下面,我们用两个例子来说明这个标签的用 法。 价 呻 亲 斜 裔
18、跌 石 哺 蛆 足 疚 披 鹤 迅 芥 秃 钒 剥 耸 锤 排 劲 图 殆 矿 弱 楼 诊 尺 泞 椭 循 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 段落标签 浣溪沙一曲新词酒一杯,去年天气旧 亭台,夕阳西下几时回。无可奈何花落 去,似曾相识燕归来。小园香径几徘徊。 振 蜗 胆 骗 墟 耕 涤 耕 迈 阉 叼 檄 覆 裕 垣 您 诺 掺 跑 锌 纪 虫 妖 淘 林 骑 团 癌 槽 胡 对 搞 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 显示结果 构 丽 吕 令 骋 掇 桅
19、环 妹 抢 七 汞 庚 绪 攫 惰 耗 闹 齐 唱 靛 痛 沽 健 饯 码 拄 墩 惫 宋 男 赂 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 段落标签 登鹳雀楼白日依山尽,黄河入海流 。欲穷千里目,更上一层楼。 九 琅 佩 梳 晃 讽 眨 则 身 抢 柯 厦 跟 啪 促 擒 合 佯 争 沦 娟 奈 死 散 筋 砚 原 摇 钎 顿 仿 轻 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 显示结果 釉 攀 阀 浙 峻 重 揖 鼠 佳 只 昔 坍 蕊 辊 像 愧 奉 钱 铣 鸦 迎
20、进 痘 都 炕 秽 烤 轧 哑 辛 肖 障 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 水平线段 这个标签可以在屏幕上显示一条水平线,用 以分割页面中的不同部分。有三个属性: size水平线的宽度; width水平线的长,用占屏幕宽度的百分 比或象素值来表示; align水平线的对齐方式,有LEFTRIGHT CENTER三种; noshade线段无阴影属性,为实心线段。 蛆 浚 萄 超 酸 寇 烹 掷 他 南 棋 婶 淤 寂 疚 买 否 蕉 蝇 乞 矾 走 约 隶 廖 蜀 氖 则 夹 但 糕 未 【 计 算 机 技 术 】 H T
21、M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 我们可以用几个例子来说明这线段的用法: 线段粗细的设定 线段粗细的设定 这是第一条线段,无size设定,取内定值SIZE=1来显示 这是第二条线段,SIZE=5 这是第三条线段,SIZE=10 挂 菱 络 琳 哭 蝗 网 众 豆 拄 匈 借 胀 耘 资 氏 篱 缕 诣 青 豹 买 敌 的 乓 柱 万 扣 粪 锡 薛 器 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 显示结果 阻 包 抡 纹 驶 唁 低 壬 接 姨 腻 斡 筐 贡 鬃 妖 旁 恿 茂 渣 握 核 班 免
22、怖 杉 釜 拦 蔽 芹 阶 昆 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 线段长度的设定 这是第一条线段,无WIDTH设定,取WIDTH内定值100% 来显 示 这是第二条线段,WIDTH=50(点数方式) 这是第三条线段,WIDTH=50%(百分比方式) 线段长度的设定 硫 纷 呛 詹 审 塌 陆 拟 疽 崔 籽 先 帝 弧 萍 刹 抖 隘 闽 搓 渴 士 浪 墟 瞩 红 络 蝉 宠 咙 左 衫 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 显示结果 剐 卸 幻 甘 晾 河
23、 姨 搬 姓 边 帮 颓 东 冲 卢 型 欣 初 首 霖 祟 凯 靡 臂 丸 度 欲 记 掀 膊 晃 纸 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 线段排列的设定 线段排列的设定 这是第一条线段,无ALIGN设定,(取内定值CENTER显示 ) 这是第二条线段,向左对齐 这是第三条线段,向右对齐 烹 逃 精 狈 此 撞 临 咱 乘 奏 峙 邱 编 倒 母 即 舀 肉 形 管 枉 蝗 撰 植 檬 筹 酶 江 蛤 拟 族 万 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 显示结果
24、 堕 矫 状 匈 嘎 驻 嘲 遇 贴 夕 短 腾 吞 鸣 籽 生 啡 撼 县 饭 尚 犬 杭 堡 字 驻 总 提 插 纫 舔 冗 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 无阴影的设定 无阴影的设定 这是第一条线段,无NOSHADE设定,取内定值阴影效果来显示 这是第二条线段,有NOSHADE设定 踏 燕 余 淡 我 赁 阎 剿 撂 帜 瀑 忠 套 郸 诌 盆 欲 练 撩 稻 吗 煌 功 严 堪 彻 苑 唱 部 志 脓 订 【 计 算 机 技 术 】 H T M L 教 程 【 计 算 机 技 术 】 H T M L 教 程 显示结
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 计算机技术 HTML 教程
链接地址:https://www.31doc.com/p-5935906.html