网页基础￥￥html 基础.pptx

第一章HTML基础课程地位/37本课目标学完本门课程后，你能够使用DIV+CSS布局网页使用CSS美化网页制作精美的商业网站/37课程结构图/37学习方法/37本章任务制作图文并茂的简单首页制作李清照的词“清平乐”制作李清照简介制作京东商城家用电器排行榜制作聚美优品新手指南页面/37本章目标会使用HTML的基本结构创建网页会使用文本相关标签排版文本信息会使用图像相关标签实现图文并茂的页面会使用a标签创建超链接、锚链接以及功能性链接/37HTML简介HTML：Hyper Text Markup LanguageHTML5目前网页中常用XHTML2.02013-5-6XHTML1.12001-5-31XHTML1.02000-1-26HTML4.01超文本标记语言1999-12-24HTML4.01997-12-18HTML3.2HTML2.01996-1-141995-111993-6/37HTML基本结构HTML网页基本结构htmlhead title我的第一个网页/title/headbody 我的第一个网页/body/html网页头部主体部分HTML…/HTML标签标记着 HTML 文档的开始和结束/37网页编辑工具记事本UltraEdit演示示例1：在记事本和UltraEdit中操作/37网页基本信息3-1DOCTYPE声明!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=gb2312 /title无标题文档/title/headbody/body/htmlStrict（严格类型）Transitional（过渡类型）Frameset（框架类型）/37网页基本信息3-2title标签……title家用电器排行榜/title……/37网页基本信息3-3meta标签meta http-equiv=Content-Type content=text/html; charset=gb2312”meta name=keywords content=北大青鸟，IT培训 /meta name=description content=北大青鸟是国内最大的…… /网页字符编码搜索关键字内容描述/37W3C标准HTML常用版本HTML和XHTML的区别HTML内容结构语义化/37网页的基本标签6-1标题标签h1…/h1h2…/h2h3…/h3h4…/h4h5…/h5h6…/h6h1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6演示示例2：标题标签/37网页的基本标签6-2段落标签p…/ph1北京欢迎你/h1p北京欢迎你，有梦想谁都了不起！/pp有勇气就会有奇迹。/p演示示例3：段落标签/37网页的基本标签6-3换行标签br/h1北京欢迎你/h1p 北京欢迎你，有梦想谁都了不起！br / 有勇气就会有奇迹。br / 北京欢迎你，为你开天辟地br / ……/p演示示例4：换行标签/37网页的基本标签6-4水平线标签hr/h1北京欢迎你/h1hr/p 北京欢迎你，有梦想谁都了不起！br / 有勇气就会有奇迹。br / 北京欢迎你，为你开天辟地br / ……/p演示示例5：水平线标签/37网页的基本标签6-5字体样式标签加粗：strong…/strong斜体：em…/emstrong徐志摩人物简介/strongp em1910/em年入杭州学堂br/ em1918/em年赴美国克拉大学学习银行学br/ ……/p演示示例6：字体样式标签/37网页的基本标签6-6注释和特殊符号特殊符号字符实体示例空格nbsp;a href=#百度/anbsp;|nbsp;a href=#新浪/a大于号()gt;如果时间gt;晚上6点，就坐车回家小于号()lt;如果时间lt;早上7点，就走路去上学引号()quot;W3C规范中，HTML的属性值必须用成对的quot;引起来版权符号@copy;copy; 2003-2013北大青鸟演示示例7和8：注释和特殊符号/37学员操作——制作《清平乐》指导训练要点标签的嵌套使用网页中基本标签的使用需求说明标题用h2标签，文字用p标签，标题与正文之间的分隔线使用hr/标签，词结束后使用br/标签换行实现思路诗词内容均放在一个p…/p标签中，诗词中需要换行时使用br/换行，使用标签的嵌套完成时间：15分钟教员讲解需求/37学员操作——制作李清照简介练习需求说明标题用标题标签，人