网页html代码详解详解

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

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

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

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

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

6、HTML ！ 2.1.3 HTML制作工具制作工具 3) 保存文件：HTML 文件的扩展名为.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. 段落标记

7、 ?用于分段，和之间的文字在同一段落， 并使前段与后段之间加一空白行。 结束标记 可以省略，下一个 开始意味着上一个 结束 。 ?的常用属性align，用来设定段落的对齐方 式，可取属性值有： left：左对齐； center ：居中对齐； right ：右对齐。 2.2.1 排版标记排版标记 2. 强制换行 ? 称为换行标记，在网页设计中比较常用， 它的作用就是换行。 属于单标记，没有结 束标记，且不包含任何属性。 3. 预格式化标记 ? 称为预格式化标记，它的作用是 按原始代 码的排列方式显示内容。 通常情况下，浏览器 显示时会忽略内容中的空白及换行，而 与 之间的空白及换行会被保留。 2

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

9、文本或图像 2.2.1 排版标记排版标记 例2-2 图2.2 排版标记 2.2.2 字体标记字体标记 1. 标题 格式： 标题，n可取16之间的整数值 每个标题标记所标记的文本加粗显示独占一行 且上下保留一空白行，由 到字体依次变 小。可用属性设置标题的对齐方式。 2.2.2 字体标记字体标记 2. 标记 格式：文本 常用属性： face：用来设定文本的字体，属性值为逗号隔 开的字体列表，如果浏览器所在机器上没有安 装指定的任何一种字体，则以浏览器默认字体 显示，所以使用时最好不使用特殊字体。 2.2.2 字体标记字体标记 size：用来设定文本的大小，属性值可以是绝 对的或相对的，如 siz

10、e=“5”是绝对的，表示文本 以5号字显示; size=“+2”是相对的，表示文本在 原先大小的基础上再增大 2级。 size属性可取17 之间的整数值. color：设定文本的颜色。 2.2.2 字体标记字体标记 3. 、标记 ? 为粗体标记，与之间的文本产生加粗效果。 ? 为斜体标记，与之间的文本产生斜体效果。 ? 为加下划线标记，与之间的文本显示时会 加底线。 ? 为加删除线标记，与之间的文本显示时会加 删除线。 注：这四个标记都是双标记，使用时如果忘掉结束标 记，则开始标记对后面的所有文本都起作用。 2.2.2 字体标记字体标记 图2.3 字体标记 例2-3 2.2.3 列表标记列表标

11、记 1. 无序列表与 ? 定义项目列表的语法为： 项1 项2 ? 的常用属性只有一个type，用来 设定列表项前面出现的符号，可取属 性值有： disc：列表项前面加上符号； circle：列表项前面加上符号； square ：列表项前面加上符号。 2.2.3 列表标记 2. 有序列表与 ? 定义编号列表的语法为： 项1 项2 2.2.3 列表标记列表标记 ? 的常用属性有： type：用来设定列表的编号形式，可取属性值有： 1：用阿拉伯数字1，2，3，编号； a：用小写英文字母 a，b，c，编号； A：用大写英文字母 A，B，C，编号； i：用小写罗马字母， 编号； I：用大写罗马字母， 编

12、号。 start ：用来设定列表开始编号的位置，不论采 用何种编号形式，属性值都为 整数，如 start=“3” 表示第一项从第3的位置开始编号。 2.2.3 列表标记 3. 标记 ? 用来标记列表中的一项，需同 或一 起使用，它的属性有： type：用来设定列表项的符号，如果 用 里，属性取值为disc、circle或square ，如果 用在里，则属性取值为 1、a、A、i或I。 value：此属性仅当用在里有效，属性值 为一整数，用来设定当前项的编号，其后的项目 将以此值为起始数目递增，前面各项不受影响。 2.2.3 列表标记列表标记 例2-4 图2.4 列表标记 2.2.4 图像标记图

13、像标记 1. 图像文件的格式 常用图片格式：png、jpeg、gif、bmp 。 2. 加入图像 格式：椼杭猠捲尽图像文件名 常用属性： src：图像文件。 alt：替代文本。 height ：高度；width ：宽度。 border ：边框宽度。 vspace：垂直边距；hspace ：水平边距。 2.2.4 图像标记图像标记 align：图像与文本的对齐方式，可取值为： top：文本与图像顶部对齐； middle ：文本与图像中央对齐； bottom ：文本与图像底部对齐； left：图像居左； right ：图像居右。 例 2-5 2.2.4 图像标记图像标记 绝对路径与相对路径 绝对路

14、径 ?指定文档或文件的完整地址。 相对路径 ?相对路径又分为根相对路径和文档相对路径， 根相对路径总是以站点根目录“ /” 为起始目录， 写起来比较简单； 文档相对路径是以当前文件 所在路径为起始目录，进行相对的文件查找。 2.2.4 图像标记图像标记 文档相对路径的几种形式： 同一个目录中的文件： 如果源文件和目标文件 在同一个目录里，直接写目标文件名即可。 表示上级目录： ./表示源文件所在目录的上一 级目录，././表示源文件所在目录的上上级目 录，以此类推。 表示下级目录： 直接写下级目录文件的路径即 可。 2.2.4 图像标记 例2-6：假设有如 图2.5所示的目录结构， 其中roo

15、t、web、a、b、 c为文件夹，t.htm 、 1.gif、2.gif等为相应文 件夹中的文件，怎样在 t.htm 页中分别插入1至5 这五个图片？ 图2.5 目录结构 2.2.4 图像标记 使用文档相对路径在 t.htm 中分别插入5幅图片： 图2.5 目录结构 好处？ ?在站点内，通常都采用文档相 对路径，便于站点的移植。便于站点的移植。 2.2.5 链接标记链接标记 ?定义链接的语法格式： 文本或图片 ?常用属性： href：链接的目标，指定一个 URL作为有效 的链接资源的地址。 name ：锚点的名字。 target ：目标窗口，保留目标名有 _blank 、 _parent 、_

16、top、_self。 例 2-7 2.2.5 链接标记链接标记 全局链接与局部链接 ?如果指定的目标文件存放在外部网站（本服务 器以外），只能使用 绝对路径，这种与本服务 器以外的文件的链接称为 全局链接。 ?如果目标文件存放在本地服务器，称为 局部链 接，局部链接可以使用绝对路径，但建议 最好 使用相对路径。 2.2.5 链接标记链接标记 相对路径的几种形式： 同一个目录中文件的链接 例：源文件info.html ，在info.html 里点击“主页” 链接到目标文件index.html 。 假设info.html 路径是： c:Inetpubwwwrootsitesblablainfo.h

17、tml 假设index .html 路径是： c:Inetpubwwwrootsitesblablaindex.html 在info.html 加入index.html 超链接的代码： 主页 2.2.5 链接标记链接标记 表示上级目录 例：假设info.html 路径是： c :Inetpubwwwrootsitesblablainfo.html 假设index.html 路径是： c:Inetpubwwwrootsitesindex.html 在info.html 加入index .html 超链接： 主页 2.2.5 链接标记链接标记 例：假设info.html 路径是： c:Inetpu

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

19、 .html 路径是： c :Inetpubwwwrootsitesblablainfo.html 假设index.html 路径是： c:Inetpubwwwrootsitesblablahtmlindex.html 在info.html 加入index.html 超链接： 主页 2.2.5 链接标记链接标记 的几种用法： 1. 链接网页：文本或图像 2. 链接命名锚点： 字符串 value值即锚名，是定义的定位位置名 热点文本 点击“热点文本”链接到锚名所指定的位 置 例top 2.2.5 链接标记链接标记 3. 链接非Web 数据：简历 4. 图像链接： ?愼栠敲?尠 目标文件剕?椼杭猠

20、捲?图像 文件名 5. 电子邮件链接： 愼栠敲?mailto: 联系 2.2.6 表格标记表格标记 ?表格现已成为对文本和图形进行 布局的强有力的 工具。 ?HTML 中一个表格通常由 、 、 三个标记来定义，分别表示表格、行、单元格。 ?在对表格进行设置时，可以设置整个表格 或表格中的行 或单元格的属性， 它们优先顺序为：单元格 优先于行 ，行 优先于表格 。 2.2.6 表格标记表格标记 1. 基本格式 表项1 表项2 表项1 表项2 2.2.6 表格标记表格标记 (1) 标记 ?整个表格始于 而终于 ，是一个容 器标记， 、等只能在它的范围内使用。 ?常用的属性有： width= “n|

21、n% ”：表格宽度。 height = “n” ：表格高度。 border= “n”：表格边框粗细。 bordercolor ：表格边框颜色。 2.2.6 表格标记表格标记 bgcolor ：表格背景颜色。 background ：表格背景图像。 cellpadding ：边距，表单元线和单元格内数据 之间的距离。 cellspacing ：间距，表单元线与边框间的空白。 align=“left/right/center ”：表格水平对齐方式。 rules ：设定有无表格线。 frame ：设定有无边框。 2.2.6 表格标记表格标记 (2) 标记 ?定义表格行，是单元格(或) 的容器。 ?常

22、用属性有： align=“left/right/center ”：这一行单元格 中内容的水平对齐方式。 valign= “top/middle/bottom ”：用来设定 这一行单元格中内容的垂直对齐方式。 bgcolor ：这一行的背景颜色。 2.2.6 表格标记表格标记 (3) 标记 ?单元格标记，使用时要放在 与 之间。 ?常用属性有： background ：背景图像。 bgcolor ：背景颜色。 align：水平对齐方式。 valign：垂直对齐方式。 width ：宽度。 height ：高度。 colspan ：跨列数目。 rowspan ：跨行数目。 2.2.6 表格标记表格

23、标记 2. 表题 ?使用标记 给表格添加表题，并使用 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 表格标记表格标记 图2.7 表格标记 例2-10 2.2.6 表格标记表格标记 图2.6 表格标记 例2-11 2.2.7 表单标记表单标记 表单是用户与网站进

24、行 交互的主要方式，它 的作用是从访问Web 站点的用户那里获取信息。 访问者可以使用诸如文本框、列表框、复选框以 及单选按钮之类的表单对象输入信息，然后单击 某个按钮提交这些信息。 2.2.7 表单标记表单标记 1. 标记 ?格式： 表单对象： 文本框 选择按钮 列表框 按钮 2.2.7 表单标记表单标记 ? 标记常用属性： action ：表单数据的处理手段。 method ：表单数据传输方法，取值为 get或 post。 ?get：表单数据附加到 URL中。 ?post：表单数据嵌入HTTP 请求中。 2.2.7 表单标记表单标记 2.表单对象 (1) 文本框 用于单行文本的输入。 格式

25、： 常用属性：name 、value、size、maxlength 等。 (2) 密码框 格式： 常用属性：name 、value、size、maxlength 等。 2.2.7 表单标记表单标记 (3) 单选按钮 格式： 常用属性：name 、value、checked 等。 注：同一组中所有单选按钮的 name 属性必须设 置相同。 (4) 复选框 格式： 常用属性：name 、value、checked 等。 ? value属性用来设置当用户选中该项后，表单所提 交的值。 2.2.7 表单标记表单标记 (5) 按钮 ?提交按钮： 常用属性：name 、value等。 ?重置按钮： 常用属

26、性：name 、value等。 ?普通按钮： 常用属性：name 、value等。 ?图像按钮： 常用属性：name 、src、width 、height 、alt等。 2.2.7 表单标记表单标记 (6) 列表框 ?格式： 选项1 选项2 2.2.7 表单标记表单标记 ?的属性：name ，size，multiple 等； ? size没设置或设为1，为下拉列表框；size设 置大于1，为列表框。 ? multiple 不用赋值，若加入标记中，则列表 框可选多项。 ? 的属性：value，selected等。 2.2.7 表单标记表单标记 (7) 文本区域： 可输入多行文本。 ?格式： 文本 ?常用属性：name 、rows、cols、wrap 等。 2.2.7 表单标记表单标记 例2-12