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