《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“。相当于定义新的块级