网页html代码详解.

《网页html代码详解.》由会员分享，可在线阅读，更多相关《网页html代码详解.（70页珍藏版）》请在金锄头文库上搜索。

1、第2章 HTML语言 本章要点： HTML的基础知识 常用HTML标记 XHTML 2.1 HTML简介 nHTML（Hyper Text Markup Language）称为超文本标记语言超文本标记语言，是一种 描述文档结构的标记语言，它是一种应用 非常广泛的网页格式网页格式，也是最早被用来显 示Web页的语言之一。它与操作系统平台 的选择无关，只要有浏览器浏览器就可以运行 HTML文档，显示网页内容。 nHTML文档类似于.txt文本文件，不同 的是，文档里还包含一种被称为标记标记的符 号。 2.1.1 标记的格式 1. 标记的功能 n控制网页的显示方式 2. 标记的构成 n由 、及括在其

2、中的命令字符 串组成 n n 双标记：双标记： 、成对出现， 如、 n n 单标记：单标记： ，如、 2.1.1 标记的格式 3. 标记的使用方法 (1) 文本或超文本 (2) 文本或超文本 例：你 好！ (3) 2.1.1 标记的格式 n书写HTML代码时应注意注意以下几点： 1) HTML标记及属性中字母不区分大小写 ，如与对浏览器来说是完全 相同的。 2) 标记名与左尖括号之间不能留有空白， 如是错误的。 3) 属性要写在开始标记的尖括号中，放在 标记名后，并且与标记名之间要有空白；多个 属性之间也要有空白；属性值最好用单引号或 双引号引起来，引号一定要是英文的引号，不 能是中文引号。

3、4) 结束标记要书写正确，不能忘掉斜杠。 2.1.2 HTML文档结构 表2-1 html文件构成骨架 文件开始 头 部 标题名 其他头部内容定义标记 主 体 网页内容（文本、图像等) 文件结束 2.1.2 HTML文档结构 1. 文件头部 n n 、之间定义，内容可 包括标题名、文本文件地址、创作者信息 等网页信息说明。 n文件头部还可包括一些其他标记： ：定义网页的标题 ； ：说明一些与文档相关的 信息，如作 者、关键内容、所用语言等 ； 2.1.2 HTML文档结构 2. 文件主体 n位于头部之后，在、 之间定义，定义了网页上显示的主要内容 和显示格式。 n文件主体内可包括众多其他标记。

4、 2.1.2 HTML文档结构 n标记常用属性属性： background：设置网页背景图案。 例如 bgcolor：设置网页背景色。 例如 text：设置文本颜色，默认黑色。 link：设置尚未被访问过的超文本链 接的颜色。 vlink：设置已被访问过的超文本链 接的颜色。 2.1.2 HTML文档结构 3. 注释 n格式： n注释以“”结束，注释的 内容会被浏览器忽略。利用注释可以为HTML 文档的不同部分加上说明，方便日后修改，也 可以利用注释为HTML文档加上版权声明。 n注释可有多行。 2.1.3 HTML的制作 n制作HTML文档需要两个基本工具，一 个HTML编辑器，一个Web浏

5、览器。 nHTML编辑器可分为两类：基于文本或 代码的编辑器和所见即所得(WYSIWYG)编 辑器。前者在创建文档时只能看到HTML代 码，后者在编辑时即显示出类似于最终浏览 器窗口显示的结果。 nWeb浏览器用来浏览HTML文档，在 Windows操作系统上，常用的浏览器是 Microsoft Internet Explorer，也常简称为IE 。 2.1.3 HTML的制作 用记事本制作网页的步骤如下： 1) 打开记事本。 2) 在记事本中输入代码： 我的第一个网页 这是我用记事本做的第一个网页，我会努力学 好HTML！ 2.1.3 HTML制作工具 3) 保存文件：HTML文件的扩展名为

6、.htm、.html、 .aspx或asp，因为有些Web服务器对中文文件名不 能很好支持，所以文件名中尽量不要使用汉字。 4) 用浏览器打开上步保存的文件，即可看到如图2.1 所示的页面。 图2.1 第一个网页 2.2 常用HTML标记 本节分类介绍常用的HTML标记及其常用属 性，其它标记的详细情况请参考相关书籍。 2. 字体标记 4. 图像标记 6. 表格标记 8. 其他标记 1. 排版标记 3. 列表标记 5. 链接标记 7. 表单标记 2.2.1 排版标记 1. 段落标记 n用于分段，和之间的文字在 同一段落，并使前段与后段之间加一空白 行。结束标记可以省略，下一个 开始意味着上一个

7、结束 。 n的常用属性align，用来设定段落 的对齐方式，可取属性值有： left：左对齐； center：居中对齐； right：右对齐。 2.2.1 排版标记 2. 强制换行 n称为换行标记，在网页设计中比 较常用，它的作用就是换行。属于单 标记，没有结束标记，且不包含任何属性 。 3. 预格式化标记 n称为预格式化标记，它的作用是 按原始代码的排列方式显示内容。通常情 况下，浏览器显示时会忽略内容中的空白 及换行，而与之间的空白及换 行会被保留。 2.2.1 排版标记 4. 水平线标记 n称为水平线标记，可以在页面中产 生一条水平线，没有结束标记。的常用 属性有： align：对齐方式

8、，属性值有left、 center、right； width：长度，属性值可以是绝对值( 像素)或相对值(百分比) ； size：粗细，属性值为整数，单位为 像素； color：颜色。 例： 2.2.1 排版标记 5. n称为居中标记，可以使标记的 内容居中显示，使用时需要结束标记 。 6. n是块定义标签，用于定义一个块的 风格。 ndiv要有开始标签和结束标签 n当要在许多段落中设置对齐方式时，常 用标记和align属性。如： 文本或 图像 2.2.1 排版标记 例2-2 图2.2 排版标记 2.2.2 字体标记 1. 标题 格式：格式： 标题，n可取16之间的整数值 每个标题标记所标记的

9、文本加粗显示独占一行 且上下保留一空白行，由到字体依次变 小。可用属性设置标题的对齐方式。 2.2.2 字体标记 2. 标记 格式：格式：文本 常用属性： face：用来设定文本的字体，属性值为逗号隔 开的字体列表，如果浏览器所在机器上没有安 装指定的任何一种字体，则以浏览器默认字体 显示，所以使用时最好不使用特殊字体。 2.2.2 字体标记 size：用来设定文本的大小，属性值可以是绝对 的或相对的，如size=“5”是绝对的，表示文本以5 号字显示; size=“+2”是相对的，表示文本在原先 大小的基础上再增大2级。 size属性可取17之间 的整数值. color：设定文本的颜色。 2

10、.2.2 字体标记 3. 、 、标记 为粗体标记，与之间的文本产生加粗效果 。 为斜体标记，与之间的文本产生斜体效果。 为加下划线标记，与之间的文本显示时会 加底线。 为加删除线标记，与之间的文本显示时会加 删除线。 注：这四个标记都是双标记，使用时如果忘掉结束标 记，则开始标记对后面的所有文本都起作用。 2.2.2 字体标记 图2.3 字体标记 例2-3 2.2.3 列表标记 1. 无序列表与 n 定义项目列表的语法为： 项1 项2 n 的常用属性只有一个type，用 来设定列表项前面出现的符号，可取 属性值有： disc：列表项前面加上符号； circle：列表项前面加上符号； squar

11、e：列表项前面加上符号。 2.2.3 列表标记 2. 有序列表与 定义编号列表的语法为： 项1 项2 2.2.3 列表标记 的常用属性属性有： type：用来设定列表的编号形式，可取属性值有： 1：用阿拉伯数字1，2，3，编号； a：用小写英文字母a，b，c，编号； A：用大写英文字母A，B，C，编号； i：用小写罗马字母，编号； I：用大写罗马字母，编号。 start：用来设定列表开始编号的位置，不论采 用何种编号形式，属性值都为整数，如 start=“3”表示第一项从第3的位置开始编号。 2.2.3 列表标记 3. 标记 用来标记列表中的一项，需同或一 起使用，它的属性属性有： type：

12、用来设定列表项的符号，如果用 里，属性取值为disc、circle或square，如果 用在里，则属性取值为1、a、A、i或I。 value：此属性仅当用在里有效，属性值 为一整数，用来设定当前项的编号，其后的项目 将以此值为起始数目递增，前面各项不受影响。 2.2.3 列表标记 例2-4 图2.4 列表标记 2.2.4 图像标记 1. 图像文件的格式 常用图片格式：png、jpeg、gif、 bmp。 2. 加入图像 格式：格式： 常用属性：属性： src：图像文件。 alt：替代文本。 height：高度；width：宽度 。 border：边框宽度。 vspace：垂直边距；hspace

13、 ：水平边距。 2.2.4 图像标记 align：图像与文本的对齐方式 ，可取值为： top：文本与图像顶部对 齐； middle：文本与图像中 央对齐； bottom：文本与图像底 部对齐； left：图像居左； right：图像居右。 例2-5 2.2.4 图像标记 绝对路径与相对路径绝对路径与相对路径 绝对路径 n指定文档或文件的完整地址。 相对路径 n相对路径又分为根相对路径根相对路径和文档相文档相 对路径对路径，根相对路径总是以站点根目录“/” 为起始目录，写起来比较简单；文档相对 路径是以当前文件所在路径为起始目录， 进行相对的文件查找。 2.2.4 图像标记 文档相对路径的几种形

14、式： 同一个目录中的文件：如果源文件 和目标文件在同一个目录里，直接写目标 文件名即可。 表示上级目录：/表示源文件所在 目录的上一级目录，/表示源文件所在 目录的上上级目录，以此类推。 表示下级目录：直接写下级目录文 件的路径即可。 2.2.4 图像标记 例2-6：假设有如 图2.5所示的目录结构， 其中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在站点内

15、，通常都采用文档相 对路径，便于站点的移植。便于站点的移植。 2.2.5 链接标记 n定义链接的语法格式格式： 文本或图片 n常用属性：属性： href：链接的目标，指定一 个URL作为有效的链接资源的地址。 name：锚点的名字。 target：目标窗口，保留目标 名有_blank、_parent、_top、_self。 例2-7 2.2.5 链接标记 全局链接与局部链接全局链接与局部链接 n如果指定的目标文件存放在外部网站 （本服务器以外），只能使用绝对路径， 这种与本服务器以外的文件的链接称为全全 局链接局链接。 n如果目标文件存放在本地服务器，称 为局部链接局部链接，局部链接可以使用绝

16、对路径 ，但建议最好使用相对路径。 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 链接标记 表示上级目录 例：假设info.html路径是： c :Inetpubwwwroot