1、HTML基本标签（一）,第一章,本门课程目标,学完本门课程后，你能够： 制作界面美观大方、面向企业应用的静态商业网站 掌握Web开发的行业规范和标准,课程项目展示,贵美商城 首页 商品展示页（点击左边“商品分类”任一链接） 具体商品详细介绍页（点击任一商品图片） 购物车页面（点击“立刻购买”按钮） 登录页（点击右上方的导航菜单） 注册页（点击右上方的导航菜单） 帮助中心客服页面（点击右上方的导航菜单）,本章任务,制作图文并茂的商品介绍页,本章目标,使用HTML的基本结构创建网页 使用行级和块级标签组织页面内容 使用图像标签实现图文并茂的页面,什么是HTML,HTML：Hyper Text Ma
2、rkup Language 超文本标签语言 HTML：网页的“源码” 浏览器：“解释和执行”HTML源码的工具,HTML告知浏览器如何显示网页,HTML文档的结构,我的第一个网页 Hello World!,HTML 网页,头部部分,主体部分,标签标记 HTML 文档的开始和结束,网页标题,网页内容，可以是文本、图像等,这部分包括标题和其他说明信息，包括在 标签内,这部分包含文本、图像和链接，它包括在 标签内,HTML文档的基本结构,记事本UltraEdit,HTML的编辑工具,网页的摘要信息2-1,网页摘要信息利于浏览器解析和搜索引擎搜索： 使用标签,搜狐-中国最大的门户网站 ,网页的摘要信息
3、2-1,使用标签 （1）描述文档类型和字符编码 （2）描述搜索关键字和描述,提供搜索关键字和内容描述信息，方便搜索引擎的搜索,Meta标签,http-equiv属性:模拟http消息头(所谓消息头，是由w3c定义的一些关键字，浏览器与服务器都会遵守)。 content属性:消息头的属性值。 常见的两个消息头: （1） 模拟生成一个content-type消息头，告诉浏览器，返回的数据是html，编码是gbk。浏览器一定会以指定的gbk编码来打开该页面。需要注意：指 定的编码一定要与实际保存文件的编码一致。 （2）模拟生成一个refresh消息头，告诉浏览器，每隔2秒刷新该页面。,HTML页面中
4、的块和行,HTML标签分类（方便后续的布局设计）： 块级标签：显示为“块”状，前后隔一行 行级标签：按行逐一显示 分类好处：方便后续的布局设计,块级： 块内包含多行,行级：包括文字、图片等,块级标签,根据使用场合，块级标签又细分为： 基本块级标签 常用于布局的块级标签,块级元素与行内无素的区别,块级元素和行内元素是布局最基本的两种元素，常见的块级元素有div、p、form、ul、ol、li等，常用的行内元素有span、strong、em等块级元素会独占一行，默认情况下，其宽度自动填满其父元素宽度，行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容
5、而变化。块级元素可以设置width、height属性。行内元素设置width、height属性无效。注意，块级元素即使设置了宽度，仍然是独占一行的。,标题标签,一级标题二级标题三级标题四级标题五级标题六级标题,基本块级标签3-1,h1最大 h6最小 前后隔行,标题 标题,段落标签,北京欢迎你北京欢迎你，有梦想谁都了不起！/p有勇气就会有奇迹。,基本块级标签3-2,前后换行，类似教材中的段落,水平线标签,北京欢迎你北京欢迎你，有梦想谁都了不起！/p有勇气就会有奇迹。,基本块级标签3-3,横线用于内容分割,单个标签的闭合形式,练习基本块级标签,需求说明： 显示唐诗介绍（ UltraEdit环境 ）
6、,完成时间：20分钟,分析应使用哪些标签？,有序列表标签,注册步骤：填写信息 收电子邮件注册成功 ,常用于布局的块级标签7-1,有序列表,列表项1 ,无序列表标签, 新人上路指南 如何激活会员名？如何注册贵美会员？注册时密码设置有什么要求？贵美认证,常用于布局的块级标签7-2,无序列表,列表项1 ,定义描述标签,咖啡一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。可以提神，刺激神经。,常用于布局的块级标签7-3,这种效果可以和无序列表互相替代，因dt是块状元素，所以常用于图文混编的布局场合,标题 描述1 ,图片的HTML代码（后续讲解）商品名称：灿坤蒸气电熨斗商品价格：388元商品简介：
7、金钢低血超硬超顺滑,140ml透明大水箱设计,常用于布局的块级标签7-4,用定义描述标签实现图文混编的效果,文字有一定的缩进,表格百度 新浪 ,常用于布局的块级标签7-5,-表格-行-列（单元格）,常用于布局的块级标签7-6,表单,一般和table使用：., ,常用于布局的块级标签7-7,分区标签 ,div标签可内嵌到等标签内，作为普通块状元素使用,一般当作结构化块状元素使用，作为逻辑分区（分块）即容器来使用,新人上路div其实就是一个,小结,1、div-ul(ol)-li ：常用于分类导航或菜单等 2、div-dl-dt-dd ：常用于图文混编的场合 3、table-tr-td ：常用于图文
8、布局或显示数据 4、form-table-tr-td：常用于布局表单,请说出实际开发常用的4种块状结构是什么？,练习常用于布局的块级标签,需求说明： 实现简单的商品购买页,完成时间：25分钟,分析应使用哪些标签？,图像标签,行级标签3-1,为了不同浏览器之间的兼容，推荐使用title属性 ，确保能显示提示文字,alt属性与title属性,alt属性是图片的替换文字。title属性规定元素的额外信息，有视觉效果。alt属性： 1、alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户，以及视觉障碍的用户和使用屏幕阅读器的用户。当图片不显示的时候，图片的替换文字。 2、alt属性值得长度
9、必须少于100个英文字符 3、alt属性是img标签的必须属性，如果没有特别意义的图片，可以写alt=“” 4、alt属性是搜索引擎判断图片与文字是否相关的重要依据，alt属性添加到img主要的目的才是为了SEO title属性： 1、title属性并不是必须的。 2、title属性规定元素的额外信息，有视觉效果，当鼠标放到文字或是图片上时有文字显示。 3、title属性并不作为搜索引擎抓取图片的参考，更多倾向于用户体验的考虑。,范围标签 ：显示某行内的独特样式, 商品价格:仅售10元 ,行级标签3-2,文本等行级内容,设置红色、大号字突出显示,换行标签 ,北京欢迎你，有梦想谁都了不起！有勇气
10、就会有奇迹。北京欢迎你，为你开天辟地流动中的魅力充满朝气。北京欢迎你，在太阳下分享呼吸在黄土地刷新成绩。北京欢迎你，像音乐感动你让我们都加油去超越自己。,行级标签3-3,和的区别： 前后不换行,为什么需要W3C标准,W3C：World Wide Web Consortium，万维网联盟 W3C的职能：负责制定和维护web行业标准 W3C标准包括：列的标准： HTML内容方面：XHTML 样式美化方面：CSS 结构文档访问方面：OM 页面交互方面：ECMAScript ,制定统一的web标准,W3C,Netscape的图标,W3C提倡的Web结构,不规范的示例,一级主题 一级主题阐述文字 二级主
11、题 二级主题相关文字 项目列表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基本规范是什么？,
