1 / 22

网 站 设 计 与 建 设 Website design and developments

网 站 设 计 与 建 设 Website design and developments. 第三部分 网站设计技术. 第 10 章 HTML 基础. 10 ． 1 HTML 简介. 1 ．什么是 HTML Hypertext Mrakup Language （超文本标记语言） 用于描述超文本中内容的显示方式。 这些内容的描述都是通过 HTML 标记来完成的。 HTML 的一个重要特点是超级链接（ hyperlink 一个 HTML 文件的后缀名是 .html 或者是 .htm HTML 是一个纯文本格式的 ASCII 文件. 2 ． HTML 的历史

mikel
Download Presentation

网 站 设 计 与 建 设 Website design and developments

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 网 站 设 计 与 建 设Website design and developments

  2. 第三部分 网站设计技术 第10章 HTML基础

  3. 10．1 HTML简介 1．什么是HTML • Hypertext Mrakup Language（超文本标记语言） • 用于描述超文本中内容的显示方式。 • 这些内容的描述都是通过HTML标记来完成的。 • HTML的一个重要特点是超级链接（hyperlink • 一个HTML文件的后缀名是.html或者是.htm • HTML是一个纯文本格式的ASCII文件

  4. 2．HTML的历史 • SGML（standard generalized markup language，标准通用标记语言）语言， • 于1986年获得国际标准化组织的批准。这种语言是为了在各种网络环境之间、不同文件格式之间进行交流而使用的一种语言格式。它的文件格式标准化，并统一使用标记符号（tag）对文件的内容进行标记。 • HTML于1991年问世，它是SGML的一个子集。 • HTML是一种有前后关系格式化的语言，因此在HTML中除了包含文本内容，还包含通常是成对出现的标记。 • 标记是包括在尖括号中的文本，为HTML的解释器提供指令。

  5. 3．HTML的工作方式 • 下载 • 浏览器将文档解释为网页并在浏览器窗口中显示出来。 • 标准HTML能在不同浏览器上产生同样的效果 • HTML并不能精确地定义文档信息如何显示和排列，而只是建议浏览器应该如何显示和排列这些信息 4．HTML的解释器 • Netscape Navigator • Microsoft Internet Explorer • 其他

  6. 10．4 HTML标记与属性 <html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html> • HTML元素通常用标记表示。 • 标记分为单标记和双标记两种。 • <br>，它表示换行 • 标记以“<”开始，以“>”结束。 • HTML的标记不区分大小写。 • <!-->注释内容</!-->

  7. 标记属性 • 属性具有扩展HTML元素的能力。 • 属性设置通常由属性名和属性值成对出现来构成，普通形式是name=”value”。 • <body bgcolor=“yellow”> • 引号不对，出问题 • 表10.1 HTML的常用标记 • P215

  8. 10．5 HTML中的超链接 • 格式：<a href=”URL”>被链接的文本或图象</a> • 超链接 • 外部链接 • 内部链接 • 跳转到本网站的另一个网页也叫做本地链接； • 绝对路径，相对路径 • 跳转到本网页的另一个位置，也叫做页内跳转 • <a name=”书签名”>书签文本或图象</a> • <a href=”#书签名”>被链接的文本或图象</a>。

  9. 举例 <html> <head> <meta http-equiv="Content-Language" content="zh-cn"> <title>Shandong Travel</title> </head> <body> <p align="center">美丽的山东</p> <p><a href="#济南">jinan</a></p> … … <p><a name="济南">美丽的泉城</a></p> … … <p><a name="青岛">美丽的海滨城市--青岛</a></p> … … <a href="http://www.cnta.com/" title="中国旅游网" target="_blank">主要旅游网</a> </body> </html>

  10. 10．2 HTML标准及版本历史 1．HTML标准 • World Wide Web Consortium，W3C，http://www.w3.org • HTML标准定义了构成HTML语言的每一个独立元素以及这些元素是指示如何在浏览器中显示HTML文档中的指令和标记符。 • 这一标准确保在不同的浏览器和计算机平台上超文本显示的一致性。 • 并非强制而只是推荐标准。

  11. 2．HTML标准的版本历史 • ①HTML1.0和2.0 • HTML 1.0版本 ，测试 • HTML 2.0——1995年11月发布 • ②HTML 3.2 • 表格（Table） • 图（Figures） • 框架（Frames） • 数学等式（Mathematical Equations） • 改进的标记符（Improved Tags） • ③HTML 4.0 样式表（Style Sheet） • 国际化特征（Internationalization Features） • 访问特征（Accessibility Features） • 增强的表格和表单（Enhanced Tables and Forms） • 脚本和多媒体（Scripting and Multimedia） • Transitonal：使用但不依赖CSS • Strict：摆脱结构化标注，使用CSS格式化字体、颜色、布局。 • Frameset：使用框架

  12. HTML4.01 • 1999，支持XHTML • Extensible Hypertext Markup Language • 是XML与HTML4.01的结合体 • 分离的结构和表达：将HTML展示元素放入样式单中 • 考虑Web的通用可访问性：在不同平台上生成文档(例如语音，使残疾人可访问WWW) • 帮助用户代理增强解释功能：处理和解释表格。用户代理是基于语音的阅读器和听觉有障碍的助听器 • XHTML 1.0 • HTML 5.0

  13. 10．3 网页的可访问性 • WAI：Web Accessibility Initiative • WAI目标：确保Web核心技术对于身体、视觉、听觉和认知障碍的用户可以平等地使用 • www.w3.org/WAI • www.w3.org/WAI/wcag-curric • www.w3.org/WAI-WEBCONTENT

  14. 10．6 HTML的扩展 缺陷： • ⑴ 文本格式的局限 • 没有显式的布局和定位控制 • CSS。 • ⑵ 缺乏对布局控制的能力 • 借助表格来实现近似的效果，但对开发者的要求比较高，而且过程非常繁琐。 • CSS • ⑶ 无法动态改变页面内容 • DHTML。 • ⑷ 交互困难 虽然配合脚本语言和CSS，HTML可以提供一定的交互能力，但这种交互能力的功能有限。 • ⑸ 适应性差 • 不能适应越来越多的网络设备和应用的需要，比如手机、PDA、智能家电都不能直接显示HTML。 • 其他标记语言 • 内容和结构混合 XML

  15. 1．动态HTML DHTML • HTML融入了CSS，脚本语言等技术它由三部分组成， • DOM（文本对象模型） • DOM为网页定义了各种元素对象，使这些元素成为可以控制的对象，这是实现动态HTML的物质基础； • CSS（层叠样式表） • CSS是对DOM中所定义的对象效果的描述，即对各种对象不同状态的描述，这是实现动态HTML目标的描述； • Script（脚本语言，比如VBScript和JavaScript）。 • Script把各种对象动态地赋予各种属性工具，是实现动态HTML的手段。

  16. 2．XML • “Extensible Markup Language”的缩写，即可扩展标记语言。 • XML也是基于SGML的。 • 它是一种元标记语言，也就是说，在XML中，开发者可以根据自己的需要定义自己的标记，只要这种标记是满足XML命名规则的。换句话说，XML是一种能创造其他语言的语言。 • XML的更重要的作用在于它可以表示结构化的数据，从而有利于数据交换。

  17. 3．XHTML • “eXtensible HyperText Markup Language”，即可扩展超文本标记语言。 • 是一种使用XML语法对HTML重新阐述的语言。 • XHTML 1.0 兼容 HTML 4.0。 • 优势 • ⑴ XHTML能够在多种网络设备和智能终端上运行，实现了数据与展示的分离。 • ⑵ XHTML非常严谨。由于早期的HTML允许各种私有标记，所以在使用HTML开发完网页后，必须在多种浏览器环境下进行测试。而XHTML的语法是严格定义的，因此避免这种状况的发生。 • ⑶ XML是Web发展的趋势，但目前支持原始XML数据的浏览器还不是很多，而XHTML适用于多种浏览器。 • ⑷ XHTML能与其他基于XML的标记语言、应用程序和协议进行良好的交互工作。 • ⑸ XHTML是Web标准的一部分，能很好地运行在无线设备等用户代理上。 • ⑹ XHTML比HTML有更好的一致性，所以很少会产生功能和显示的问题

  18. 4．其他标记语言 • ⑴ UIML：用户界面标记语言，一种界面描述语言 • ⑵ XForm：这种标记语言的目的在于将界面元素的展示与内容分离，这样会带来诸如软件复用性增强、更好的跨平台等优势。 • ⑶ XIML：扩展界面标记语言，它侧重于对不同应用程序间交互数据的描述，它比XML描述的数据更具体，更有针对性。 • ⑷ XAML：可扩展应用程序标记语言，它主要用于页面中文本、图象、控件等元素的布局。

  19. 建议不使用的标记, 但大多数浏览器对这些标记还是支持的。 • <ISINDEX> • <APPLET> • <CENTER> • <FONT> • <BASEFONT> • <U> • <DIR> • <MENU>

  20. HTML 5 预览 • Html5是继XHTML之后，由Apple，Opera，Mozilla三大网络媒体共同推举的最新HTML语言标准，用以取代Html4和现在的XHTML • 在 HTML5 中新增了一些标签，如使用 header 来标记头部内容，nav 标记导航内容，article 标记文档中的一块独立内容，footer 标记作者和版权信息，HTML5 将使页面更加结构化。

  21. 另外还增加了 audio、video、embed、time、meter 这些语义化的标签， • 剔除了一些无用的标签和属性，如 font、center，因为这些有关于表现的标签元素已经让 CSS 给替代了， • 表现和结构的分离无论在 XHTML 2.0 还是 HTML5 中都是趋势。

  22. 思考题： • 10.1 什么是HTML？它的特点是什么？ • 10.2 常见的HTML解释器有哪些？ • 10.13 为什么在网页设计中应该使用的是相对路径而不是绝对路径？

More Related