HTML基本标签PPT

第一章HTML基本标签(一)本门课程目标学完本门课程后，你能够：制作界面美观大方、面向企业应用的静态商业网站掌握Web开发的行业规范和标准课程项目展示贵美商城首页商品展示页（点击左边“商品分类”任一链接）具体商品详细介绍页（点击任一商品图片）购物车页面（点击“立刻购买”按钮）登录页（点击右上方的导航菜单）注册页（点击右上方的导航菜单）帮助中心客服页面（点击右上方的导航菜单）教员现场演示贯穿项目本章任务制作图文并茂的商品介绍页本章目标使用HTML的基本结构创建网页使用行级和块级标签组织页面内容使用图像标签实现图文并茂的页面什么是HTMLHTML：HyperTextMarkupLanguage超文本标签语言HTML：网页的“源码”浏览器：“解释和执行”HTML源码的工具HTML告知浏览器如何显示网页HTML文档的结构htmlheadtitle我的第一个网页/title/headbodyHelloWorld!/body/htmlHTML网页head头部部分body主体部分html…/html标签标记HTML文档的开始和结束网页标题网页内容，可以是文本、图像等这部分包括标题和其他说明信息，包括在head…/head标签内这部分包含文本、图像和链接，它包括在body…/body标签内HTML文档的基本结构记事本UltraEditHTML的编辑工具操作演示1：在记事本里创建网页网页的摘要信息2-1网页摘要信息利于浏览器解析和搜索引擎搜索：使用title标签headtitle搜狐-中国最大的门户网站/title/headheadmetaname=keywordscontent=淘宝,网上购物,在线交易,交易市场/metaname=descriptioncontent=淘宝网-亚洲最大、最安全的网上交易平台，提供各类服饰、美容、家居、数码、……//headheadmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312//head网页的摘要信息2-1使用meta标签（1）描述文档类型和字符编码（2）描述搜索关键字和描述提供搜索关键字和内容描述信息，方便搜索引擎的搜索HTML页面中的块和行HTML标签分类（方便后续的布局设计）：块级标签：显示为“块”状，前后隔一行行级标签：按行逐一显示分类好处：方便后续的布局设计块级：块内包含多行行级：包括文字、图片等块级标签根据使用场合，块级标签又细分为：基本块级标签常用于布局的块级标签标题标签……bodyh1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6/body……基本块级标签3-1h1最大h6最小前后隔行操作演示2：标题标签h1标题/h1……h6标题/h6段落标签……bodyh1北京欢迎你/h1p北京欢迎你，有梦想谁都了不起！/pp有勇气就会有奇迹。/p/body……基本块级标签3-2前后换行，类似教材中的段落操作演示3：段落标签p……/p水平线标签……bodyh1北京欢迎你/h1hr/p北京欢迎你，有梦想谁都了不起！/pp有勇气就会有奇迹。/p/body……基本块级标签3-3横线用于内容分割单个标签的闭合形式操作演示4：水平线标签hr/练习——基本块级标签需求说明：显示唐诗介绍（UltraEdit环境）完成时间：20分钟分析应使用哪些标签？有序列表标签……bodyh3注册步骤：/h3olli填写信息/lili收电子邮件/lili注册成功/li/ol/body……常用于布局的块级标签7-1有序列表操作演示5：有序列表标签olli列表项1/li……/ol无序列表标签bodyh3新人上路指南/h3ulli如何激活会员名？/lili如何注册贵美会员？/lili注册时密码设置有什么要求？/lili贵美认证/li/ul/body常用于布局的块级标签7-2无序列表操作演示6：无序列表标签ulli列表项1/li……/ul定义描述标签……bodydldt咖啡/dtdd一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。/dddd可以提神，刺激神经。/dddl/body……常用于布局的块级标签7-3这种效果可以和无序列表互相替代，因dt是块状元素，所以常用于图文混编的布局场合操作演示7：dl和dt标签dldt标题/dtdd描述1/dd……/dl……bodydldt图片的HTML代码（后续讲解）……dtdd商品名称：灿坤蒸气电熨斗/dddd商品价格：388元/dddd商品简介：金钢低血超硬超顺滑,140ml透明大水箱设计/dd/dl/body……常用于布局的块级标签7-4用定义描述标签实现图文混编的效果文字有一定的缩进表格tabletrtd百度/tdtd新浪/td/tr……/dl常用于布局的块级标签7-5table--表格tr--行td--列（单元格）演示示例8：表格标签常用于布局的块级标签7-6表单一般和table使用：formtabletrtd.../tdtd.../td/tr...../table/form演示示例9：表单标签form……/form常用于布局的块级标签7-7分区标签divdiv标签可内嵌到p等标签内，作为普通块状元素使用一般当作结构化块状元素使用，作为逻辑分区（分块）即容器来使用……divstyle=width:400px;height:300px;background:#9FFp……/ph3新人上路/h3ul……/uldiv其实就是一个....../div……操作演示10：分区标签小结1、div-ul(ol)-li：常用于分类导航或菜单等2、div-dl-dt-dd：常用于图文混编的场合3、table-tr-td：常用于图文布局或显示数据4、form-table-tr-td：常用于布局表单请说出实际开发常用的4种块状结构是什么？练习——常用于布局的块级标签需求说明：实现简单的商品购买页完成时间：25分钟分析应使用哪些标签？共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解图像标签……imgsrc=images/drink.jpgalt=精品热卖：高清晰，30寸等离子电视title=精品热卖：高清晰，30寸等离子电视/……行级标签3-1为了不同浏览器之间的兼容，推荐使用title属性，确保能显示提示文字操作演示11：图像标签imgsrc=图片地址alt=提示文字title=提示文字/范围标签span：显示某行内的独特样式……p商品价格:仅售spanstyle=color:red;font-size:70px;10/span元/p……行级标签3-2操作演示12：span标签span文本等行级内容/span设置红色、大号字突出显示换行标签br/……p北京欢迎你，有梦想谁都了不起！br/有勇气就会有奇迹。br/北京欢迎你，为你开天辟地br/流动中的魅力充满朝气。br/北京欢迎你，在太阳下分享呼吸br/在黄土地刷新成绩。br/北京欢迎你，像音乐感动你br/让我们都加油去超越自己。br//p……行级标签3-3和p的区别：前后不换行操作演示13：换行标签为什么需要W3C标准W3C：WorldWideWebConsortium，万维网联盟W3C的职能：负责制定和维护web行业标准W3C标准包括：列的标准：HTML内容方面：XHTML样式美化方面：CSS结构文档访问方面：OM页面交互方面：ECMAScript……制定统一的web标准W3CNetscape的图标W3C提倡的Web结构不规范的示例fontsize=7一级主题/Fontbr/一级主题阐述文字br/Br/fontsize=5二级主题/fontbr/二级主题相关文字P项目列表1p项目列表2p项目列表3存在问题：1、内容和表现没分离，后期很难维护和修改2、HTML代码不能表示页面的内容语义，不利于搜索引擎搜索操作演示：不规范的示例W3C提倡的Web结构规范的示例h1一级主题1/h1p一级主题阐述文字/ph2二级主题/h2p二级主题阐述文字/pulli项目列表1/lili项目列表2/lili项目列表3/li/ulW3C提倡的Web结构：1、内容（结构）和表现（样式）分离2、HTML内容结构要求语义化操作演示：规范的示例!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN……/head……body部分内容……/htmlXHTML1.0基本规范标签名和属性名称必须小写HTML标签必须关闭属性值必须用引号括起来标签必须正确嵌套必须添加文档类型声明1、声明必须位于文档的最前面2、三种级别：Strict（严格类型）、Trasitional（过度类型）、Frameset（框架类型）练习——行级元素需求说明：完成时间：20分钟注意HTML结构的语义化，遵守XHTML1.0基本规范总结行级和块级标签有什么区别？用途？块级标签分为几类，分别包含哪些？常用的4种块状结构是什么？W3C提倡的Web页结构是什么？XHTML基本规范是什么？