网页html代码详解

1、第第2章章 HTML语言语言本章要点：本章要点： HTML的基础知识的基础知识 常用常用HTML标记标记 XHTML2.1 HTML简介简介nHTML（Hyper Text Markup Language）称为称为，是一种描述文档结构的标记，是一种描述文档结构的标记语言，它是一种应用非常广泛的语言，它是一种应用非常广泛的，也，也是最早被用来显示是最早被用来显示Web页的语言之一。它与操页的语言之一。它与操作系统平台的选择无关，只要有作系统平台的选择无关，只要有就可以就可以运行运行HTML文档，显示网页内容。文档，显示网页内容。nHTML文档类似于文档类似于.txt文本文件，不同的是，文文本文件

2、，不同的是，文档里还包含一种被称为档里还包含一种被称为的符号。的符号。2.1.1 标记的格式标记的格式1. 标记的功能标记的功能n控制网页的显示方式控制网页的显示方式2. 标记的构成标记的构成n由由 及括在其中的命令字符串组成及括在其中的命令字符串组成 、成对出现，成对出现， 如如、 ，如，如、2.1.1 标记的格式标记的格式3. 标记的使用方法标记的使用方法 (1) 文本或超文本文本或超文本 (2) 文本或超文本文本或超文本 例：例：你好！你好！ (3) 2.1.1 标记的格式标记的格式n书写书写HTML代码时应代码时应以下几点：以下几点：1) HTML标记及属性中字母标记及属性中字母不区分

3、大小写不区分大小写，如，如与与对浏览器来说是完全相同的。对浏览器来说是完全相同的。2) 标记名与左尖括号之间不能留有空白，如标记名与左尖括号之间不能留有空白，如是错误的。是错误的。3) 属性要写在开始标记的尖括号中，放在标记名后，属性要写在开始标记的尖括号中，放在标记名后，并且与标记名之间要有空白；多个属性之间也要有并且与标记名之间要有空白；多个属性之间也要有空白；属性值最好用单引号或双引号引起来，引号空白；属性值最好用单引号或双引号引起来，引号一定要是一定要是英文英文的引号，不能是中文引号。的引号，不能是中文引号。4) 结束标记要书写正确，不能忘掉斜杠。结束标记要书写正确，不能忘掉斜杠。2.

4、1.2 HTML文档结构文档结构表表2-1 html文件构成骨架文件构成骨架文件开始文件开始头头 部部 标题名标题名 其他头部内容定义标记其他头部内容定义标记 主主 体体 网页内容（文本、图像等网页内容（文本、图像等) 文件结束文件结束2.1.2 HTML文档结构文档结构1. 文件头部文件头部之间定义，内容可包括标题之间定义，内容可包括标题名、文本文件地址、创作者信息等网页信息说名、文本文件地址、创作者信息等网页信息说明。明。n文件头部还可包括一些其他标记：文件头部还可包括一些其他标记： 定义网页的标题；定义网页的标题； ：说明一些与文档相关的信息，如作：说明一些与文档相关的信息，如作 者、关

5、键内容、所用语言等；者、关键内容、所用语言等；2.1.2 HTML文档结构文档结构2. 文件主体文件主体n位于头部之后，在位于头部之后，在之间定义，之间定义，定义了网页上显示的主要内容和显示格式。定义了网页上显示的主要内容和显示格式。n文件主体内可包括众多其他标记。文件主体内可包括众多其他标记。2.1.2 HTML文档结构文档结构n标记常用标记常用： background：设置网页背景图案。设置网页背景图案。 例如例如 bgcolor：设置网页背景色。设置网页背景色。 例如例如 text：设置文本颜色，默认黑色。设置文本颜色，默认黑色。 link：设置尚未被访问过的超文本链接的颜色。设置尚未被

6、访问过的超文本链接的颜色。 vlink：设置已被访问过的超文本链接的颜色。设置已被访问过的超文本链接的颜色。2.1.2 HTML文档结构文档结构3. 注释注释n格式：格式：n注释以注释以“”结束，注释的内容会结束，注释的内容会被浏览器忽略。利用注释可以为被浏览器忽略。利用注释可以为HTML文档的不同文档的不同部分加上说明，方便日后修改，也可以利用注释为部分加上说明，方便日后修改，也可以利用注释为HTML文档加上版权声明。文档加上版权声明。n注释可有多行。注释可有多行。2.1.3 HTML的制作的制作n制作制作HTML文档需要两个基本工具，一个文档需要两个基本工具，一个HTML编辑器，编辑器，一

7、个一个Web浏览器。浏览器。nHTML编辑器可分为两类：编辑器可分为两类：基于文本或代码基于文本或代码的编的编辑器和辑器和所见即所得所见即所得(WYSIWYG)编辑器。前者在编辑器。前者在创建文档时只能看到创建文档时只能看到HTML代码，后者在编辑时代码，后者在编辑时即显示出类似于最终浏览器窗口显示的结果。即显示出类似于最终浏览器窗口显示的结果。nWeb浏览器用来浏览浏览器用来浏览HTML文档，在文档，在Windows操操作系统上，常用的浏览器是作系统上，常用的浏览器是Microsoft Internet Explorer，也常简称为也常简称为IE。2.1.3 HTML的制作的制作用记事本制作

8、网页的步骤如下：用记事本制作网页的步骤如下：1) 打开记事本。打开记事本。2) 在记事本中输入代码：在记事本中输入代码： 我的第一个网页我的第一个网页 这是我用记事本做的第一个网页，我会努力学好这是我用记事本做的第一个网页，我会努力学好HTML！ 2.1.3 HTML制作工具制作工具3) 保存文件：保存文件：HTML文件的扩展名为文件的扩展名为.htm、.html、.aspx或或asp，因为有些，因为有些Web服务器对中文文件名不服务器对中文文件名不能很好支持，所以文能很好支持，所以文件名中尽量不要使用汉字。件名中尽量不要使用汉字。4) 用浏览器打开上步保存的文件，即可看到如图用浏览器打开上步

9、保存的文件，即可看到如图2.1所示的页面。所示的页面。图图2.1 第一个网页第一个网页2.2 常用常用HTML标记标记 本节分类介绍常用的本节分类介绍常用的HTML标记及其常用属标记及其常用属性，其它标记的详细情况请参考相关书籍。性，其它标记的详细情况请参考相关书籍。2. 字体标记字体标记4. 图像标记图像标记6. 表格标记表格标记8. 其他标记其他标记 排版标记排版标记 3. 列表标记列表标记 5. 链接标记链接标记 7. 表单标记表单标记2.2.1 排版标记排版标记1. 段落标记段落标记n用于分段，用于分段，和和之间的文字在同一段落，之间的文字在同一段落，并使并使前段与后段之间加一空白行。

10、前段与后段之间加一空白行。结束标记结束标记可以省略，下一个可以省略，下一个开始意味着上一个开始意味着上一个结束结束 。n的常用属性的常用属性align，用来设定段落的对齐方，用来设定段落的对齐方式，可取属性值有：式，可取属性值有： left：左对齐；：左对齐； center：居中对齐；：居中对齐； right：右对齐。：右对齐。2.2.1 排版标记排版标记2. 强制换行强制换行n称为换行标记，在网页设计中比较常用，称为换行标记，在网页设计中比较常用，它的作用就是换行。它的作用就是换行。属于属于单标记，单标记，没有结没有结束标记，且不包含任何属性。束标记，且不包含任何属性。3. 预格式化标记预格

11、式化标记n称为预格式化标记，它的作用是称为预格式化标记，它的作用是按原始代按原始代码的排列方式显示内容。码的排列方式显示内容。通常情况下，浏览器通常情况下，浏览器显示时会忽略内容中的空白及换行，而显示时会忽略内容中的空白及换行，而与与之间的空白及换行会被保留。之间的空白及换行会被保留。2.2.1 排版标记排版标记4. 水平线标记水平线标记n称为水平线标记，可以在页面中产生一条水称为水平线标记，可以在页面中产生一条水平线，没有结束标记。平线，没有结束标记。的常用的常用属性属性有：有： align：对齐方式，属性值有对齐方式，属性值有left、center、right； width：长度，属性值可

12、以是绝对值长度，属性值可以是绝对值(像素像素)或相对或相对值值(百分比百分比) ； size：粗细，属性值为整数，单位为像素；粗细，属性值为整数，单位为像素； color：颜色。颜色。例：例： 2.2.1 排版标记排版标记5. n称为居中标记，可以使标记的内容居中称为居中标记，可以使标记的内容居中显示，使用时需要结束标记显示，使用时需要结束标记。6. n是块定义标签，用于定义一个块的风格。是块定义标签，用于定义一个块的风格。ndiv要有开始标签要有开始标签和结束标签和结束标签 n当要在许多段落中设置对齐方式时，常用当要在许多段落中设置对齐方式时，常用标标记和记和align属性。如：属性。如：

13、文本或图像文本或图像 2.2.1 排版标记排版标记例例2-2 图图2.2 排版标记排版标记2.2.2 字体标记字体标记1. 标题标题 标题标题，n可取可取16之间的整数值之间的整数值 每个标题标记所标记的文本加粗显示独占一行每个标题标记所标记的文本加粗显示独占一行且上下保留一空白行，由且上下保留一空白行，由到到字体依次变字体依次变小。可用属性设置标题的对齐方式。小。可用属性设置标题的对齐方式。2.2.2 字体标记字体标记2. 标记标记文本文本 常用属性：常用属性： face：用来设定文本的用来设定文本的字体字体，属性值为逗号隔，属性值为逗号隔开的字体列表，如果浏览器所在机器上没有安开的字体列表

14、，如果浏览器所在机器上没有安装指定的任何一种字体，则以浏览器默认字体装指定的任何一种字体，则以浏览器默认字体显示，所以使用时最好不使用特殊字体。显示，所以使用时最好不使用特殊字体。2.2.2 字体标记字体标记 size：用来设定文本的用来设定文本的大小大小，属性值可以是绝，属性值可以是绝对的或相对的，如对的或相对的，如size=“5”是绝对的，表示文本是绝对的，表示文本以以5号字显示号字显示; size=“+2”是相对的，表示文本在是相对的，表示文本在原先大小的基础上再增大原先大小的基础上再增大2级。级。 size属性可取属性可取17之间的整数值之间的整数值. color：设定文本的设定文本的

15、颜色颜色。 2.2.2 字体标记字体标记3. 标记标记为为粗体粗体标记，标记，与与之间的文本产生加粗效果。之间的文本产生加粗效果。为为斜体斜体标记，标记，与与之间的文本产生斜体效果。之间的文本产生斜体效果。为加为加下划线下划线标记，标记，与与之间的文本显示时会之间的文本显示时会加底线。加底线。为加为加删除线删除线标记，标记，与与之间的文本显示时会加之间的文本显示时会加删除线。删除线。注：注：这四个标记都是双标记，使用时如果忘掉结束标这四个标记都是双标记，使用时如果忘掉结束标 记，则开始标记对后面的所有文本都起作用。记，则开始标记对后面的所有文本都起作用。2.2.2 字体标记字体标记图图2.3

16、字体标记字体标记例例2-32.2.3 列表标记列表标记1. 无序列表无序列表与与n 定义项目列表的语法为：定义项目列表的语法为： 项项1 项项2 n 的常用属性只有一个的常用属性只有一个type，用来，用来设定列表项前面出现的符号，可取属设定列表项前面出现的符号，可取属性值有：性值有： disc：列表项前面加上符号；：列表项前面加上符号； circle：列表项前面加上符号；：列表项前面加上符号； square：列表项前面加上符号。：列表项前面加上符号。2.2.3 列表标记列表标记2. 有序列表有序列表与与 定义编号列表的语法为：定义编号列表的语法为： 项项1 项项2 2.2.3 列表标记列表标

17、记 的常用的常用有：有： type：用来设定列表的编号形式，可取属性值有：用来设定列表的编号形式，可取属性值有： 1：用阿拉伯数字：用阿拉伯数字1，2，3，编号；编号； a：用小写英文字母：用小写英文字母a，b，c，编号；编号； A：用大写英文字母：用大写英文字母A，B，C，编号；编号； i：用小写罗马字母：用小写罗马字母，编号；编号； I：用大写罗马字母：用大写罗马字母，编号。编号。 start：用来设定列表开始编号的位置，不论采用来设定列表开始编号的位置，不论采 用何种编号形式，属性值都为用何种编号形式，属性值都为整数整数，如，如 start=“3”表示第一项从第表示第一项从第3的位置开始

18、编号。的位置开始编号。2.2.3 列表标记列表标记3. 标记标记 用来标记列表中的一项，需同用来标记列表中的一项，需同或或一一 起使用，它的起使用，它的有：有： type：用来设定列表项的符号，如果用来设定列表项的符号，如果用用 里，属性取值为里，属性取值为disc、circle或或square，如果，如果 用在用在里，则属性取值为里，则属性取值为1、a、A、i或或I。 value：此属性仅当此属性仅当用在用在里有效，属性值里有效，属性值 为一为一整数整数，用来设定当前项的编号，其后的项目，用来设定当前项的编号，其后的项目 将以此值为起始数目递增，前面各项不受影响。将以此值为起始数目递增，前面

19、各项不受影响。2.2.3 列表标记列表标记例例2-4图图2.4 列表标记列表标记2.2.4 图像标记图像标记1. 图像文件的格式图像文件的格式 常用图片格式：常用图片格式：png、jpeg、gif、bmp。2. 加入图像加入图像 常用常用 src：图像文件。图像文件。 alt：替代文本。替代文本。 height：高度；高度；width：宽度。宽度。 border：边框宽度。边框宽度。 vspace：垂直边距；垂直边距；hspace：水平边距。水平边距。2.2.4 图像标记图像标记 align：图像与文本的对齐方式，可取值为：图像与文本的对齐方式，可取值为： top：文本与图像顶部对齐；：文本与

20、图像顶部对齐； middle：文本与图像中央对齐；：文本与图像中央对齐； bottom：文本与图像底部对齐；：文本与图像底部对齐； left：图像居左；：图像居左； right：图像居右。：图像居右。例例2-52.2.4 图像标记图像标记绝对路径绝对路径n指定文档或文件的完整地址。指定文档或文件的完整地址。相对路径相对路径n相对路径又分为相对路径又分为和和，根相对路径总是以站点根目录根相对路径总是以站点根目录“/”为起始目录，为起始目录，写起来比较简单；写起来比较简单；文档相对路径是以当前文件文档相对路径是以当前文件所在路径为起始目录，进行相对的文件查找。所在路径为起始目录，进行相对的文件查找

21、。2.2.4 图像标记图像标记文档相对路径的几种形式：文档相对路径的几种形式：同一个目录中的文件：同一个目录中的文件：如果源文件和目标文件如果源文件和目标文件在同一个目录里，直接写目标文件名即可。在同一个目录里，直接写目标文件名即可。表示上级目录：表示上级目录： 表示源文件所在表示源文件所在目录目录的上一的上一级目录，级目录，表示源文件所在目录的上上级目表示源文件所在目录的上上级目录，以此类推。录，以此类推。表示下级目录：表示下级目录：直接写下级目录文件的路径即直接写下级目录文件的路径即可。可。2.2.4 图像标记图像标记 例例2-6：假设有如：假设有如图图2.5所示的目录结构，所示的目录结构

22、，其中其中root、web、a、b、c为文件夹，为文件夹，t.htm、1.gif、2.gif等为相应文等为相应文件夹中的文件，怎样在件夹中的文件，怎样在t.htm页中分别插入页中分别插入1至至5这五个图片？这五个图片？图图2.5 目录结构目录结构2.2.4 图像标记图像标记 使用使用文档相对路径文档相对路径在在t.htm中分别插入中分别插入5幅图片：幅图片：图图2.5 目录结构目录结构u在站点内，通常都采用文档相在站点内，通常都采用文档相对路径，对路径，2.2.5 链接标记链接标记n定义链接的语法定义链接的语法文本或图片文本或图片n常用常用 href：链接的目标，指定一个链接的目标，指定一个U

23、RL作为有效作为有效的链接资源的地址。的链接资源的地址。 name：锚点的名字。锚点的名字。 target：目标窗口，保留目标名有目标窗口，保留目标名有_blank、_parent、_top、_self。例例2-72.2.5 链接标记链接标记n如果指定的目标文件存放在外部网站（本服务如果指定的目标文件存放在外部网站（本服务器以外），只能使用器以外），只能使用绝对路径绝对路径，这种与本服务，这种与本服务器以外的文件的链接称为器以外的文件的链接称为。n如果目标文件存放在本地服务器，称为如果目标文件存放在本地服务器，称为，局部链接可以使用绝对路径，但建议，局部链接可以使用绝对路径，但建议最好最好使用

24、相对路径使用相对路径。2.2.5 链接标记链接标记 同一个目录中文件的链接同一个目录中文件的链接例：源文件例：源文件info.html，在在info.html里点击里点击“主页主页”链接到目标文件链接到目标文件index.html。 假设假设info.html路径是：路径是：c:Inetpubwwwrootsitesblablainfo.html 假设假设index .html路径是：路径是：c:Inetpubwwwrootsitesblablaindex.html 在在info.html加入加入index.html超链接的代码：超链接的代码： 主页主页2.2.5 链接标记链接标记 表示上级目

25、录表示上级目录例：假设例：假设info.html路径是：路径是： c :Inetpubwwwrootsitesblablainfo.html 假设假设index.html路径是：路径是：c:Inetpubwwwrootsitesindex.html 在在info.html加入加入index .html超链接：超链接： 主页主页2.2.5 链接标记链接标记例：假设例：假设info.html路径是：路径是： c:Inetpubwwwrootsitesblablainfo.html 假设假设index.html路径是：路径是：c:Inetpubwwwrootindex .html 在在info.ht

26、ml加入加入index .html超链接：超链接： 主页主页2.2.5 链接标记链接标记例：假设例：假设info.html路径是：路径是：c:Inetpubwwwrootsitesblablainfo.html 假设假设index.html路径是：路径是：c:Inetpubwwwrootsiteswowstoryindex.html 在在info .html加入加入index.html超链接：超链接： 主页主页2.2.5 链接标记链接标记 表示下级目录表示下级目录例：假设例：假设info .html路径是：路径是：c :Inetpubwwwrootsitesblablainfo.html 假设

27、假设index.html路径是：路径是：c:Inetpubwwwrootsitesblablahtmlindex.html 在在info.html加入加入index.html超链接：超链接： 主页主页2.2.5 链接标记链接标记1. 链接网页：链接网页：文本或图像文本或图像2. 链接命名锚点：链接命名锚点： 字符串字符串 value值即值即锚名锚名，是定义的定位位置名，是定义的定位位置名 热点文本热点文本 点击点击“热点文本热点文本”链接到锚名所指定的位链接到锚名所指定的位置置 例例top 例例2-82.2.5 链接标记链接标记3. 链接非链接非Web数据：数据：简历简历4. 图像链接：图像链

28、接： 5. 电子邮件链接：电子邮件链接：联系联系2.2.6 表格标记表格标记n表格现已成为对文本和图形进行表格现已成为对文本和图形进行布局布局的强有力的的强有力的工具。工具。nHTML中一个表格通常由中一个表格通常由三个标记来定义，分别表示表格、行、单元格。三个标记来定义，分别表示表格、行、单元格。n在对表格进行设置时，可以设置整个表格在对表格进行设置时，可以设置整个表格或表格中的行或表格中的行或单元格或单元格的属性，的属性，它们优先顺序为：单元格它们优先顺序为：单元格优先于行优先于行，行，行优先于表格优先于表格。2.2.6 表格标记表格标记1. 基本基本 表项表项1 表项表项2 表项表项1

29、表项表项2 2.2.6 表格标记表格标记(1) 标记标记n整个表格始于整个表格始于而终于而终于，是一个容，是一个容器标记，器标记，、等只能在它的范围内使用。等只能在它的范围内使用。n常用的常用的有：有： width=“n|n%”：表格宽度。表格宽度。 height =“n” ：表格高度。表格高度。 border=“n”：表格边框粗细。表格边框粗细。 bordercolor：表格边框颜色。表格边框颜色。2.2.6 表格标记表格标记 bgcolor：表格背景颜色。表格背景颜色。 background：表格背景图像。表格背景图像。 cellpadding：边距，表单元线和单元格内数据边距，表单元线和

30、单元格内数据之间的距离。之间的距离。 cellspacing：间距，表单元线与边框间的空白。间距，表单元线与边框间的空白。 align=“left/right/center”：表格水平对齐方式。表格水平对齐方式。 rules：设定有无表格线。设定有无表格线。 frame：设定有无边框。设定有无边框。2.2.6 表格标记表格标记(2) 标记标记n定义表格定义表格，是单元格，是单元格(或或)的容器。的容器。n常用常用有：有： align=“left/right/center”：这一行单元格中这一行单元格中内容的水平对齐方式。内容的水平对齐方式。 valign=“top/middle/bottom”

31、：用来设定这用来设定这一行单元格中内容的垂直对齐方式。一行单元格中内容的垂直对齐方式。 bgcolor：这一行的背景颜色。这一行的背景颜色。 2.2.6 表格标记表格标记(3) 标记标记标记，使用时要放在标记，使用时要放在与与之间。之间。n常用常用有：有： background：背景图像。背景图像。 bgcolor：背景颜色。背景颜色。 align：水平对齐方式。水平对齐方式。 valign：垂直对齐方式。垂直对齐方式。 width：宽度。宽度。 height：高度。高度。 colspan：跨列数目。跨列数目。 rowspan：跨行数目。跨行数目。2.2.6 表格标记表格标记2. 表题表题n使

32、用标记使用标记给表格添加表题，并使用给表格添加表题，并使用align属性定义表题的位置。属性定义表题的位置。 表题表题2.2.6 表格标记表格标记3. 表头表头使用标记使用标记可在表的第可在表的第1行或第行或第1列加表头，列加表头， 表项表项1 表项表项2 表项表项1 表项表项2 例例2-9 表项表项1 表项表项2 表项表项1 表项表项2 2.2.6 表格标记表格标记4.单元格的合并单元格的合并(1)合并行合并行 表项表项 或或 表项表项 x为为垂直垂直方向上合并的行数方向上合并的行数(2)合并列合并列 表项表项 或或 表项表项 x为为水平水平方向上合并的单元格数方向上合并的单元格数2.2.6

33、 表格标记表格标记图图2.7 表格标记表格标记例例2-10 2.2.6 表格标记表格标记图图2.6 表格标记表格标记例例2-112.2.7 表单标记表单标记 表单是用户与网站进行表单是用户与网站进行交互交互的主要方式，它的主要方式，它的的作用是从访问作用是从访问Web站点的用户那里获取信息。站点的用户那里获取信息。访问者可以使用诸如文本框、列表框、复选框以访问者可以使用诸如文本框、列表框、复选框以及单选按钮之类的表单对象输入信息，然后单击及单选按钮之类的表单对象输入信息，然后单击某个按钮提交这些信息。某个按钮提交这些信息。2.2.7 表单标记表单标记1. 标记标记 表单对象：表单对象： 文本框

34、文本框 选择按钮选择按钮 列表框列表框 按钮按钮 2.2.7 表单标记表单标记n标记常用标记常用 action：表单数据的处理手段。表单数据的处理手段。 method：表单数据传输方法，取值为表单数据传输方法，取值为get或或post。get：表单数据附加到：表单数据附加到URL中。中。post：表单数据嵌入：表单数据嵌入HTTP 请求中。请求中。2.2.7 表单标记表单标记2.表单对象表单对象(1) 文本框文本框用于单行文本的输入。用于单行文本的输入。常用常用name、value、size、maxlength等。等。(2) 密码框密码框常用常用name、value、size、maxlengt

35、h等。等。2.2.7 表单标记表单标记(3) 单选按钮单选按钮常用常用name、value、checked等。等。同一组中所有单选按钮的同一组中所有单选按钮的name属性必须设属性必须设 置相同。置相同。(4) 复选框复选框常用常用name、value、checked等。等。n value属性用来设置当用户选中该项后，表单所提属性用来设置当用户选中该项后，表单所提交的值交的值。2.2.7 表单标记表单标记(5) 按钮按钮 常用属性：常用属性：name、value等。等。 常用属性：常用属性：name、value等。等。 常用属性：常用属性：name、value等。等。 常用属性：常用属性：na

36、me、src、width、height、alt等。等。2.2.7 表单标记表单标记(6) 列表框列表框 选项选项1选项选项2 2.2.7 表单标记表单标记n的属性：的属性：name，等；等； size没设置或设为没设置或设为1，为，为下拉列表框下拉列表框；size设设置大于置大于1，为，为列表框列表框。 multiple不用赋值，若加入标记中，则列表不用赋值，若加入标记中，则列表框可选多项。框可选多项。n的属性：的属性：value，selected等。等。2.2.7 表单标记表单标记(7) 文本区域：文本区域： 可输入多行文本。可输入多行文本。文本文本n常用常用name、rows、cols、wrap