《HTML基本标签》PPT课件.ppt

《《HTML基本标签》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《HTML基本标签》PPT课件.ppt（35页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第一章HTML基本标签(一)本门课程目标n学完本门课程后，你能够：n制作界面美观大方、面向企业应用的静态商业网站n掌握Web开发的行业规范和标准课程项目展示n贵美商城n首页n商品展示页（点击左边“商品分类”任一链接）n具体商品详细介绍页（点击任一商品图片）n购物车页面（点击“立刻购买”按钮）n登录页（点击右上方的导航菜单）n注册页（点击右上方的导航菜单）n帮助中心客服页面（点击右上方的导航菜单）教员现场演示贯穿项目教员现场演示贯穿项目教员现场演示贯穿项目教员现场演示贯穿项目本章任务n制作图文并茂的商品介绍页 本章目标n使用HTML的基本结构创建网页n使用行级和块级标签组织页面内容 n使用图像标

2、签实现图文并茂的页面什么是HTMLnHTML：Hyper Text Markup Language 超文本标签语言nHTML：网页的“源码”n浏览器：“解释和执行”HTML源码的工具 HTML告知浏览器如告知浏览器如何显示网页何显示网页nHTML文档的结构我的第一个网页我的第一个网页 Hello World!HTML 网页网页头部部分头部部分主体部分主体部分标签标记标签标记 HTML 文档的开始和结束文档的开始和结束网页标题网页标题网页内容，可以是网页内容，可以是文本、图像等文本、图像等这部分包括标题和其他说明信息，包括在这部分包括标题和其他说明信息，包括在 标签内标签内这这部分包含文本、部分

3、包含文本、图图像和像和链链接，它包括在接，它包括在 标签标签内内HTML文档的基本结构记事本记事本UltraEditHTML的编辑工具操作演示操作演示操作演示操作演示11：在记事本里创建网页：在记事本里创建网页：在记事本里创建网页：在记事本里创建网页 网页的摘要信息2-1 网页摘要信息利于浏览器解析和搜索引擎搜索：网页摘要信息利于浏览器解析和搜索引擎搜索：使用使用标签标签 搜狐搜狐-中国最大的门户网站中国最大的门户网站 网页的摘要信息2-1 使用使用标签标签（1）描述文档类型和字符编码）描述文档类型和字符编码（2）描述搜索关键字和描述）描述搜索关键字和描述提供搜索关键字和内容描述提供搜索关键字

4、和内容描述信息，方便搜索引擎的搜索信息，方便搜索引擎的搜索 HTML页面中的块和行HTML标签分类（方便后续的布局设计）：标签分类（方便后续的布局设计）：块级标签：显示为块级标签：显示为“块块”状，前后隔一行状，前后隔一行 行级标签：按行逐一显示行级标签：按行逐一显示 分类好处：方便后续的布局设计分类好处：方便后续的布局设计 块级：块级：块内包含块内包含多行多行行级：包行级：包括文字、括文字、图片等图片等块级标签根据使用场合，块级标签又细分为：根据使用场合，块级标签又细分为：基本块级标签基本块级标签 常用于布局的块级标签常用于布局的块级标签 n标题标签 一一级标题级标题 二二级标题级标题 三三

5、级标题级标题 四四级标题级标题 五五级标题级标题 六六级标题级标题基本块级标签3-1h1h1最大最大h6h6最小最小前后隔行前后隔行操作演示操作演示操作演示操作演示22：标题标签：标题标签：标题标签：标题标签 标题标题标题标题n段落标签 北京北京欢欢迎你迎你 北京北京欢欢迎你，有梦想迎你，有梦想谁谁都了不起！都了不起！/p 有勇气就会有奇迹。有勇气就会有奇迹。基本块级标签3-2前后换行，类前后换行，类似教材中的段似教材中的段落落操作演示操作演示操作演示操作演示33：段落标签：段落标签：段落标签：段落标签 n水平线标签 北京北京欢欢迎你迎你 北京北京欢欢迎你，有梦想迎你，有梦想谁谁都了不起！都了

6、不起！/p 有勇气就会有奇迹。有勇气就会有奇迹。基本块级标签3-3横线用于内容横线用于内容分割分割单个标签的闭单个标签的闭合形式合形式操作演示操作演示操作演示操作演示44：水平线标签：水平线标签：水平线标签：水平线标签 练习基本块级标签n需求说明：n显示唐诗介绍（UltraEdit环境）完成时间：完成时间：20分钟分钟分析应使用哪分析应使用哪些标签？些标签？n有序列表标签 注册步注册步骤骤：填写信息填写信息 收收电电子子邮邮件件 注册成功注册成功 常用于布局的块级标签7-1有序列表有序列表操作演示操作演示操作演示操作演示55：有序列表标签：有序列表标签：有序列表标签：有序列表标签 列表项列表项

7、1 n无序列表标签 新人上路指南新人上路指南 如何激活会如何激活会员员名？名？如何注册如何注册贵贵美会美会员员？注册注册时时密密码设码设置有什么要求？置有什么要求？贵贵美美认证认证常用于布局的块级标签7-2无序列表无序列表操作演示操作演示操作演示操作演示66：无序列表标签：无序列表标签：无序列表标签：无序列表标签 列表项列表项1 n定义描述标签 咖啡咖啡 一种黑色的一种黑色的热饮热饮料，原料据料，原料据说说是咖啡豆，非洲盛是咖啡豆，非洲盛产这类产这类原料。原料。可以提神，刺激神可以提神，刺激神经经。常用于布局的块级标签7-3这种效果可以和无序列表互相这种效果可以和无序列表互相替代，因替代，因d

8、tdt是块状元素，所以是块状元素，所以常用于图文混编的布局场合常用于图文混编的布局场合操作演示操作演示操作演示操作演示77：dldl和和和和dtdt标签标签标签标签 标题标题 描述描述1 图图片的片的HTML代代码码（后（后续讲续讲解）解）商品名称：商品名称：灿灿坤蒸气坤蒸气电电熨斗熨斗 商品价格：商品价格：388元元 商品商品简简介：金介：金钢钢低血超硬超低血超硬超顺顺滑滑,140ml透明大水箱透明大水箱设计设计常用于布局的块级标签7-4n用定义描述标签实现图文混编的效果文字有一定的缩进文字有一定的缩进n表格 百度 新浪 常用于布局的块级标签7-5-表格表格 -行行 -列（单元格）列（单元格

9、）演示示例演示示例演示示例演示示例88：表格标签：表格标签：表格标签：表格标签 常用于布局的块级标签7-6n表单 一般和一般和table使用：使用：.演示示例演示示例演示示例演示示例99：表单标签：表单标签：表单标签：表单标签 常用于布局的块级标签7-7n分区标签 divdiv标签可内嵌到标签可内嵌到等标签等标签内，作为普通块状元素使用内，作为普通块状元素使用一般当作结构化块状元素使用，作一般当作结构化块状元素使用，作为逻辑分区（分块）即容器来使用为逻辑分区（分块）即容器来使用 新人上路新人上路 div其其实实就是一个就是一个.操作演示操作演示操作演示操作演示1010：分区标签：分区标签：分区

10、标签：分区标签 小结1、div-ul(ol)-li：常用于分类导航或菜单等 2、div-dl-dt-dd：常用于图文混编的场合 3、table-tr-td：常用于图文布局或显示数据 4、form-table-tr-td：常用于布局表单 请说出实际开发常用的请说出实际开发常用的4种块状结构是什么？种块状结构是什么？练习常用于布局的块级标签 n需求说明：n实现简单的商品购买页 完成时间：完成时间：25分钟分钟分析应使用哪些分析应使用哪些标签？标签？共性问题集中讲解共性问题集中讲解n常见调试问题及解决办法常见调试问题及解决办法n代码规范问题代码规范问题共性问题集中讲解共性问题集中讲解n图像标签 行级

11、标签3-1为了不同浏览器之间的兼容，推荐使用为了不同浏览器之间的兼容，推荐使用title属性属性，确保能显示提示文字，确保能显示提示文字操作演示操作演示操作演示操作演示1111：图像标签：图像标签：图像标签：图像标签 n范围标签：显示某行内的独特样式 商商品品价价格格:仅仅售售10元元行级标签3-2操作演示操作演示操作演示操作演示1212：spanspan标签标签标签标签 文本等行级内容文本等行级内容设置红色、大号字设置红色、大号字突出显示突出显示 n换行标签 北京北京欢欢迎你，有梦想迎你，有梦想谁谁都了不起！都了不起！有勇气就会有奇迹。有勇气就会有奇迹。北京北京欢欢迎你，迎你，为为你开天辟地

12、你开天辟地 流流动动中的魅力充中的魅力充满满朝气。朝气。北京北京欢欢迎你，在太阳下分享呼吸迎你，在太阳下分享呼吸 在黄土地刷新成在黄土地刷新成绩绩。北京北京欢欢迎你，像音迎你，像音乐乐感感动动你你 让让我我们们都加油去超越自己。都加油去超越自己。行级标签3-3和和的区别：的区别：前后不换行前后不换行操作演示操作演示操作演示操作演示1313：换行标签：换行标签：换行标签：换行标签 为什么需要W3C标准nW3C：World Wide Web Consortium，万维网联盟nW3C的职能：负责制定和维护web行业标准nW3C标准包括：列的标准：nHTML内容方面：XHTMLn样式美化方面：CSS

13、n结构文档访问方面：OMn页面交互方面：ECMAScriptn 制定统一的制定统一的web标准标准W3CNetscape的图标的图标W3C提倡的Web结构n不规范的示例一一级级主主题题一一级级主主题阐题阐述文字述文字 二二级级主主题题二二级级主主题题相关文字相关文字项项目列表目列表1项项目列表目列表2项项目列表目列表3存在问题：存在问题：1、内容和表现没分离，后期很难、内容和表现没分离，后期很难维护和修改维护和修改 2、HTML代代码码不能表示不能表示页页面的内面的内容容语义语义，不利于搜索引擎搜索，不利于搜索引擎搜索 操作演示：不规范的示例操作演示：不规范的示例操作演示：不规范的示例操作演示

14、：不规范的示例 W3C提倡的Web结构规范的示例规范的示例一一级级主主题题1 一一级级主主题阐题阐述文字述文字 二二级级主主题题 二二级级主主题阐题阐述文字述文字 项项目列表目列表1 项项目列表目列表2 项项目列表目列表3 W3C提倡的提倡的Web结构：结构：1、内容（结构）和表现（样式）、内容（结构）和表现（样式）分离分离2、HTML内容内容结结构要求构要求语义语义化化 操作演示：规范的示例操作演示：规范的示例操作演示：规范的示例操作演示：规范的示例 body部分内容部分内容XHTML 1.0基本规范标签名和属性名称必须小写标签名和属性名称必须小写 HTML标签必须关闭标签必须关闭 属性值必

15、须用引号括起来属性值必须用引号括起来 标签必须正确嵌套标签必须正确嵌套 必须添加文档类型声明必须添加文档类型声明 1、声明必须位于文档的最前面、声明必须位于文档的最前面2、三种级别：、三种级别：Strict（严格类型）（严格类型）、Trasitional（过度（过度类型）、类型）、Frameset（框架类型）（框架类型）练习行级元素n需求说明：完成时间：完成时间：20分钟分钟注意注意HTML结构的语义结构的语义化，遵守化，遵守XHTML1.0基本规范基本规范总结n行级和块级标签有什么区别？用途？n块级标签分为几类，分别包含哪些？n常用的4种块状结构是什么？nW3C提倡的Web页结构是什么？nXHTML基本规范是什么？