阅读(15.7k) 书签赞(6) 我要纠错

HTML 格式化

2018-11-24 10:52 更新

HTML格式化

abbr元素

abbr 元素表示缩写。

当使用此元素时，您可以使用 title 属性来提供缩写代表的扩展文本。

以下代码显示了正在使用的 abbr 元素。

<!DOCTYPE HTML>
<html>
<body>
  The <abbr title="Cascading Style Sheets">CSS</abbr>
  is a style sheet language used for describing the
  look and formatting of a document written in a markup language.
</body>
</html>

address元素

address 元素标记文档或文章元素的联系信息。

当address元素是article元素的后代时，假定提供该文章的联系信息。

当address元素是body元素的子代，并且在body和address元素之间没有article元素时，假设地址为整个文档提供联系信息。

您不应使用此元素标记客户或用户的地址。

以下代码显示了正在使用的地址元素。

...
<body>
<header>
<h1>Things  I like</h1>
<h2>by www.w3cschool.cn</h2>
<address>
Questions and  comments? <a href="mailto:info@example.com">Email me</a>
</address>
</header>
<article>
<header>
<hgroup>

b元素

b 元素标记指示任何额外强调或重要性的文本跨度。

b 元素的样式约定是 b {font-weight:bolder;} 。

下面的代码显示了正在使用的b元素。

<!DOCTYPE HTML>
<html>
<body>
  I like <b>HTML</b> and <b>CSS</b>.
</body>
</html>

bdi元素

bdi 元素标记为了文本方向性而与其他内容隔离的文本。

在显示没有可用方向性信息的内容时，使用此元素。浏览器自动确定方向性。

下面的代码处理没有 bdi 元素的文本。

<!DOCTYPE HTML>
<html>
<body>
  <p>
    <bdi>abcd</bdi>
  </p>
</body>
</html>

bdo元素

bdo 元素指定一个明确的文本方向其内容，覆盖通常应用的自动方向性。

我们必须使用 bdo 元素和 dir 属性，其具有 rtl (用于从右到左布局)的允许值 ltr (对于从左到右的布局)。

以下代码使用 bdo 元素。

<!DOCTYPE HTML>
<html>
<body>
  <p>
    This is left-to-right:
    <bdo dir="ltr">This is a test</bdo>
  </p>
  <p>
    This is right-to-left:
    <bdo dir="rtl">This is a test</bdo>
  </p>
</body>
</html>

br元素

您可以使用两个元素来处理内容中的换行符: br 和 wbr 元素。

br 元素引入换行符。样式约定是将后续内容移动到新行上。

br 元素只能在换行符是内容的一部分时使用。

br 元素不应用于创建段落或其他内容分组。

以下代码使用 br 元素。

<!DOCTYPE HTML>
<html>
<body>
  I like
  <br /> HTML,
  <br /> CSS,
  <br> Javascript.
</body>
</html>

cite元素

cite 元素表示引用作品的标题，这样的书，文章或电影。它的样式约定是 cite {font-style:italic; } 。

以下代码显示了使用 cite 元素。

<!DOCTYPE HTML>
<html>
<body>
  My favorite is <cite>CSS</cite> by http://en.wikipedia.org.
</body>
</html>

code元素

code 元素标记了一段计算机代码。它的默认样式是{font-family:monospace;}

下面的代码显示了如何使用 code 元素。

<!DOCTYPE HTML>
<html>
<body>
  This is a <code>test</code>.
</body>
</html>

del元素

您可以使用 del 元素标记删除的文本。

del 元素有两个局部属性: cite，datetime 。

cite 属性指定文档的URL这解释了为什么文本被删除，并且 datetime 属性指定进行修改的时间。

您可以在下面的代码中看到正在使用的 del 元素。

<!DOCTYPE HTML>
<html>
<body>
  <p><ins>I like <del>HTML</del>.</ins></p>
</body>
</html>

dfn元素

dfn 元素定义一个术语。它解释了词或短语的意义。

如果 dfn 元素有一个 title 属性，那么 title 属性的值必须是要定义的项。

您可以看到在下面的代码中使用的 dfn 元素的示例。

<!DOCTYPE HTML>
<html>
<body>
  <p>
  The <dfn title="Cascading Style Sheets">CSS</dfn>
  is a style sheet language used for describing the
  look and formatting of a document written in a markup language.
  </p>
</body>
</html>

如果 dfn 元素包含 abbr 元素，那么缩写是要定义的术语。

如果没有 title 属性，并且元素的内容是文本，那么文本表示正在定义的术语。

没有与此元素相关联的样式约定。

em元素

em 元素表示具有强调应力的文本跨度。

此元素的样式约定是使用斜体。

以下代码显示了正在使用的 em 元素。

<!DOCTYPE HTML>
<html>
<body>
  <em>I</em> like <b>HTML</b> and <b>CSS</b>.
</body>
</html>

i元素

i 元素表示文本具有与周围内容不同的性质，例如，来自其他语言的词语，技术或科学术语。

i 元素的样式约定是 i {font-style:italic;} 。

i 元素的样式约定是与 em 元素相同。

以下代码显示了正在使用的 i 元素。

<!DOCTYPE HTML>
<html>
<body>
  <em>I</em> like <b>HTML</b> and <b>CSS</b>. 
  My favorite is <i>Javascript</i>.
</body>
</html>

ins元素

您可以使用 ins 元素标记添加的文本。

ins 元素表示插入的内容，与局部属性: cite，datetime 。

cite 属性指定文档的URL这解释了为什么文本被添加，并且 datetime 属性指定进行修改的时间。

您可以在以下代码中看到正在使用的 ins 元素。

<!DOCTYPE HTML>
<html>
<body>
  <p>
    <ins>I like <mark>HTML</mark>.</ins>
  </p>
</body>
</html>

kbd元素

kbd 元素表示用户输入。

kbd 有以下样式 {font-family:monospace; } 。

下面的代码显示了如何使用kbd元素。

<!DOCTYPE HTML>
<html>
<body>
  This is an <kbd>input</kbd>.
</body>
</html>

mark元素

mark元素是HTML5和表示突出显示的文本。

以下代码演示了mark元素。

<!DOCTYPE HTML>
<html>
<body>
  <p>
    I like <mark>CSS</mark>.
  </p>
</body>
</html>

ruby rt rp元素

Ruby字符是放置在字符上方或右侧的符号在诸如中文或日语的标志语言中帮助读者正确地发音字符。

ruby 元素表示一段文本包含一个ruby。您使用 ruby 元素元素 rt 和 rp 。

rt 元素标记ruby符号，而 rp 元素表示注释周围的圆括号由不支持ruby注释的浏览器显示。

rt 元素标记ruby符号，而 rp 元素表示注释周围的圆括号由不支持ruby注释的浏览器显示。...

<!DOCTYPE HTML>
<html>
<body>
  <p>I like
  <ruby>
    CSS
    <rp>(</rp>
    <rt>Cascading Style Sheets</rt>
    <rp>)</rp>
  </ruby>

  </p>
</body>
</html>

当文档显示在支持ruby注释的浏览器中时，将忽略 rp 元素及其内容， rt 元素的内容显示为注释。

s元素

您可以使用 s 元素来标记文本不再正确或准确。

样式约定是使用通过它绘制的线来显示文本: s {text-decoration:line-through;} 。

以下代码显示了正在使用的 s 元素。

<!DOCTYPE HTML>
<html>
<body>
  HTML is now <s>HTML4</s> HTML5.
</body>
</html>

samp元素

samp 元素表示来自程序或计算机系统的输出。它有以下默认样式: {font-family:monospace; } 。

以下代码显示如何使用 samp 元素。

<!DOCTYPE HTML>
<html>
<body>
  This is a <samp>sample</samp>.
</body>
</html>

small元素

small元素标记精细打印和经常用于免责声明和澄清。

以下代码显示了正在使用的 small 元素。

<!DOCTYPE HTML>
<html>
<body>
  HTML5 is <small>good</small>.
</body>
</html>

strong元素

strong 元素标记重要的文本。

strong 元素相同样式约定作为 b 元素。

以下代码显示了正在使用的 strong 元素。

<!DOCTYPE HTML>
<html>
<body>
  <strong>Warning:</strong> HTML5 is good.
</body>
</html>

sub和sup元素

您可以使用 sub 和 sup 元素分别表示下标和上标。

在某些语言中需要上标上标和下标都用在简单的数学表达式中。

以下代码显示了正在使用的 sub 和 sup 元素。

<!DOCTYPE HTML>
<html>
<body>
  The point x<sub>10</sub> is the 10<sup>th</sup> point.
</body>
</html>

time元素

您可以使用 time 元素来表示时间或日期。 time 元素有两个局部属性: datetime，pubdate 。

如果存在布尔 pubdate 属性，那么时间元素假定为的发布日期整个HTML文档或最近的article元素。

datetime 属性指定日期或时间以RFC3339指定的格式，您可以在http://tools.ietf.org/html/rfc3339找到。

以下代码显示了正在使用的时间元素。

<!DOCTYPE HTML>
<html>
<body>
  I bought a book at
  <time datetime="15:00">3 o"clock</time>
  on
  <time datetime="2012-12-7">December 7th</time>
  .
</body>
</html>

u元素

u 元素通过添加下划线标记文本。它的样式约定: u {text-decoration:underline;} 。

u 的样式约定元素与 a 元素的类似。

以下代码显示了正在使用的 u 元素。

<!DOCTYPE HTML>
<html>
<body>
  <u>HTML5</u> is good.
</body>
</html>

var元素

var 元素标记编程上下文中的变量。 var 的默认样式是 {font-style:italic; } 。

下面的代码显示了如何使用 var元素。

<!DOCTYPE HTML>
<html>
<body>
  This is a <var>variable</var>.
</body>
</html>

wbr元素

wbr称为安全断路。

wbr 元素是HTML5的新特性表示浏览器可以合理地插入换行符包装大于当前浏览器窗口的内容。

它是由浏览器决定是否或不是实际使用换行符。 wbr 元素是合适的地方打破内容的指南。

以下代码显示了使用 wbr 元素。

<!DOCTYPE HTML>
<html>
<body>
  This is a test: Super
  <wbr>
  loooooooooooooooooooooooooong
  <wbr>
  word.
</body>
</html>

以上内容是否对您有帮助：

← HTML 超链接

HTML 列表 →

写笔记

我要补充