《web基础(html基本标签)》由会员分享，可在线阅读，更多相关《web基础(html基本标签)（36页珍藏版）》请在金锄头文库上搜索。
1、第一章,HTML基本标签,预习检查,请详述HTML文档的基本结构！ 标题标签有哪几种类型？ 到 哪些标签可以控制文字样式？,本章目标,了解Internet的相关介绍 了解HTML技术 掌握网页背景设置 掌握字体和段落标签的应用 掌握如何在网页中插入图片 掌握超级链接的使用 掌握列表标签 制作滚动效果,Internet相关技术介绍,TCP/IP协议TCP/IP协议是Internet国际互联网络的基础。 HTTP协议：用于浏览网页 FTP协议：用于Internet文件共享 IP地址和域名简介 IP地址：标识网络中每台主机的唯一地址。 域名：用于标识IP地址的有意义的词组。 URL (Uniform
2、 Resource Locator)统一资源定位符，用于精确定位网络中的各种资源。如网页、图片、音乐、视频等。,Internet相关技术介绍,Web浏览器将网页文件翻译成丰富多彩的网页。常用的浏览器： IE FireFox Opera 绝对路径和相对路径 绝对路径：文件或目录在硬盘上的真正路径。C:xyztest.txthttp:/ 相对路径：相对于某个基准目录的路径。./ 代表当前目录/ 代表上级目录,HTML语言,什么是 HTML？ HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而
3、是一种标记语言 (markup language) 标记语言是一套标记标签 (markup 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!,网页背景色彩,网页背景图像,设置背景声音,主体背景音乐设置,声音文件,播放次数,添加多媒体资源,多媒体资源设置下面是视频文件的播放界面下面是音频文件的播放界面下面是Flash动画文件的播放界面,字体和段
5、落标签,字体、字号 标题标签 标签 特殊符号 行的控制 段落标签 换行标签,使用了 ,换段了,设置了字体的大小和颜色,换行了,特殊符号,. ,字体和段落标签,标签特殊符号,字体的 大小值,字体的 颜色,字体的 类型,字体和段落标签,手机充值、IP卡/电话卡 移动 All rights.,空格效果,. 淘宝集市欢迎您！淘宝网首届翠友会！,字体和段落标签,段落标签 段(Paragraph) (可以看作是空行) 换行标签 换行 ,换段了,换行了,. 斜体斜体粗体粗体下划线aaa bbbccccddd ffff,字体样式,标题标签和水平线,标题标签. #=1, 2, 3, 4, 5, 6 说明：到 字
6、体大小依 次递减,一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 ,H1 到 H6 标签用于指定不同级别的标题,标题标签和水平线,水平线,春晓春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。,练习,利用所学知识，制作一份简易的个人简历。要求：恰当的使用本节课所学到的基本标签。内容包括：姓名、年龄、爱好、地址、学习经历和工作经历。,图像标签,图像的基本语法 ,查看源代码,图像的路径,图像的宽度,图像的高度,为图像添加的提示性文字,图像的边框,鼠标移到图像上，出现的提示性文字,图像标签,图像与文本的对齐方式 ,图像与文本居中对齐,还可以取 top, bottom 值,.图像中部和同一行
7、文本的基线对齐,查看源代码,图像和文本居中对齐,小结1,练习答案,练习代码,编写如下图所示效果对应的html代码,超级链接,链接到其他页面免费注册,链接内容,链接的地址,链接到其他页面免费注册 登录 ,单击”免费注册”之后链接到的页面,查看源代码,超级链接,链接到其他页面 绝对路径指定从根目录到文件的完整路径。 相对路径指定相对于当前文件的文件位置。,在同一个文件夹下有两个html文件，从一个文件超链接到另一个文件的路径有几种方式？,两种方式：相对路径和绝对路径,超级链接,要链接到同一目录 (C:HTML) 下的页面，可编写 或 ,相对路径名,绝对路径名,超级链接,要实现如下图所示的超链接效果
8、，怎么办？,演示示例3：演示锚链接的例子,使用锚记标签,超级链接,链接到本页面 锚记标签用于使用户“跳”到文档的某个部分 HTML 的 NAME 属性用于创建锚标记主题名称 为达到这种跳转效果，请在 HREF 参数中使用该标记主题名称,演示示例4：演示锚链接的例子,链接到其他页面底部 这是底部,1、定义锚标记,2、链接到锚标记所在位置,超级链接,电子邮件链接 要链接电子邮件，可在链接标签中插入”mailto:邮箱地址” 站长信箱,演示示例5：演示电子邮件链接,电子邮件链接站长信箱,单击”站长信箱”链接后的输出结果,任何正确的电子邮箱地址均可,网页前台技术HTMLCSSJavaScriptFLA
9、SH 网页后台的学习 ASPASP.netPHPCGIRubyPython,列表,查看源代码,滚动标签,滚动文字或图像 ,滚动延迟时间,滚动对象的方向,说明： scrolldelay：表示滚动延迟时间，默认值为90。 direction：表示滚动的方向，默认为从右向左。,滚动标签,查看示例,水平滚动垂直滚动Avon化妆品雅诗兰黛 ,水平向左移动,垂直向上移动,图片和文字同时垂直向上移动,声明滚动文字结束,声明滚动文字“水平滚动”开始，并且将会以默认方式从右向左滚动,小结2,有序列表OL,无序列表UL,练习答案,练习代码,编写如下图所示效果对应的html代码,总结,图像与文本的对齐方式有哪几种？
10、 中部对齐、顶部对齐、底部对齐、左对齐、右对齐 无序列表和有序列表有何区别？分别适用什么场合？ 无序列表只以项目符号排列，适用于无严格先后顺序的项目排列 有序列表以编号排列，适用于讲究先后顺序的项目排列 链接到其他页面时，路径的表示方法有哪两种？ 相对路径和绝对路径 滚动效果的标签是什么？,总结,哪个标签中的哪个属性可以改变字体颜色和字号？color 和 size 那个标签可以添加背景音乐？bgsound 那个标签可以添加视频文件？embed 标题标签可以有几级？6,总结,图像与文本的对齐方式有哪几种？ 中部对齐、顶部对齐、底部对齐、左对齐、右对齐 无序列表和有序列表有何区别？分别适用什么场合？ 无序列表只以项目符号排列，适用于无严格先后顺序的项目排列 有序列表以编号排列，适用于讲究先后顺序的项目排列 链接到其他页面时，路径的表示方法有哪两种？ 相对路径和绝对路径 滚动效果的标签是什么？,作业布置,作业 第一章作业 用网页为自己写一个 的班级介绍 提交时间下次课前 提交方式 教学软件的提交,色彩斑斓,
