HTML 基本标签

我要纠错

HTML基本标签

HTML H1-H6

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

其它标题元素是 h2 h3 h6

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

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

<!DOCTYPE HTML>
<html>
<body>
  <h1>This is h1.</h1>
  <p>I like XML.</p>
  <h2>Additional h2</h2>
  <p>I like XML.</p>
  <h3>More information</h3>
  <p>I like XML.</p>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>  
    <h1>Basic Text Formatting</h1>
    <p>The purpose of a web browser is
    to read HTML documents and compose them into visible
    or audible web pages. The browser does not display
    the HTML tags, but uses the tags to interpret the
    content of the page. HTML describes the structure
    of a website semantically along with cues for
    presentation, making it a markup language rather
    than a programming language. </p>
    
    <h2>White Space and Flow</h2>
    <p>HTML elements form the building blocks of all
    websites. HTML allows images and objects to be
    embedded and can be used to create interactive
    forms. It provides a means to create structured
    documents by denoting structural semantics for
    text such as headings, paragraphs, lists, links,
    quotes and other items. It can embed scripts
    written in languages such as JavaScript
    which affect the behavior of HTML web pages.</p>
    
    <h2>Creating Headings</h2>
    <p> Web browsers can also refer to Cascading Style
    Sheets (CSS) to define the look and layout of text
    and other material. The W3C, maintainer of both
    the HTML and the CSS standards, encourages the
    use of CSS over explicit presentational HTML.</p>    
</body>
</html>

点击查看实例


组标题与hgroup

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

以下代码使用 hgroup 元素。

<!DOCTYPE HTML>
<html>
<body>
  <hgroup>
    <h1>H1</h1>
    <h2>H2</h2>
  </hgroup>
  <h2>Additional</h2>
  <h3>More information</h3>
    <h1>H1</h1>
    <p>This is a test.</p>
    <h2>H2</h2>
    This is a test.
    <h3>H3</h3>
</body>
</html>

点击查看实例


HTML线

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

以下代码使用 hr 元素。

<!DOCTYPE HTML>
<html>
<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>
<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>
<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>
<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>
<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>
<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>
<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>

点击查看实例

二维码
建议反馈
二维码