HTML 示例
HTML 示例
- 开始学习 HTML
- 一个简单的 HTML 实例
- 一个简单的 HTML 文件
- HTML 标签可以拥有 属性 。属性提供了有关 HTML 元素的 更多的信息 。 属性总是以名称/值对的形式出现， 属性总是在 HTML 元素的 开始标签 中规定。
- 简单的段落
- 此例演示：段落元素中的文字如何被浏览器显示。
- 更多的段落
- 本例演示段落元素的某些缺省的行为。
- “诗歌”问题
- 本例演示 HTML 格式化的某些问题。
- 换行
- 本例演示在 HTML 文档中换行
的使用。 - 标题
- 本例演示在 HTML 文档中显示标题的标签 h1 h2 h3 h4 h5 h6
- 居中排列的标题
- 本例演示一个标题如何居中排列。
- 水平线
- 本例演示如何插入水平线 hr。
- 隐藏的注释
- 本例演示如何在 HTML 源代码中插入隐藏的注释 。
- 背景颜色
- 本例演示如何为 HTML 页面添加背景颜色。
- 文本格式化
- 此例演示如何在一个 HTML 文件中对文本进行格式化：加粗 斜体 上标 下标 放大缩小字号
- 预格式文本
- 此例演示如何使用 pre 标签对空行和空格进行控制。
- “计算机输出”标签
- 此例演示用来显示“计算机编程/代码”的常用标签的效果。
- 地址
- 此例演示如何在 HTML 文件中写地址。
- 缩写和首字母缩写
- 此例演示如何实现缩写或首字母缩写,以及title提示信息。
- 文字方向
- 此例演示如何改变 html 文字的方向。
- 块引用
- 此例演示如何实现长短不一的引用语
- 删除字效果和插入字效果
- 此例演示如何标记删除文本和插入文本。
- 创建超级链接
- 本例演示如何在 HTML 文档中创建超级链接 。
- 将图像作为链接
- 本例演示如何为图像制作超级链接。
- 在新的浏览器窗口打开链接
- 本例演示如何在新窗口打开一个页面，这样的话访问者就无需离开你的站点了。
- 链接到同一个页面的不同位置
- 锚标记，本例演示如何使用链接跳转至文档的另一个部分
- 跳出框架
- 本例演示如何跳出框架，假如你的页面被固定在框架之内。
- 创建电子邮件链接
- 本例演示如何如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）
- 垂直框架
- 本例演示：如何使用三份不同的文档制作一个垂直框架。
- 水平框架
- 本例演示：如何使用三份不同的文档制作一个水平框架。
- 如何使用 noframes 标签
- 本例演示：如何使用
标签。 - 混合框架结构
- 例演示如何制作含有三份文档的框架结构，同时将他们混合置于行和列之中。
- 含有 noresize="noresize" 属性的框架结构
- 本例演示 noresize 属性。在本例中，框架是不可调整尺寸的。在框架间的边框上拖动鼠标，你会发现边框是无法移动的。
- 导航框架
- 本例演示如何制作导航框架。导航框架包含一个将第二个框架作为目标的链接列表。
- 内联框架 iframe
- 本例演示如何创建内联框架（包含在 HTML 页中的框架）。
- 跳转至框架内的一个指定的锚
- 本例演示两个框架。其中的一个框架设置了指向另一个文件内指定的锚的链接。这个"link.htm"文件内指定的节使用 进行标识。
- 使用框架导航跳转至指定的锚链接
- 本例演示两个框架。左侧的导航框架包含了一个链接列表，这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。
- 表格
- 这个例子演示如何在 HTML 文档中创建表格。
- 表格边框
- 本例演示各种类型的表格边框。
- 没有边框的表格
- 本例演示一个没有边框的表格。
- 表格中的表头 Heading
- 本例演示如何显示表格表头。
- 空单元格
- 本例展示如何使用 " " 处理没有内容的单元格。
- 带有标题的表格
- 本例演示一个带标题 (caption) 的表格
- 跨行或跨列的表格单元格
- 本例演示如何定义跨行或跨列的表格单元格。
- 表格内的标签
- 本例演示如何在表格不同的单元格内显示使用不用的的标签显示内容。
- 单元格边距 cell padding
- 本例演示如何使用 cellpadding 来创建单元格内容与其边框之间的空白。
- 单元格间距 Cell spacing
- 本例演示如何使用 Cell spacing 增加单元格之间的距离。
- 向表格添加背景颜色或背景图像
- 本例演示如何向一个或者更多表格单元添加背景。
- 在表格单元中内容的排列方式 align
- 本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。
- 表格的框架(frame)属性
- 例演示如何使用 frame 属性来控制围绕表格的边框。
- 无序列表
- 本例演示无序列表 ul。
- 有序列表
- 本例演示有序列表
- 不同类型的无序列表
- 本例演示不同类型的无序列表 ul。
- 不同类型的有序列表
- 本例演示不同类型的有序列表 ol
- 嵌套列表
- 本例演示如何嵌套列表。
- 复杂的嵌套列表
- 本例演示更复杂的嵌套列表。
- 自定义列表
- 本示例演示一个自定义列表
- 文本域 Text fields
- 本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。
- 密码域
- 本例演示如何创建 HTML FORM 的密码域。
- 复选框 checkbox
- 本例演示如何在 HTML 页中创建复选框。用户可以选中或取消选取复选框。
- 单选按钮 radio
- 本例演示如何在 HTML 中创建单选按钮 radio
- 简单的下拉列表 select
- 本例演示如何在 HTML 页面中创建简单的下拉列表框 select 。下拉列表框是一个可选列表。
- 预先选择的下拉列表 pre select
- 本例演示如何创建一个简单的带有预选值的下拉列表 select
- 文本域 Textarea
- 本例演示如何创建一个文本域 textarea （多行文本输入控件）。用户可以在文本域中写入文本。在文本域中，可写入的字符字数不受限制。
- 创建按钮 button
- 本例演示如何创建按钮。你可以对按钮上的文字进行自定义。
- 如何在 form 控件周围绘制带标题的框
- 本例演示如何在 form 窗体 空间 数据周围绘制一个带标题的框。
- 带有输入框和确认按钮的表单
- 本例演示如何向页面添加表单 form 。此表单包含两个输入框input text 和一个确认按钮 input submit。
- 带有复选框的表单
- 此表单包含两个复选框和一个确认按钮。
- 带有单选按钮的表单
- 此表单 form 包含两个单选框 radio 和一个确认按钮 submit。
- 从表单发送电子邮件
- 此例演示如何从表单 form 发送电子邮件 email。
- 插入图像 img
- 本例演示如何在 html 网页中显示图像 image。
- 从不同的位置插入图片
- 本例演示如何将其他文件夹或服务器的图片显示到网页中。
- 背景图片
- 本例演示如何向 HTML 页面添加背景图片 background image
- 排列图片
- 本例演示如何在文字中编排图像 image 。
- 浮动图像
- 本例演示如何使图片 image 浮动 float 至段落的左边或右边。
- 调整图像尺寸
- 本例演示如何将图片 image 调整到不同的尺寸 size。
- 为图片显示替换文本
- 本例演示如何为图片 image 显示替换文本 alt。在浏览器无法载入图像时，替换文本 alt 属性告诉读者们图片的信息。为页面上的图像都加上替换文本属性是个好习惯。
- 制作图像链接
- 本例演示如何将图像 image 作为一个链接 a link 使用。
- 为图像创建热点区域
- 本例显示如何创建带有可供点击区域的图像地图 map area。其中的每个区域都是一个超级链接 link。
- 把图像转换为图像映射
- 本例显示如何把一幅普通的图像 image 设置为图像映射 ismap。
- 搭配良好的背景和颜色
- 一个背景颜色和文字颜色搭配良好的例子，使页面中的文字易于阅读。
- 搭配得不好的背景和颜色
- 一个背景颜色和文字颜色搭配得不好的例子，使页面中的文字难于阅读。
- 可用性强的背景图像
- 背景图像和文字颜色使页面文本易于阅读的例子。
- 可用性强的背景图像 2
- 应用背景图像和文字颜色使页面文本易于阅读的例子。
- 可用性差的网页背景图像
- 背景图像和文字颜色使页面文本不易阅读的例子。
- html 中的样式
- 例演示如何使用添加到 head 部分的样式信息 style 对 HTML 进行格式化。
- 没有下划线的链接
- 本例演示如何使用样式属性做一个没有下划线的链接。
- 链接到一个外部样式表
- 本例演示如何 link 标签链接到一个外部样式表 css 。
- 文档的标题
- 头元素 head 内部的标题 title 信息不会显示在浏览器窗口中，而是现实在浏览器的标题栏。
- 如何使用 base 设定链接打开的位置
- 本例显示如何使用 base 标签使页面中的所有链接 link 在新窗口中打开。
- meta 文档描述
- 如何使用 meta 元素中的信息来描述 html 文档的内容。
- 文档关键字
- Meta 元素中的信息可以描述文档的关键词。
- 网页 url 重定向
- 这个例子演示：在网页地址 url 已经变更的情况下，将用户重定向到另外一个 url 地址。
- 插入一段脚本 script
- 本例演示如何将脚本 script 插入 HTML 文档。
- html 运行于不支持脚本的浏览器
- 本例演示当浏览器不支持脚本 script 的时候，如何处理 html。