HTML Basic Tags Examples

基础标签实例

A very simple HTML document

一个十分简单的HTML文档

How text inside paragraphs is displayed

文字在段落中显示的情况

More paragraphs

多个段落的显示

The use of line breaks

使用换行

Poem problems (some problems with HTML formatting)

有关HTML格式上的一些问题

Heading tags

标题标签

Center aligned heading

居中标题

Insert a horizontal rule

插入水平分隔线

Comments in the HTML source

HTML代码注释

Add a background color

添加背景颜色

HTML Formatting Text Examples

文字格式实例

Text formatting

文字格式

Preformatted text (how to control line breaks and spaces)

控制文字的换行

Different computer-output tags

几个不同的计算机输出标签

Insert an address

插入地址

Abbreviations and acronyms

缩写和首字母缩略词

Text direction

文本方向

Long and short quotations

长篇于短篇的引用

How to mark deleted and inserted text

怎样删除和插入文字

HTML Link Examples

链接实例

How to create hyperlinks

建立链接

Set an image as a link

建立图片链接

Open a link in a new browser window

在新窗口打开链接

Jump to another part of a document (on the same page)

同页文档内容跳转

Break out of a frame

脱离框架

How to link to a mail message (will only work if you have mail installed)

建立邮件链接

A more complicated mailto link

更为复杂的邮件链接

HTML Frame Examples

框架实例

How to create a vertical frameset with 3 different documents

建立垂直三列框架

How to create a horizontal frameset with 3 different documents

建立三水平框架

How to use the tag

使用标签

How to mix a frameset in rows and columns

怎样在行和列中使用混合的框架

Frameset with noresize="noresize"

使用了noresize="noresize"的框架

How to create a navigation frame

建立导航框架

Inline frame (a frame inside an HTML page)

演示怎样去建立一个IFRAME（框架被包含在一个HTML页面中）

Jump to a specified section within a frame

在框架中跳转到指定的位置

Jump to a specified section with frame navigation

通过框架导航跳转到指定的位置

HTML Table Examples

HTML表格实例

Simple tables

简单的表格

Different table borders

不同类型的表格边框

Table with no borders

无边框表格

Headings in a table

表格标题

Empty cells

空单元格

Table with a caption

带说明的表格

Table cells that span more than one row/column

分割表格单元格

Tags inside a table

表格内标签

Cell padding (control the white space between cell content and the borders

设置单元格边距

Cell spacing (control the distance between cells)

单元格填充

Add a background color or a background image to a table

表格添加背景

Add a background color or a background image to a table cell

表格单元格添加背景

Align the content in a table cell

表格内容对齐

The frame attribute

新框架属性

HTML List Examples

列表实例

An unordered list

无序列表

An ordered list

有序列表

Different types of ordered lists

有序列表的不同样式

Different types of unordered Lists

无序列表的不同样式

Nested list

内嵌列表

Nested list 2

内嵌列表2

Definition list

定义列表

HTML Form and Input Examples

表单输入

How to create input fields

建立输入域

Password fields

密码域

Checkboxes

复选框

Radiobuttons

单选按钮

Simple drop-down box (a selectable list)

简单的下拉菜单

Another drop-down box with a pre-selected value

另一种下拉菜单（有选中值的）

Textarea (a multi-line text input field)

文字输入域

Create a button

建立按钮

Draw a border with a caption around data

给数据内容画上边框和说明

Form with an input field and a submit button

有输入域和提交按钮的表单

Form with checkboxes and a submit button

带复选框和提交按钮的表单

Form with radiobuttons and a submit button

带单选按钮和提交按钮的表单

Send e-mail from a form

利用表单发送电子邮件

HTML Image Examples

图片

Insert images

插入图片

Insert images from another folder or another server

插入非本地文件夹或是服务器的图片

Background image

背景图片

Align an image within a text

对齐文字中的图片

Let the image float to the left/right of a paragraph

让段落中的图片居左或居右

Adjust images to different sizes

调整图片的大小

Display an alternate text for an image (if the browser can't load images)

为图片添加替换文字

Make a hyperlink of an image

建立图片链接

Create an image-map, with clickable regions

建立图片热点

Turn an image into an image map

如何将图片转换成图片热点

HTML Background Examples

背景

Good background and text color

背景颜色和文字颜色的合理搭配

Bad background and text color

糟糕的搭配

Good background image

合适的背景图片

Good background image 2

合适的背景图片2

Bad background image

糟糕的背景图片

HTML Style Examples

样式

Styles in the head section of an HTML document

HTML标题的样式

Link that is not underlined

无下横线的链接

Link to an external style sheet

连接到外部样式表

HTML Examples

HEAD部分

Set a title of a document

设置文档的title

One target for all links on a page

设置同一页面上所有连接的打开方式

HTML Examples

Meta 标签

Document description

文档描述

Document keywords

文档关键字

Redirect a user to another URL

URL地址转移

HTML Script Examples

脚本

Insert a script

插入脚本

Handle browsers that do not support scripts

不支持脚本浏览器的处理方法