HTML入门教程| HTML 基本标签（1）

HTML 基本标签

HTML基本标签

HTML H1-H6

h1 元素表示标题。HTML 定义了标题元素的层次结构，其中h1是排名最高的。

其它标题元素是h2，h3到h6。

相同排名的标题会分解内容，以便每个主题都在其自己的部分。

下面的代码使用 h1 到 h3 元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>W3Cschool(w3cschool.cn)</title>
</head>
<body>
  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <h4>四级标题</h4>
  <h5>五级标题</h5>
  <h6>六级标题</h6>
</body>
</html>

组标题与 hgroup

hgroup 元素允许您处理多个标头元素作为单个项目，而不会影响 HTML 文档的大纲。

以下代码使用hgroup元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>W3Cschool(w3cschool.cn)</title>
</head>
<body>
  <hgroup>
    <h1>欢迎来到W3Cschool</h1>
    <h2>https://www.w3cschool.cn/</h2>
  </hgroup>
  <p>剩下的内容</p>
</body>
</html>

HTML线

hr 元素表示水平规则。一条横跨页面的线。

以下代码使用hr元素。

<!DOCTYPE html>
<html lang="en">
<body>
  <p>
    This is a test.
  </p>
    <hr/>
  <p>This is another test.
  </p>
</body>
</html>

尝试一下

div结构

div 元素不具有特定的含义。div元素创建结构。

div 元素是span元素的block。块元素开始新行，而行内元素保持在同一行。

以下代码使用div元素。

<!DOCTYPE html>
<html lang="en">
<style>
.favorites {
  background: grey;
  color: white;
  border: thin solid black;
  padding: 0.2em;
}
</style>
</head>
<body>
  <div class="favorites">
    <p>This is a test.</p>
    <p>This is another test.</p>
  </div>
  <p>This is a test.</p>
</body>
</html>

尝试一下

span元素

span 元素本身没有意义。

您将使用它将一个全局属性应用于内容区域。

以下代码显示了与类属性一起使用的span元素。

<!DOCTYPE html>
<html lang="en">
<style>
.myClass {
  border: thin solid black;
  padding: 1px;
}
</style>
</head>
<body>
  I like <span class="myClass">CSS</span> and
  <span class="myClass">HTML</span>.
</body>
</html>

尝试一下

HTML段落

p 元素表示一个段落。

段落是包含一个或多个相关句子的文本块。

以下代码显示如何使用p元素到示例内容。

<!DOCTYPE html>
<html lang="en">
<body>
  <p>
    I code in CSS.
  </p>
  <p>
    HTML is good.
  </p>
  <p>
    This is the third paragraph.
  </p>
</body>
</html>

尝试一下

pre - 预格式化内容

在pre元素中，空格不会折叠，并保留格式。当内容的一部分的原始格式是重要的时，这可能是有用的。

当您使用代码元素时，pre元素可能特别有用。

在编程语言中的格式化，例如，通常是显着的。

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
  <pre>
    <code>
            var  fruits = ["XML",  "HTML", "CSS", "Java"];
            for (var i = 0; i < fruits.length; i++)   {
                document.writeln("I like  "  + fruits[i]);
            }
        </code>
  </pre>
</body>
</html>

尝试一下

HTML引用

blockquote 元素表示从另一个来源引用的块内容。

这个元素类似于q元素，但通常适用于较大数量的引用内容。

可以使用cite属性以提供内容的原始源的URL。

以下代码使用blockquote元素。

<!DOCTYPE html>
<html lang="en">
<body>
  <blockquote cite="http://en.wikipedia.org/wiki/Cascading_Style_Sheets">
  Cascading Style Sheets (CSS) is a style sheet language used for
  describing the look and formatting of a document written in a markup language.
  </blockquote>
</body>
</html>

尝试一下

例子

q 元素表示从另一个来源引用的内容。

q 元素的样式约定是以使用引号将引用的文本括起来。

以下代码使用q元素。

<!DOCTYPE html>
<html lang="en">
<body>
  <p>
    <q cite="http://en.wikipedia.org/wiki/Cascading_Style_Sheets">
          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.
    </q>
  </p>
</body>
</html>

HTML 页面内容

HTML页面内容

Article 标签

article元素表示自包含HTML文档中的内容。

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

<!DOCTYPE HTML>
<html>
</head>
<body>
  <article>
    <header>
      <hgroup>
        <h1 id="fruitsilike">H1Like</h1>
        <h2>H2</h2>
      </hgroup>
    </header>
    This is a test.
    <section>
      <h1 id="morefruit">XML</h1>
      This is a test.
      <section>
        <h1>HTML</h1>
        This is a test.
      </section>
    </section>
    <footer>
      <nav>
        Nav
      </nav>
    </footer>
  </article>
</body>
</html>

HTML Sections

section元素是HTML5的新功能，表示文档的一部分。

section元素应用于包含内容将在文档的大纲或目录中列出。

段元素通常包含一个或多个内容段落和标题，但标题是可选的。

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

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
  <section>
    <hgroup>
      <h1>H1</h1>
      <h2>H2</h2>
    </hgroup>
    This is a test.
    <section>
      <h1>H1</h1>
      This is a test.
      <section>
        <h1>More information</h1>
        This is a test.
      </section>
    </section>
  </section>
</body>
</html>

HTML nav

nav 元素表示文档的一个部分包含到其他页面或同一页面的其他部分的链接。

此元素标识文档的主要导航部分。

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

<!DOCTYPE HTML>
<html>
<body>
  <header>
    <hgroup>
      <h1>H1</h1>
      <h2>by www.w3cschool.cn</h2>
    </hgroup>
    <nav>
      <h1>Contents</h1>
      <ul>
        <li><a href="#fruitsilike">XML</a></li>
        <ul>
          <li><a href="#morefruit">HTML</a></li>
        </ul>
        <li><a href="#activitiesilike">CSS</a></li>
        <ul>
          <li><a href="#tritypes">Java</a></li>
          <li><a href="#mytri">Javascript</a></li>
        </ul>
      </ul>
    </nav>
  </header>
  <section>
    <header>
      <hgroup>
        <h1 id="fruitsilike">Section h1</h1>
        <h2>Section h2</h2>
      </hgroup>
    </header>
    This is a test.
    <section>
      <h1 id="morefruit">Inner H1</h1>
      This is a test.
      <section>
        <h1>More information</h1>
        This is a test.
      </section>
    </section>
  </section>
  <section>
    <header>
      <h1 id="activitiesilike">Activities</h1>
    </header>
    <section>
      <p>This is a test.</p>
      <h1 id="tritypes">Java</h1>
      This is a test.
      <section>
        <h1 id="mytri">Javascript</h1>
      </section>
    </section>
  </section>
  <nav>
    More Information: <a href="http://www.w3cschool.cn">Learn More About</a>
    <a href="http://www.w3cschool.cn">Learn More About</a>
  </nav>
  <footer id="mainFooter">
    &#169;2011, www.w3cschool.cn. <a href="http://www.w3cschool.cn">Visit</a>
  </footer>
</body>
</html>

HTML Details

details 元素创建一个节，用户可以展开该节以获取有关主题的更多详细信息。

details 元素通常包含一个摘要元素，用于为详细信息部分创建标签或标题。

以下代码显示如何使用摘要和详细信息元素。

<!DOCTYPE HTML>
<html>
<head>
<style>
details {
  border: solid thin black;
  padding: 5px
}

details>summary {
  font-weight: bold
}
</style>
</head>
<body>
  <article>
      <h1>H1</h1>
    </header>
    <section>
      <p>This is a test.</p>
      <details>
        <summary>Summary</summary>
        <ol>
          <li>XML</li>
          <li>HTML</li>
          <li>CSS</li>
        </ol>
      </details>
    </section>
  </article>
</body>
</html>

HTML Headers Footers

header 元素表示节的标题。它可以包含任何您想要表示为头部的内容。

头部元素通常包含一个h1?h6元素或一个hgroup元素，它还可以包含节的导航元素。

footer 元素是页眉的补充，表示部分的页脚。

页脚通常包含关于版块的摘要信息，并且可以包括作者的详细信息，权限信息。

您可以在以下代码中看到页眉和页脚元素。

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
  <header>
    <hgroup>
      <h1>H1</h1>
      <h2>by www.w3cschool.cn</h2>
    </hgroup>
  </header>
  <section>
    <header>
      <hgroup>
        <h1>Section h1</h1>
        <h2>Section h2</h2>
      </hgroup>
    </header>
    This is a test.
    <section>
      <h1>Inner Section h1</h1>
      This is a test.
      <section>
        <h1>More information</h1>
        This is test.
      </section>
    </section>
  </section>
  <footer id="mainFooter">
    &#169;2015, www.w3cschool.cn. <a href="http://www.w3cschool.cn">Visit</a>
  </footer>
</body>
</html>

HTML aside

aside 元素表示仅与周围元素相关的内容。这类似于书或杂志中的侧边栏。

内容与页面，文章或部分的其余部分有关，但它不是主要流程的一部分。

下面的代码添加和样式aside元素。

<!DOCTYPE HTML>
<html>
<head>
<style>

article {
  border: thin black solid;
  padding: 10px;
  margin-bottom: 5px
}
aside {
  width: 40%;
  background: white;
  float: right;
  border: thick solid black;
  margin-left: 5px;
}

aside>section {
  padding: 5px;
}

aside>h1 {
  background: white;
  color: black;
  text-align: center
}
</style>
</head>
<body>
  <article>
    <header>
      <hgroup>
        <h1 id="fruitsilike">H1</h1>
        <h2>H2</h2>
      </hgroup>
    </header>
    <aside>
      <h1>Why</h1>
      <section>
        This is a test:
        <ol>
          <li>HTML</li>
          <li>CSS</li>
          <li>Javascript</li>
        </ol>
      </section>
    </aside>
  </article>
</body>
</html>

HTML 超链接

HTML超链接

超链接为HTML提供了基础，用户可以通过HTML在同一文档内和跨页面浏览内容。

您可以使用a元素创建超链接。

属性

a 元素具有局部属性:href，hreflang，media，rel，target，type。

href - 指定a元素引用的资源的URL。
hreflang - 指定链接资源的语言。
media - 指定链接内容用于的设备。此属性与头元素元素使用相同的设备和特征值。
rel - 指定文档和链接资源之间的关系类型。此属性使用与链接元素的rel属性相同的值。
target - 指定应在其中打开链接资源的浏览上下文。
type - 指定链接资源的MIME类型，例如text/html。

id，coords，shape，urn，charset，methods 和rev属性已过时。

外部超链接

您可以通过将元素中的href属性设置为以http://开头的URL来创建指向其他HTML文档的超链接。

当用户单击超链接时，浏览器将加载指定的页面。

以下代码显示用于链接到外部内容的a元素。

复制代码

<!DOCTYPE HTML>
<html>
<body>
  I like <a href="http://www.w3cschool.cn">w3cschool</a>.
</body>
</html>

注意

并非所有网址都必须引用其他网页。

浏览器还支持其他协议，如https和ftp。如果要引用电子邮件地址，可以使用mailto协议; 例如，mailto:info@example.com。

相对网址

如果href属性的值不以start开头识别的协议，例如http://那么浏览器将超链接视为相对引用。

以下代码给出了相对URL的示例。

复制代码

<!DOCTYPE HTML>
<html>
<body>
  I like <a href="index.html">w3cschool</a>.
</body>
</html>

代码将href属性设置为index.html。

当用户单击链接时，浏览器使用的URL当前文档以确定如何加载链接的页面。

内部超链接

您可以创建超链接，使浏览器窗口中的另一个元素进入视图。

您可以使用CSS样式ID选择器#id创建内部超链接，如以下代码所示。

<!DOCTYPE HTML>
<html>
<body>
  <a href="#w3cschool">here</a>.
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <p id="w3cschool">This is a test.</p>
</body>
</html>

上面的代码用href创建了一个超链接#tutorial的值。

当用户单击链接时，浏览器将在文档中查找元素其id属性的值为tutorial。如果元素不可见屏幕，浏览器将滚动文档以显示它。

如果浏览器不能找到具有所需id属性值的元素，它会再次搜索，寻找一个与目标匹配的name属性。

Target浏览上下文

元素的target属性告诉浏览器要显示链接资源的位置。

默认情况下，浏览器使用显示当前文档的窗口，选项卡或框架显示链接的文档并替换现有文档。

以下列表描述了目标属性支持的值。

_blank - 在新窗口（或选项卡）中打开文档。
_parent - 打开父框架集中的文档。
_self - 在当前窗口中打开文档（这是默认行为）。
_top - 在窗口的整个主体中打开文档。
<frame> - 在指定的框架中打开文档。

这些值中的每一个表示浏览上下文。

使用锚点伪类

链接可以以不同的方式显示:

复制代码

a:link {color:#FF0000;}    /* unvisited link */           
a:visited {color:#00FF00;} /* visited link */ 
a:hover {color:#FF00FF;}   /* mouse over link */ 
a:active {color:#0000FF;}  /* selected link */

每个伪类的含义在css注释中列出。

以下代码设置四个锚伪类。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
        a:link, a:visited {
          text-decoration: underline;
          color: #6A5ACD;
          background-color: transparent;
        }
        a:hover, a:active {
          text-decoration: underline overline;
          color: #191970;
          background-color: #C9C3ED;
        }
</style>    
  </head>
  <body>
    <ul>
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
      <li><a href="#">D</a></li>
    </ul>
  </body>
</html>

伪类可以与CSS类组合。以下示例告诉浏览器以红色显示访问的锚点链接。

复制代码

a.red:visited {color:#FF0000;}

<a class="red" href="http://www.w3cschool.cn">www.w3cschool.cn</a>

HTML 格式化

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 基本标签（1）

HTML 基本标签

HTML基本标签

HTML H1-H6

组标题与 hgroup

HTML线

div结构

span元素

HTML段落

pre - 预格式化内容

HTML引用

例子

HTML 页面内容

HTML页面内容

Article 标签

HTML Sections

HTML nav

HTML Details

HTML Headers Footers

HTML aside

HTML 超链接

属性

外部超链接

注意

相对网址

内部超链接

Target浏览上下文

使用锚点伪类

HTML 格式化

abbr元素

address元素

b元素

bdi元素

bdo元素

br元素

cite元素

code元素

del元素

dfn元素

em元素

i元素

ins元素

kbd元素

mark元素

ruby rt rp元素

s元素

samp元素

small元素

strong元素

sub和sup元素

time元素

u元素

var元素

wbr元素