HTML常用标签演示

本页演示的所有标签均为浏览器默认效果,标签参考菜鸟html参考手册-功能排序。(*注:HTML5不再支持的标签不包含在内,html文档信息和一些没有展示效果也不做展示,如:html,meat,title,body,br等。)

基础

<h1>定义 HTML 标题

这是标题 1

<h2>定义 HTML 标题

这是标题 2

<h3>定义 HTML 标题

这是标题 3

<h4>定义 HTML 标题

这是标题 4

<h5>定义 HTML 标题

这是标题 5

<h6>定义 HTML 标题

这是标题 6

<p>定义一个段落

这是一个段落。

<hr>定义水平线


格式

<a> 定义链接、锚点

<abbr>定义一个缩写

微软推出的浏览器是 IE 浏览器。(鼠标移到“IE”上看效果)

<address>定义文档作者或拥有者的联系信息

Written by Jon Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA

<b>定义粗体文本。这是一个普通的文本- 这是一个加粗文本

<big> 定义大号文本(通常使用比正文更大的字号显示)

<bdi>*允许您设置一段文本,使其脱离其父元素的文本方向设置

用户 hrefs: 60 分

<bdo>定义文本的方向。ltr 是英文 left to right 的首字母缩写,即从左到右。同理 rtl 是英文 right to left 即从右到左。

该段落文字从右到左显示。

该段落文字从右到左显示。

<blockquote>定义块引用

For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

<cite>定义引用(通常使用斜体显示)。可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题。

<code>定义计算机代码文本(通常使用等宽字体显示,但不会保留空格及换行符,需要保留空格及换行符,请使用<pre>)一段电脑代码

<del>定义被删除文本.My favorite color is blue red!

<dfn>定义定义项目。定义项目

<em>定义强调文本。强调文本

<i>定义斜体文本。He named his car The lightning, because it was very fast.

<ins>定义被插入文本。My favorite color is blue red!

<kbd>kbd。键盘输入

<mark>*定义带有记号的文本。Do not forget to buy milk today.

<meter>*定义度量衡。仅用于已知最大和最小值的度量

2 out of 10

<pre>定义预格式文本

此例演示如何使用 pre 标签
对空行和    空格
进行控制

<progress>*定义运行中的任务进度(进程)

<q>定义短的引用(通常会在两边加双引号)。WWF's goal is to: Build a future where people live in harmony with nature.We hope they succeed.

<rp>*定义不支持 ruby 元素的浏览器所显示的内容

(han)(zi)

<rt>*定义字符(中文注音或字符)的解释或发音

ㄏㄢˋ

<ruby>*定义 ruby 注释(中文注音或字符)

(han)(zi)

<s>定义加删除线的文本。My car is blue.

<samp>定义计算机代码样本。计算机样本

<small>定义小号文本(通常使用比正文更小的字号显示)。Copyright 1999-2050 by Refsnes Data.

<strong>定义语气更为强烈的强调文本。加粗文本

<sub>定义下标文本。定义下标文本、H2O

<sup>定义上标文本。定义上标文本、X2

<time>*定义一个日期/时间。我在 有个约会。

<u>定义下划线文本。This is a parragraph.

<var>定义文本的变量部分。变量

<wbr>*规定在文本中的何处适合添加换行符。学习 AJAX ,您必须熟悉 HttpRequest 对象。


表单

<form>定义一个 HTML 表单,用于用户输入

<fieldset>定义围绕表单中元素的边框

<legend>定义 fieldset 元素的标题

Personalia: Name:
Email:
Date of birth:

<select>定义选择列表(下拉列表)

<optgroup>定义选择列表中相关选项的组合

<option>定义选择列表中的选项

滚动列表形式

多选列表

<input>定义一个输入控件(如果浏览器不支持 HTML5 新的类型,那么会使用文本域替代)

文本域 type="text"

密码域 type="password"

复选框 type="checkbox" A B C

单选按钮 type="radio" 组A:②  组B:

文件域 type="file"

图像域 type="image" (可用做提交按钮)

隐藏域 type="hidden" (当然是看不见的了)

普通按钮 type="button"

重置按钮 type="reset"

提交按钮 type="submit"

email 域 type="email" (若有输入内容,则会验证格式是否符合 email)

url 域 type="url" (若有输入内容,则会验证格式是否符合 url)

数值域 type="number" (若有设置最大值或最小值,则会验证数字是否在最大最小值之内)

数值范围域 type="range" (通过拖动滑块来选择数值)

日期域 type="date" (会调用浏览器自带的日期选择器,可设置的类型:date, month, week, time, datetime, datetime-local)

    type="month"

    type="week"

    type="time"

    type="datetime"

    type="datetime-local"

色值域 type="color" (会调用浏览器自带的颜色选择器)

搜索域 type="search" (用于搜索,站内搜索或 Google 搜索等,在输入框内容右侧通常会出现清除按钮)

<datalist> 定义 input 元素的选项列表

<keygen>*规定用于表单的密钥对生成器字段

用户名: 加密:

<label> 定义 input 元素的标注

<textarea> 定义多行的文本输入控件

<button> 定义按钮(与 input 不同的是,button 内部可以放置更多的内容,比如文本或图像)

<output>*定义一个计算的结果

0 100 + =

框架

<iframe>定义内联框架


图像

<iframe>定义图像

Smiley face

<map>定义图像

<area>定义图像

Planets Sun Mercury Venus

<canvas>*定义图像

<figcaption>*定义图像

<figure>*定义图像

The Pulpit Rock
Fig1. - A view of the pulpit rock in Norway.

媒体

<audio>*定义图像

<source>*定义media元素 (<video> 和 <audio>)的媒体资源。media

<track>*为媒体(<video> 和 <audio>)元素定义外部文本轨道。

<video>*定义一个音频或者视频


链接

<a>定义一个链接

访问菜鸟教程!

<link>定义文档与外部资源的关系

<link rel="stylesheet" type="text/css" href="theme.css">

<nav>*定义导航链接


列表

<ul>定义一个无序列表

<ol>定义一个有序列表

<li>定义一个列表项

  1. Coffee
  2. Tea
  3. Milk

<dl>定义一个定义列表

<dt>定义一个定义定义列表中的项目

<dd>定义定义列表中项目的描述

Coffee
Black hot drink
Milk
White cold drink

<menu>定义菜单列表

<command>*定义用户可能调用的命令(比如单选按钮、复选框或按钮)

Save

表格

<table>定义一个表格

<caption>定义表格标题

<th>定义表格中的表头单元格(通常使用粗体显示)

<tr>定义表格中的行

<td>定义表格中的单元

<thead>定义表格中的表头内容

<tbody>定义表格中的主体内容

<tfoot>定义表格中的表注内容(脚注)

<col>定义表格中一个或多个列的属性值

<colgroup>定义表格中供格式化的列组

表格标题
Month Savings
Sum $180
January $100
February $80

虽然 tfoot 放在了 tbody 之前,浏览器依然会将 tfoot 显示在 tbody 之后,而且这样做能让浏览器在获得所有表格内的数据前显示表注。


样式/节

<div>定义文档中的节

这是一个在 div 元素中的文本。

<span>定义文档中的节

我的母亲有 蓝色 的眼睛。

<header>*定义一个文档头部部分

Internet Explorer 9

<footer>*定义一个文档底部

<section>*定义了文档的某个区域

The World Wide Fund for Nature (WWF) is....

<article>*定义一个文章内容

Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的

<aside>*定义其所处内容之外的内容

<dialog>*定义一个对话框或者窗口

This is an open dialog window

<details>*定义了用户可见的或者隐藏的需求的补充细节

<summary>*定义一个可见的标题,当用户点击标题时会显示出详细信息

Copyright 1999-2011. by Refsnes Data. All Rights Reserved. All content and graphics on this web site are the property of the company Refsnes Data.

元信息


程序

<embed>定义了一个容器,用来嵌入外部应用或者互动程序(插件)

<embed src="helloworld.swf">

<object>定义嵌入的对象

<param>定义对象的参数