第二部分第二部分 信息组织信息组织网络信息组织基础语言网络信息组织基础语言 HTMLHTML2.1 HTML2.1 HTML简介简介 2.2 HTML2.2 HTML文档的基本结构文档的基本结构 2.3 2.3 网页文件的创建过程网页文件的创建过程 2.4 2.4 段落标记段落标记 2.5 2.5 文字标记文字标记 2.6 2.6 超链接超链接 2.7 2.7 图片图片 2.8 2.8 列表列表 2.9 2.9 表格表格 2.10 2.10 字幕、音频和视频字幕、音频和视频 2.11 2.11 框架（多窗口页面框架（多窗口页面） 2.12 2.12 表单表单第第2 2部分部分 网页制作基础语言网页制作基础语言HTML HTML HTMLHTML是是Hypertext Markup LanguageHypertext Markup Language（超文本标超文本标 记语言）的缩写，是一种为普通文件中某些字句加上标识的记语言）的缩写，是一种为普通文件中某些字句加上标识的 语言，其目的在于运用标记（语言，其目的在于运用标记（tagtag）对文件达到预期的效果。对文件达到预期的效果。 它是构成它是构成WebWeb页面（页面（PagePage），），用来表示用来表示WebWeb页面的符号标页面的符号标 记语言。通过记语言。通过HTMLHTML，将所需要表达的信息按某种规则写成将所需要表达的信息按某种规则写成 HTMLHTML文件，通过专用的浏览器来识别，并将这些文件，通过专用的浏览器来识别，并将这些HTMLHTML文文 件翻译成可以识别的信息，就是所见到的网页。件翻译成可以识别的信息，就是所见到的网页。HTMLHTML语言是建立网页的规范或标准，从它出现发展到语言是建立网页的规范或标准，从它出现发展到 现在，规范不断完善，功能越来越强。但是依然有缺陷和不现在，规范不断完善，功能越来越强。但是依然有缺陷和不 足，人们仍在不断的改进它，使它更加便于控制和有弹性，足，人们仍在不断的改进它，使它更加便于控制和有弹性， 以适应网络上的应用需求。以适应网络上的应用需求。20002000年，年，W3CW3C组织公布发行了组织公布发行了 XHTML 1.0XHTML 1.0版本。版本。XHTML 1.0XHTML 1.0是一种在是一种在HTML 4.0HTML 4.0基础上优基础上优 化和改进的新语言，目的是基于化和改进的新语言，目的是基于XMLXML应用。应用。XHTMLXHTML是一种是一种 增强了的增强了的HTMLHTML，它的可扩展性和灵活性将适应未来网络应它的可扩展性和灵活性将适应未来网络应 用更多的需求。用更多的需求。 2.1 HTML2.1 HTML简介简介1.1.标记标记HTMLHTML文档由标记和被标记的内容组成。标记（文档由标记和被标记的内容组成。标记（tagtag）能能 产生所需的各种效果。格式为：产生所需的各种效果。格式为： 受标记影响的内容受标记影响的内容 例如，标题标记例如，标题标记表示为：表示为：我的第一个网页我的第一个网页 2. 2. 标记的属性标记的属性标记只是规定这是什么信息，或是文本，或是图片，但标记只是规定这是什么信息，或是文本，或是图片，但 怎样显示或控制这些信息，就需要在标记后面加上相关的属怎样显示或控制这些信息，就需要在标记后面加上相关的属 性来表示，每个标记有一系列的属性。格式为：性来表示，每个标记有一系列的属性。格式为：2“ 受受 影响的内容影响的内容 例如，字体标记例如，字体标记有属性有属性sizesize和和colorcolor等。等。属性示例属性示例 2.2 HTML2.2 HTML文档的基本结构文档的基本结构 2.2.1 2.2.1 标记及其属性标记及其属性HTMLHTML文档是一种纯文本格式的文件，文档是一种纯文本格式的文件，HTMLHTML文档文档 的基本结构为：的基本结构为：网页的标题网页的标题 网页的内容网页的内容【例例2-12-1】2.2 HTML2.2 HTML文档的基本结构文档的基本结构 2.2.2 HTML2.2.2 HTML的基本结构的基本结构用最简单的用最简单的“ “记事本记事本” ”来编辑网页。来编辑网页。 打开记事本。单击打开记事本。单击WindowsWindows的的“ “开始开始” ”按钮，在按钮，在“ “程程 序序” ”菜单中的菜单中的“ “附件附件” ”子菜单中单击子菜单中单击“ “记事本记事本” ”。 创建新文件，并按创建新文件，并按HTMLHTML语言规则编辑。在语言规则编辑。在“ “记事本记事本” ” 窗口中输入窗口中输入HTMLHTML语言，输入的内容。语言，输入的内容。 保存网页。打开保存网页。打开“ “记事本记事本” ”的的“ “文件文件” ”菜单，选择菜单，选择“ “保存保存” ” 。此时将出现。此时将出现“ “另存为另存为” ”对话框，在对话框，在“ “保存在保存在” ”下拉列表框中选下拉列表框中选 择文件要存放的路径；在择文件要存放的路径；在“ “文件名文件名” ”文本框输入以文本框输入以.html.html或或 . .htmhtm为后缀的文件名，如为后缀的文件名，如mypage1.htmlmypage1.html；在在“ “保存类型保存类型” ” 下拉列表框中选择下拉列表框中选择“ “文本文档文本文档” ”。最后单击。最后单击“ “保存保存” ”按钮，将记按钮，将记 事本中的内容保存在磁盘中。事本中的内容保存在磁盘中。 如果希望这一页是网站的首页（主页），想让浏览者输如果希望这一页是网站的首页（主页），想让浏览者输 入网址后，就显示这一页的内容，可以把这个文件设为默认入网址后，就显示这一页的内容，可以把这个文件设为默认 文档，文件名为文档，文件名为index.htmlindex.html或或index.htmindex.htm。 2.3 2.3 网页文件的创建过程网页文件的创建过程 2.3.1 2.3.1 编辑和保存网页编辑和保存网页 通过编辑可以得到一个通过编辑可以得到一个.html.html文件，要想使这个文档显文件，要想使这个文档显 示出网页的样子，就要使用浏览器进行预览。有两种方法示出网页的样子，就要使用浏览器进行预览。有两种方法 可以打开可以打开.html.html网页文件。网页文件。1. 1. 用浏览器打开用浏览器打开网页在浏览后会有不满意的地方，此时可重新在网页在浏览后会有不满意的地方，此时可重新在“ “记事记事 本本” ”中打开该中打开该.html.html文件修改；或者在浏览器中直接打开源文件修改；或者在浏览器中直接打开源 文件（在文件（在IEIE中，从中，从“ “查看查看” ”菜单中的菜单中的“ “源文件源文件” ”中打开）。修中打开）。修 改后，单击改后，单击“ “文件文件” ”菜单中的菜单中的“ “保存保存” ”命令。如果浏览器没有命令。如果浏览器没有 关闭，要在浏览器中看到修改后的效果，不必重新打开该关闭，要在浏览器中看到修改后的效果，不必重新打开该 文件，直接单击浏览器工具栏上的文件，直接单击浏览器工具栏上的“ “刷新刷新” ”按钮。按钮。2. 2. 在在“ “WindowsWindows资源管理器资源管理器” ”或或“ “我的电脑我的电脑” ”中打开中打开在在“ “WindowsWindows资源管理器资源管理器” ”或或“ “我的电脑我的电脑” ”中双击要打中双击要打 开的开的.html.html文件，这时将直接在默认的浏览器中打开该文件，这时将直接在默认的浏览器中打开该 .html.html文件。文件。 2.3 2.3 网页文件的创建过程网页文件的创建过程 2.3.2 2.3.2 预览网页预览网页 注释标记的格式为：注释标记的格式为：注释并不局限于一行，长度不受限制。结束标记与开始标注释并不局限于一行，长度不受限制。结束标记与开始标 记可以不在一行上。记可以不在一行上。 2.4.2 2.4.2 强制换行和不换行标记强制换行和不换行标记 、. 要用要用HTMLHTML的标记来强制换行、分段。的标记来强制换行、分段。放在一行的放在一行的 末尾，可以使后面的文字、图片、表格等显示于下一行，而又末尾，可以使后面的文字、图片、表格等显示于下一行，而又 不会在行与行之间留下空行，即强制文本换行。强制换行标记不会在行与行之间留下空行，即强制文本换行。强制换行标记 的格式为：的格式为：文字 不换行标记可令文字不能因太长使浏览器无法显示而换行不换行标记可令文字不能因太长使浏览器无法显示而换行 ，它对住址、数学公式、一行数字等尤其有用。其格式为：，它对住址、数学公式、一行数字等尤其有用。其格式为：文字 【例2-2】 2.4 2.4 段落标记段落标记2.4.1 2.4.1 注释标记注释标记 段落标记放在一个段落的头尾，用于定义一个段落。段落标记放在一个段落的头尾，用于定义一个段落。 .标记不但能使后面的文字换到下一行，还可标记不但能使后面的文字换到下一行，还可 以使两段之间多一空行，相当于两个以使两段之间多一空行，相当于两个标记。段标记。段 落标记的格式为：落标记的格式为：文字文字 一个段落标记一个段落标记可以看作是两个可以看作是两个标记，即标记，即 。其中属性其中属性alignalign用来设置段落文字在网页上的对齐方式用来设置段落文字在网页上的对齐方式 ：leftleft（左对齐）、左对齐）、centercenter（居中）和居中）和rightright（右对齐）。右对齐）。 缺省时默认为缺省时默认为leftleft。格式中的格式中的“ “|”|”表示表示“ “或者或者” ”，即多中选一。，即多中选一。【例例2-32-3】 2.4 2.4 段落标记段落标记2.4.3 2.4.3 段落标记段落标记. . 设定文字、图像、表格的摆放位置。当在许多段落中设定文字、图像、表格的摆放位置。当在许多段落中 设置对齐方式时，常使用设置对齐方式时，常使用标记。定位标记标记。定位标记 的格式为：的格式为：文本、图像或表文本、图像或表 格格 其中属性其中属性alignalign用来设置文本块、一段文字或标题在网用来设置文本块、一段文字或标题在网 页上的对齐方式：页上的对齐方式：leftleft、centercenter和和rightright。缺省时默认为缺省时默认为leftleft 。【例例2-42-4】 2.4 2.4 段落标记段落标记2.4.4 2.4.4 定位标记定位标记 在页面中插入一条水平标尺线，可以使不同功能的文在页面中插入一条水平标尺线，可以使不同功能的文 字分隔开，看起来整齐、明了。当浏览器解释到字分隔开，看起来整齐、明了。当浏览器解释到HTMLHTML文档文档 中的中的标记时，会在此处换行，并加入一条水平线段。标记时，会在此处换行，并加入一条水平线段。 线段的样式由标记的参数决定。线段的样式由标记的参数决定。水平线标记的格式为：水平线标记的格式为：sizesize设定线条粗细，以像素为单位，默认为设定线条粗细，以像素为单位，默认为2 2。widthwidth设定线段长度，可以是绝对值（以像素为单位设定线段长度，可以是绝对值（以像素为单位 ）或相对值（相对于当前窗口的百分比）。）或相对值（相对于当前窗口的百分比）。 colorcolor设定线条色彩，默认为黑色。可以采用色彩的名设定线条色彩，默认为黑色。可以采用色彩的名 称。色彩可以用相应英文单词或以称。色彩可以用相应英文单词或以“ “#”#”引导的一个十六进制引导的一个十六进制 数代码来表示。数代码来表示。 【例例2-52-5】 2.4 2.4 段落标记