1、网 站 设 计 与 建 设Website design and developments第第10章章 HTML基础基础第三部分 网站设计技术 101 HTML简介1什么是HTMLnHypertext Mrakup Language(超文本标记语言)n用于描述超文本中内容的显示方式。这些内容的描述都是通过HTML标记来完成的。nHTML的一个重要特点是超级链接(hyperlinkn一个HTML文件的后缀名是.html或者是.htmnHTML是一个纯文本格式的ASCII文件2HTML的历史nSGML(standard generalized markup language,标准通用标记语言)语言,
2、于1986年获得国际标准化组织的批准。这种语言是为了在各种网络环境之间、不同文件格式之间进行交流而使用的一种语言格式。它的文件格式标准化,并统一使用标记符号(tag)对文件的内容进行标记。nHTML于1991年问世,它是SGML的一个子集。nHTML是一种有前后关系格式化的语言,因此在HTML中除了包含文本内容,还包含通常是成对出现的标记。n标记是包括在尖括号中的文本,为HTML的解释器提供指令。3HTML的工作方式n下载n浏览器将文档解释为网页并在浏览器窗口中显示出来。n标准HTML能在不同浏览器上产生同样的效果 HTML并不能精确地定义文档信息如何显示和排列,而只是建议浏览器应该如何显示和
3、排列这些信息4HTML的解释器Netscape NavigatorMicrosoft Internet Explorer 其他104 HTML标记与属性 Title of page This is my first homepage.This text is bold nHTML元素通常用标记表示。n标记分为单标记和双标记两种。,它表示换行 n标记以“”结束。nHTML的标记不区分大小写。n注释内容 n标记属性属性具有扩展HTML元素的能力。属性设置通常由属性名和属性值成对出现来构成,普通形式是name=”value”。nn引号不对,出问题n表10.1 HTML的常用标记P215105 HTM
4、L中的超链接n格式:被链接的文本或图象n超链接外部链接内部链接 n跳转到本网站的另一个网页也叫做本地链接;绝对路径,相对路径 n跳转到本网页的另一个位置,也叫做页内跳转书签文本或图象被链接的文本或图象。102 HTML标准及版本历史1HTML标准nWorld Wide Web Consortium,W3C,http:/www.w3.orgnHTML标准定义了构成HTML语言的每一个独立元素以及这些元素是指示如何在浏览器中显示HTML文档中的指令和标记符。n这一标准确保在不同的浏览器和计算机平台上超文本显示的一致性。n并非强制而只是推荐标准。2HTML标准的版本历史nHTML1.0和2.0HTM
5、L 1.0版本,测试HTML 2.01995年11月发布 nHTML 3.2表格(Table)图(Figures)框架(Frames)数学等式(Mathematical Equations)改进的标记符(Improved Tags)nHTML 4.0 样式表(Style Sheet)国际化特征(Internationalization Features)访问特征(Accessibility Features)增强的表格和表单(Enhanced Tables and Forms)脚本和多媒体(Scripting and Multimedia)Transitonal:使用但不依赖CSSStrict
6、:摆脱结构化标注,使用CSS格式化字体、颜色、布局。Frameset:使用框架nHTML4.011999,支持XHTMLnExtensible Hypertext Markup Languagen是XML与HTML4.01的结合体分离的结构和表达:将HTML展示元素放入样式单中考虑Web的通用可访问性:在不同平台上生成文档(例如语音,使残疾人可访问WWW)帮助用户代理增强解释功能:处理和解释表格。用户代理是基于语音的阅读器和听觉有障碍的助听器nXHTML 1.0nHTML 5.0103 网页的可访问性nWAI:Web Accessibility InitiativenWAI目标:确保Web核心
7、技术对于身体、视觉、听觉和认知障碍的用户可以平等地使用nwww.w3.org/WAInwww.w3.org/WAI/wcag-curricnwww.w3.org/WAI-WEBCONTENT106 HTML的扩展缺陷:n 文本格式的局限 没有显式的布局和定位控制 CSS。n 缺乏对布局控制的能力 借助表格来实现近似的效果,但对开发者的要求比较高,而且过程非常繁琐。CSSn 无法动态改变页面内容 DHTML。n 交互困难 虽然配合脚本语言和CSS,HTML可以提供一定的交互能力,但这种交互能力的功能有限。n 适应性差 不能适应越来越多的网络设备和应用的需要,比如手机、PDA、智能家电都不能直接显
8、示HTML。其他标记语言 n内容和结构混合 XML1动态HTML DHTMLnHTML融入了CSS,脚本语言等技术它由三部分组成,DOM(文本对象模型)nDOM为网页定义了各种元素对象,使这些元素成为可以控制的对象,这是实现动态HTML的物质基础;CSS(层叠样式表)nCSS是对DOM中所定义的对象效果的描述,即对各种对象不同状态的描述,这是实现动态HTML目标的描述;Script(脚本语言,比如VBScript和JavaScript)。nScript把各种对象动态地赋予各种属性工具,是实现动态HTML的手段。2XMLn“Extensible Markup Language”的缩写,即可扩展标
9、记语言。nXML也是基于SGML的。n它是一种元标记语言,也就是说,在XML中,开发者可以根据自己的需要定义自己的标记,只要这种标记是满足XML命名规则的。换句话说,XML是一种能创造其他语言的语言。nXML的更重要的作用在于它可以表示结构化的数据,从而有利于数据交换。3XHTMLn“eXtensible HyperText Markup Language”,即可扩展超文本标记语言。n是一种使用XML语法对HTML重新阐述的语言。nXHTML 1.0 兼容 HTML 4.0。n优势 XHTML能够在多种网络设备和智能终端上运行,实现了数据与展示的分离。XHTML非常严谨。由于早期的HTML允许
10、各种私有标记,所以在使用HTML开发完网页后,必须在多种浏览器环境下进行测试。而XHTML的语法是严格定义的,因此避免这种状况的发生。XML是Web发展的趋势,但目前支持原始XML数据的浏览器还不是很多,而XHTML适用于多种浏览器。XHTML能与其他基于XML的标记语言、应用程序和协议进行良好的交互工作。XHTML是Web标准的一部分,能很好地运行在无线设备等用户代理上。XHTML比HTML有更好的一致性,所以很少会产生功能和显示的问题 4其他标记语言n UIML:用户界面标记语言,一种界面描述语言n XForm:这种标记语言的目的在于将界面元素的展示与内容分离,这样会带来诸如软件复用性增强
11、、更好的跨平台等优势。n XIML:扩展界面标记语言,它侧重于对不同应用程序间交互数据的描述,它比XML描述的数据更具体,更有针对性。n XAML:可扩展应用程序标记语言,它主要用于页面中文本、图象、控件等元素的布局。n建议不使用的标记,但大多数浏览器对这些标记还是支持的。HTML 5 预览 nHtml5是继是继XHTML之后,由之后,由Apple,Opera,Mozilla三大网络媒体共三大网络媒体共同推举的最新同推举的最新HTML语言标准,用以取代语言标准,用以取代Html4和现在的和现在的XHTML n在 HTML5 中新增了一些标签,如使用 header 来标记头部内容,nav 标记导航内容,article 标记文档中的一块独立内容,footer 标记作者和版权信息,HTML5 将使页面更加结构化。将使页面更加结构化。n另外还增加了 audio、video、embed、time、meter 这些语义化的标签,n剔除了一些无用的标签和属性,如 font、center,因为这些有关于表现的标签元素已经让 CSS 给替代了,n表现和结构的分离无论在 XHTML 2.0 还是 HTML5 中都是趋势。思考题:n10.1 什么是HTML?它的特点是什么?n10.2 常见的HTML解释器有哪些?n10.13 为什么在网页设计中应该使用的是相对路径而不是绝对路径?