第2章 HTML与XHTML

目录上一页下一页退出了解HTML了解XHTML比较HTML与XHTML的异同目录上一页下一页退出2.1HTML•2.1.1HTML的发展历史•2.1.2HTML文件的页面结构•2.1.3HTML的基本标签•2.1.4超链接•2.1.5列表•2.1.6表格•2.1.7表单•2.1.8框架•2.1.9图像、文本格式及其他•2.1.10HTML字符实体2.2XHTML•2.2.1XHTML文档类型定义•2.2.2XHTML的语法目录上一页下一页退出HTML是HypertextMarkupLanguage的缩写，表示超文本标记语言，是万维网的基本描述语言。◦Hypertext表示“超文本”，能是文件展示包含文本和图像在内的多种媒体形式。同时，“超文本”意味着突破了传统访问文件必须依从的线性访问方式，可以在多个HTML文件之间跳跃访问，不必依从特定的顺序。◦“Markup”代表标签，实际上HTML是一个标签系统，它定义了各种关于内容展示的标签.目录上一页下一页退出1989年，TimBerners-Lee提出不同地方不同平台的计算机用户可以通过链接而不是直接下载文件来实现文件的共享。，1990年他开始着手研究项目，将设计的初级浏览和编辑系统在网上合二为一，他创建了一种快速小型超文本语言来为项目服务。1993年，UniversityofIllinois一位学生MarcAndreessen研发著名的Mosaic浏览器，并在浏览器中加入了img标签支持图像的显示。目录上一页下一页退出1994年，TimBerners-Lee创建了万维网联盟（WorldWideWebConsortium，简称W3C）。W3C组织致力于WEB技术的标准化。1995年欧洲核能研究所主持下在瑞士日内瓦举行的第一次工作小组。它的主要任务是把HTML形式化成为一种SGMLDTD，称之为HTML2.0标准。目录上一页下一页退出W3C联盟在1996年对技术中出现的一些成果进行总结，并领导制订了著名的HTML3.2标准。1997年HTML3.2标准正式说明问世。HTML3.2标准和HTML2.0标准完全兼容，并添加了当时对多媒体技术的支持的标签，如applet标签、表格标签等。HTML3.2最重要的特点是跨工业。这意味着不同计算机浏览器开发企业都遵循该标准。目录上一页下一页退出1998年许多计算机组织和企业开始探讨重新定义HTML，以符合未来对XML应用的要求。2000年，W3C联盟推荐了XHTML1.0。XHTML是用XML语法优化和改进的HTML。2007年，WHATWGa（WebHypertextApplicationTechnologyWorkingGroup）推出了HTML5.0标准草案。该标准增加了新的特性，主要帮助WEB上日益增多的网络著述、表达等方面的应用。目录上一页下一页退出1．文档类型说明◦!DOCTYPEHTMLPUBLIC说明文档类型部分系统标识部分◦说明文档类型部分说明文档类型DTD；◦系统标识部分：确定浏览器寻找DTD的统一资源定位URL。HTML4.01StrictDTD（严格类型）HTML4.01TransitionalDTD（过渡类型）HTML4.01FramesetDTD（框架类型）目录上一页下一页退出2．html文件的基本结构◦一个简单的HTML网页示例。代码见程序清单2-1,运行结果。目录上一页下一页退出html◦定义一个HTML页面head◦定义html的首部实体title◦定义网页的标题body◦定义网页的正文目录上一页下一页退出头标题标签◦头标题是出现在body元素常常定义一段文字的标题。html提供了六种头标题，从最大号的文字h1到最小号的文字h6。它们往往起到强化网页内容的作用。h1h2h3h4h5h6◦一个头标题示例。代码见程序清单2-2，运行结果。大号小号目录上一页下一页退出段落标签p◦段落标签是用来定义body元素正文段落内容的标签。段落定义包含在p元素内部，通常作为展示网页的内容。◦p标签定义的段落有一个特点，就是在此段落之前和之后会自动换行。根据p标签这一特性，也常用它处理文本换行。◦一个段落标签的应用实例。代码见程序清单2-3，运行结果。目录上一页下一页退出换行标签br◦br标签的主要作用就是在html文件中执行换行功能，用以结束无论是段落内还是段落外的一行内容。◦br标签是一种特殊的非封闭标签，它没有结束标签。如果要写成/br则是错误的表达形式。◦br标签的换行与p标签的换行不同，p标签的换行带有一定的段落格式，段落与段落之间存在间距。而br标签仅仅是换行。行与行之间的文字不存在空隙。◦一个换行的应用实例。代码见程序清单2-4，运行结果。目录上一页下一页退出水平线标签hr◦是一个非封闭的标签，没有结束标签。◦hr标签的作用是为网页增加一个水平线，由于水平线的长短粗细可以通过设置属性来调整，所以有时也把水平线称为水平尺。◦hr标签常用来分割网页中主题不同的内容。◦水平线标签的应用实例。代码见程序清单2-5，运行结果。目录上一页下一页退出超链接的实现◦锚点标签a可以定义一个锚点，它的作用有两方面：1）锚点标签a和属性href结合，实现超链接，使得一个网页能链接到包括其他的网页、图像、音频等在内其他网络资源；例：ahref=“2）锚点与属性name或id结合，访问本页面的一个书签。目录上一页下一页退出◦a的属性href：链接到指定的URLtype：指定MIME类型target：定义打开网页的位置_top：表示url指定的网页将在最初的窗口完全打开_blank：表示url指定的网页将在一个新的窗口打开_parent：表示url将在上级窗口中打开_self：表示url指定的网页将在当前窗口打开name：锚点的名。◦超链接的应用实例。代码见程序清单2-6，运行结果。目录上一页下一页退出列表◦网页中包含大量的信息，可以用列表突出大量信息的不同。HTML提供了三种列表的制作：无序列表有序列表定义列表目录上一页下一页退出1.无序列表◦无序列表展示的是一个明细表，表中的各项目没有明确的数字或字母标志表现顺序，而是用项目符号来突出彼此的不同。由于无序列表具有这种特点，有时也称无序列表为符号列表。目录上一页下一页退出◦无序列表是通过标签ul和li来实现定义的。其中，ul定义一个无序列表，而li标签定义特定的列表项目。基本形式如下：ulli项目1/lili项目2/li…li项目n/li/ul◦标签ul和标签li组合还可以表示嵌套列表，即在一个列表内部的项目中嵌套定义一个列表，该列表为下一层的列表。◦一个嵌套无序列表实例，代码见程序清单2-7，运行结果。目录上一页下一页退出2.有序列表◦有序列表同样也可以展示明细表，但是表中的项目可以用数字或字母突出项目出现的顺序以及所属的类别。◦标签ol和标签li组合可以定义有序列表。标签ol的作用是声明定义一个有序列表，li标签的作用仍是定义列表中的项目。形如：olli项目1/lili项目2/li…li项目n/li/ol目录上一页下一页退出◦有序列表中是通过数字或字母的顺序体现列表中各个项目的序列。ol标签有两个常见的属性type和start。type：表示列表项目的编号A：表示编号顺序（A，B，C…..）;a：表示编号顺序（a，b，c……）；I：表示编号顺序（I，II，III…..）;i：表示编号顺序（i，ii，iii…..）;1：表示编号顺序（1，2，3…..）;start：指定编号字符的起始值目录上一页下一页退出◦有序列表也可以定义嵌套列表，同样是在定义的一个项目嵌套定义下一层的列表。列表的形式可以是有序列表也可以是无序列表。◦一个有序列表的实例，代码见程序清单2-8，运行结果。目录上一页下一页退出3.定义列表◦允许用户自定义文字定义项目的名称，达到明细表能明确文本信息的作用。◦定义列表不再罗列列表项目，而侧重对列表内容的说明。定义列表分成两部分：列表的描述项和列表解释项。列表的描述项确定列表的主要内容，而列表的解释项是对描述项的具体说明。◦定义列表的实现是通过标签dl、dt和dd组合产生的。标签dl表示定义一个定义列表。dt标签定义一个描述项，而dd标签定义描述项的解释项。目录上一页下一页退出◦定义列表的形式如下：dldt描述项1/dtdd解释项1/dddt描述项2/dtdd解释项2/dd……dt描述项n/dtdd解释项n/dd/dl◦一个定义列表的实例，代码见程序清单2-9,运行结果.目录上一页下一页退出表格有行和列纵横组成，每行每列中排列具体的各类型的信息，方便用户查找浏览。表格由于表达形式灵活直观，主要应用于两方面：◦1）应用于网页中数据的表达；◦2）应用于网页数据的展示和网页的排版设计。列行目录上一页下一页退出表格的基本结构基本标签说明table定义一个表格th定义表格的单元格为标题项tr定义表格的行td定义表格的每一单元格caption定义表格的标题thead定义表格的表头tbody定义表格的主体tfoot定义表格的表尾为了迎合更多浏览器的性能的要求，制作表格时，常常将thead、tbody和tfoot标签取消，而直接用table标签、tr标签、th标签、td标签定义一个表格。但是，thead、tbody和tfoot标签的存在会更好的体现表格的层次性，增加设计人员对网页的可读性。目录上一页下一页退出◦（1）应用于网页中数据的表达例：设计一个表格展示3名学生的期末数学与语文成绩。代码见程序清单2-10，运行结果。◦（2）网页的排版设计例：利用表格设计一个网页的页面结构，具体内容见程序清单2-11，运行结果。目录上一页下一页退出网页中往往通过表单实现用户信息的提交。表单的最主要的应用在于它提供了交互界面，帮助用户输入信息。多个表单标签的组合可以很好的实现一个具有实际意义的交互界面，最终将用户的信息提交给服务器进行处理。表单是为服务器端获取客户端的信息，为后续的信息处理提供了一种途径。目录上一页下一页退出一个表单的基本组成可以分成三个部分：◦表单标签：即form标签，通过form标签定义表单。具体的表单性质取决于表单属性的定义。◦表单域：定义表单中的输入控件，例如输入文本区控件、标签控件、按钮控件等。通过这些控件实现表单输入界面控制。◦表单按钮：定义表单的各种按钮，包括提交按钮submit、复位按钮reset以及常规按钮。通过它们实现表单数据传送、表单数据的重置以及其他结合脚本定义动作的处理。目录上一页下一页退出1.form标签◦常见属性：method、action、name、target（1）method：表示提交信息的方式；method属性有两种属性值get和post表示不同的发送信息的方式。get方式是以URL的方式提交表单数据，限定了提交数据的长度。post方式是通过HTTPpost机制，将表单数据放置在HTML文件头中内，然后一起传送到动作action属性所指的URL地址，简单地说就是将表单作为一个整体发送到服务器中。post方式并不限定数据的长度，传送数据的编码形式取决于enctype属性指定的MIME类型。目录上一页下一页退出（2）action：发送信息的url（3）name：指定表单的名称（4）target：打开目标URL的方式_top：表示url指定的网页将在最初的窗口完全打开_blank：表示url指定的网页将在一个新的窗口打开_parent：表示url将在上级窗口中打开_self：表示url指定的网页将在当前窗口打开目录上一页下一页退出2.input标签◦input标签