HTML 基本标签

2020-09-09 09:55 更新

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>

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