网站设计与建设(21)
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网站设计与建设 Website design and developments
第三部分 网站设计技术 第10章 HTML基础
10．1 HTML简介
1．什么是HTML Hypertext Mrakup Language（超文本标记语言） 用于描述超文本中内容的显示方式。
这些内容的描述都是通过HTML标记来完成的。
10．6 HTML的扩展
缺陷： ⑴ 文本格式的局限
没有显式的布局和定位控制 CSS。
⑵ 缺乏对布局控制的能力
借助表格来实现近似的效果，但对开发者的要求比较高，而且过程非常繁琐。 CSS
⑶ 无法动态改变页面内容
DHTML。
⑷ 交互困难 虽然配合脚本语言和CSS，HTML可以提供一定的交互能力，但这种交互 能力的功能有限。
<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body>
</html> HTML元素通常用标记表示。 标记分为单标记和双标记两种。
另外还增加了 audio、video、embed、 time、meter 这些语义化的标签，
剔除了一些无用的标签和属性，如 font、 center，因为这些有关于表现的标签元素已 经让 CSS 给替代了，
表现和结构的分离无论在 XHTML 2.0 还是 HTML5 中都是趋势。
思考题：
③HTML 4.0 样式表（Style Sheet）
国际化特征（Internationalization Features） 访问特征（Accessibility Features） 增强的表格和表单（Enhanced Tables and Forms） 脚本和多媒体（Scripting and Multimedia）
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能在不同浏览器上产生同样的效果
HTML并不能精确地定义文档信息如何显示和排列，而 只是建议浏览器应该如何显示和排列这些信息
4．HTML的解释器
Netscape Navigator
Microsoft Internet Explorer 其他
10．4 HTML标记与属性
表10.1 HTML的常用标记
P215
10．5 HTML中的超链接
格式：<a href=”URL”>被链接的文本或图 象</a>
超链接
外部链接 内部链接
跳转到本网站的另一个网页也叫做本地链接；
绝对路径，相对路径
跳转到本网页的另一个位置，也叫做页内跳转
<a name=”书签名”>书签文本或图象</a> <a href=”#书签名”>被链接的文本或图象</a>。
XML也是基于SGML的。
它是一种元标记语言，也就是说，在XML中，开 发者可以根据自己的需要定义自己的标记，只要 这种标记是满足XML命名规则的。换句话说， XML是一种能创造其他语言的语言。
XML的更重要的作用在于它可以表示结构化的数 据，从而有利于数据交换。
3．XHTML “eXtensible HyperText Markup Language”，即可扩展超文本标记语
言。
是一种使用XML语法对HTML重新阐述的语言。 XHTML 1.0 兼容 HTML 4.0。 优势
⑴ XHTML能够在多种网络设备和智能终端上运行，实现了数据与展示的 分离。
⑵ XHTML非常严谨。由于早期的HTML允许各种私有标记，所以在使用 HTML开发完网页后，必须在多种浏览器环境下进行测试。而XHTML的 语法是严格定义的，因此避免这种状况的发生。
CSS（层叠样式表）
CSS是对DOM中所定义的对象效果的描述，即对各种对象不同状态 的描述，这是实现动态HTML目标的描述；
Script（脚本语言，比如VBScript和JavaScript）。
Script把各种对象动态地赋予各种属性工具，是实现动态HTML的手 段。
2．XML
“Extensible Markup Language”的缩写，即可扩展 标记语言。
10．2 HTML标准及版本历史
1．HTML标准 World Wide Web Consortium，W3C，
HTML标准定义了构成HTML语言的每一个独立元
素以及这些元素是指示如何在浏览器中显示 HTML文档中的指令和标记符。 这一标准确保在不同的浏览器和计算机平台上超 文本显示的一致性。 并非强制而只是推荐标准。
HTML于1991年问世，它是SGML的一个子集。 HTML是一种有前后关系格式化的语言，因此在HTML中
除了包含文本内容，还包含通常是成对出现的标记。 标记是包括在尖括号中的文本，为HTML的解释器提供指
令。
3．HTML的工作方式 下载
浏览器将文档解释为网页并在浏览器窗口中显示 出来。
<br>，它表示换行
标记以“<”开始，以“>”结束。 HTML的标记不区分大小写。 <!-->注释内容</!-->
标记属性
属性具有扩展HTML元素的能力。 属性设置通常
<body bgcolor=“yellow”> 引号不对，出问题
⑸ 适应性差
不能适应越来越多的网络设备和应用的需要，比如手机、PDA、智能家电都不能直接显示 HTML。
其他标记语言
内容和结构混合 XML
1．动态HTML DHTML
HTML融入了CSS，脚本语言等技术它由三部分组成，
DOM（文本对象模型）
DOM为网页定义了各种元素对象，使这些元素成为可以控制的对象， 这是实现动态HTML的物质基础；
HTML的一个重要特点是超级链接（hyperlink 一个HTML文件的后缀名是.html或者是.htm HTML是一个纯文本格式的ASCII文件
2．HTML的历史 SGML（standard generalized markup language，标准通
用标记语言）语言，
于1986年获得国际标准化组织的批准。这种语言是为了在各种网 络环境之间、不同文件格式之间进行交流而使用的一种语言格式。 它的文件格式标准化，并统一使用标记符号（tag）对文件的内容 进行标记。
Transitonal：使用但不依赖CSS Strict：摆脱结构化标注，使用CSS格式化字体、颜色、布局。 Frameset：使用框架
HTML4.01
1999，支持XHTML
Extensible Hypertext Markup Language 是XML与HTML4.01的结合体
10.1 什么是HTML？它的特点是什么？ 10.2 常见的HTML解释器有哪些？ 10.13 为什么在网页设计中应该使用的是相
对路径而不是绝对路径？
WAI：Web Accessibility Initiative WAI目标：确保Web核心技术对于身体、视觉、听
觉和认知障碍的用户可以平等地使用 /WAI /WAI/wcag-curric /WAI-WEBCONTENT
⑷ XAML：可扩展应用程序标记语言，它主要用于页面中 文本、图象、控件等元素的布局。
建议不使用的标记, 但大多数浏览器对这些标记还 是支持的。
<ISINDEX> <APPLET> <CENTER> <FONT> <BASEFONT> <U> <DIR> <MENU>
⑶ XML是Web发展的趋势，但目前支持原始XML数据的浏览器还不是很 多，而XHTML适用于多种浏览器。
⑷ XHTML能与其他基于XML的标记语言、应用程序和协议进行良好的 交互工作。
⑸ XHTML是Web标准的一部分，能很好地运行在无线设备等用户代理上。 ⑹ XHTML比HTML有更好的一致性，所以很少会产生功能和显示的问题
HTML 5 预览
Html5是继XHTML之后，由Apple，Opera，Mozilla三大网络媒体共 同推举的最新HTML语言标准，用以取代Html4和现在的XHTML
在 HTML5 中新增了一些标签，如使用 header 来标记头部内容，nav 标记导航内容，article 标记文档中的一块独立内容，footer 标记作者 和版权信息，HTML5 将使页面更加结构化。
分离的结构和表达：将HTML展示元素放入样式单中 考虑Web的通用可访问性：在不同平台上生成文档(例如语音，使
残疾人可访问WWW) 帮助用户代理增强解释功能：处理和解释表格。用户代理是基于
语音的阅读器和听觉有障碍的助听器
XHTML 1.0
HTML 5.0
10．3 网页的可访问性
4．其他标记语言
⑴ UIML：用户界面标记语言，一种界面描述语言
⑵ XForm：这种标记语言的目的在于将界面元素的展示 与内容分离，这样会带来诸如软件复用性增强、更好的跨 平台等优势。
⑶ XIML：扩展界面标记语言，它侧重于对不同应用程序 间交互数据的描述，它比XML描述的数据更具体，更有针 对性。
第三部分 网站设计技术 第10章 HTML基础
10．1 HTML简介
1．什么是HTML Hypertext Mrakup Language（超文本标记语言） 用于描述超文本中内容的显示方式。
这些内容的描述都是通过HTML标记来完成的。
10．6 HTML的扩展
缺陷： ⑴ 文本格式的局限
没有显式的布局和定位控制 CSS。
⑵ 缺乏对布局控制的能力
借助表格来实现近似的效果，但对开发者的要求比较高，而且过程非常繁琐。 CSS
⑶ 无法动态改变页面内容
DHTML。
⑷ 交互困难 虽然配合脚本语言和CSS，HTML可以提供一定的交互能力，但这种交互 能力的功能有限。
<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body>
</html> HTML元素通常用标记表示。 标记分为单标记和双标记两种。
另外还增加了 audio、video、embed、 time、meter 这些语义化的标签，
剔除了一些无用的标签和属性，如 font、 center，因为这些有关于表现的标签元素已 经让 CSS 给替代了，
表现和结构的分离无论在 XHTML 2.0 还是 HTML5 中都是趋势。
思考题：
③HTML 4.0 样式表（Style Sheet）
国际化特征（Internationalization Features） 访问特征（Accessibility Features） 增强的表格和表单（Enhanced Tables and Forms） 脚本和多媒体（Scripting and Multimedia）
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能在不同浏览器上产生同样的效果
HTML并不能精确地定义文档信息如何显示和排列，而 只是建议浏览器应该如何显示和排列这些信息
4．HTML的解释器
Netscape Navigator
Microsoft Internet Explorer 其他
10．4 HTML标记与属性
表10.1 HTML的常用标记
P215
10．5 HTML中的超链接
格式：<a href=”URL”>被链接的文本或图 象</a>
超链接
外部链接 内部链接
跳转到本网站的另一个网页也叫做本地链接；
绝对路径，相对路径
跳转到本网页的另一个位置，也叫做页内跳转
<a name=”书签名”>书签文本或图象</a> <a href=”#书签名”>被链接的文本或图象</a>。
XML也是基于SGML的。
它是一种元标记语言，也就是说，在XML中，开 发者可以根据自己的需要定义自己的标记，只要 这种标记是满足XML命名规则的。换句话说， XML是一种能创造其他语言的语言。
XML的更重要的作用在于它可以表示结构化的数 据，从而有利于数据交换。
3．XHTML “eXtensible HyperText Markup Language”，即可扩展超文本标记语
言。
是一种使用XML语法对HTML重新阐述的语言。 XHTML 1.0 兼容 HTML 4.0。 优势
⑴ XHTML能够在多种网络设备和智能终端上运行，实现了数据与展示的 分离。
⑵ XHTML非常严谨。由于早期的HTML允许各种私有标记，所以在使用 HTML开发完网页后，必须在多种浏览器环境下进行测试。而XHTML的 语法是严格定义的，因此避免这种状况的发生。
CSS（层叠样式表）
CSS是对DOM中所定义的对象效果的描述，即对各种对象不同状态 的描述，这是实现动态HTML目标的描述；
Script（脚本语言，比如VBScript和JavaScript）。
Script把各种对象动态地赋予各种属性工具，是实现动态HTML的手 段。
2．XML
“Extensible Markup Language”的缩写，即可扩展 标记语言。
10．2 HTML标准及版本历史
1．HTML标准 World Wide Web Consortium，W3C，
HTML标准定义了构成HTML语言的每一个独立元
素以及这些元素是指示如何在浏览器中显示 HTML文档中的指令和标记符。 这一标准确保在不同的浏览器和计算机平台上超 文本显示的一致性。 并非强制而只是推荐标准。
HTML于1991年问世，它是SGML的一个子集。 HTML是一种有前后关系格式化的语言，因此在HTML中
除了包含文本内容，还包含通常是成对出现的标记。 标记是包括在尖括号中的文本，为HTML的解释器提供指
令。
3．HTML的工作方式 下载
浏览器将文档解释为网页并在浏览器窗口中显示 出来。
<br>，它表示换行
标记以“<”开始，以“>”结束。 HTML的标记不区分大小写。 <!-->注释内容</!-->
标记属性
属性具有扩展HTML元素的能力。 属性设置通常
<body bgcolor=“yellow”> 引号不对，出问题
⑸ 适应性差
不能适应越来越多的网络设备和应用的需要，比如手机、PDA、智能家电都不能直接显示 HTML。
其他标记语言
内容和结构混合 XML
1．动态HTML DHTML
HTML融入了CSS，脚本语言等技术它由三部分组成，
DOM（文本对象模型）
DOM为网页定义了各种元素对象，使这些元素成为可以控制的对象， 这是实现动态HTML的物质基础；
HTML的一个重要特点是超级链接（hyperlink 一个HTML文件的后缀名是.html或者是.htm HTML是一个纯文本格式的ASCII文件
2．HTML的历史 SGML（standard generalized markup language，标准通
用标记语言）语言，
于1986年获得国际标准化组织的批准。这种语言是为了在各种网 络环境之间、不同文件格式之间进行交流而使用的一种语言格式。 它的文件格式标准化，并统一使用标记符号（tag）对文件的内容 进行标记。
Transitonal：使用但不依赖CSS Strict：摆脱结构化标注，使用CSS格式化字体、颜色、布局。 Frameset：使用框架
HTML4.01
1999，支持XHTML
Extensible Hypertext Markup Language 是XML与HTML4.01的结合体
10.1 什么是HTML？它的特点是什么？ 10.2 常见的HTML解释器有哪些？ 10.13 为什么在网页设计中应该使用的是相
对路径而不是绝对路径？
WAI：Web Accessibility Initiative WAI目标：确保Web核心技术对于身体、视觉、听
觉和认知障碍的用户可以平等地使用 /WAI /WAI/wcag-curric /WAI-WEBCONTENT
⑷ XAML：可扩展应用程序标记语言，它主要用于页面中 文本、图象、控件等元素的布局。
建议不使用的标记, 但大多数浏览器对这些标记还 是支持的。
<ISINDEX> <APPLET> <CENTER> <FONT> <BASEFONT> <U> <DIR> <MENU>
⑶ XML是Web发展的趋势，但目前支持原始XML数据的浏览器还不是很 多，而XHTML适用于多种浏览器。
⑷ XHTML能与其他基于XML的标记语言、应用程序和协议进行良好的 交互工作。
⑸ XHTML是Web标准的一部分，能很好地运行在无线设备等用户代理上。 ⑹ XHTML比HTML有更好的一致性，所以很少会产生功能和显示的问题
HTML 5 预览
Html5是继XHTML之后，由Apple，Opera，Mozilla三大网络媒体共 同推举的最新HTML语言标准，用以取代Html4和现在的XHTML
在 HTML5 中新增了一些标签，如使用 header 来标记头部内容，nav 标记导航内容，article 标记文档中的一块独立内容，footer 标记作者 和版权信息，HTML5 将使页面更加结构化。
分离的结构和表达：将HTML展示元素放入样式单中 考虑Web的通用可访问性：在不同平台上生成文档(例如语音，使
残疾人可访问WWW) 帮助用户代理增强解释功能：处理和解释表格。用户代理是基于
语音的阅读器和听觉有障碍的助听器
XHTML 1.0
HTML 5.0
10．3 网页的可访问性
4．其他标记语言
⑴ UIML：用户界面标记语言，一种界面描述语言
⑵ XForm：这种标记语言的目的在于将界面元素的展示 与内容分离，这样会带来诸如软件复用性增强、更好的跨 平台等优势。
⑶ XIML：扩展界面标记语言，它侧重于对不同应用程序 间交互数据的描述，它比XML描述的数据更具体，更有针 对性。