HTML 实例

HTML 基础标签实例

一个简单的 HTML 文件

本例演示了如何正确地使用标题<h1>标签、段落<p>标签，在浏览器中的显示效果。

HTML 标题

本例演示了标题<h1>到<h6>标签在浏览器中的显示效果。

HTML 段落

本例演示了如何正确地使用段落<p>标签。

HTML 链接

本例演示了如何正确地使用超链接<a>标签。

HTML 图像

本例演示了如何正确地插入图像<image>标签。

HTML 元素

本例演示了如何正确地使用标题<h1>、段落<p>、无序列表<ul>、链接<a>等标签。

HTML 段落实例

HTML 多个段落

本例演示了如何正确地使用段落<p>标签实现多个段落。

HTML 段落带属性

本例演示了给段落<p>标签添加align="center"属性，实现文字居中显示。

HTML 段落带样式

本例演示了给段落<p>标签添加样式，实现文字颜色为红色、尺寸为16像素。

HTML 段落dir右对齐

本例演示了给段落<p>标签添加dir="rtl"属性，实现文字阅读方式为从右往左。

HTML 段落lang语言

本例演示了给段落<p>标签添加lang="cn"属性，表示该段落的语言是中文。

HTML 段落ID属性

本例演示了给段落<p>标签添加id属性，常用于 Javascript 或 css 调用。

HTML 段落class类

本例演示了给段落<p>标签添加class属性，常用于 css 或 Javascript 调用。

HTML 段落style样式

本例演示了给段落<p>标签添加style属性，用于给当前段落添加样式。

HTML 链接实例

HTML 外部链接

本例演示了如何正确地使用落href属性引用外部链接【绝对路径】。

HTML 内部链接

本例演示了如何正确地使用落href属性引用内部链接【相对路径/绝对路径】。

HTML 锚点链接

本例演示了如何正确的添加锚点链接。

HTML 电子邮件链接

本例演示了如何正确地使用mailto:kaicz@gmail.com添加电子邮件链接。

HTML 下载链接

本例演示了如何使用download属性，将正常链接改成下载链接。

HTML 表格实例

table 表格

这个例子演示如何在 HTML 文档中创建表格。

table 表格标题

本例演示了如何正确地使用落caption属性为表格添加标题。

table 表格表头

本例演示了如何正确的添加锚点链接。

table 表格合并列

本例演示了如何正确地使用colspan属性，来合并表格中的列。

table 表格合并行

本例演示了如何正确地使用rowspan属性，来合并表格中的行。

一个标准的业务统统计表

本例演示了在日常实用中标准的漂亮的业务统计表。

HTML 列表

一个简单的无序列表和有序列表的 HTML 文档

这个例子演示如何使用<ul>标签实现无序列表，如何使用<ol>标签实现有序列表。

无序列表

本例演示了如何正确地使用落<ul>标签，实现无序列表。

有序列表

本例演示了如何正确地使用落<ol>标签，实现有序列表。

带字母的有序列表

本例演示了如何正确地使用type属性，给有序列表添加字母序列号。

带数字的有序列表

本例演示了如何正确地使用type属性，给有序列表添加数字序列号，并初始化初始值为5。

自定义列表

本例演示了如何正确地使用<dl>、<dt>、<dd>标签，来自定义列表。

嵌套列表

本例演示了更复杂的嵌套列表。

HTML 表单

一个简单的 form 表单 HTML 文档

这个例子演示了一个用户登录/注册常用的 form 表单的基本结构。

form 文本输入框

本例演示了如何正确地使用<input>标签的type="text"属性，为表单添加文本输入框。

form 密码输入框

本例演示了如何正确地使用<input>标签的type="password"属性，为表单添加密码输入框。

form 单选按钮

本例演示了如何正确地使用<input>标签的type="radio"属性，为表单添加单选按钮。

form 复选框

本例演示了如何正确地使用<input>标签的type="checkbox"属性，为表单添加复选框。

form 下拉列表

本例演示了如何正确地使用<select>标签、<option>标签，为表单添加下拉列表。

form 文本域

本例演示了如何正确地使用<textarea>标签，为表单添加文本域。

HTML 其他实例

预格式文本

这个例子演示了预格式文本<pre>标签。

文本格式化

这个例子演示了文本格式化<b>、<br>、<i>、<code>、<sub>、<sup>等标签。

HTML Style 样式

本例演示了如何正确地使用<style>属性为 div 添加样式。

图像 Alt 属性

本例演示了如何正确地使用<alt>属性，为图像添加替代文本。

插入网络图像

本例演示了为<img>添加网络图像。