HTML-1代码初识

HTML基本标签网络营销2/32了解HTML文档结构会使用HTML基本结构创建网页会使用文本相关标签和行控制相关标签会使用图像相关标签实现图文并茂的页面会使用水平线、范围标签设置页面会为页面添加Flash动画技能展示网络营销3/32本章结构HTML基本标签网页的摘要信息HTML基本标签（一）基本结构编辑工具在网页中插入Flash对象HTML文档的基本结构文本相关标签水平线标签hr/行控制相关标签范围标签span图像标签img/网络营销4/32HTML超文本标签语言HyperTextMarkupLanguage网页的“源码”浏览器：“解释和执行”HTML源码的工具什么是HTMLHTML告知浏览器如何显示网页网络营销5/32HTML文档的结构HTML文档的基本结构htmlheadtitle我的第一个网页/title/headbodyHelloWorld!/body/htmlHTML网页head头部部分body主体部分网页标题网页内容，包括文本、图像等这部分包括标题和其他说明信息，包括在head…/head标签内这部分包含文本、图像和链接，它包括在body…/body标签内html…/html标签标记HTML文档的开始和结束网络营销6/32HTML编辑工具记事本创建网页1、打开记事本2、输入HTML代码3、保存为*.html或*.htm文件，注意格式问题4、打开网页预览效果DreamweaverCS5创建网页网络营销7/32网页摘要信息的作用有利于浏览器解析有利于搜索引擎搜索title标签网页的摘要信息2-1headtitle搜狐-中国最大的门户网站/title/head网页标题网络营销8/32meta标签描述文档类型和字符编码描述搜索关键字和描述headmetaname=keywordscontent=北大青鸟,IT培训/metaname=descriptioncontent=北大青鸟是国内最大的IT教育集团，致力于为中国培养优秀的IT技术人才。//headheadmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312//head网页的摘要信息2-2提供搜索关键字和内容描述信息，方便搜索引擎的搜索网络营销9/32基本HTML标签6-1……bodyh1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6/body……h1标题/h1……h6标题/h6标题标签h1最大h6最小前后隔行网络营销10/32基本HTML标签6-2sub下标/subsup上标/sup上标与下标标签……body水Hsub2/subObr/2sup2/sup=4br//body……上标与下标显示效果网络营销11/32基本HTML标签6-3特殊符号连续空格的书写方式特殊字符转义码示例空格 p移动 | 100| /p大于()>IfA>BThenbr/A=A+1小于()<IfA<BThenbr/A=A+1引号()"p"淘宝网"/p版权号(©)©pCopyright©2007/p……bodyCopyright©1999-2011"北大青鸟"Allrights./body……特殊符号显示效果body让子弹多飞一会！！br/让子弹         多飞一会！！br//body连续空格效果网络营销12/32基本HTML标签6-4行控制相关标签段落标签p换行标签br/bodyh1静夜思/h1p床前明月光/pp疑是地上霜/pp举头望明月/pp我是郭德纲！/p/bodybodyh1静夜思/h1床前明月光br/疑是地上霜br/举头望明月br/我是郭德纲！br//body段落换行网络营销13/32基本HTML标签6-5bodyh1静夜思/h1hr/床前明月光br/疑是地上霜br/举头望明月br/我是郭德纲！br//body水平线标签hr/水平线网络营销14/32span文本等行级内容/span基本HTML标签6-6bodyh1静夜思/h1hr/床前明月光br/疑是地上霜br/举头望明月br/spanstyle=color:red;font-size:40px;低头思故乡/spanbr//body范围标签设置红色、大号字突出显示网络营销15/32请思考HTML文档的基本结构是什么？h1、p、hr分别代表什么？插入一条直线用什么标签？小结网络营销16/32图像标签3-1常见图片格式介绍图像类型优点缺点JPG体积小，比较清晰有损压缩、画面失真GIF支持Internet标准,支持无损耗压缩和透明度，很流行支持有限的透明度,效果不如别的图像BMP支持24位颜色深度，兼容性好不支持压缩，容量大PNG存储形式丰富，压缩比例高，显示速度快，支持透明图像新型格式，老浏览器有问题网络营销17/32imgsrc=图片地址alt=图像的替代文字title=鼠标悬停提示文字/图像标签基本语法src：指定图片所在的路径alt：指定的替代文本•表示图像无法显示时（图片路径错误等）替代显示的文本title：额外的提示或帮助信息图像标签3-2图像的替代文字鼠标悬停提示信息网络营销18/32bodyimgsrc=joypad.jpgalt=游戏手柄title=游戏手柄/游戏手柄超便宜！！br/br/imgsrc=mp4.jpgalt=音乐播放器title=音乐播放器/音乐播放器2折！！br//body图像标签应用图像标签3-3图像文字混排网络营销19/32绝对路径文件在硬盘上的真正路径从根目录到文件的完整路径•绝对路径名为相对路径由本文件所在路径引起的跟其他文件的路径关系其他文件相对与自身文件的路径./表示当前目录，../表示上一级目录•D:\Nature\AnimalExamples\index.html•D:\Nature\Bird.jpg•如果index.html页面中插入Bird.jpg图像相对路径为../Bird.jpg绝对路径与相对路径2-1网络营销20/32链接站点根目录内文件一般使用相对路径链接网站根目录外文件一般使用绝对路径src属性为绝对路径与相对路径2-2网络营销21/32Flash文件的3种类型Flash源文件格式•扩展名为.fla，只能在Flash程序中打开的文件格式Flash影片文件•Flash程序中发布或导出的影片扩展名为.swf•Flash源文件压缩后的优化媒体格式•可插入到网页并上载到Web上，也可以直接浏览Flash模板文件•扩展名为.swt，用户可以用它修改和替换Flash影片中的信息在网页中插入Flash对象2-1网络营销22/32使用Dreamweaver向页面插入Flash动画“插入”→“媒体”→“SWF”•选择要插入的Flash动画•填入标题在网页中插入Flash对象2-2网络营销23/32本章总结HTML基本标签网页的摘要信息HTML基本标签（一）基本结构编辑工具在网页中插入Flash对象HTML文档的基本结构文本相关标签水平线标签hr/行控制相关标签范围标签span图像标签img/