HTML标签整理

1:标记一个缩写,鼠标放在标记字段上可以显示全称。<abbr title="">...</abbr>

2:定义只取首字母的缩写<acronym title="">...</acronym>

2:<address> 标签定义文档或文章的作者/拥有者的联系信息。

<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

3:<area> 标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像)。

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

4:<audio> 标签定义声音,比如音乐或其他音频流。

实例:<audio src="/i/horse.ogg" controls="controls">
          Your browser does not support the audio element.
          </audio>

属性描述
autoplayautoplay如果出现该属性,则音频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
looploop如果出现该属性,则每当音频结束时重新开始播放。
mutedmuted规定视频输出应该被静音。
preloadpreload

如果出现该属性,则音频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

srcurl要播放的音频的 URL。

5:<bdi>...</bdi>标签

定义和用法

bdi 指的是 bidi 隔离。

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

在发布用户评论或其他您无法完全控制的内容时,该标签很有用。

属性

属性描述
dir
  • ltr
  • rtl
  • auto
可选。规定 <bdi> 元素内的文本的文本方向。默认值:auto。

6:<bdo>..</bdo>定义和用法bdo 元素可覆盖默认的文本方向。

属性值描述dir

  • ltr
  • rtl                         
  •  定义文字的方向 

7:<blockquote>....</blockquote>定义长的引用。

8:<cite>...</cite>定义引用的诠释,默认斜体。

9:<code>...</code>标签:

定义和用法

<code> 标签用于表示计算机源代码或者其他机器可以阅读的文本内容。

软件代码的编写者已经习惯了编写源代码时文本表示的特殊样式。<code> 标签就是为他们设计的。包含在该标签内的文本将用等宽、类似电传打字机样式的字体(Courier)显示出来,对于大多数程序员和 W3School 的用户来说,这应该是十分熟悉的。

只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 <code> 标签。虽然 <code> 标签通常只是把文本变成等宽字体,但它暗示着这段文本是源程序代码。将来的浏览器有可能会加入其他显示效果。例如,程序员的浏览器可能会寻找 <code> 片段,并执行某些额外的文本格式化处理,如循环和条件判断语句的特殊缩进等。

9:<del>....</del>定义删除的文本,页面显示是画了横杠的文本(表示删除)。

10:<dfn>...</dnf>标签:

定义和用法

<dfn> 标签可标记那些对特殊术语或短语的定义。

现在流行的浏览器通常用斜体来显示 <dfn> 中的文本。将来,<dfn> 还可能有助于创建文档的索引或术语表。

与其他许多基于内容的样式和物理样式标签一样,<dfn> 标签尽量少用为妙。作为一种通用样式,尤其在技术文档中,当第一次新的术语时,应该将它们与普通文本分开,这样读者可以更好地理解文章当前的主题,而从那以后就不要再对这个术语进行任何标记了。

11:<em>..</em>定义强调文本。

12:<em>..</em>定义斜体文本。

13:<ins>..</ins>定义插入文本。页面显示文本底部会有横线表示插入文本。

14:<kbd>...</kbd>

定义和用法

<kbd> 标签定义键盘文本。

说到技术概念上的特殊样式时,就要提到 <kbd> 标签。正如你已经猜到的,它用来表示文本是从键盘上键入的。

浏览器通常用等宽字体来显示该标签中包含的文本。

15:<mark>..</mark>定义有标记的文本,标记颜色为黄色。

16:<meter>...</meter>:度量范围值。

定义和用法

<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge(尺度)。

例子:磁盘用量、查询结果的相关性,等等。

注释:<meter> 标签不应用于指示进度(在进度条中)。如果标记进度条,请使用 <progress> 标签。

17:<pre>...</pre>(特殊符号将会转换成符号实体,例如&lt转换成<)

定义和用法

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

可以导致段落断开的标签(例如标题、<p> 和 <address> 标签绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的。

pre 元素中允许的文本可以包括物理样式和基于内容的样式变化,还有链接图像水平分隔线。当把其他标签(比如 <a> 标签)放到 <pre> 块中时,就像放在 HTML/XHTML 文档的其他部分中一样即可。

18:<progress>

定义和用法

<progress> 标签标示任务的进度(进程)。

19:<q>...</q>定义短引用,引用文本将会添加引号。

20:

<rp>定义若浏览器不支持 ruby 元素显示的内容。
<rt>定义 ruby 注释的解释。
<ruby>定义 ruby 注释。

21:<sample>..<sample>

定义和用法

<samp> 标签表示一段用户应该对其没有什么其他解释的文本字符。要从正常的上下文抽取这些字符时,通常要用到这个标签。

请看下面的例子:

字符序列 <samp>ae</samp> 可能会被转换为 &aelig; 连字字符。

上面的 HTML 代码会显示为:

字符序列 ae 可能会被转换为 æ 连字字符。

22.<strong>...</strong>

<em>把文本定义为强调的内容。
<strong>把文本定义为语气更强的强调的内容。
<dfn>定义一个定义项目。
<code>定义计算机代码文本。
<samp>定义样本文本。
<kbd>定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var>定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
<cite>定义引用。可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题。

23:<sup>...</sup>

定义和用法

<sup> 标签可定义上标文本。

包含在 <sup> 标签和其结束标签 </sup> 中的内容将会以当前文本流中字符高度的一半来显示,但是与当前文本流中文字的字体和字号都是一样的。

提示:这个标签在向文档添加脚注以及表示方程式中的指数值时非常有用。如果和 <a> 标签结合起来使用,就可以创建出很好的超链接脚注。

24.<sub>...</sub>

定义和用法

<sub> 标签可定义下标文本。

包含在 <sub> 标签和其结束标签 </sub> 中的内容将会以当前文本流中字符高度的一半来显示,但是与当前文本流中文字的字体和字号都是一样的。

提示:无论是 <sub> 标签还是和它对应的 <sup> 标签,在数学等式、科学符号和化学公式中都非常有用。

25:<tt>..</tt>文本格式化

定义和用法

以下的元素均是字体样式元素。我们并不被反对使用这些标签。但是如果您只是希望通过这些标签单纯地改变文本的样式,建议您使用样式表来取得更加丰富的效果。

<tt>呈现类似打字机或者等宽的文本效果。
<i>显示斜体文本效果。
<b>呈现粗体文本效果。
<big>呈现大号字体效果。
<small>呈现小号字体效果。

 26:表单:

(1)文本域:

<form>
名:<input type="text" name="firstname"><br />
姓:<input type="text" name="lastname">
</form>

(2)密码域:

<form>

password:<input type="password" name="password">

</form>

(2)复选框:

<form>
我喜欢自行车:
<input type="checkbox" name="Bike">
<br />
我喜欢汽车:
<input type="checkbox" name="Car">
</form>

(3):单选按钮:

<form>
男性:
<input type="radio" checked="checked" name="Sex" value="male" />
<br />
女性:
<input type="radio" name="Sex" value="female" />
</form>

(4)简单下拉列表:

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

(5):预选下拉列表:

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

(6):文本域:

<textarea rows="10" cols="30">
The cat was playing in the garden.

</textarea>

(7):创建按钮

<form>
<input type="button" value="Hello world!" >
</form>
(8):围绕数据的边框fieldset

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高:<input type="text" />
    体重:<input type="text" />
  </fieldset>
</form>
(9):带有输入框和确认按钮的表单

<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

<p>如果您点击提交,表单数据会被发送到名为 demo_form.asp 的页面。</p>
(10):带有复选框的表单

<form name="input" action="/html/html_form_action.asp" method="get">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" checked="checked" />
<br />
I have a car: 
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane: 
<input type="checkbox" name="vehicle" value="Airplane" />
<br /><br />
<input type="submit" value="Submit" />
</form> 

<p>如果您点击 "Submit" 按钮,您将把输入传送到名为 html_form_action.asp 的新页面。</p>

(11):从表单发送电子邮件

<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain">

<h3>这个表单会把电子邮件发送到 W3School。</h3>
姓名:<br />
<input type="text" name="name" value="yourname" size="20">
<br />
电邮:<br />
<input type="text" name="mail" value="yourmail" size="20">
<br />
内容:<br />
<input type="text" name="comment" value="yourcomment" size="40">
<br /><br />
<input type="submit" value="发送">
<input type="reset" value="重置">

</form>

27:<optgroup lable="">

       <option value="">...</option>//页面显示内容以中间为准

       </optgroup>

是进行下拉列表组合。

28:

定义和用法

<label> 标签为 input 元素定义标注(标记)。

label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

29:

定义和用法

<datalist> 标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。

datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。

请使用 input 元素的 list 属性来绑定 datalist。

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

30:密钥

定义和用法

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

当提交表单时,私钥存储在本地,公钥发送到服务器。

<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

31:<track>...</track>

定义和用法

<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。

用于规定字幕文件或其他包含文本的文件,当媒介播放时,这些文件是可见的。

<video width="320" height="240" controls="controls">
  <source src="forrest_gump.mp4" type="video/mp4" />
  <source src="forrest_gump.ogg" type="video/ogg" />
  <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
  <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
</video>

32:<nav>..</nav>

定义和用法<nav> 标签定义导航链接的部分。

<nav>
<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>
</nav>

33:

列表

标签描述
<ul>定义无序列表。
<ol>定义有序列表。
<li>定义列表的项目。
<dir>不赞成使用。定义目录列表。
<dl>定义定义列表。
<dt>定义定义列表中的项目。
<dd>定义定义列表中项目的描述。
<menu>定义命令的菜单/列表。
<menuitem>定义用户可以从弹出菜单调用的命令/菜单项目。
<command>定义命令按钮。

 

34:

表格

标签描述
<table>定义表格
<caption>定义表格标题。
<th>定义表格中的表头单元格。
<tr>定义表格中的行。
<td>定义表格中的单元。
<thead>定义表格中的表头内容。
<tbody>定义表格中的主体内容。
<tfoot>定义表格中的表注内容(脚注)。
<col>定义表格中一个或多个列的属性值。
<colgroup>定义表格中供格式化的列组。

定义和用法

<tfoot> 标签定义表格的页脚(脚注或表注)。该标签用于组合 HTML 表格中的表注内容。

tfoot 元素应该与 thead 和 tbody 元素结合起来使用。

thead 元素用于对 HTML 表格中的表头内容进行分组,而 tbody 元素用于对 HTML 表格中的主体内容进行分组。

注释:如果您使用 thead、tfoot 以及 tbody 元素,您就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。

提示:在默认情况下这些元素不会影响到表格的布局。不过,您可以使用 CSS 使这些元素改变表格的外观。

35:

样式/节

标签描述
<style>定义文档的样式信息。
<div>定义文档中的节。
<span>定义文档中的节。
<header>定义 section 或 page 的页眉。
<footer>定义 section 或 page 的页脚。
<section>定义 section。
<article>定义文章。
<aside>定义页面内容之外的内容。
<details>定义元素的细节。
<dialog>定义对话框或窗口。
<summary>为 <details> 元素定义可见的标题。

定义和用法

<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

<!DOCTYPE html>
<html>
<body>

<section>
<h1>WWF</h1>
<p>
The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.
</p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>
The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.
</p>
</section>

定义和用法

<article> 标签规定独立的自包含内容。

一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发。

 

 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值