网页基础￥￥html-基础.pptxVIP

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/37

HTML简介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/37

HTML根本结构HTML网页根本结构htmlheadtitle我的第一个网页/title/headbody我的第一个网页/body/html网页头部主体局部HTML…/HTML标签标记着HTML文档的开始和结束10/37

网页编辑工具记事本UltraEdit演示示例1：在记事本和UltraEdit中操作11/37

网页根本信息3-1DOCTYPE声明!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtmlxmlns=://w3.org/1999/xhtmlheadmeta-equiv=Content-Typecontent=text/html;charset=gb2312/title无标题文档/title/headbody/body/htmlStrict〔严格类型〕Transitional〔过渡类型〕Frameset〔框架类型〕12/37

网页根本信息3-2title标签……title家用电器排行榜/title……13/37

网页根本信息3-3meta标签meta-equiv=Content-Typecontent=text/html;charset=gb2312”metaname=keywordscontent=北大青鸟，IT培训/metaname=descriptioncontent=北大青鸟是国内最大的……/搜索关键字内容描述网页字符编码14/37

W3C标准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：注释和特殊符号特殊符