使用html语言和css开发商业站点

1、HTML基本标签（一）第一章课程地位每阶段已包括：项目实战、COT课程 总课时： 1008C#OOPJavaScriptT-SQLJava OOPS2350Y2344JSPS2：Java阶段项目预备课程WinFormsLogic JavaS1314S1：.NET阶段项目 HibernateN-TierAjaxSpringStrutsHTMLC#NTCProject知识Y2：.NET毕业设计项目COTCOTCOTY2：Java毕业设计项目目标岗位标准手册就业技能结构图客户端技能结构图本门课程目标学完本门课程后，你能够：制作界面美观大方、面向企业应用的静态商业网站掌握Web开发的行业规范和标准课程

2、项目展示贵美商城首页商品展示页（点击左边“商品分类”任一链接）具体商品详细介绍页（点击任一商品图片）购物车页面（点击“立刻购买”按钮）登录页（点击右上方的导航菜单） 注册页（点击右上方的导航菜单） 帮助中心客服页面（点击右上方的导航菜单） 教员现场演示贯穿项目预习检查HTML文档的基本结构是什么？什么是块级、行级标签？、分别代表什么？插入一条直线用什么标签？本章任务制作图文并茂的商品介绍页 本章目标使用HTML的基本结构创建网页使用行级和块级标签组织页面内容 使用图像标签实现图文并茂的页面什么是HTMLHTML：Hyper Text Markup Language 超文本标签语言HTML：网页

3、的“源码”浏览器：“解释和执行”HTML源码的工具 HTML告知浏览器如何显示网页HTML文档的结构我的第一个网页 Hello World!HTML 网页头部部分主体部分标签标记 HTML 文档的开始和结束网页标题网页内容，可以是文本、图像等这部分包括标题和其他说明信息，包括在 标签内这部分包含文本、图像和链接，它包括在 标签内HTML文档的基本结构记事本UltraEditHTML的编辑工具操作演示1：在记事本里创建网页 网页的摘要信息2-1 网页摘要信息利于浏览器解析和搜索引擎搜索：使用标签 搜狐-中国最大的门户网站 网页的摘要信息2-1 使用标签（1）描述文档类型和字符编码（2）描述搜索关

4、键字和描述提供搜索关键字和内容描述信息，方便搜索引擎的搜索 HTML页面中的块和行HTML标签分类（方便后续的布局设计）：块级标签：显示为“块”状，前后隔一行 行级标签：按行逐一显示 分类好处：方便后续的布局设计 块级：块内包含多行行级：包括文字、图片等块级标签根据使用场合，块级标签又细分为：基本块级标签 常用于布局的块级标签 标题标签 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题基本块级标签3-1h1最大h6最小前后隔行操作演示2：标题标签 标题标题段落标签 北京欢迎你 北京欢迎你，有梦想谁都了不起！/p 有勇气就会有奇迹。基本块级标签3-2前后换行，类似教材中的段落操作演示3

5、：段落标签 水平线标签 北京欢迎你 北京欢迎你，有梦想谁都了不起！/p 有勇气就会有奇迹。基本块级标签3-3横线用于内容分割单个标签的闭合形式操作演示4：水平线标签 练习基本块级标签需求说明：显示唐诗介绍（ UltraEdit环境 ） 完成时间：20分钟分析应使用哪些标签？有序列表标签 注册步骤： 填写信息 收电子邮件 注册成功 常用于布局的块级标签7-1有序列表操作演示5：有序列表标签 列表项1 无序列表标签 新人上路指南 如何激活会员名？ 如何注册贵美会员？ 注册时密码设置有什么要求？ 贵美认证常用于布局的块级标签7-2无序列表操作演示6：无序列表标签 列表项1 定义描述标签 咖啡 一种黑

6、色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。 可以提神，刺激神经。常用于布局的块级标签7-3这种效果可以和无序列表互相替代，因dt是块状元素，所以常用于图文混编的布局场合操作演示7：dl和dt标签 标题 描述1 图片的HTML代码（后续讲解） 商品名称：灿坤蒸气电熨斗 商品价格：388元 商品简介：金钢低血超硬超顺滑,140ml透明大水箱设计常用于布局的块级标签7-4用定义描述标签实现图文混编的效果文字有一定的缩进表格 百度 新浪 常用于布局的块级标签7-5-表格 -行 -列（单元格）演示示例8：表格标签 常用于布局的块级标签7-6表单 一般和table使用： . . .演示示例9：表单标

7、签 常用于布局的块级标签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分钟分析应使用哪些标签？共性问题集中讲解常见调试问题及解

8、决办法代码规范问题共性问题集中讲解图像标签 行级标签3-1为了不同浏览器之间的兼容，推荐使用title属性 ，确保能显示提示文字操作演示11：图像标签 范围标签 ：显示某行内的独特样式 商品价格:仅售10元行级标签3-2操作演示12：span标签 文本等行级内容设置红色、大号字突出显示 换行标签 北京欢迎你，有梦想谁都了不起！ 有勇气就会有奇迹。 北京欢迎你，为你开天辟地 流动中的魅力充满朝气。 北京欢迎你，在太阳下分享呼吸 在黄土地刷新成绩。 北京欢迎你，像音乐感动你 让我们都加油去超越自己。 行级标签3-3和的区别：前后不换行操作演示13：换行标签 为什么需要W3C标准W3C：World

9、Wide Web Consortium，万维网联盟W3C的职能：负责制定和维护web行业标准W3C标准包括：列的标准：HTML内容方面：XHTML样式美化方面：CSS 结构文档访问方面：OM页面交互方面：ECMAScript 制定统一的web标准W3CNetscape的图标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结构的语义化，遵守XH