第1讲-html基础.ppt

CSTP HTML讲堂——进阶一 知识回顾 下面由今天的当职同学进行课程知识回顾 让我们欢迎 本章目标 1. 什么是HTML 3.附加知识点 2.HTML的基本结构 3.图象标签 3.HTML的标签与属性 HTML 什么是HTML HTML的英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。 所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个HTML文档都是一种静态的网页文件。 通过HTML可以表现出丰富多彩的设计风格： 通过HTML可以实现页面之间的跳转： 通过HTML可以展现多媒体的效果： HTML用来做什么 HTML文件的基本结构 HTML文档的结构 HTML HEAD TITLE我的第一个网页 /TITLE /HEAD BODY Hello World! /BODY /HTML HTML 网页 HEAD头部部分 BODY主体部分 HTML…/HTML标签标记 HTML 文档的开始和结束 网页标题 网页内容，可以是文本、图像等 这部分包含文本、图像和链接。它包括在 BODY…/BODY 标签内 这部分包括标题和其他说明信息。包括在 HEAD…/HEAD 标签内 使用记事本创建网页 演示示例：如何在记事本里创建网页 使用记事本创建网页的步骤： 1、打开记事本 2、输入HTML代码 3、保存为*.html或*.htm文件，注意格式问题 4、打开网页预览效果 使用记事本创建网页 页面背景色或背景图像 BODY bgcolor=“#FFCCFF”background=back_image.GIF Hello World！ /BODY 为了使页面美丽大方，网页背景要尽量地浅 …… BODY bgcolor=#FFCCFF“ Hello World! /BODY …… 网页背景色彩 网页背景图像 文本相关标签 字体、字号 标题标签H1－H6 FONT标签 特殊符号 行的控制 段落标签P 换行标签BR 使用了 H2… H2 换段了 设置了字体的大小和颜色 换行了 特殊符号 字体、字号相关标签 标题标签 H# ... /H# #=1, 2, 3, 4, 5, 6 说明：H1到H6 字体大小依 次递减 …… BODY H1一级标题/H1 H2二级标题/H2 H3三级标题/H3 H4四级标题/H4 H5五级标题/H5 H6六级标题/H6 /BODY …… H1 到 H6 标签用于指定不同级别的标题 字体、字号相关标签 FONT size=“+2” color=“red” face=“律书” ... /FONT FONT标签 特殊符号 特殊字符 转义码 空格 nbsp; 引号(“”) quot; 小于() lt; 大于() gt; 版权号(? ) copy; 字体的大小值 字体的 颜色 字体的 类型 字体、字号相关标签 ...... BODY P FONT size=+2 color=red 手机充值、IP卡/电话卡 /FONTBR / 移动nbsp;|nbsp; 100 | nbsp;联通 | nbsp;50/P Copyright copy; 2007 quot;淘宝网quot; All rights. /BODY …… 空格效果 行的控制相关标签 ……. P align=center淘宝集市欢迎您！/P P align=left淘宝网首届翠友会！BR …… /P …… 段落标签P 段(Paragraph) (可以看作是空行) p 换行标签BR 换行 br 换段了 换行了 图像标签 常见的图片格式介绍 图像类型 优点 缺点 适用场合 制作工具 *.jpg 体积小，比较清晰 有损压缩 、画面失真 网页图片 Photoshop *.gif 支持 Internet 标准 ,支持无损耗压缩和透明度，很流行 支持有限的透明度,效果不如别的图像 网页图片 Photoshop *.swf 体积小,便于网络传输 制作麻烦 网页动画 Flash *.bmp 支持 24 位颜色深度，兼容性好 不支持压缩 容量大 桌面墙纸 photoshop 图像标签 图像的基本语法 IMG src=images/adv_2.jpg width=300“ height=150“ alt=明星演唱会开幕 …… BODY IMG src