《HTML基本标签》PPT课件

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