HTML5 <em> <strong> <dfn> <code> <samp> <kbd> <var> <cite> 标签

2022-05-23 14:45 更新

定义和用法

以下元素都是短语元素。并不反对使用它们,但是通过使用样式表,可能取得更丰富的效果。

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

HTML 4.01 与 HTML 5 之间的差异

在 HTML 4.01 中,<strong> 定义语气更重的强调文本,但是在 HTML 5 中,<strong> 定义重要的文本。

示例

<em> 元素通常被用于指示一个隐式或显式的对比。

<p>
  In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content.
</p>

示例

<strong>表示文本十分重要,一般用粗体显示。

<p>When doing x it is <strong>imperative</strong> to do y before proceeding.</p>

<dfn> 使用说明:

  • <dfn> 元素标记了被定义的术语;术语定义应当在 <p>, <section>或定义列表 (通常是<dt>, <dd> 对)中给出。

    被定义术语的值由下列规则确定:如果 <dfn> 元素有一个 title 属性,那么该术语的值就是该属性的值。否则,如果它仅包含一个 <abbr> 元素,该元素拥有 title 属性,那么该术语的值就是该属性的值。否则,<dfn> 元素的文本内容就是该术语的值。

示例

HTML <code> 元素呈现一段计算机代码. 默认情况下, 它以浏览器的默认等宽字体显示.

<p>Regular text. <code>This is code.</code> Regular text.</p>

示例

<samp> 元素用于标识计算机程序输出,通常使用浏览器缺省的 monotype 字体

<p>Regular text. <samp>This is sample text.</samp> Regular text.</p>

示例

<kbd> 用于表示用户输入,它将产生一个行内元素,以浏览器的默认monospace字体显示。

<p>Type the following in the Run dialog: <kbd>cmd</kbd><br />Then click the OK button.</p>

<p>Save the document by pressing <kbd>Ctrl</kbd> + <kbd>S</kbd></p>

示例

<var> 标签表示变量的名称,或者由用户提供的值。

<p> A simple equation: <var>x</var> = <var>y</var> + 2 </p>

示例

<cite> 表示一个作品的引用。

More information can be found in <cite>[ISO-0000]</cite>.

属性

标准属性

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, 
lang, ref, registrationmark, tabindex, template, title

事件属性

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, 
ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, 
ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, 
onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, 
onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号