HTML基础

第一章HTML基础课程地位2/37本课目标学完本门课程后，你能够使用DIV+CSS布局网页使用CSS美化网页制作精美的商业网站3/37课程结构图4/37学习方法•选取网上与本章讲解案例相似的页面内容，模仿制制作课前•完成上机练习，刻意手写代码，训练网页制作速度•制作网页时，要保证代码的规范度课上•查阅课堂上讲解的不常用的网页知识点，选取相关页面进行制作，增加自己的网页知识面•多模仿、多练习，选择感兴趣的页面进行制作课后5/37预习检查HTML页面的基本结构是什么？请找出下面代码的错误之处在网页中经常用来编辑标题的标签有哪些？提问ahref=#target=_blankimgalt=image/book.jpgsrc=book//a6/37本章任务制作图文并茂的简单首页制作李清照的词“清平乐”制作李清照简介制作京东商城家用电器排行榜制作聚美优品新手指南页面7/37本章目标会使用HTML的基本结构创建网页会使用文本相关标签排版文本信息会使用图像相关标签实现图文并茂的页面会使用a标签创建超链接、锚链接以及功能性链接8/37HTML简介HTML：HyperTextMarkupLanguage1993-6超文本标记语言1995-11HTML2.0HTML3.21996-1-14HTML4.01997-12-18HTML4.011999-12-24XHTML1.02000-1-26XHTML1.12001-5-31XHTML2.0HTML52013-5-6目前网页中常用9/37HTML基本结构HTML网页基本结构htmlheadtitle我的第一个网页/title/headbody我的第一个网页/body/html网页头部主体部分HTML…/HTML标签标记着HTML文档的开始和结束10/37网页编辑工具记事本UltraEdit演示示例1：在记事本和UltraEdit中操作11/37网页基本信息3-1DOCTYPE声明!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=gb2312/title无标题文档/title/headbody/body/htmlStrict（严格类型）Transitional（过渡类型）Frameset（框架类型）12/37网页基本信息3-2title标签……title家用电器排行榜/title……13/37网页基本信息3-3meta标签metahttp-equiv=Content-Typecontent=text/html;charset=gb2312”metaname=“keywords”content=“欧柏泰克，IT培训/metaname=“description”content=“欧柏泰克是国内著名的……/搜索关键字内容描述网页字符编码14/37W3C标准HTML常用版本HTML和XHTML的区别HTML内容结构语义化15/37网页的基本标签6-1标题标签h1…/h1h2…/h2h3…/h3h4…/h4h5…/h5h6…/h6h1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6演示示例2：标题标签16/37网页的基本标签6-2段落标签p…/ph1北京欢迎你/h1p北京欢迎你，有梦想谁都了不起！/pp有勇气就会有奇迹。/p演示示例3：段落标签17/37网页的基本标签6-3换行标签br/h1北京欢迎你/h1p北京欢迎你，有梦想谁都了不起！br/有勇气就会有奇迹。br/北京欢迎你，为你开天辟地br/……/p演示示例4：换行标签18/37网页的基本标签6-4水平线标签hr/h1北京欢迎你/h1hr/p北京欢迎你，有梦想谁都了不起！br/有勇气就会有奇迹。br/北京欢迎你，为你开天辟地br/……/p演示示例5：水平线标签19/37网页的基本标签6-5字体样式标签加粗：strong…/strong斜体：em…/emstrong徐志摩人物简介/strongpem1910/em年入杭州学堂br/em1918/em年赴美国克拉大学学习银行学br/……/p演示示例6：字体样式标签20/37网页的基本标签6-6注释和特殊符号演示示例7和8：注释和特殊符号特殊符号字符实体示例空格 ahref=#百度/a | ahref=#新浪/a大于号()>如果时间>晚上6点，就坐车回家小于号()<如果时间<早上7点，就走路去上学引号()"W3C规范中，HTML的属性值必须用成对的"引起来版权符号@©©2003-2013北大青鸟21/37学员操作——制作《清平乐》训练要点标签的嵌套使用网页中基本标签的使用需求说明标题用h2标签，文字用p标签，标题与正文之间的分隔线使用hr/标签，词结束后使用br/标签换行教员讲解需求指导实现思路诗词内容均放在一个p…/p标签中，诗词中需要换行时使用br/换行，使用标签的嵌套完成时间：15分钟22/37学员操作——制作李清照简介需求说明标题用标题标签，人名加粗显示，时间斜体显示，并制作页面版权部分完成时间：20分钟练习23/37共性问题集中讲解常见问题及解决办法代码规范问题共性问题集中讲解24/37图像标签常见的图像格式JPGGIFPNGBMP25/37图像标签imgsrc=pathalt=texttitle=textwidth=xheight=y/图像地址图像的替代文字语法鼠标悬停提示文字图像宽度图像高度imgsrc=image/hetao.jpgwidth=160height=160alt=无漂白薄皮核桃title=无漂白薄皮核桃/演示示例9：图像示例26/37链接标签演示示例10：超链接的应用ahref=pathtarget=目标窗口位置链接文本或图像/a链接路径链接在哪个窗口打开语法ahref=hetao.htmltarget=_blank无漂白薄皮核桃/aahref=hetao.htmltarget=_blankimgsrc=image/hetao.jpgalt=无漂白薄皮核桃title=无漂白薄皮核桃//a常用值：_self、_blank文本超链接图像超链接示例27/37常用的超链接3-1页面间链接从一个页面链接到另外一个页面锚链接功能性链接演示示例11：页面间链接28/37常用的超链接3-2锚链接从A页面的甲位置跳转到本页中的乙位置从A页面的甲位置跳转到B页面中的乙位置创建步骤创建跳转标记创建跳转链接演示示例12：锚链接aname=marker乙位置/aahref=#marker甲位置/a29/37常用的超链接3-3功能性链接电子邮件QQMSN演示示例13：邮件链接ahref=mailto:[e-mail]联系我们/a示例30/37学员操作——制作电器排行榜训练要点图片和文字混合排版图像标签、标题标签、水平线标签的应用需求说明制作京东商城家用电器排行榜页面，标题使用标题标签，商品之间使用水平线分隔教员讲解需求指导实现思路家用电器排行榜放在标题h1标签中图像使用img/标签商品之间使用hr/标签实现分隔完成时间：20分钟31/37学员操作——制作新手指南页面需求说明制作聚美优品新手指南页面，图片均要加上alt属性，“常见问题”和“用户协议”设置成空链接，“注册帮助”和“登录帮助”设置本页锚链接，分别链接至本页新用户注册和登录帮助处完成时间：20分钟练习32/37共性问题集中讲解常见问题及解决办法代码规范问题共性问题集中讲解33/37总结HTML文件的基本结构和网页基本信息基本标签包括h1…h6、p、hr/、br/插入图像的基本语法，alt属性的应用超链接a的应用以及链接的分类34/37相关学习资源学习资料《使用HTML语言和CSS开发商业站点》“使用HTML语言和CSS开发商业站点”课程35/37作业课后作业教员备课时根据班级情况在此添加内容，应区分必做、选做内容，以满足不同层次学员的需求预习作业预习目标了解各种列表在网页的不同用法预习下一章学生用书，完成预习作业36/37