HTML 基础标签实例
一个简单的 HTML 文件
-
这个例子是一个很简单的 HTML 文件,使用了尽可能少的 HTML 标签。它向您演示了 body 元素中的内容是如何被浏览器显示的。
简单的段落
-
此例演示:段落元素中的文字如何被浏览器显示。
更多的段落
-
本例演示段落元素的某些缺省的行为。
“诗歌”问题
-
本例演示 HTML 格式化的某些问题。
折行
-
本例演示在 HTML 文档中折行的使用。
标题
-
本例演示在 HTML 文档中显示标题的标签。
居中排列的标题
-
本例演示一个居中排列的标题。
水平线
-
本例演示如何插入水平线。
隐藏的注释
-
本例演示如何在 HTML 源代码中插入隐藏的注释。
背景颜色
-
本例演示如何为 HTML 页面添加背景颜色。
HTML 文本格式化实例
HTML 链接实例
创建超级链接
-
本例演示如何在 HTML 文档中创建链接。
将图像作为链接
-
本例演示如何使用图像作为链接。
在新的浏览器窗口打开链接
-
本例演示如何在新窗口打开一个页面,这样的话访问者就无需离开你的站点了。
链接到同一个页面的不同位置
-
本例演示如何使用链接跳转至文档的另一个部分
跳出框架
-
本例演示如何跳出框架,假如你的页面被固定在框架之内。
创建电子邮件链接
-
本例演示如何如何链接到一个邮件。(本例在安装邮件客户端程序后才能工作。)
创建电子邮件链接 2
-
本例演示更加复杂的邮件链接。
HTML 框架实例
垂直框架
-
本例演示:如何使用三份不同的文档制作一个垂直框架。
水平框架
-
本例演示:如何使用三份不同的文档制作一个水平框架。
如何使用 <noframes> 标签
-
本例演示:如何使用 <noframes> 标签。
混合框架结构
-
本例演示如何制作含有三份文档的框架结构,同时将他们混合置于行和列之中。
含有 noresize="noresize" 属性的框架结构
-
本例演示 noresize 属性。在本例中,框架是不可调整尺寸的。在框架间的边框上拖动鼠标,你会发现边框是无法移动的。
导航框架
-
本例演示如何制作导航框架。导航框架包含一个将第二个框架作为目标的链接列表。名为 "contents.htm" 的文件包含三个链接。
内联框架
-
本例演示如何创建内联框架(HTML 页中的框架)。
跳转至框架内的一个指定的节
-
本例演示两个框架。其中的一个框架设置了指向另一个文件内指定的节的链接。这个"link.htm"文件内指定的节使用 <a name="C10"> 进行标识。
使用框架导航跳转至指定的节
-
本例演示两个框架。左侧的导航框架包含了一个链接列表,这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。
HTML 表格实例
表格
-
这个例子演示如何在 HTML 文档中创建表格。
表格边框
-
本例演示各种类型的表格边框。
没有边框的表格
-
本例演示一个没有边框的表格。
表格中的表头(Heading)
-
本例演示如何显示表格表头。
空单元格
-
本例展示如何使用 " " 处理没有内容的单元格。
带有标题的表格
-
本例演示一个带标题 (caption) 的表格
跨行或跨列的表格单元格
-
本例演示如何定义跨行或跨列的表格单元格。
表格内的标签
-
本例演示如何显示在不同的元素内显示元素。
单元格边距(Cell padding)
-
本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。
单元格间距(Cell spacing)
-
本例演示如何使用 Cell spacing 增加单元格之间的距离。
向表格添加背景颜色或背景图像
-
本例演示如何向表格添加背景。
向表格单元添加背景颜色或者背景图像
-
本例演示如何向一个或者更多表格单元添加背景。
在表格单元中排列内容
-
本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。
框架(frame)属性
-
本例演示如何使用 "frame" 属性来控制围绕表格的边框。
HTML 列表实例
HTML 表单与输入实例
文本域(Text fields)
-
本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。
密码域
-
本例演示如何创建 HTML 的密码域。
复选框
-
本例演示如何在 HTML 页中创建复选框。用户可以选中或取消选取复选框。
单选按钮
-
本例演示如何在 HTML 中创建单选按钮。
简单的下拉列表
-
本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。
另一个下拉列表
-
本例演示如何创建一个简单的带有预选值的下拉列表。(译者注:预选值指预先指定的首选项。)
文本域(Textarea)
-
本例演示如何创建一个文本域(多行文本输入控件)。用户可以在文本域中写入文本。在文本域中,可写入的字符字数不受限制。
创建按钮
-
本例演示如何创建按钮。你可以对按钮上的文字进行自定义。
Fieldset around data
-
本例演示如何在数据周围绘制一个带标题的框。
表单实例
带有输入框和确认按钮的表单
-
本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。
带有复选框的表单
-
此表单包含两个复选框和一个确认按钮。
带有单选按钮的表单
-
此表单包含两个单选框和一个确认按钮。
从表单发送电子邮件
-
此例演示如何从表单发送电子邮件。
HTML 图像实例
插入图像
-
本例演示如何在网页中显示图像。
从不同的位置插入图片
-
本例演示如何将其他文件夹或服务器的图片显示到网页中。
背景图片
-
本例演示如何向 HTML 页面添加背景图片。
排列图片
-
本例演示如何在文字中排列图像。
浮动图像
-
本例演示如何使图片浮动至段落的左边或右边。
调整图像尺寸
-
本例演示如何将图片调整到不同的尺寸。
为图片显示替换文本
-
本例演示如何为图片显示替换文本。在浏览器无法载入图像时,替换文本属性告诉读者们失去的信息。为页面上的图像都加上替换文本属性是个好习惯。
制作图像链接
-
本例演示如何将图像作为一个链接使用。
创建图像映射
-
本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。
把图像转换为图像映射
-
本例显示如何把一幅普通的图像设置为图像映射。
HTML 背景实例
搭配良好的背景和颜色
-
一个背景颜色和文字颜色搭配良好的例子,使页面中的文字易于阅读。
搭配得不好的背景和颜色
-
一个背景颜色和文字颜色搭配得不好的例子,使页面中的文字难于阅读。
可用性强的背景图像
-
背景图像和文字颜色使页面文本易于阅读的例子。
可用性强的背景图像 2
-
另一个背景图像和文字颜色使页面文本易于阅读的例子。
可用性差的背景图像
-
背景图像和文字颜色使页面文本不易阅读的例子。
HTML 样式 (style) 实例
HTML中的样式
-
本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。
没有下划线的链接
-
本例演示如何使用样式属性做一个没有下划线的链接。
链接到一个外部样式表
-
本例演示如何 <link> 标签链接到一个外部样式表。
HTML 头部 (head) 实例
文档的标题
-
头元素内部的标题信息不会显示在浏览器窗口中。
一个 target,所有的链接
-
本例显示如何使用 base 标签使页面中的所有标签在新窗口中打开。
HTML 元信息 (meta) 实例
HTML 基础标签实例
-
一个简单的 HTML 文件
- 这个例子是一个很简单的 HTML 文件,使用了尽可能少的 HTML 标签。它向您演示了 body 元素中的内容是如何被浏览器显示的。 简单的段落
- 此例演示:段落元素中的文字如何被浏览器显示。 更多的段落
- 本例演示段落元素的某些缺省的行为。 “诗歌”问题
- 本例演示 HTML 格式化的某些问题。 折行
- 本例演示在 HTML 文档中折行的使用。 标题
- 本例演示在 HTML 文档中显示标题的标签。 居中排列的标题
- 本例演示一个居中排列的标题。 水平线
- 本例演示如何插入水平线。 隐藏的注释
- 本例演示如何在 HTML 源代码中插入隐藏的注释。 背景颜色
- 本例演示如何为 HTML 页面添加背景颜色。
HTML 文本格式化实例
HTML 链接实例
-
创建超级链接
- 本例演示如何在 HTML 文档中创建链接。 将图像作为链接
- 本例演示如何使用图像作为链接。 在新的浏览器窗口打开链接
- 本例演示如何在新窗口打开一个页面,这样的话访问者就无需离开你的站点了。 链接到同一个页面的不同位置
- 本例演示如何使用链接跳转至文档的另一个部分 跳出框架
- 本例演示如何跳出框架,假如你的页面被固定在框架之内。 创建电子邮件链接
- 本例演示如何如何链接到一个邮件。(本例在安装邮件客户端程序后才能工作。) 创建电子邮件链接 2
- 本例演示更加复杂的邮件链接。
HTML 框架实例
-
垂直框架
- 本例演示:如何使用三份不同的文档制作一个垂直框架。 水平框架
- 本例演示:如何使用三份不同的文档制作一个水平框架。 如何使用 <noframes> 标签
- 本例演示:如何使用 <noframes> 标签。 混合框架结构
- 本例演示如何制作含有三份文档的框架结构,同时将他们混合置于行和列之中。 含有 noresize="noresize" 属性的框架结构
- 本例演示 noresize 属性。在本例中,框架是不可调整尺寸的。在框架间的边框上拖动鼠标,你会发现边框是无法移动的。 导航框架
- 本例演示如何制作导航框架。导航框架包含一个将第二个框架作为目标的链接列表。名为 "contents.htm" 的文件包含三个链接。 内联框架
- 本例演示如何创建内联框架(HTML 页中的框架)。 跳转至框架内的一个指定的节
- 本例演示两个框架。其中的一个框架设置了指向另一个文件内指定的节的链接。这个"link.htm"文件内指定的节使用 <a name="C10"> 进行标识。 使用框架导航跳转至指定的节
- 本例演示两个框架。左侧的导航框架包含了一个链接列表,这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。
HTML 表格实例
-
表格
- 这个例子演示如何在 HTML 文档中创建表格。 表格边框
- 本例演示各种类型的表格边框。 没有边框的表格
- 本例演示一个没有边框的表格。 表格中的表头(Heading)
- 本例演示如何显示表格表头。 空单元格
- 本例展示如何使用 " " 处理没有内容的单元格。 带有标题的表格
- 本例演示一个带标题 (caption) 的表格 跨行或跨列的表格单元格
- 本例演示如何定义跨行或跨列的表格单元格。 表格内的标签
- 本例演示如何显示在不同的元素内显示元素。 单元格边距(Cell padding)
- 本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。 单元格间距(Cell spacing)
- 本例演示如何使用 Cell spacing 增加单元格之间的距离。 向表格添加背景颜色或背景图像
- 本例演示如何向表格添加背景。 向表格单元添加背景颜色或者背景图像
- 本例演示如何向一个或者更多表格单元添加背景。 在表格单元中排列内容
- 本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。 框架(frame)属性
- 本例演示如何使用 "frame" 属性来控制围绕表格的边框。
HTML 列表实例
HTML 表单与输入实例
-
文本域(Text fields)
- 本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。 密码域
- 本例演示如何创建 HTML 的密码域。 复选框
- 本例演示如何在 HTML 页中创建复选框。用户可以选中或取消选取复选框。 单选按钮
- 本例演示如何在 HTML 中创建单选按钮。 简单的下拉列表
- 本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。 另一个下拉列表
- 本例演示如何创建一个简单的带有预选值的下拉列表。(译者注:预选值指预先指定的首选项。) 文本域(Textarea)
- 本例演示如何创建一个文本域(多行文本输入控件)。用户可以在文本域中写入文本。在文本域中,可写入的字符字数不受限制。 创建按钮
- 本例演示如何创建按钮。你可以对按钮上的文字进行自定义。 Fieldset around data
- 本例演示如何在数据周围绘制一个带标题的框。
表单实例
-
带有输入框和确认按钮的表单
- 本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。 带有复选框的表单
- 此表单包含两个复选框和一个确认按钮。 带有单选按钮的表单
- 此表单包含两个单选框和一个确认按钮。 从表单发送电子邮件
- 此例演示如何从表单发送电子邮件。
HTML 图像实例
-
插入图像
- 本例演示如何在网页中显示图像。 从不同的位置插入图片
- 本例演示如何将其他文件夹或服务器的图片显示到网页中。 背景图片
- 本例演示如何向 HTML 页面添加背景图片。 排列图片
- 本例演示如何在文字中排列图像。 浮动图像
- 本例演示如何使图片浮动至段落的左边或右边。 调整图像尺寸
- 本例演示如何将图片调整到不同的尺寸。 为图片显示替换文本
- 本例演示如何为图片显示替换文本。在浏览器无法载入图像时,替换文本属性告诉读者们失去的信息。为页面上的图像都加上替换文本属性是个好习惯。 制作图像链接
- 本例演示如何将图像作为一个链接使用。 创建图像映射
- 本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。 把图像转换为图像映射
- 本例显示如何把一幅普通的图像设置为图像映射。
HTML 背景实例
-
搭配良好的背景和颜色
- 一个背景颜色和文字颜色搭配良好的例子,使页面中的文字易于阅读。 搭配得不好的背景和颜色
- 一个背景颜色和文字颜色搭配得不好的例子,使页面中的文字难于阅读。 可用性强的背景图像
- 背景图像和文字颜色使页面文本易于阅读的例子。 可用性强的背景图像 2
- 另一个背景图像和文字颜色使页面文本易于阅读的例子。 可用性差的背景图像
- 背景图像和文字颜色使页面文本不易阅读的例子。
HTML 样式 (style) 实例
-
HTML中的样式
- 本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。 没有下划线的链接
- 本例演示如何使用样式属性做一个没有下划线的链接。 链接到一个外部样式表
- 本例演示如何 <link> 标签链接到一个外部样式表。
HTML 头部 (head) 实例
-
文档的标题
- 头元素内部的标题信息不会显示在浏览器窗口中。 一个 target,所有的链接
- 本例显示如何使用 base 标签使页面中的所有标签在新窗口中打开。