基于Web标准的网页设计ppt课件.ppt

补充阅读 HTML超文本标记语言 HTML HyperTextMarkupLanguage 超文本标记语言 是一种建立超文本 超媒体文档的语言 它用标签 Tag 标记文档中的文本及图像等各种元素 如 文字 图象 声音 动画等各种资源 指示浏览器如何显示这些元素 所建立的文本文件的扩展名必须为html或htm 用它编写的html文件可以被网上任何人浏览 浏览器是通过解释的方式来执行HTML代码 将信息展示给浏览者的 HTML的历史 超文本标记语言HTML的发展历程如下图所示 HTML与编程语言的区别 HTML不是一种计算机编程语言 而是一种描述文档结构的语言 或者说排版语言 HTML是弱语法语言 随便怎么写都可以 计算机尽力去理解执行 不理解的按原样显示 而编程语言是严格语法的语言 写错一点点计算机就不执行 报告错误 HTML语言不像大多数编程语言那样需要编译成指令后执行 而是每次由浏览器解释执行 HTML文档的基本结构 告诉浏览器HTML文档开始和结束的位置 其中包括head部分和body部分 HTML文档中所有的内容都应该在这两个标记之间 一个HTML文档总是以开始 以结束 HTML文件的头部标记 头部主要提供文档的描述信息 head部分的所有内容都不会显示在浏览器窗口中 在其中可以放置页面的标题以及页面的类型 使用的字符集 链接的其它脚本或样式文件等内容 用来指明文档的主体区域 网页所要显示的内容都放在这个标记内 其结束标记指明主体区域的结束 说明 HTML 标记和之间包含了整个文档 大多数浏览器会忽略这两个符号以外的任何文字和符号 Head 标记和之间包含的文字是关于文件的一些常规信息 如标题 脚本 不会作为文档文字本身的一部分显示出来 常见的表示嵌入任何附加信息 Body 标记和之间包含的文字是用户在浏览时实际看到的文档正文信息 文档标题 出现在标记和之间 用标记和 其中n为整数1 6 指定文档标题的级别 H1最大 H6最小 编写HTML网页文档的方法 HTML文档是一个纯文本文件 可以使用任何文本编辑器编写保存使用记事本编辑一个html文件使用Dreamweaver新建一个html文件 标记 Tags 和元素 Elements 标记是HTML文档中一些有特定意义的符号 这些符号指明内容的含义或结构 标记总是放在三角括号中 大多数标记都是成对出现的 表示开始和结束 把HTML标记如 和标记之间的内容组合称为元素 网页中文字 图像 链接等所有的内容都是以元素的形式出现在html代码中的 标记相同而标记中的内容不同应视为不同的元素 同一网页中标记和标记中的内容都相同的元素如果出现两次也应视为两个不同的元素 因为任一个元素在网页中浏览器都会为它分配唯一的id 不存在两个元素的id完全相同的情况 HTML标记的分类 1 头部标记 title meta link style2 文本标记 font b i u strong 3 段落标记 p hn pre marquee br hn中的n为整数1 6 指定文档标题的级别 H1最大 H6最小 4 列表标记 ul ol li dl dt dd5 超链接标记 a map area6 图像及媒体元素标记 img embed object7 表格标记 table tr td th tbody8 表单标记 form input textarea select option fieldset legend9 框架标记 frameset frame iframe10 容器标记 div span HTML标记的分类 为便于记忆 可将标记按出现的情况分为 单标记 配对标记 大部分标记都是配对标记成组标记 table form ul ol dl frameset fieldset及其子标记等 配对标记中很多都是成组标记 行内元素和块级元素 行内元素 inline 是指元素与元素之间从左到右并排排列 只有当浏览器窗口容纳不下才会转到下一行 块级元素 block 是指每个元素占据浏览器一整行位置 块级元素与块级元素之间自动换行 从上到下排列 块级元素内部可包含行内元素或块级元素 行内元素内部可包含行内元素 但不得包含块级元素 另外 块级元素元素内部也不能包含其他的块级元素 行内元素和块级元素举例 行内元素 a img font b i u span input块级元素 p div hn pre hr ul ol li form快速记忆法 即所有文本标记 链接标记和图像标记是行内元素所有段落标记 列表标记是块级元素 行内元素和块级元素示例 粗体文字图片的标题图片的说明内容粗体文字粗体文字 例1下面body内元素的个数是多少 图片的说明内容图片的说明内容答案 5个 即1个a元素 1个img元素 2个p元素和1个hr元素 例2请找出下面html代码的错误 下列HTML元素的写法错在什么地方 Congratulations linkedtextThisisanewparagraphThelistitem 带有属性的HTML元素的结构 常见的html标记的属性 公共属性 id namealign 对齐方式 border 边框 title 提示文字 src 链接的文件路径 style 引入CSS行内样式 特有属性 补充阅读 Web标准 网页是由四层信息构成的一个共同体 html存在的问题 HTML语言最开始是用来描述文档的结构的 如标题 段落等标记 后来因为人们还想用它控制文档的外观 HTML又增加了一些控制字体 对齐等方面的标记和属性 这样做的结果是HTML既可以用来描述文档的结构 又能表示文档的外观 但是两方面都描述不好 于是人们想出了web标准 即结构和表现分离 网页由结构 表现和行为组成 用HTML的新版本XHTML描述文档的结构 XHTML是一种为了适应XML而重新改造的HTML 用CSS控制文档的表现 因此XHTML和CSS就是内容和形式的关系 由XHTML确定网页的内容 而通过CSS来决定页面的表现形式 Web标准 内容 网页由内容 表现和行为组成 1 内容 内容就是页面实际要传达的真正信息 包含数据 文档或者图片等 注意这里强调的 真正 是指纯粹的数据信息本身 如 忆江南 1 唐 白居易江南好 风景旧曾谙 2 日出江花红胜火 春来江水绿如蓝 3 能不忆江南 作者介绍772 846 字乐天 太原人 唐德宗朝进士2 结构 可以看到上面的文本信息本身已经完整 但是混乱一团 难以阅读和理解 我们必须给它格式化一下 把它分成标题 作者 章 节 段落和列表等 Web标准 结构 标题忆江南 1 作者唐 白居易正文江南好 风景旧曾谙 2 日出江花红胜火 春来江水绿如蓝 3 能不忆江南 节1作者介绍772 846 字乐天 太原人 唐德宗朝进士 Web标准 表现 表现 Presentation 虽然定义了结构 但是内容还是原来的样式没有改变 例如标题字体没有变大 正文的颜色也没有变化 没有背景 没有修饰 所有这些用来改变内容外观的东西 我们称之为 表现 Web标准 行为 行为 就是对内容的交互及操作效果 例如 使用JavaScript可以响应鼠标的点击和移动 可以判断一些表单提交 使我们的操作能和网页进行交互 Web标准的实现 结构标准语言 1 XML 2 XHTML表现标准语言CSS CascadingStyleSheets 层叠样式表 行为标准语言JavaScript 结构 表现 行为 XHTML CSS JavaScript XHTML与HTML的区别 1 所有XHTML文档必须在文档的第一行有一个文档类型的声明 DOCTYPE 如 文档类型声明是用来说明XHTML使用标准的类型的 有Transitional Strict和Frameset三种类型 Transitional是过渡类型的XHTML 表明兼容原来的HTML标记和属性 Strict是严格型的应用方式 在这种形式下 不能使用HTML中任何样式表现的标记 如font 和属性 如bgcolor Frameset是针对框架网页的应用方式 XHTML与HTML的区别 2 XHTML文档可通过xmlns定义命名空间 Namespace 如 表示该xhtml文档的命名空间是这个 如果我们换一个命名空间 就可以自定义xhtml文档的标记 XHTML与HTML的区别 3 文档里必须具有html head body title这些元素 4 在HTML语言规范的基础上 XHTML对标记还有下面一些额外的要求 1 标记名和属性名必须小写 2 属性值必须用双引号引起 3 所有标记包括单标记都必须封闭 4 不允许省略属性值 如错 动态网页实现技术简介 1 CGI CommonGatewayInterface 通用的网关接口 CGI是外部程序和Web服务器之间的标准编程接口 是为了扩展HTML语言所写静态主页的功能而设立的 CGI是在WebServer端运行的一个可执行程序 由主页的一个热链接激活进行调用 并对该程序的返回结果进行处理 显示在主页上 CGI是最早的实现动态Web页的技术 2 ASP ActiveServerPages 动态服务器页 ASP是用附加特性扩展了的标准HTML文件 可以认为ASP是一种类似HTML Script与CGI的结合体 但是其运行效率却要比CGI高 ASP页面可以使用脚本语言 如VBScript JavaScript 编写 脚本程序代码在客户端隐藏 使用它可以创建和运行动态 交互的Web服务器应用程序 ASP页面可以通过内置组件ADO ActiveXDataObjects ADO再通过ODBC实现客户端在线存取数据库 并将结果返回给用户的浏览器 ASP文件的扩展名是 ASP 在服务器端执行 客户端一般无法下载到源文件 还可以微软提供的专用加密软件对源文件进行加密 ASP默认的脚本语言是VBScript 用来标识 2 ASP NET 基于 NET框架的动态服务器页 ASP NET是微软近些年新推出的动态网页设计技术 代码和页面可以分离 保护源代码 比ASP安全性好 效率高 功能更强 ASP NET革命性的变化是在网页中也使用基于事件的处理 可以指定处理的后台代码文件 可以使用C VB J 作为后台代码的语言 需要IE6 0浏览器才支持 ASP NET文件的扩展名是 ASPXASP NET页面需要在VS2003 2005 2008 2010中开发 编译 3 JSP JavaServerPages Java服务器页 JSP是由SUN公司倡导并在许多公司参与下而共同建立的一种动态网页技术标准 主要特点 将内容的生成和显示分离 可以保护源代码 可以用于各种基于HTML的Web浏览器 JSP页面的内置脚本语言是Java语言 所有JSP页面都被编译成为JavaServlet 所以它具有Java技术的所有好处 一次编写多处可用 可以跨软 硬件平台 JSP文件的扩展名是 JSP 4 PHP HypertextPre Processor 超