Detailed description of HTML block-level elements

Previous words

 Before HTML5 appeared, people generally divided elements into block-level, inline and inline block elements. This article will introduce the HTML block-level elements in detail

h

The title (Heading) element has six different levels,&lt ;h1> is the highest level, while <h6></h6> is the lowest. A title element that briefly describes the topic of the section

 From <h1></h1> to <h6></h6>, the importance gradually decreases and the font size decreases Small. When using title elements, pay attention to the following points

1. Do not use low-level titles in order to reduce the font of the title. Instead, use CSS font-sizestyle

  2. Avoid skipping certain levels of headings: always start with <h1></h1>, then use <h2></h2> etc.

  3 , when using the <section></section> element, for the sake of convenience, to avoid repeated use of <h1></h1> on one page, <h1></h1> should be used Indicates the title of the page. Other titles should start from <h2></h2>. When using <section></section>, each section should use a <h2></h2>

##[Default style]<p></p>

//从h1到h6
margin: 0.67em 0 -> 0.83em 0 -> 1em 0 -> 1.33em 0 -> 1.67em 0 -> 2.33em 0;
font-size: 2em -> 1.5em -> 1.17em -> 1em -> 0.83em -> 0.67em;
font-weight: bold;

  HTML5

New

tag, which represents the title group, is used to combine titles. It is only used when the block needs to have multiple levels of titles

<hgroup>
    <h1 id="水果">水果</h1>
    <h2 id="苹果">苹果</h2>
</hgroup>

# The element (paragraph) represents a paragraph of text. This element usually appears as a whole block of text separated from adjacent text, or as Vertical white space isolation or first line indentation<p></p>[Default style]

margin: 16px 0;

<p>段落1</p>
<p>段落2</p>
<p>段落3</p>

p

　　<p></p> <p></p> The element (pide) (or

HTML document

partitioning element) is a general-purpose container for streaming content. It does not semantically represent any specific type of content. It can be used to

other

Elements are

grouped, generally used for styling-related needs (using class or id attributes) or to group a set of elements with the same characteristics (such as lang), which should be used only when no other semantic elements are available (such as

or

) # The ##hr ÷ <hr> element represents a thematic transition between paragraph-level elements (for example, a change in scene within a story, or a change in the theme of a chapter). In early versions of HTML, it was a horizontal line. It still appears as a horizontal line in visual browsers, but is currently defined semantically rather than presentationally. Split, there is no need to use

<hr>

to split between blocks

<p>段落1</p>
<hr>
<p>段落2</p>

[Default style]

margin: 8px 0;
border-style: inset;
border-width: 1px;

pre

  <pre class="brush:php;toolbar:false"></pre> element represents pre-formatted text. The text in this element is usually displayed in a fixed-width font according to the format in the original file. Whitespace characters (such as spaces and line breaks) in the text will be displayed, usually indicating typesetting content, such as code blocks and Character painting, etc.<pre class='brush:php;toolbar:false;'>&lt;pre class=&quot;brush:php;toolbar:false&quot;&gt; body { color:red; } </pre>[Default style]

margin: 1em 0;
white-space: pre;

blockquote

　

element (or HTML block level Quote element), which means that the text in it is the quoted content. Usually when rendering, the content of this part will be indented to a certain extent. If the citation comes from the Internet, you can set the source URL address of the original content to the cite attribute. If you want to inform readers of the source of the citation in the form of text, you can use the

element

 [Note] The signature of the citation must be defined outside the citation

<blockquote cite="http://baike.baidu.com/view/921793.htm">
　　<p>横眉冷对千夫指,俯首甘为孺子牛</p>
</blockquote>    
<p>鲁迅</p>

[Default style]

margin: 1em  40px;

address    element allows the author to provide contact information for its nearest

or

ancestor element. In the latter case, it applies to the entire document

  当表示一个和联系信息无关的任意的地址时，使用<p></p>元素而不是<address></address>元素。这个元素不能包含除了联系信息之外的任何信息，比如出版日期(这应该包含在time>元素中)。通常，<address></address>元素可以放在当前section的<footer></footer>元素中，如果存在的话

【默认样式】

font-style: italic;

 

其他

  除了上面介绍的<p></p>、<h></h>、<p></p>、<hr>、<blockquote></blockquote>、<address></address>标签外，还有一些前面已经介绍过的标签属于块级标签

  包括骨架类标签(、)，列表类标签(<ul></ul>、<ol></ol>、dl>、<dd></dd>、<dt></dt>)，表单类标签(<a href="http://www.php.cn/wiki/125.html" target="_blank">for</a>m、<fieldset></fieldset>、<output></output>、<legend></legend>、<optgroup></optgroup>、<option></option>)，HTML5新增的结构标签(<article></article>、<aside></aside>、<header></header>、<footer></footer>、<nav></nav>、<section></section>)，HTML5新增的多媒体标签(<figure></figure>、<figcaption></figcaption>)，HTML5新增的功能性标签(<summary></summary>、<details></details>)

 

最后

  可能有人会觉得<br>标签应该是一个块级元素，因为它有换行，与块级元素的特征很相似。但它实际上是一个内联元素，它的用途是在文本中产生一个换行

The above is the detailed content of Detailed description of HTML block-level elements. For more information, please follow other related articles on the PHP Chinese website!