《HTMLXHTML标准》PPT课件.ppt

第二章 HTML、XHTML 与Web标准,浏览器看到的是什么?,浏览者看到的google首页,浏览器看到的google首页,浏览器将读取到的页面代码, 翻译成可以被人们阅读的图片文字声音和动画, 这个过程被称为”解释”或”渲染”, 为了确保在各种不同的浏览器中我们都能获得 一致的页面效果, 页面设计兼容性问题是非常重要和关键的.,网 页,网页即是超文本，是通过超文本标记语言HTML（HypeText Markup Language）书写的一种纯文本文件， 客户通过浏览器看到的包含了如文字、图像、声音和动画等多媒体信息的每一个页面，其本质是一个纯文本文件。 浏览器对该纯文本文件进行了解释，才生成了多姿多彩的网页，除文本外，其它媒体素材（图像、声音、动画和影像等），都需要保存成单独的文件，通过URL嵌入到网页文件中。 可以看出，WWW服务主要是通过一个个多媒体网页提供给用户各种信息,HTML超文本标记语言,超文本标记语言HTML作为一种语言，它具有语言的一般特征，即它是一种符号系统，具有自己的词汇（符号）和语法（规则）。 所谓标记，就是作记号。如我们写文章时通常用大体字标记文章的标题，用换行空两格标记一个段落 所谓超文本，就是相比普通文本有超越的地方，如超文本可以通过超链接转到指定的某一页，而普通文本只能一页页翻，超文本还具有图像，视频，声音等元素，并能和用户交互，这些都是普通文本无法达到的,用HTML语言写出第一张网页,【例1-1】使用记事本输入，保存为1_1.htm 欢迎 网页设计很奇妙！ 预祝大家爱上它- ,本章要点,HTML文档的基本结构 标记(Tags)和元素( Elements ) HTML标记的分类 行内元素和块级元素 从HTML到XHTML的转变 html存在的问题和web标准 XHTML与HTML的区别 XHTML补充介绍（见另一幻灯片）,HTML文档的基本结构,打开1.txt,： 告诉浏览器HTML文档开始和结束的位置，其中包括head部分和body部分。HTML文档中所有的内容都应该在这两个标记之间，一个HTML文档总是以开始，以结束。,： HTML文件的头部标记，头部主要提供文档的描述信息，head部分的所有内容都不会显示在浏览器窗口中，在其中可以放置页面的标题以及页面的类型、使用的字符集、链接的其它脚本或样式文件等内容,： 用来指明文档的主体区域，网页所要显示的内容都放在这个标记内，其结束标记指明主体区域的结束,编写HTML网页文档的方法,HTML文档是一个纯文本文件，可以使用任何文本编辑器编写保存 使用记事本编辑一个html文件 使用Dreamweaver新建一个html文件,标记(Tags)和元素（Elements）,标记是HTML文档中一些有特定意义的符号，这些符号指明内容的含义或结构。标记总是放在三角括号中，大多数标记都是成对出现的，表示开始和结束。 不成对的也叫空标签或单标签 标记+标记之间的内容=元素。网页中文字，图像，链接等所有的内容都是以元素的形式出现在html代码里的。,例1 下面body内元素的个数是多少, 图片的说明内容 图片的说明内容 答案：5个，即1个a元素、1个img元素、2个p元素和1个hr元素。,HTML元素的结构,/,例2 找出下面html代码的错误,下列HTML元素的写法错在什么地方？ Congratulations! linked text This is a new paragraph The list item,HTML标记 的分类 (p38),头部标记：title, meta, link, style 文本标记：font, b, i, u , strong, 段落标记：p, hn, pre, marquee, br, hr 列表标记：ul, ol, li, dl, dt, dd 5) 超链接标记：a, map, area 6) 图像及媒体元素标记：img, embed, object 7) 表格标记：table, tr, td, th, tbody 8) 表单标记：form, input, textarea, select, option, fieldset, legend 9) 框架标记：frameset, frame, iframe 10) 容器标记：div, span,/h.asp,HTML标记 的分类（2）,为便于记忆，可将标记按出现的情况分为： 单标记：， ， ， 配对标记：大部分标记都是配对标记 成组标记：table，form，ul, ol, dl, frameset，fieldset及其子标记等，配对标记中很多都是成组标记,练习P39图3-1,行内元素和块级元素,行内元素(inline)是指元素与元素之间从左到右并排排列，只有当浏览器窗口容纳不下才会转到下一行，块级元素(block)是指每个元素占据浏览器一整行位置，块级元素与块级元素之间自动换行，从上到下排列。 块级元素内部可包含行内元素或块级元素，行内元素内部可包含行内元素，但不得包含块级元素，另外，块级元素元素内部也不能包含其他的块级元素,行内元素和块级元素举例,行内元素：a，img，font，b，i，u， span，input 块级元素：p, div, hn, pre, hr, ul, ol, li, form 快速记忆法：即所有文本标记，链接标记和图像标记是行内元素 所有段落标记，列表标记是块级元素,行内元素和块级元素示例, 粗体文字 图片的标题 图片的说明内容 粗体文字 粗体文字 ,常见的html标记的属性,公共属性： align（对齐方式），border（边框），title（提示文字），src（链接的文件路径），style（引入CSS行内样式），id，name 特有属性： ,html存在的问题和web标准,HTML语言最开始是用来描述文档的结构的，如标题，段落等标记，后来因为人们还想用它控制文档的外观，HTML又增加了一些控制字体，对齐等方面的标记和属性，这样做的结果是HTML既可以用来描述文档的结构，又能表示文档的外观，但是两方面都描述不好。 于是人们想出了web标准，即结构和表现分离，网页由结构，表现和行为组成。 XHTML是在HTML4.0的基础上，用XML的规则对其进行扩展，一种为了适应XML而重新改造的HTML。用HTML的新版本XHTML描述文档的结构，用CSS控制文档的表现，因此XHTML和CSS就是内容和形式的关系，由XHTML确定网页的内容，而通过CSS来决定页面的表现形式。 XML是The Extensible Markup Language(可扩展标识语言)的简写。是一种能定义其他语言的语言， 用于网络数据的转换和描述 。,什么是web标准？ 表格布局的网页（例子：18-20） DIV+CSS布局的页面 例子：背景应用（样式1.jpg样式3.jpg） DIV+CSS的优与弊,同样的网页内容，不同的表现形式,2,4,3,3,1,4,2,1,内容文件.html(含有四块div)，形式文件.css,例子参见：样式1.jpg样式3.jpg,Web标准,网页由结构，表现和行为组成， 1内容：内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。注意这里强调的“真正”，是指纯粹的数据信息本身。 如：忆江南(1)唐.白居易江南好，风景旧曾谙。(2)日出江花红胜火，春来江水绿如蓝，(3)能不忆江南。作者介绍772846 ，字乐天，太原人。唐德宗朝进士 2结构：可以看到上面的文本信息本身已经完整。但是混乱一团，难以阅读和理解，我们必须给它格式化一下。把它分成标题、作者、章、节、段落和列表等。,Web标准结构,标题 忆江南(1) 作者 唐.白居易 正文 江南好，风景旧曾谙。(2) 日出江花红胜火，春来江水绿如蓝，(3) 能不忆江南。 节1作者介绍 772846 ，字乐天，太原人。唐德宗朝进士,Web标准表现,表现（Presentation）：虽然定义了结构，但是内容还是原来的样式没有改变，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西，我们称之为“表现”,行为,行为：就是对内容的交互及操作效果。例如，使用JavaScript可以响应鼠标的点击和移动，可以判断一些表单提交，使我们的操作能和网页进行交互。,网页的组成,网页是由四层信息构成的一个共同体：,Web标准的实现,结构标准语言 （1）XML （2）XHTML 表现标准语言 CSS（Cascading Style Sheets，层叠样式表） 行为标准语言 JavaScript,结 构,表 现,行 为,XHTML,CSS,JavaScript,关于Xhtml 标准 的补充介绍 -见下一个幻灯片,XHTML与HTML的区别,1. 所有XHTML文档必须在文档的第一行有一个文档类型的声明（DOCTYPE），如： 文档类型声明是用来说明XHTML使用标准的类型的，有Transitional，Strict和Frameset三种类型，Transitional是过渡类型的XHTML，表明兼容原来的HTML标记和属性；Strict是严格型的应用方式，在这种形式下，不能使用HTML中任何样式表现的标记（如font）和属性（如bgcolor）；Frameset是针对框架网页的应用方式,XHTML与HTML的区别(续),2XHTML文档可通过xmlns定义命名空间(Namespace)，如 表示该xhtml文档的命名空间是这个，如果我们换一个命名空间，就可以自定义xhtml文档的标记 小王 小颜 小刘 A公司和B公司就是两个命名空间，可以在上面定义不同的标记，只要引用相应的XML DTD就可以使用这些标记了,XHTML与HTML的区别(续),3文档里必须具有html，head，body，title这些元素。 4在HTML语言规范的基础上，XHTML对标记还有下面一些额外的要求： 1）标记名和属性名必须小写； 2）属性值必须用双引号引起； 3）所有标记包括单标记都必须封闭。 4）不允许省略属性值（如错,例3 找出符合xhtml语法规范的语句,例3：下列哪条html语句的写法符合XHTML规范： （ ） A . B. C. D. ,复习题,1. 下列哪条不是XHTML规范的要求： （ ） A. 标记名必须小写 B. 属性名必须小写 C. 属性值必须小写 D. 属性值不能省略 2. 下列哪种不是XHTML的DTD： （ ） A. Loose B. Transitional C. Strict D. Frameset 3. Web标准是由谁制订的。 （ ） A. Microsoft B. Netscape C. The World Wide Web Consortium（W3C） D. OSI 4. html中的元素可分为块级(block)元素和行内(inline)元素，下列哪个元素是块级元素： （ ） A. B. C. D. ,了解 Dreamweaver的编辑环境,在Dreamweaver中 定义和管理本地站点,管理本地站点 使用“站点/管理站点”功能，将实现本地站点的管理。 新建站点 编辑站点 复制站点 删除站点 导入和导出站点,管理网站中的文件,在站点窗口中可以做以下工作： 新建文件夹 编辑文件 删除文件 将文件设置为主页 检查文件