TP01(HTML基本标签).ppt

Chapter 第一章 就业技能结构图 客户端技能结构图 本门课程目标 学完本门课程后，你能够： 制作界面美观大方、面向企业应用的静态商业网站 掌握Web开发的行业规范和标准 课程项目展示 贵美商城 首页 商品展示页（点击左边“商品分类”任一链接） 具体商品详细介绍页（点击任一商品图片） 购物车页面（点击“立刻购买”按钮） 登录页（点击右上方的导航菜单） 注册页（点击右上方的导航菜单） 帮助中心客服页面（点击右上方的导航菜单） 预习检查 HTML文档的基本结构是什么？ 什么是块级、行级标签？ h1、p、hr分别代表什么？ 插入一条直线用什么标签？ 本章任务 制作图文并茂的商品介绍页 本章目标 使用HTML的基本结构创建网页 使用行级和块级标签组织页面内容 使用图像标签实现图文并茂的页面 什么是HTML HTML：Hyper Text Markup Language 超文本标签语言 HTML：网页的“源码” 浏览器：“解释和执行”HTML源码的工具 HTML文档的基本结构 HTML文档的结构 HTML的编辑工具 网页的摘要信息2-1 网页的摘要信息2-1 HTML页面中的块和行 块级标签 基本块级标签3-1 标题标签 基本块级标签3-2 段落标签 基本块级标签3-3 水平线标签 练习——基本块级标签 需求说明： 显示唐诗介绍（ UltraEdit环境 ） 常用于布局的块级标签7-1 有序列表标签 常用于布局的块级标签7-2 无序列表标签 常用于布局的块级标签7-3 定义描述标签 常用于布局的块级标签7-4 用定义描述标签实现图文混编的效果 常用于布局的块级标签7-5 表格 table tr td百度/td td新浪/td /tr …… /dl 常用于布局的块级标签7-6 表单 常用于布局的块级标签7-7 分区标签 div 小结 1、div-ul(ol)-li ：常用于分类导航或菜单等 2、div-dl-dt-dd ：常用于图文混编的场合 3、table-tr-td ：常用于图文布局或显示数据 4、form-table-tr-td：常用于布局表单 练习——常用于布局的块级标签 需求说明： 实现简单的商品购买页 共性问题集中讲解 行级标签3-1 图像标签 行级标签3-2 范围标签span ：显示某行内的独特样式 行级标签3-3 换行标签 br/ 为什么需要W3C标准 W3C：World Wide Web Consortium，万维网联盟 W3C的职能：负责制定和维护web行业标准 W3C标准包括：列的标准： HTML内容方面：XHTML 样式美化方面：CSS 结构文档访问方面：OM 页面交互方面：ECMAScript …… W3C提倡的Web结构 不规范的示例 W3C提倡的Web结构 XHTML 1.0基本规范 练习——行级元素 需求说明： 总结 行级和块级标签有什么区别？用途？ 块级标签分为几类，分别包含哪些？ 常用的4种块状结构是什么？ W3C提倡的Web页结构是什么？ XHTML基本规范是什么？ 作业 本章内容掌握情况 XXX（描述学生对本章内容的掌握情况） 课后作业 必做 教员备课时在此添加内容 选做 教员备课时在此添加内容 提交时间：xxx 提交形式(纸质or电子) 作业情况：XXX（抽查情况） 说明图片是dt-标题 下面的文字是dd-描述 说明样式方面的内容后续章节将学习 使用ol li有序列表，ul li无序列表和dl dt dd定义列表实现简单的商品购买页 过度： 标准的由来，多个浏览器厂商的竞争、HTML编码混乱 标准的由来，多个浏览器厂商的竞争、HTML编码混乱 遵守国际化WEB标准，确保多个浏览器都兼容 W3C-万维网联盟，负责制定web行业标准，它包括一系列的标准。 重点强调我们这门课程需要严格遵守HTML 4.0.1/标准XHTML1.0，两者兼容。 说明：具体规范将随课程边学边告诉大家，DOM和ECMAScript下学期会学习； …… body h1北京欢迎你/h1 hr / p北京欢迎你，有梦想谁都了不起！/p p有勇气就会有奇迹。/p /body …… 横线用于内容分割 单个标签的闭合形式 操作演示4：水平线标签 h