第3讲html-文本编辑

1、3、HTML基础知识 3.1 HTML概念 3.2 语法结构 3.3 格式修饰标记 3.4 创建HTML文件3.1HTML概念 HTML是“Hypertext Marked Language”的缩写，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，需要通过WEB浏览器显示出效果。 所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，HTML并不是一种程序语言，它只是一种排版网页中资料显示的结构语言，易学易懂，非常简单。 3.2HTML语法结构3.3格式修饰标记 HTML中有许多格式标记，常用的有居中、换行、

2、色彩、大小、字体、链接等，利用它们可以有效地控制内容的显示。由于格式标记多而复杂，一般很难完全记忆。Dreamweaver等开发工具能够自动添加格式标记，所以一般只需要了解这些格式标记都是什么含义就可以了。 HTML的标签分单标签和成对标签两种。 成对标签是由首标签 和尾标签组成的，成对标签的作用域只作用于这对标签中的文档。单独标签的格式，单独标签在相应的位置插入元素就可以了。 HTML文件的基本结构 HTML文件是一种纯文本格式的文件，HTML文件包括头部（head）和主体（body）。文件的基本结构为： 网页的标题网页的标题 网页的内容网页的内容 大多数标签都有自己的一些属性, 属性要写在

3、始标签内，属性用于进一步改变显示的效果, 各属性之间无先后次序，属性是可选的，属性也可以省略而采用默认值，其格式如下： 要设置的内容 作为一般的原则，大多数属性值不用加双引号。但是如果包含空格、号，号等特殊字符的属性值必须加入双引号。为了养成良好的习惯，提倡全部对属性值加双引号。如：要设置字体的文本内容 说明： HTML文件以开头，以结尾。 ：表示这是网页的头部，用来说明文件命名和与文件本身的相关信息。可以包括网页的标题部分：。 ：表示网页的主体即正文部分。 HTML语言并不要求在书写时缩进，但为了程序的易读性，建议网页设计制作者使标记的首尾对齐，内部的内容向右缩进几格。【例2-1】简单的HT

4、ML文件。 简单的HTML文件 最简单的网页 图2-1 例2-1的显示效果 将文件以2_1.htm为文件名存盘，存放的位置是本机的工作目录：ASP例（参见1.2.3）。有以下两种方式可以执行HTML文件2_1.htm：3.4创建HTML文件 创建HTML文件十分简单，在普通的Windows记事本（如图一）、写字板中都可以进行编辑。目前，有许多图形化的网页开发工具，如Dreamweaver（如图二）、FrontPage等。这些开发工具能够采用“所见即所得”的方法，直接处理网页，而不需要编写繁琐的标记，这使得用户在没有HTML语言基础的情况下，照样可以编写网页。但这些工具在自动生成网页时，往往会产

5、生一些垃圾代码，从而降低了网页的效率 。表2 颜色代码表名称英文颜色名16进制代码黑色black#000000蓝色blue#0000FF棕色brown#A52A2A青色cyan#00FFFF灰色gray#808080绿色green#008000乳白色ivory#FFFFF0桔黄色orange#FFA500粉红色pink#FFC0CB红色red#FF0000白色white#FFFFFF黄色yellow#FFFF00深红色crimson#CD061F黄绿色greenyellow#0B6EFF水蓝色dodgerblue#0B6EFF淡紫色lavender#DBDBF8【例2】使用网页的背景色（bgc

6、olor）属性，可以设定整个网页的背景颜色；使用网页的文本色（text）属性，可以设定整个网页文字的颜色。 这是主体之外的文本 试试BODY标记的属性 设置网页的背景色属性为黄绿色, 设置网页的文本色属性为蓝色 显示效果如图2-2所示。图2-2 使用网页的bgcolor属性3.2.3 段落和文字标记 1. 标题文字标记 2. 文本文字标记 3. 设置字型 4. 换行、换段标记 5. 分区显示标记 6. 水平线 7. 特殊符号设置文本1.输入文本 应用Dreamweaver编辑网页时，在文档窗口中光标为默认显示状态。要添加文本，首先应将光标移动到文档窗口中的编辑区域，然后直接输入文本，就像在其他

7、文本编辑器中一样。打开一个文档，在文档中单击鼠标左键，将光标置于其中，然后在光标后面输入文本。2.2.设置文本属性设置文本属性 利用文本属性可以方便地修改选中文本的字体、字号、样式、对齐方利用文本属性可以方便地修改选中文本的字体、字号、样式、对齐方式等，以获得预期的效果。选择式等，以获得预期的效果。选择“窗口窗口 属性属性”命令，弹出命令，弹出“属性属性”面板。面板。“属性”面板3.3.输入连续的空格输入连续的空格在默认状态下，在默认状态下，Dreamweaver Dreamweaver 只允许网站设计者输入一个空格，要只允许网站设计者输入一个空格，要输入连续多个空格则需要进行设置或通过特定操

8、作才能实现。输入连续多个空格则需要进行设置或通过特定操作才能实现。设置设置“首选参数首选参数”对话框对话框选择选择“编辑编辑 首选参数首选参数”命令，弹出命令，弹出“首选参数首选参数”对话框，在对话对话框，在对话框中选择框中选择“允许多个连续的空格允许多个连续的空格”复选框。复选框。直接插入多个连续空格直接插入多个连续空格在在Dreamweaver Dreamweaver 中插入多个连续空格，有以下几种方法。中插入多个连续空格，有以下几种方法。选择选择“插入插入”面板中的面板中的“文本文本”选项卡，单击选项卡，单击“字符字符”展开式按展开式按钮钮 ，选择，选择“不换行空格不换行空格”按钮。按钮

9、。选择选择“插入记录插入记录 HTML HTML 特殊字符特殊字符 不换行空格不换行空格”命令，或按命令，或按快捷键。快捷键。将输入法转换到中文的全角状态下。将输入法转换到中文的全角状态下。【例3】使用标题标记设置标题内容的大小与对齐方式。 浏览器的显示效果如图2-3所示。文本文字标记 在网页中为了增强页面的层次，其中的文字可以用不同的大小、字体、字型、颜色。文本文字标记用来设定文字的字体、字号和颜色。其格式为： FONT size= 被设置的文字被设置的文字 说明：标记的属性包括：size、face、color。 size属性用来设置文字的大小。数字的取值范围从17，size取1时最小，取7

10、时最大。图2-4 设置文本文字属性 4.4.设置页边距设置页边距 按照文章的书写规则，正文与纸的四周需要留有一定的距离，这个距按照文章的书写规则，正文与纸的四周需要留有一定的距离，这个距离叫做页边距。网页设计也如此，在默认状态下文档的上、下、左、右边离叫做页边距。网页设计也如此，在默认状态下文档的上、下、左、右边距不为零。距不为零。 修改页边距的具体操作步骤如下。修改页边距的具体操作步骤如下。（1 1）选择）选择“修改修改 页面属性页面属性”命令，弹出命令，弹出“页面属性页面属性”对话框。对话框。（2 2）根据需要在对话框的）根据需要在对话框的“左边距左边距”、“右边距右边距”、“上边距上边距

11、”、“下边距下边距”、“边距宽度边距宽度”和和“边距高度边距高度”选项的数值框中输入相应的数选项的数值框中输入相应的数值。值。5.5.设置网页的标题设置网页的标题 HTML HTML页面的标题可以帮助站点浏览者理解所查看网页的内容，并在浏览页面的标题可以帮助站点浏览者理解所查看网页的内容，并在浏览者的历史记录和书签列表中标志页面。文档的文件名是通过保存文件命令者的历史记录和书签列表中标志页面。文档的文件名是通过保存文件命令保存的网页文件名称，而页面标题是浏览者在浏览网页时浏览器标题栏中保存的网页文件名称，而页面标题是浏览者在浏览网页时浏览器标题栏中显示的信息。显示的信息。 6.6.设置网页的默

12、认格式设置网页的默认格式 用户在制作新网页时，页面都有一些默认的属性，如网页的标题、网页用户在制作新网页时，页面都有一些默认的属性，如网页的标题、网页边界、文字编码、文字颜色、超链接的颜色等。若需要修改网页的页面属边界、文字编码、文字颜色、超链接的颜色等。若需要修改网页的页面属性，可选择性，可选择“修改修改 页面属性页面属性”命令，弹出命令，弹出“页面属性页面属性”对话框。对话框。页面属性对话框文本编辑1.1.改变文本的大小改变文本的大小 Dreamweaver Dreamweaver 提供了两种改变文本大小的方法，一种是设置文本的默认提供了两种改变文本大小的方法，一种是设置文本的默认大小，另

13、一种是设置选中文本的大小。大小，另一种是设置选中文本的大小。 设置文本的默认大小设置文本的默认大小设置选中文本的大小设置选中文本的大小文本的相对大小和绝对大小文本的相对大小和绝对大小2.2.改变文本的颜色改变文本的颜色 丰富的视觉色彩可以吸引用户的注意，网页中的文本不仅可以是黑色，还丰富的视觉色彩可以吸引用户的注意，网页中的文本不仅可以是黑色，还可以呈现为其他色彩，最多时可达到可以呈现为其他色彩，最多时可达到16 777 21616 777 216种颜色。颜色的种类与用种颜色。颜色的种类与用户显示器的分辨率和颜色值有关，通常在户显示器的分辨率和颜色值有关，通常在216216种网页色彩中选择文字

14、的颜色。种网页色彩中选择文字的颜色。在在Dreamweaver Dreamweaver 中提供了两种改变文本颜色的方法。中提供了两种改变文本颜色的方法。设置文本的默认颜色设置文本的默认颜色设置选中文本的颜色设置选中文本的颜色3.3.改变文本的字体改变文本的字体 Dreamweaver Dreamweaver 提供了两种改变文本字体的方法，一种是设置文本的默提供了两种改变文本字体的方法，一种是设置文本的默认字体，一种是设置选中文本的字体。认字体，一种是设置选中文本的字体。设置文本的默认字体设置文本的默认字体设置选中文本的字体设置选中文本的字体4.4.改变文本的对齐方式改变文本的对齐方式 文本的对

15、齐方式是指文字相对于文档窗口或浏览器窗口在水平位置的对文本的对齐方式是指文字相对于文档窗口或浏览器窗口在水平位置的对齐方式。对齐方式按钮有以下齐方式。对齐方式按钮有以下4 4种。种。“左对齐左对齐”按钮：使文本在浏览器窗口中左对齐。按钮：使文本在浏览器窗口中左对齐。“居中对齐居中对齐”按钮：使文本在浏览器窗口中居中对齐。按钮：使文本在浏览器窗口中居中对齐。“右对齐右对齐”按钮：使文本在浏览器窗口中右对齐。按钮：使文本在浏览器窗口中右对齐。“两端对齐两端对齐”按钮：使文本在浏览器窗口中两端对齐。按钮：使文本在浏览器窗口中两端对齐。5.5.设置文本样式设置文本样式 文本样式是指字符的外观显示方式，

16、例如加粗文本、倾斜文本和文本文本样式是指字符的外观显示方式，例如加粗文本、倾斜文本和文本加下划线等。加下划线等。标记格式字体效果说明受影响的文字受影响的文字受影响的文字加粗受影响的文字受影响的文字斜体受影响的文字受影响的文字带下划线受影响的文字受影响的文字标准打印机字体受影响的文字受影响的文字带删除线受影响的文字下标受影响的文字上标受影响的文字大字体文本受影响的文字小字体文本【例5】使用字型标记设置文字的风格。图2-5 设置文本的风格6.6.段落文本段落文本 段落是指描述一个主题并且格式统一的一段文字。在文档窗口中，输入段落是指描述一个主题并且格式统一的一段文字。在文档窗口中，输入一段文字后按

17、一段文字后按EnterEnter键，这段文字就显示在键，这段文字就显示在标签中。标签中。 应用段落格式应用段落格式指定预格式指定预格式7.7.插入换行符插入换行符 为段落添加换行符有以下几种方法。为段落添加换行符有以下几种方法。 （1 1）选择）选择“插入插入”面板的面板的“文本文本”选项卡，单击选项卡，单击“字符字符”展开式工展开式工具按钮，选择具按钮，选择“换行符换行符”按钮。按钮。 （2 2）按）按组合键。组合键。 （3 3）选择）选择“插入记录插入记录 HTML HTML 特殊字符特殊字符 换行符换行符”命令。命令。【例2-6】换行与换段标记的使用。图2-6 换行与换段标记的使用水平线

18、1.1.水平线水平线 分割线又叫做水平线，可以将文字、图像、表格等对象在视觉上分割开。分割线又叫做水平线，可以将文字、图像、表格等对象在视觉上分割开。一篇内容繁杂的文档，如果合理地放置几条水平线，就会变得层次分明，一篇内容繁杂的文档，如果合理地放置几条水平线，就会变得层次分明，便于阅读。便于阅读。创建水平线创建水平线修改水平线修改水平线 列表列表”命令，弹出其子菜单，选择命令，弹出其子菜单，选择“项目列表项目列表”或或“编号列表编号列表”命令。命令。 练习：2.2.修改项目符号或编号修改项目符号或编号（1 1）将插入点放在设置项目符号或编号的文本中。）将插入点放在设置项目符号或编号的文本中。（

19、2 2）通过以下几种方法启动）通过以下几种方法启动“列表属性列表属性”对话框。对话框。 单击单击“属性属性”面板中的面板中的“列表项目列表项目”按钮。按钮。 选择选择“文本文本 列表列表 属性属性”命令。命令。3.3.设置文本缩进格式设置文本缩进格式 设置文本缩进格式有以下几种方法。设置文本缩进格式有以下几种方法。 （1 1）在）在“属性属性”面板中单击面板中单击“文本缩进文本缩进”按钮或按钮或“文本凸出文本凸出”按钮，按钮，使段落向右移动或向左移动。使段落向右移动或向左移动。 （2 2）选择）选择“文本文本 缩进缩进”命令或命令或“文本文本 凸出凸出”命令，使段落向右命令，使段落向右移动或向左移动。移动或向左移动。 （3 3）按）按组合键或按组合键或按组合键