第2章 HTML语言基础 *通过本章学习，应该掌握以下内容：1.掌握HTML文档的基本结构； 2.掌握HTML中文本格式的应用； 3.掌握HTML中超链接的知识； 4.掌握HTML中多媒体元素的应用； 5.掌握HTML中表格和表单的应用n一、选择题 n1、网页是用_语言编写，通过WWW传播，并被WEB浏览器 翻译成为可以显示出来的集文本、超链接、图片、声音和动画、视频 等信息元素为一体的页面文件。 n （A）、C语言 n （B）、C+语言 n （C）、HTML语言 n （D）、Basic语言 n2、关于站点与网页说法不正确的是_。 n （A）、 制作完成的网页最后要放置在Web Server上 n （B）、 完成作品后再将本地文件夹里完成的作品上传到服务器中 成为真正的网站，服务器即远端站点 n （C）、 制作者可以在远端站点(服务器)上制作网页 n （D）、 制作网页时，常把本地计算机的文件夹模拟成远程服务器 的文件夹，因此本地文件夹也称为本地站点 n3、网页文件的扩展名为_。 n （A）、 TXT n （B）、 GIF n （C）、 HTM n （D）、 DOC n4、HTTP协议是一种_。 n （A）、 远程登录协议 n （B）、 文件传输协议 n （C）、 邮件接收协议 n （D）、 超文本传输协议 n二、思考题 n1、常用的网页设计软件有哪些？ n3、网页和网站的区别是什么？一名网页设计高手，就必需掌握HTML语言。 HTML是网络的通用语言，它允许设计者建立文本与图像相结合的复杂页面，这些页面可以被网上任 何人浏览，无论使用的是什么类型的电脑或浏览器 。 HTML作为一种网页编辑语言，易学易懂，能制作出精美的网页效果，其他的专用网页编辑器（ 如FrontPage、Dreamweaver）都是以HTML为基础的。 nHTML是网页制作的基础语言，它是一种用来制作超文 本文档的置标语言。用HTML编写的超文本文档被称为 HTML文档。现在有很多所见即所得的网页制作工具， 但是这些工具生成的代码仍然以HTML为基础。所以掌 握一些HTML的语法有利于今后的学习和应用。 nHTML是表示网页的一种规范，它通过标记符定义了网 页内容的显示格式。在文本文件的基础上，增加一系 列描述文本格式、颜色等的标记，再加上声音、动画 以及视频等，形成精彩的画面 一、HTML的基本语法n1.标记（tag）n（1）分类n 双标记，即成对出现，如 n 受标记影响的内容n 例如：网页的标题对应的标记表示为：第一个网页的标题n 单标记，如 换行符（2）规则 n每个标记都用小于号（）结束，如 、，以此表示是HTML代码而不是普通文本 内容。注意，小于号和大于号之间不能留有空格及其他字 符。 n大部分标记都是由开始标记（如）和结束标记（ 如）组成的。区别在于？ n有少数标记只有开始标记，而没有结束标记，比如、 等。 n标记本身是不区分大小写的，但是建议标记字母用小写。 n对于同一段要标记的内容，可以同时使用多个标记共同作 用，各标记之间的顺序可以是任意的。2.标记的属性n 每一个标记都有一系列的属性，标记可以通 过不同属性来展现各种效果。n 格式为：受标记影响的内容n例如，字体标记有设置字体大小的属性 size，设置字体颜色的属性color等。具体表示 为：字体属性演 示n属性有以下语法规则： n所有的属性都必须写在开始标记里，不同属性之间用 空格隔开。但不是所有标记都有属性，如换行符 。 n每个属性都有其默认值，通常属性值要加双引号（“ “ ）或单引号（ ）括起来，但如果属性值由字母、数字 组成，双引号或单引号可以省略。 n标记的属性可以有选择地使用，属性之间没有顺序的 要求。 n属性名不区分大小写，建议用小写表示。二、HTML文档的编辑n常见的网页编辑软件（如Dreamweaver等）可通过所见即所得的方式 自动生成HTML代码，用户只要在此基础上做一些修改即可，这样可 以节省大量时间。 n介绍用记事本来编辑HTML文档，具体操作步骤如下： n打开记事本。选择“开始”-“程序”-“附件”-“记事本”命令，打开记事本编 辑环境。 n编辑HTML文档。按照HTML语法规则编辑内容， n保存HTML文档。在记事本中选择“文件”-“保存 ”命令，在弹出的“另存为”对话框的“保存在”下 拉列表框中选择要存放的路径；在“文件名”文 本框中输入以.html或.htm为扩展名的文件名； 在“保存类型”下拉列表框中选择“所有文件”选项 ，最后单击“保存”按钮将记事本内容保存即可 。三、HTML文档的基本结构HTML 文档网页 头部网页 主体网页标题，显示在浏览器的标题栏上这是页面上显示的内容，网页的主体部分 属 性作 用bgcolor设设置页页面背景颜颜色text设设置页页面非可链链接文字的颜颜色link设设置尚未被访问过访问过 的超链链接的颜颜色，默认为蓝认为蓝 色alink设设置超链链接在被访问访问 瞬间间的颜颜色，默认为蓝认为蓝 色vlink设设置已被访问过访问过 的超链链接的颜颜色，默认为蓝认为蓝 色background设设置页页面的背景图图像，bgproperties=”FIXED”可使背景 图图像固定 leftmargin设设置页页面左边边的空白，单单位是像素值值topmargin设设置页页面上方的空白，单单位是像素值值文档主体标记属性的作用nn n 第一个网页n n n 欢迎来到Dreamweaver的世界！n n例：创建一个简单的html文档四、基本标记n1、文本段落格式 n（1）.注释标记 n 在一些不同代码旁做一些HTML注释，如方便查找、方便比 对，方便项目组里的其他程序员了解代码，而且可以方便以后你 对自己代码的理解与修改等。浏览器忽略此标记中的文字不进行 显示。 n格式为： n注释不局限于一行，注释内容长度不受限制。结束标记与开始标 记可以不在一行上。 n （2）.分段标记 n分段标记放在一个段落的头尾，用于定义一个段落。 标记不但使标记的文本文字独立成为一段，还可以使段与段之间 显示效果上多空一行。格式为 n n n 段落标记练习 n n n 枫桥夜泊 n 张继月落乌啼霜满天，江枫渔火对愁眠。n 姑苏城外寒山寺，夜半钟声到客船。 n n n（3）.换行标记和不换行标记 n标记是在文档中强制断行，它只有开始标记 没有结束标记。与的区别在于，前者是 将文本划分为段落，而后者是在同一段内强制断 行，不会在行与行之间留下空行。格式为：文本n不换行标记可以使文字不能因为太长使浏览器无 法显示而换行，它一般对数学公式、一行数字等 尤其有效果。 n格式为：文字n n n 换行标记和不换行标记练习 n n n 枫桥夜泊 n张继 n 月落乌啼霜满天，江枫渔火对愁眠。 n 姑苏城外寒山寺，夜半钟声到客船。 n 改变浏览器的宽度，小于这一行的宽度，注意看显示的 效果！ n n n 4.标题标记 n标题是一段文字的核心，一般总是用加强的效果来突出显 示。网页中的信息可以根据主次不同设置不同大小的标题 ，为文章增加条理。 nHTML文档中应用标记，浏览器会自动将字体解释成 “黑体”，同时将内容设置为一个段落。格式为：标题文字 nn用来表示标题文字的大小，n取16的整数，取1时文字 最大，取6时文字最小。 n属性align用来设置标题在页面中的水平对齐方式。其中 left为默认取值，表示左对齐；center表示居中对齐；right 表示有对齐。n n n 标题练习 n n n 正常文本 n 六级标题,居中对齐 n 五级标题,居中对齐 n 四级标题,左对齐 n 三级标题,右对齐 n 二级标题,左对齐 n 一级标题,右对齐 n n2.分节标记n对于每一个和标记都设置了align属性如果有 成千上万这样的标记时，应该应用分节标记。分节标 记就是用来设定文字、图像、表格的摆放位置的 。格式为：n文本、图像或表格n属性align是用来设置文本块、一段文字或标题在网页 上的对齐方式的。其中left为默认取值，表示左对齐； center表示居中对齐；right表示右对齐。n n n 分节符练习 n n n n 枫桥夜泊 n 张继 n 月落乌啼霜满天， n 江枫渔火对愁眠。 n 姑苏城外寒山寺， n 夜半钟声到客船。 n n n 3.水平线标记n 在网页页面中添加水平标尺线（horizontal rules），可以使不同功能的文字分隔开，起到 修饰页面的作用。浏览器解释到HTML文档中 的标记时，会在此处换行，并添加水平线 段。格式为：n属性名功能说明align设置水平线的对齐方式，取值left、center、right，默认值为 leftsize设置水平线的粗细程度，取值为正数，默认值为 2px，单位像素（ pixel）width设置水平线的宽度，取值可为绝对 的像素值，也可为占浏览器窗口 宽度的百分比相对值，默认为浏览 器的100%color设置水平线的颜色，默认为黑色noshade设置不带阴影的水平线，默认为带 阴影的立体水平线n n n 水平线练习 n n n 默认水平线： n n 粗为8像素的水平线： n n 粗为8像素的实心水平线： n n 长度为100像素的粗为4像素的居中对齐水平线： n n 长度为浏览器窗口50%的右对齐的黄色水平线： n n n五、文字显示效果标记 1.字体标记属 性 名功 能 说 明size设置字体大小，取绝对值时 可取17，3为默认值，值越大文字显 示越大；取相对值时 ，+1表示比默认值大一号，反之亦然face设置字体，指定字体名称。中文默认字体为“宋体”，英文默认字体 为Times New Romancolor设置文字颜色，默认值为 黑色，其值可取颜色名称，也可取十六进 制值n