HTML基本标签(一).ppt

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秒刷新该页面。

4、,HTML页面中的块和行,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,横线用于内容分割,单个标签的闭合形式,练习基本块级标签,需

6、求说明： 显示唐诗介绍（ UltraEdit环境 ）,完成时间：20分钟,分析应使用哪些标签？,有序列表标签, 注册步骤： 填写信息 收电子邮件 注册成功 ,常用于布局的块级标签7-1,有序列表, 列表项1 ,无序列表标签, 新人上路指南 如何激活会员名？ 如何注册贵美会员？ 注册时密码设置有什么要求？ 贵美认证 ,常用于布局的块级标签7-2,无序列表, 列表项1 ,定义描述标签, 咖啡 一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。 可以提神，刺激神经。 ,常用于布局的块级标签7-3,这种效果可以和无序列表互相替代，因dt是块状元素，所以常用于图文混编的布局场合, 标题 描述1 ,

7、图片的HTML代码（后续讲解） 商品名称：灿坤蒸气电熨斗 商品价格：388元 商品简介：金钢低血超硬超顺滑,140ml透明大水箱设计 ,常用于布局的块级标签7-4,用定义描述标签实现图文混编的效果,文字有一定的缩进,表格 百度 新浪 ,常用于布局的块级标签7-5,-表格 -行 -列（单元格）,常用于布局的块级标签7-6,表单,一般和table使用： . . . , ,常用于布局的块级标签7-7,分区标签 ,div标签可内嵌到等标签内，作为普通块状元素使用,一般当作结构化块状元素使用，作为逻辑分区（分块）即容器来使用, 新人上路 div其实就是一个. ,小结,1、div-ul(ol)-li ：常

8、用于分类导航或菜单等 2、div-dl-dt-dd ：常用于图文混编的场合 3、table-tr-td ：常用于图文布局或显示数据 4、form-table-tr-td：常用于布局表单,请说出实际开发常用的4种块状结构是什么？,练习常用于布局的块级标签,需求说明： 实现简单的商品购买页,完成时间：25分钟,分析应使用哪些标签？,图像标签, ,行级标签3-1,为了不同浏览器之间的兼容，推荐使用title属性 ，确保能显示提示文字,alt属性与title属性,alt属性是图片的替换文字。title属性规定元素的额外信息，有视觉效果。 alt属性： 1、alt属性是考虑到不支持图像显示或者图像显示被

9、关闭的浏览器的用户，以及视觉障碍的用户和使用屏幕阅读器的用户。当图片不显示的时候，图片的替换文字。2、alt属性值得长度必须少于100个英文字符3、alt属性是img标签的必须属性，如果没有特别意义的图片，可以写alt=“”4、alt属性是搜索引擎判断图片与文字是否相关的重要依据，alt属性添加到img主要的目的才是为了SEO title属性： 1、title属性并不是必须的。2、title属性规定元素的额外信息，有视觉效果，当鼠标放到文字或是图片上时有文字显示。3、title属性并不作为搜索引擎抓取图片的参考，更多倾向于用户体验的考虑。,范围标签 ：显示某行内的独特样式, 商品价格:仅售10

10、元 ,行级标签3-2,文本等行级内容,设置红色、大号字突出显示,换行标签 , 北京欢迎你，有梦想谁都了不起！ 有勇气就会有奇迹。 北京欢迎你，为你开天辟地 流动中的魅力充满朝气。 北京欢迎你，在太阳下分享呼吸 在黄土地刷新成绩。 北京欢迎你，像音乐感动你 让我们都加油去超越自己。 ,行级标签3-3,和的区别： 前后不换行,为什么需要W3C标准,W3C：World Wide Web Consortium，万维网联盟 W3C的职能：负责制定和维护web行业标准 W3C标准包括：列的标准： HTML内容方面：XHTML 样式美化方面：CSS 结构文档访问方面：OM 页面交互方面：ECMAScript

11、 ,制定统一的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、三种级别：Stri