WEB基础(HTML基本标签).ppt

第一章 HTML基本标签 预习检查 请详述HTML文档的基本结构 标题标签有哪几种类型 到哪些标签可以控制文字样式 本章目标 了解Internet的相关介绍了解HTML技术掌握网页背景设置掌握字体和段落标签的应用掌握如何在网页中插入图片掌握超级链接的使用掌握列表标签制作滚动效果 Internet相关技术介绍 TCP IP协议TCP IP协议是Internet国际互联网络的基础 HTTP协议 用于浏览网页FTP协议 用于Internet文件共享IP地址和域名简介IP地址 标识网络中每台主机的唯一地址 域名 用于标识IP地址的有意义的词组 URL UniformResourceLocator 统一资源定位符 用于精确定位网络中的各种资源 如网页 图片 音乐 视频等 Internet相关技术介绍 Web浏览器将网页文件翻译成丰富多彩的网页 常用的浏览器 IEFireFoxOpera绝对路径和相对路径绝对路径 文件或目录在硬盘上的真正路径 C xyz test txt 代表当前目录 代表上级目录 HTML语言 什么是HTML HTML是用来描述网页的一种语言 HTML指的是超文本标记语言 HyperTextMarkupLanguage HTML不是一种编程语言 而是一种标记语言 markuplanguage 标记语言是一套标记标签 markuptag HTML使用标记标签来描述网页HTML标签HTML标记标签通常被称为HTML标签 HTMLtag HTML标签是由尖括号包围的关键词 比如HTML标签通常是成对出现的 比如和标签对中的第一个标签是开始标签 第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签 HTML网页的结构 HTML网页的结构 欢迎来到HTML您好 SEC HTML网页 头部部分 主体部分 标签标记HTML文档的开始和结束 网页标题 网页内容 可以是文本 图像等 这部分包含文本 图像和链接 它包括在 标签内 这部分包括标题和其他说明信息 包括在 标签内 使用记事本创建网页 演示示例 使用记事本创建网页的步骤 1 打开记事本2 输入HTML代码3 保存为 html或 htm文件 注意格式问题4 打开网页预览效果 使用记事本创建网页 设置网页背景色或背景图像 HelloWorld 为了使页面美丽大方 网页背景要尽量地浅 HelloWorld 网页背景色彩 网页背景图像 设置背景声音 主体背景音乐设置 声音文件 播放次数 添加多媒体资源 多媒体资源设置下面是视频文件的播放界面下面是音频文件的播放界面下面是Flash动画文件的播放界面 字体和段落标签 字体 字号标题标签 标签特殊符号行的控制段落标签换行标签 使用了 换段了 设置了字体的大小和颜色 换行了 特殊符号 字体和段落标签 标签特殊符号 字体的大小值 字体的颜色 字体的类型 字体和段落标签 手机充值 IP卡 电话卡移动Allrights 空格效果 淘宝集市欢迎您 淘宝网首届翠友会 字体和段落标签 段落标签段 Paragraph 可以看作是空行 换行标签换行 换段了 换行了 斜体斜体粗体粗体下划线aaabbbccccdddffff 字体样式 标题标签和水平线 标题标签 1 2 3 4 5 6说明 到字体大小依次递减 一级标题二级标题三级标题四级标题五级标题六级标题 H1到H6标签用于指定不同级别的标题 标题标签和水平线 水平线 春晓春眠不觉晓 处处闻啼鸟 夜来风雨声 花落知多少 练习 利用所学知识 制作一份简易的个人简历 要求 恰当的使用本节课所学到的基本标签 内容包括 姓名 年龄 爱好 地址 学习经历和工作经历 图像标签 图像的基本语法 查看源代码 图像的路径 图像的宽度 图像的高度 为图像添加的提示性文字 图像的边框 鼠标移到图像上 出现的提示性文字 图像标签 图像与文本的对齐方式 图像与文本居中对齐 还可以取top bottom值 图像中部和同一行文本的基线对齐 查看源代码 图像和文本居中对齐 小结1 练习答案 练习代码 编写如下图所示效果对应的html代码 超级链接 链接到其他页面 免费注册 链接内容 链接的地址 链接到其他页面 免费注册 登录 单击 免费注册 之后链接到的页面 查看源代码 超级链接 链接到其他页面绝对路径指定从根目录到文件的完整路径 相对路径指定相对于当前文件的文件位置 在同一个文件夹下有两个html文件 从一个文件超链接到另一个文件的路径有几种方式 两种方式 相对路径和绝对路径 超级链接 要链接到同一目录 C HTML 下的页面 可编写或 相对路径名 绝对路径名 超级链接 要实现如下图所示的超链接效果 怎么办 演示示例3 演示锚链接的例子 使用锚记标签 超级链接 链接到本页面锚记标签用于使用户 跳 到文档的某个部分HTML的NAME属性用于创建锚标记主题名称为达到这种跳转效果 请在HREF参数中使用该标记主题名称 演示示例4 演示锚链接的例子 链接到其他页面底部 这是底部 1 定义锚标记 2 链接到锚标记所在位置 超级链接 电子邮件链接要链接电子邮件 可在链接标签中插入 mailto 邮箱地址 站长信箱 演示示例5 演示电子邮件链接 电子邮件链接 站长信箱 单击 站长信箱 链接后的输出结果 任何正确的电子邮箱地址均可 网页前台技术HTMLCSSJavaScriptFLASH 网页后台的学习ASPASP netPHPCGIRubyPython 列表 查看源代码 滚动标签 滚动文字或图像 滚动延迟时间 滚动对象的方向 说明 scrolldelay 表示滚动延迟时间 默认值为90 direction 表示滚动的方向 默认为从右向左 滚动标签 查看示例 水平滚动垂直滚动Avon化妆品雅诗兰黛 水平向左移动 垂直向上移动 图片和文字同时垂直向上移动 声明滚动文字结束 声明滚动文字 水平滚动 开始 并且将会以默认方式从右向左滚动 小结2 有序列表OL 无序列表UL 练习答案 练习代码 编写如下图所示效果对应的html代码 总结 图像与文本的对齐方式有哪几种 中部对齐 顶部对齐 底部对齐 左对齐 右对齐无序列表和有序列表有何区别 分别适用什么场合 无序列表只以项目符号排列 适用于无严格先后顺序的项目排列有序列表以编号排列 适用于讲究先后顺序的项目排列链接到其他页面时 路径的表示方法有哪两种 相对路径和绝对路径滚动效果的标签是什么 总结 哪个标签中的哪个属性可以改变字体颜色和字号 color和size那个标签可以添加背景音乐 bgsound那个标签可以添加视频文件 embed标题标签可以有几级 6 总结 图像与文本的对齐方式有哪几种 中部对齐 顶部对齐 底部对齐 左对齐 右对齐无序列表和有序列表有何区别 分别适用什