第2章 HTML、XHTML标准ppt课件

第二章HTML、XHTML与Web标准,浏览器看到的是什么?,浏览者看到的google首页,浏览器看到的google首页,浏览器将读取到的页面代码,翻译成可以被人们阅读的图片文字声音和动画,这个过程被称为”解释”或”渲染”,为了确保在各种不同的浏览器中我们都能获得一致的页面效果,页面设计兼容性问题是非常重要和关键的.,网页,网页即是超文本，是通过超文本标记语言HTML（HypeTextMarkupLanguage）书写的一种纯文本文件，客户通过浏览器看到的包含了如文字、图像、声音和动画等多媒体信息的每一个页面，其本质是一个纯文本文件。浏览器对该纯文本文件进行了解释，才生成了多姿多彩的网页，除文本外，其它媒体素材（图像、声音、动画和影像等），都需要保存成单独的文件，通过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!linkedtextThisisanewparagraphThelistitem,HTML标记的分类(p38),头部标记：title,meta,link,style文本标记：font,b,i,u,strong,段落标记：p,hn,pre,marquee,br,hr列表标记：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标记的分类（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是TheExtensibleMarkupLanguage(可扩展标识语言)的简写。是一种能定义其他语言的语言，用于网络数据的转换和描述。,什么是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（CascadingStyleSheets，层叠样式表）行为标准语言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公司就是两个命名空间，可以在上面定义不同的标记，只要引用相应的XMLDTD就可以使用这些标记了,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.LooseB.TransitionalC.StrictD.Frameset3.Web标准是由谁制订的。（）A.MicrosoftB.NetscapeC.TheWorldWideWebConsortium（W3C）D.OSI4.html中的元素可分为块级(block)元素和行内(inline)元素，下列哪个元素是块级元素：（）A.B.C.D.,了解Dreamweaver的编辑环境,在Dreamweaver中定义和管理本地站点,管理本地站点使用“站点/管理站点”功能，将实现本地站点的管理。新建站点编辑站点复制站点删除站点导入和导出站点,管理网站中的文件,在站点窗口中可以做以下工作：新建文件夹编辑文件删除文件将文件设置为主页检查文件的