第2章HTML、XHTML标准

1、中国高等院校计算机基础教育课程体系规划教材基于基于Web标准的网页设计标准的网页设计第二章 HTML、XHTML与Web标准 本章要点vHTML文档的基本结构文档的基本结构v标记标记(Tags)和元素和元素( Elements ) HTML标记的分类 行内元素和块级元素v2.3 从从HTML到到XHTML的转变的转变 html存在的问题和web标准 XHTML与HTML的区别 (X)HTML文档的基本结构：告诉浏览器：告诉浏览器HTML文档开文档开始和结束的位置，其中包括始和结束的位置，其中包括head部分和部分和body部分。部分。HTML文档中所有的内容都应该在这文档中所有的内容都应该在这

2、两个标记之间，一个两个标记之间，一个HTML文档总是以文档总是以开始，以开始，以结束。结束。：HTML文件的头部标记，头文件的头部标记，头部主要提供文档的描述信息，部主要提供文档的描述信息，head部分的所有部分的所有内容都不会显示在浏览器窗口中，在其中可以内容都不会显示在浏览器窗口中，在其中可以放置放置页面的标题页面的标题以及以及页面的类型页面的类型、使用的字符、使用的字符集、链接的其它脚本或样式文件等内容集、链接的其它脚本或样式文件等内容：用来指明文档的主体区域，：用来指明文档的主体区域，网页所要显示的内容都放在这个标记内，其网页所要显示的内容都放在这个标记内，其结束标记结束标记指明主体区

3、域的结束指明主体区域的结束 编写HTML网页文档的方法vHTML文档是一个纯文本文件，可以使用任何文文档是一个纯文本文件，可以使用任何文本编辑器编写保存本编辑器编写保存v使用使用记事本记事本编辑一个编辑一个html文件文件v使用使用Dreamweaver新建一个新建一个html文件文件标记(Tags)和元素（Elements） v 标记是标记是HTML文档中一些有特定意义的符号，这些符号指文档中一些有特定意义的符号，这些符号指明明内容的含义或结构内容的含义或结构。标记总是放在三角括号中，大多数。标记总是放在三角括号中，大多数标记都是标记都是成对成对出现的，表示开始和结束。出现的，表示开始和结束

4、。v 把把HTML标记如标记如和标记之间的内容组合称为和标记之间的内容组合称为元元素素。网页中文字，图像，链接等所有的内容都是以。网页中文字，图像，链接等所有的内容都是以元素元素的的形式出现在形式出现在html代码里的。标记相同而标记中的内容不同代码里的。标记相同而标记中的内容不同应视为不同的元素，同一网页中标记和标记中的内容都相应视为不同的元素，同一网页中标记和标记中的内容都相同的元素如果出现两次也应视为两个不同的元素，因为任同的元素如果出现两次也应视为两个不同的元素，因为任一个元素在网页中浏览器都会为它分配唯一的一个元素在网页中浏览器都会为它分配唯一的id，不存在，不存在两个元素的两个元素

5、的id也完全相同的情况。也完全相同的情况。 例1 下面body内元素的个数是多少图片的说明内容图片的说明内容图片的说明内容图片的说明内容答案答案：5个，即个，即1个个a元素、元素、1个个img元素、元素、2个个p元素元素和和1个个hr元素。元素。 带有属性的HTML元素的结构 /例2 找出下面html代码的错误v下列下列HTML元素的写法错在什么地方？元素的写法错在什么地方？vv Congratulations! vlinked textvThis is a new paragraph1.The list itemHTML标记 的分类v头部标记：头部标记：title, meta, link,

6、stylev文本标记：文本标记：font, b, i, u , strong,v段落标记：段落标记：p, hn, pre, marquee, br, hrv列表标记：列表标记：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,

7、 frame, iframe10)容器标记：容器标记：div, spanHTML标记 的分类（2）为便于记忆，可将标记按出现的情况分为：为便于记忆，可将标记按出现的情况分为：v单标记单标记：， ， ， v配对标记配对标记：大部分标记都是配对标记：大部分标记都是配对标记1.成组标记成组标记：table，form，ul, ol, dl, frameset，fieldset及其子标记等，配对标记中很多都是成及其子标记等，配对标记中很多都是成组标记组标记 行内元素和块级元素 v行内元素行内元素(inline)是指元素与元素之间从左到右并是指元素与元素之间从左到右并排排列，只有当浏览器窗口容纳不下才会转

8、到下排排列，只有当浏览器窗口容纳不下才会转到下一行，一行，块级元素块级元素(block)是指每个元素占据浏览器是指每个元素占据浏览器一整行位置，块级元素与块级元素之间自动换行，一整行位置，块级元素与块级元素之间自动换行，从上到下排列。从上到下排列。v块级元素内部可包含行内元素或块级元素，行内块级元素内部可包含行内元素或块级元素，行内元素内部可包含行内元素，但不得包含块级元素，元素内部可包含行内元素，但不得包含块级元素，另外，块级元素另外，块级元素元素内部也不能包含其他的元素内部也不能包含其他的块级元素块级元素 行内元素和块级元素举例v行内元素：行内元素：a，img，font，b，i，u， sp

9、an，inputv块级元素：块级元素：p, div, hn, pre, hr, ul, ol, li, form v快速记忆法：即所有文本标记，链接标记和图像快速记忆法：即所有文本标记，链接标记和图像标记是行内元素标记是行内元素v所有段落标记，列表标记是块级元素所有段落标记，列表标记是块级元素行内元素和块级元素示例粗体文字粗体文字图片的标题图片的标题图片的说明内容图片的说明内容粗体文字粗体文字粗体文字粗体文字常见的html标记的属性v公共属性：公共属性：v align（对齐方式），（对齐方式），border（边框），（边框），title（提（提示文字），示文字），src（链接的文件路径），（链

10、接的文件路径），style（引入（引入CSS行内样式），行内样式），id，namev特有属性：特有属性： vhtml存在的问题和web标准 v HTML语言最开始是用来描述语言最开始是用来描述文档的结构文档的结构的，如标题，段的，如标题，段落等标记，后来因为人们还想用它控制落等标记，后来因为人们还想用它控制文档的外观文档的外观，HTML又增加了一些控制字体，对齐等方面的标记和属性，又增加了一些控制字体，对齐等方面的标记和属性，这样做的结果是这样做的结果是HTML既可以用来描述文档的结构，又能既可以用来描述文档的结构，又能表示文档的外观，但是两方面都描述不好。表示文档的外观，但是两方面都描述不好

11、。v 于是人们想出了于是人们想出了web标准，即标准，即结构结构和和表现表现分离，网页由分离，网页由结结构构，表现表现和和行为行为组成，用组成，用HTML的新版本的新版本XHTML描述文描述文档的结构，档的结构，XHTML是一种为了适应是一种为了适应XML而重新改造的而重新改造的HTML。用。用CSS控制文档的表现，因此控制文档的表现，因此XHTML和和CSS就就是内容和形式的关系，由是内容和形式的关系，由XHTML确定网页的内容，而通确定网页的内容，而通过过CSS来决定页面的表现形式。来决定页面的表现形式。 Web标准v网页由结构，表现和行为组成，网页由结构，表现和行为组成，v1内容：内容就

12、是页面实际要传达的真正信息，内容：内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。注意这里强调的包含数据、文档或者图片等。注意这里强调的“真正真正”，是指，是指纯粹的数据信息纯粹的数据信息本身。本身。v如：如：忆江南忆江南(1)唐唐.白居易江南好，风景旧曾谙。白居易江南好，风景旧曾谙。(2)日出江花红胜火，春来江水绿如蓝，日出江花红胜火，春来江水绿如蓝，(3)能不忆江能不忆江南。作者介绍南。作者介绍772846 ，字乐天，太原人。唐德，字乐天，太原人。唐德宗朝进士宗朝进士v2结构：可以看到上面的文本信息本身已经完整。结构：可以看到上面的文本信息本身已经完整。但是混乱一团，难以阅读和

13、理解，我们必须给它但是混乱一团，难以阅读和理解，我们必须给它格式化一下。格式化一下。把它分成标题、作者、章、节、段把它分成标题、作者、章、节、段落和列表等落和列表等。 Web标准结构v标题标题 忆江南忆江南(1)作者作者 唐唐.白居易白居易正文正文江南好，风景旧曾谙。江南好，风景旧曾谙。(2)日出江花红胜火，春来江水绿如蓝，日出江花红胜火，春来江水绿如蓝，(3)能不忆江南。能不忆江南。节节1作者介绍作者介绍772846 ，字乐天，太原人。唐德宗朝进士，字乐天，太原人。唐德宗朝进士 Web标准表现v 表现（表现（Presentation）：虽然定义了结构，但是内容还是）：虽然定义了结构，但是内容

14、还是原来的样式没有改变，例如标题字体没有变大，正文的颜原来的样式没有改变，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。所有这些用来色也没有变化，没有背景，没有修饰。所有这些用来改变改变内容外观的东西内容外观的东西，我们称之为，我们称之为“表现表现” 行为v行为：就是对内容的交互及操作效果。例如，使行为：就是对内容的交互及操作效果。例如，使用用JavaScript可以响应鼠标的点击和移动，可以可以响应鼠标的点击和移动，可以判断一些表单提交，使我们的操作能和网页进行判断一些表单提交，使我们的操作能和网页进行交互。交互。 网页的组成行为层行为层内容如何对事件做出响应内容如何对事件

15、做出响应表现层表现层内容如何显示内容如何显示结构层结构层内容的语义内容的语义内容层内容层内容内容网页是由四层信息构成的一个共同体：网页是由四层信息构成的一个共同体：Web标准的实现v结构标准语言结构标准语言（1）XML（2）XHTMLv表现标准语言表现标准语言CSS（Cascading Style Sheets，层叠样式表）v行为标准语言行为标准语言JavaScriptWeb标准网页示例结结 构构表表 现现行行 为为XHTMLCSSJavaScriptXHTML与HTML的区别 1. 所有所有XHTML文档必须在文档的第一行有一个文档类型的文档必须在文档的第一行有一个文档类型的声明（声明（DO

16、CTYPE），如：），如：v 文档类型声明是用来说明文档类型声明是用来说明XHTML使用标准的类型的，有使用标准的类型的，有Transitional，Strict和和Frameset三种类型，三种类型，Transitional是过渡类是过渡类型的型的XHTML，表明兼容原来的，表明兼容原来的HTML标记和属性；标记和属性；Strict是严是严格型的应用方式，在这种形式下，不能使用格型的应用方式，在这种形式下，不能使用HTML中任何样式中任何样式表现的标记（如表现的标记（如font）和属性（如）和属性（如bgcolor）；）；Frameset是针对是针对框架网页的应用方式框架网页的应用方式 XH

17、TML与HTML的区别(续)2XHTML文档可通过文档可通过xmlns定义定义命名空间命名空间(Namespace)，如如表表示该示该xhtml文档的命名空间是这个，如果我们换一个命名文档的命名空间是这个，如果我们换一个命名空间，就可以自定义空间，就可以自定义xhtml文档的标记文档的标记A 小王小王/ A 小颜小颜/ A B 小刘小刘/ A A公司和公司和B B公司就是两个命名空间，可以在上面定义不同的标记，只要公司就是两个命名空间，可以在上面定义不同的标记，只要引用相应的引用相应的XML DTDXML DTD就可以使用这些标记了就可以使用这些标记了XHTML与HTML的区别(续)3文档里必

18、须具有文档里必须具有html，head，body，title这些元这些元素。素。4在在HTML语言规范的基础上，语言规范的基础上，XHTML对标记还对标记还有下面一些额外的要求：有下面一些额外的要求：1）标记名和属性名必须小写；）标记名和属性名必须小写；2）属性值必须用双引号引起；）属性值必须用双引号引起；3）所有标记包括单标记都必须封闭。）所有标记包括单标记都必须封闭。4）不允许省略属性值（如）不允许省略属性值（如错错例3 找出符合xhtml语法规范的语句例例3：下列哪条：下列哪条html语句的写法符合语句的写法符合XHTML规范：规范： （ ）A . B. C. D. 复习题v 1. 下列哪条不是下列哪条不是XHTML规范的要求：规范的要求： （ ）v A. 标记名必须小写标记名必须小写 B. 属性名必须小写属性名必须小写v C. 属性值必须小写属性值必须小写D. 属性值不能省