《JavaScript程序设计基础教程 第2版 普通高等教育“十一五”国家级规划教材 教学课件 ppt 作者 阮文江 第2章 HTMLX／HTML 制作》由会员分享，可在线阅读，更多相关《JavaScript程序设计基础教程 第2版 普通高等教育“十一五”国家级规划教材 教学课件 ppt 作者 阮文江 第2章 HTMLX／HTML 制作（38页珍藏版）》请在金锄头文库上搜索。
1、第二章 HTMLXHTML 制作,本章基于 HTML 语言介绍标准化 Web 页面的基本制作技术，即使用语义化标签 基本概念 文档分段 标记行内元素 建立超链接 制作列表 制作表单,中山大学计算机科学系,2019/5/24,1,添加多媒体 通用属性 扩展 HTML 标签 标签 配置 WEB 服务器,2.1 基本概念 2.1.1 XML 与 XHTML,一、XML XML 也是标记语言，允许自定义、扩展标签。两大用途： XML 用作 Internet 数据表示语言 XML 用作元语言，可定义其他语言。如XHTML、MathML 二、XHTML XHTML 是符合 XML 规范的 HTML。XHT
2、ML 1.0 有3种风格： XHTML 1.0 Strict（严格型） XHTML 1.0 Transitional（过渡型） XHTML 1.0 Frameset（框架型） 由于 XHTML 1.0 等同于 HTML 4.01，因此常将术语“XHTML”等同于“HTML”,中山大学计算机科学系,2019/5/24,2,2.1.2 HTML 标签,一、HTML 元素（也称页面元素，简称元素） HTML 元素是 HTML 文档的基本组成单元，每个 HTML 元素通过 HTML 标签来定义。 二、HTML 标签 基本格式：用一对尖括号（）标注小写的标签名，如 、 根据标签名是否必须成对出现，HTM
3、L 标签的书写格式分为： 双标签：其标签名必须成对出现（起始标签和结束标签） 相应内容 XHTML入门 单标签：其标签名只需出现一次，就能完整表达意思 ,中山大学计算机科学系,2019/5/24,3,2.1.2 HTML 标签,三、HTML 属性 HTML 标签可以包含属性，以提供页面元素的附加信息 形式： 注意事项 允许多个属性，各属性之间无先后次序，用空格分隔 每个属性由属性名、等号（=）和属性值组成 每个属性值必须用双引号括起来。如： ,中山大学计算机科学系,2019/5/24,4,2.1.3 使用专业工具制作 HTML 页面,借助专业化网页制作工具（如 SharePoint Desig
4、ner 2007、Dreamweaver CS4 等）能够方便地编写出符合 Web 规范的 HTML 代码 例2.1 使用 SharePoint Designer 2007 制作符合 XHTML 规范的第1个页面 将新建网页的文档类型设置为“XHTML 1.0 Strict” 设置页面标题：“网页制作入门” 在“设计”视图编辑区输入一段文字：,中山大学计算机科学系,2019/5/24,5,2.1.4 基本结构标签,基本结构标签用于定义 HTML 文档代码的总体结构，包括 、 和 等5个标签，其嵌套和顺序如例2.1所创建的页面代码： 网页制作入门 使用专业网页制作工具可以方便地制作符合 Web
5、规范的页面。 ,中山大学计算机科学系,2019/5/24,6,2.1.5 HTML 文档的良构性,HTML 文档的良构性是指网页文档中的 HTML 代码符合以下要求： 所有标签都必须正确地书写为双标签或单标签格式，不能出现不匹配的起始标签或结束标签。 所有 HTML 元素必须正确嵌套，例如 body 元素不能出现在 head 元素内。 标签名和属性名中的字母必须写成小写字母，例如 不能写为 。 若要为标签指定属性，则必须明确使用“属性名=“属性值“”格式，并且必须为属性值加引号。,中山大学计算机科学系,2019/5/24,7,2.2 文档分段 2.2.1 标题,HTML 语言提供6级标题标签，
6、依次是 、。默认情况下，这些标题的显示效果将依次变小，即 最大， 最小。 使用这些标题，可以标记 HTML 文档的层次结构： 通常只能出现1个一级标题，与 title 元素保持一致 若页面内容分成多节，则可以为每节内容指定二级标题 若某节进一步分成小节，则可以使用三级标题。 依次类推，使用更小标题 例2.2 制作一个含有1级标题的页面,中山大学计算机科学系,2019/5/24,8,2.2.2 水平线,使用单标签 可以绘制一条水平线，常用于分隔同一页面的标题与正文或者分隔多个章节 例2.3 制作一个含有两级标题的页面，并使用水平线分隔这几个章节,中山大学计算机科学系,2019/5/24,9,2.
7、2.3 段落,段落标签用于标记文档中的正文。主要有： ：用于标记普通正文段落 ：表示地址，如住址、邮件地址等 ：块引用标签，表示引用文本，通常两边缩排。其常用属性是 cite 属性，用于指定引用来源的 URL ：预定义格式标签，表示程序代码之类的信息，会显示该标签对之间的空白字符（如空格、换行符） 例2.4 制作一个含有块引用段落的页面,中山大学计算机科学系,2019/5/24,10,2.2.3 段落,例2.5 制作一个含有 段落的页面 转义字符：“” 分别表示小于符号“”,中山大学计算机科学系,2019/5/24,11,2.2.4 强制分行,利用单标签 可以在指定位置分行，但不分段 例2.6
8、 显示一首诗“静夜思” 是注释标签,中山大学计算机科学系,2019/5/24,12,2.3 标记行内元素 2.3.1 块级元素与行内元素,一、可视页面元素分类 块级元素：可以表示一个完整段落的页面元素，如各级标题、p 段落、pre 段落、水平线等。默认情况下，块级元素的后续元素另起一行显示 行内元素：可以出现在段落中的页面元素，如普通文本、图像等页面元素。默认情况下，相邻行内元素显示在同一行中,中山大学计算机科学系,2019/5/24,13,2.3.1 块级元素与行内元素,二、页面元素的嵌套关系 块级元素可以包含行内元素或其他块级元素 行内元素可以包含文本或其他行内元素，但是行内元素不能包含块
9、级元素 使用制作工具的“智能感知”机制，如,中山大学计算机科学系,2019/5/24,14,2.3.1 块级元素与行内元素,三、行内元素分类 分为短语、计算机代码和字符格式化 这些行内元素标签都有确切的语义，也具有特殊的默认显示格式。在选择使用哪一种行内元素标签时，应当依据页面元素的语义而不是格式。,中山大学计算机科学系,2019/5/24,15,2.3.2 标记短语,短语类标签包括： 标记只取首字母的缩写。如 DTD 标记任意缩写。如 Web 标记术语在文档中的第1次出现 标记短的引文 标记引用的出处或来源 标记强调的文本 标记语气更为强烈的强调文本 标记被删除的文本 标记被插入的文本,中山
10、大学计算机科学系,2019/5/24,16,2.3.2 标记短语,自动生成方法：打开“字体”对话框，再勾选“效果”区中的某个复选框 例2.7 含有多种短语样例的页面,中山大学计算机科学系,2019/5/24,17,2.3.3 标记计算机代码,标签、 和 可以标记源代码、变量、输出和键盘文本等代码 例2.8 含有多种计算机代码样例的页面,中山大学计算机科学系,2019/5/24,18,2.3.4 标记指定格式的文本,标签 、 和 等可以明确将文本的显示格式指定为粗体、斜体、字体增大、缩小、上标、下标等特殊显示效果 例2.9 含有多种字符格式化元素样例的页面,中山大学计算机科学系,2019/5/2
11、4,19,2.4 建立超链接,基本形式： href 属性指定 Web 文件的位置 自动生成方法：先选中要建立超链接的文字或图像，然后选择菜单“插入”“超链接”命令,中山大学计算机科学系,2019/5/24,20,2.4.1 文本链接,链接的文本允许在一个单词或短语上单击从而显示另一个页面，文本链接通常显示为带下划线的彩色字符串。 例2.10 文字“千禧年”是一个到页面 year2k.htm 的超链接,中山大学计算机科学系,2019/5/24,21,2.4.2 图像链接,链接的图像允许在一个图像上单击而显示另一个页面 单标签 标记图像 src 属性指定图像文件的 URL alt 属性指定图像的简
12、短描述文本 例2.11 图像是一个到页面 year2k.htm 的超链接,中山大学计算机科学系,2019/5/24,22,2.4.3 锚点链接,一、定义锚点（书签） 这里是一个锚点 二、链接锚点 链接锚点location 例2.12 展示锚点的作用,中山大学计算机科学系,2019/5/24,23,2.4.4 URL 的多种形式,在链接中，既可以使用绝对 URL，也可以使用相对 URL，另外也可以使用锚点。,中山大学计算机科学系,2019/5/24,24,2.5 制作列表 2.5.1 常规列表,常规列表分为以下两种： 有序列表 ：列出项之间有次序关系 无序列表 ：列出项之间无次序关系 例2.13
13、 展示无序列表和有序列表,中山大学计算机科学系,2019/5/24,25,2.5.2 列表嵌套,在列表项 之间允许嵌入列表标签，从而可以在 HTML 文档中标记具有嵌套结构的列表 例2.14 嵌套列表,中山大学计算机科学系,2019/5/24,26,2.5.3 定义列表,定义列表: 每个项目有词条和定义两个部分 例2.15 页面列出 HTML 和 IE 术语的定义,中山大学计算机科学系,2019/5/24,27,2.6 制作表单 2.6.1 定义表单,表单允许访问者填写信息，提交后，表单信息就从客户端浏览器传送到服务器、处理 标签，其常用属性有 action、method 等 在表单中，可以放
14、置文本输入框、复选框、单选按钮、提交按钮、复位按钮等 例2.16 登录表单,中山大学计算机科学系,2019/5/24,28,2.6.2 定义表单控件,一、输入域 标签 type 属性：定义单行文本输入框（text）、复选框（checkbox）、单选按钮（radio）、按钮（button）等输入域 其他属性：name、value、size、maxlength、checked、readonly、disabled,中山大学计算机科学系,2019/5/24,29,2.6.2 定义表单控件,二、其他表单控件 定义文本区， cols 和 rows 属性 定义高级按钮：高级按钮上的显示内容是 与 标签之间的
15、 HTML 代码描述的内容，如文本、图像等 定义列表框 根据 size 属性，区分下拉列表框、普通列表框 根据 multiple 属性，区分单选列表框、多选列表框,中山大学计算机科学系,2019/5/24,30,2.6.2 定义表单控件,例2.17 典型用户调查表,中山大学计算机科学系,2019/5/24,31,2.6.2 定义表单控件,例2.18 下拉列表，分组选项,中山大学计算机科学系,2019/5/24,32,2.7 添加多媒体,使用对象标签 可以为页面添加音频、视频、动画等多媒体信息。 classid 属性：指定可运行于页面的程序对象（称为 ActiveX 对象或 ActiveX 控件
16、） 参数标签 ：为程序对象提供执行参数，如多媒体文件的 URL 自动生成：使用制作工具的插入对象功能 例2.19 放置“Windows Media Player”媒体播放器控件,中山大学计算机科学系,2019/5/24,33,2.8 通用属性,通用属性是指可用于几乎所有 HTML 标签的属性。这类属性又分为核心属性和语言属性。 一、核心属性 class：类名，对页面元素进行分类 id：ID 标识符，唯一标识 style：样式属性，直接给出样式声明 title：指定提示文本 二、语言属性 dir：文本显示方向，可以指定为 “ltr“或 “rtl“ Lang：指定语言代码,中山大学计算机科学系,2019/5/24,34,2.9 扩展 HTML 标签,特殊块标签 ：分区标签，块级标签，标记相对独立的区或节 ：范围标签，行中块，标记具有特殊含义的行内元素 适当使用其 class 或 id 属性，可以定义新的块级或行内元素，以达到扩展 HTML 标签的效果 例2.20 修改例2.3 使用 标签标记各章节，并指定属性 class=“section“。相当于定义新的块级
