第一章(HTML基本标签)

1、第一章第一章HTML基本基本标签标签预习检查请详述HTML文档的基本结构！标题标签有哪几种类型？到哪些标签可以控制文字样式？ .本章目标了解Internet的相关介绍了解HTML技术掌握网页背景设置 掌握字体和段落标签的应用掌握如何在网页中插入图片掌握超级链接的使用掌握列表标签制作滚动效果Internet相关技术介绍TCP/IP协议TCP/IP协议是Internet国际互联网络的基础。HTTP协议：用于浏览网页FTP协议：用于Internet文件共享IP地址和域名简介IP地址：标识网络中每台主机的唯一地址。域名：用于标识IP地址的有意义的词组。URL (Uniform Resource Loc

2、ator)统一资源定位符，用于精确定位网络中的各种资源。如网页、图片、音乐、视频等。Internet相关技术介绍Web浏览器将网页文件翻译成丰富多多彩彩的网页。常用的浏览器：IEFireFoxOpera绝对路径和相对路径绝对路径：文件或目录在硬盘上的真正路径。C:xyztest.txthttp:/ 代表当前目录./ 代表上级目录HTML语言什么是 HTML？HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (mar

3、kup tag) HTML 使用标记标签来描述网页 HTML 标签HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词，比如 HTML 标签通常是成对出现的，比如 和 标签对中的第一个标签是开始标签，第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签 HTML网页的结构HTML网页的结构欢迎来到欢迎来到HTML 您好，您好，SEC！HTML 网页网页头部部分头部部分主体部分主体部分标签标记标签标记 HTML 文档的开始和结束文档的开始和结束网页标题网页内容，可以是网页内容，可以是文本、图像等文本、图像等这部分包含文本、图像和链接。

4、它包括在这部分包含文本、图像和链接。它包括在 标签内标签内这部分包括标题和其他说明信息。包括在这部分包括标题和其他说明信息。包括在 标签内标签内使用记事本创建网页演示示例：演示示例：使用记事本创建网页的步骤： 1、打开记事本2、输入HTML代码3、保存为*.html或*.htm文件，注意格式问题4、打开网页预览效果使用记事本创建网页设置网页背景色或背景图像 Hello World！为了使页面美丽大方，网页背景要尽量地浅为了使页面美丽大方，网页背景要尽量地浅Hello World!网页背景色彩网页背景色彩 网页背景图像网页背景图像 设置背景声音 主体背景音乐设置主体背景音乐设置 声音文件声音文件

5、 播放次数播放次数 添加多媒体资源 多媒体资源设置多媒体资源设置 下面是视频文件的播放界面下面是视频文件的播放界面 下面是音频文件的播放界面下面是音频文件的播放界面 下面是下面是Flash动画文件的播放界面动画文件的播放界面 字体和段落标签字体、字号标题标签标签特殊符号行的控制段落标签换行标签使用了使用了 换段了换段了设置了字体的设置了字体的大小和颜色大小和颜色换行了换行了特殊符号特殊符号 . 字体和段落标签标签特殊符号特殊字符转义码空格 引号(“”)"小于()>版权号( )©字体的字体的大小值大小值字体的字体的颜色颜色字体的

6、字体的类型类型字体和段落标签. 手机充值、手机充值、IP卡卡/电话卡电话卡 移动移动 |  100 |  联通联通 |  50 Copyright © 2007 "淘宝网淘宝网" All rights.空格效果空格效果. 淘宝集市欢迎您！淘宝集市欢迎您！ 淘宝网首届翠友会！淘宝网首届翠友会！ 字体和段落标签段落标签段(Paragraph) (可以看作是空行) 换行标签换行 换段了换段了换行了换行了. 斜体斜体 斜体斜体 粗体粗体 粗体粗体 下划线下划线 aaa bbbc

7、cccddd ffff 字体样式 标题标签和水平线标题标签 . #=1, 2, 3, 4, 5, 6 说明：到字体大小依次递减 一级标题一级标题 二级标题二级标题 三级标题三级标题 四级标题四级标题 五级标题五级标题 六级标题六级标题 H1 到到 H6 标签用于指定不同级别的标题标签用于指定不同级别的标题标题标签和水平线水平线 春晓春晓 春眠不觉晓，春眠不觉晓， 处处闻啼鸟。处处闻啼鸟。 夜来风雨声，夜来风雨声， 花落知多少。花落知多少。 练习利用所学知识，制作一份简易的个人简历。 要求：恰当的使用本节课所学到的基本标签。 内容包括：姓名、年龄、爱好、地址、学习经历和工作经历。图像标签图像的基

8、本语法查看源代码查看源代码图像的图像的路径路径图像的图像的宽度宽度图像的图像的高度高度为图像添加的提示性文字为图像添加的提示性文字图像的图像的边框边框鼠标移到图像上，出鼠标移到图像上，出现的提示性文字现的提示性文字图像标签图像与文本的对齐方式图像与文本居中对图像与文本居中对齐齐,还可以取还可以取top, bottom 值值. 图像中部和同一行文本的基线对齐图像中部和同一行文本的基线对齐查看源代码查看源代码图像和文本居图像和文本居中对齐中对齐小结1练习答案练习答案练习代码练习代码编写如下图所示效果对应的html代码超级链接链接到其他页面免费注册链接内容链接内容链接的地址链接的地址链接到其他页面链

9、接到其他页面 免费注册免费注册 登录登录 单击单击”免费注册免费注册”之后链接到的页面之后链接到的页面查看源代码查看源代码超级链接链接到其他页面绝对路径 指定从根目录到文件的完整路径。相对路径 指定相对于当前文件的文件位置。 在同一个文件夹下有两个html文件，从一个文件超链接到另一个文件的路径有几种方式？两种方式：相对路径和绝对路径两种方式：相对路径和绝对路径超级链接要链接到同一目录要链接到同一目录 (C:HTML) 下的页面，可编写下的页面，可编写 或或 相对路径名相对路径名绝对路径名绝对路径名超级链接 要实现如下图所示的超链接效果，怎么办？演示示例演示示例3 3：演示锚链接的例子演示锚链

10、接的例子 使用锚记标签使用锚记标签超级链接链接到本页面锚记标签用于使用户“跳”到文档的某个部分HTML 的 NAME 属性用于创建锚标记 主题名称为达到这种跳转效果，请在 HREF 参数中使用该标记主题名称演示示例演示示例4 4：演示锚链接的例子演示锚链接的例子 链接到其他页面链接到其他页面底部底部这是底部这是底部1、定义锚标记、定义锚标记2、链接到锚标记所在位置、链接到锚标记所在位置超级链接电子邮件链接要链接电子邮件，可在链接标签中插入”mailto:邮箱地址”站长信箱演示示例演示示例5 5：演示电子邮件链接演示电子邮件链接 电子邮件链接电子邮件链接 站长信箱站长信箱单击单击”站长信箱站长信

11、箱”链接后的输出结果链接后的输出结果任何正确的电子邮任何正确的电子邮箱地址均可箱地址均可 网页前台技术网页前台技术 HTML CSS JavaScript FLASH 网页后台的学习网页后台的学习 ASP ASP.net PHP CGI Ruby Python 列表查看源代码查看源代码滚动标签 滚动文字或图像滚动延迟滚动延迟时间时间滚动对象的滚动对象的方向方向说明：scrolldelay：表示滚动延迟时间，默认值为90。direction：表示滚动的方向，默认为从右向左。滚动标签查看示例查看示例 水平滚动水平滚动 垂直滚动垂直滚动 Avon化妆品化妆品 雅诗兰黛雅诗兰黛 水平向水平向左移动左移

12、动垂直向垂直向上移动上移动图片和文字同时图片和文字同时垂直向上移动垂直向上移动声明滚动声明滚动文字结束文字结束声明滚动文字声明滚动文字“水平滚水平滚动动”开始，并且将会以开始，并且将会以默认方式从右向左滚动默认方式从右向左滚动小结2有序列表有序列表OL无序列表无序列表UL练习答案练习答案练习代码练习代码编写如下图所示效果对应的html代码总结图像与文本的对齐方式有哪几种？中部对齐、顶部对齐、底部对齐、左对齐、右对齐无序列表和有序列表有何区别？分别适用什么场合？无序列表只以项目符号排列，适用于无严格先后顺序的项目排列有序列表以编号排列，适用于讲究先后顺序的项目排列链接到其他页面时，路径的表示方法有哪两种？相对路径和绝对路径滚动效果的标签是什么？ 总结哪个标签中的哪个属性可以改变字体颜色和字号？ color color 和和 sizesize那个标签可以添加背景音乐？ bgsound那个标签可以添加视频文件？ embed标题标签可以有几级？ 6 6总结图像与