Detailed explanation of HTML block-level elements

Previous words

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

is the highest level, while

4e9ee319e0fa4abc21ff286eeb145ecc

is the lowest. A title element can briefly describe the topic of the section

## From1179f652af8537777d18befc1b0d4a32 to 4e9ee319e0fa4abc21ff286eeb145ecc, the importance gradually decreases, and the font size also gradually decreases. When using title elements, please pay attention to the following points

1. Don’t. Use lower-level headings to reduce their font size, but use CSS font-size styles 2. Avoid skipping a certain level of headings: always start with 4a249f0d628e2318394fd9b75b4636b1 Start, then use

c1a436a314ed609750bd7c7d319db4da

and so on

3. When using the 2f8332c8dcfd5c7dec030a070bf652c3 element, for the sake of convenience, avoid repeated use on one page 4a249f0d628e2318394fd9b75b4636b1,

4a249f0d628e2318394fd9b75b4636b1

should be used to indicate the title of the page, and other titles should start from c1a436a314ed609750bd7c7d319db4da. 2f8332c8dcfd5c7dec030a070bf652c3, each section should use a c1a436a314ed609750bd7c7d319db4da[Default style]

//从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 has added d8eccd9ed644b68a6460a2bb84548c82 tag, which represents a title group, is used to combine titles. It is only used when a block needs to have multiple levels of titles.

<hgroup>
    <h1>水果</h1>
    <h2>苹果</h2>
</hgroup>

p

## ;p>

The element (paragraph) represents a paragraph of text. This element usually appears as a whole block of text separated from adjacent text, either separated by vertical white space or with a first line indent

[Default style]

margin: 16px 0;
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>

p

##e388a4556c0f65e1904146cc1a846bee

element (pide) (or HTML document partition element) is a general flow content container, which is Semantically it does not represent any specific type of content. It can be used to group other elements. It is generally used for styling related needs (using class or id attributes) or to group a group of elements with the same characteristics (such as lang ), which should only be used when no other semantic elements are available (such as 23c3de37f2f9ebcb477c4a90aac6fffd or

c787b9a589a3ece771e842a6176cf8e9

)

hr

  f32b48428a809b51f04d3228cdf461fa elements represent thematic transitions 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 f32b48428a809b51f04d3228cdf461fa to split between blocks<pre class="brush:css;toolbar:false;">&lt;p&gt;段落1&lt;/p&gt; &lt;hr&gt; &lt;p&gt;段落2&lt;/p&gt;</pre>[Default style]

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

pre

   The e03b848252eb9375d56be284e690e873 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">
body {
  color:red;
}

[Default style] <pre class="brush:css;toolbar:false;">margin: 1em 0; white-space: pre;</pre>blockquote    

b8a712a75cab9a5aded02f74998372b4

element (or HTML block-level

citation

element), indicating that the text in it is 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

f3a85e1241a187c5ac462d886e9a968b

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

  208700f394e4cf40a7aa505373e0130b element Allows the author to provide contact information for its nearest 23c3de37f2f9ebcb477c4a90aac6fffd or 6c04bd5ca3fcae76e30b72ad730ca86d ancestor element. In the latter case, it applies to the entire document.

- When representing an arbitrary address that is not related to contact information, use the

e388a4556c0f65e1904146cc1a846bee

element instead of

a83cbaaa11067ffe805e7a0796ef5057

element. This element cannot contain any information other than contact information, such as publication date (this should be included in the

93d8b4c7435de20e8a7fd77bf3431472 element). Usually, the 208700f394e4cf40a7aa505373e0130b element can be placed in the c37f8231a37e88427e62669260f0074d element of the current section, if it exists

[Default style]<pre class="brush:css;toolbar:false;">font-style: italic;</pre>OthersIn addition to the e388a4556c0f65e1904146cc1a846bee<a href="http://www.php.cn/wiki/1268.html" target="_blank">, </a>c8b28895262a62371d18ac056c4442e2, e388a4556c0f65e1904146cc1a846bee, &lt introduced above In addition to the ;hr>,

b8a712a75cab9a5aded02f74998372b4

,

208700f394e4cf40a7aa505373e0130b

tags, there are also some tags that have been introduced before that are block-level tags

 Including skeleton tags (100db36a723c770d327fc0aef2ce13b1, 6c04bd5ca3fcae76e30b72ad730ca86d), list tags (ff6d136ddc5fdfeffaf53ff6ee95f185, &lt ;ol>, 5c69336ffbc20d23018e48b396cdd57a, 67bc4f89d416b0b8236eaa5f43dee742, 73de882deff7a050a357292d0a1fca94), form tags (form, 2b5469ab79cf842344327415c3b3bb95, be6d67dae90cc1ad6469079e163d0939, e911751791aa3ba95dc724e2fb905976, 5b7a15bed8615d1b843806256bebea72, 5a07473c87748fb1bf73f23d45547ab8), new structural tags in HTML5 (23c3de37f2f9ebcb477c4a90aac6fffd, 15221ee8cba27fc1d7a26c47a001eb9b, 1aa9e5d373740b65a0cc8f0a02150c53, c37f8231a37e88427e62669260f0074d, c787b9a589a3ece771e842a6176cf8e9, 2f8332c8dcfd5c7dec030a070bf652c3), HTML5 new multimedia tags (24203f2f45e6606542ba09fd2181843a , 614eb9dc63b3fb809437a716aa228d24), new functional tags in HTML5 (631fb227578dfffda61e1fa4d04b7d25, a5e9d42b316b6d06c62de0deffc36939)

Finally

Some people may think that the 0c6dc11e160d3b678d68754cc175188a tag should be a block-level element because it has line breaks and is very similar to the characteristics of block-level elements. But it's actually an inline element whose purpose is to produce a line break in the text

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