网站设计与建设课件.ppt

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 为什么在网页设计中应该使用的是相对路径而不是绝对路径？