Home  >  Article  >  Web Front-end  >  Detailed description of HTML block-level elements

Detailed description of HTML block-level elements

高洛峰
高洛峰Original
2017-03-15 12:48:541720browse

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 4e9ee319e0fa4abc21ff286eeb145ecc is the lowest. A title element that briefly describes the topic of the section

 From 4a249f0d628e2318394fd9b75b4636b1 to 4e9ee319e0fa4abc21ff286eeb145ecc, 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 4a249f0d628e2318394fd9b75b4636b1, then use c1a436a314ed609750bd7c7d319db4da etc.

  3 , when using the 2f8332c8dcfd5c7dec030a070bf652c3 element, for the sake of convenience, to avoid repeated use of 4a249f0d628e2318394fd9b75b4636b1 on one page, 4a249f0d628e2318394fd9b75b4636b1 should be used Indicates the title of the page. Other titles should start from c1a436a314ed609750bd7c7d319db4da. When using 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

Newd8eccd9ed644b68a6460a2bb84548c82 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>水果</h1>
    <h2>苹果</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

[Default style]

margin: 16px 0;

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

p

  

e388a4556c0f65e1904146cc1a846bee

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 23c3de37f2f9ebcb477c4a90aac6fffd or c787b9a589a3ece771e842a6176cf8e9) # The ##hr ÷ f32b48428a809b51f04d3228cdf461fa 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

f32b48428a809b51f04d3228cdf461fa

to split between blocks

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

[Default style]

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

pre

  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:html;toolbar:false;">&lt;pre class=&quot;brush:php;toolbar:false&quot;&gt; body { color:red; } </pre></pre>[Default style]

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

blockquote

 

b8a712a75cab9a5aded02f74998372b4

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

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   4398144403c02afb0c145bf989e4f57b 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

  当表示一个和联系信息无关的任意的地址时,使用e388a4556c0f65e1904146cc1a846bee元素而不是208700f394e4cf40a7aa505373e0130b元素。这个元素不能包含除了联系信息之外的任何信息,比如出版日期(这应该包含在865ebc4a8f40017839ddd62af936776f元素中)。通常,208700f394e4cf40a7aa505373e0130b元素可以放在当前section的c37f8231a37e88427e62669260f0074d元素中,如果存在的话

【默认样式】

font-style: italic;

 

其他

  除了上面介绍的e388a4556c0f65e1904146cc1a846beec8b28895262a62371d18ac056c4442e2e388a4556c0f65e1904146cc1a846beef32b48428a809b51f04d3228cdf461fab8a712a75cab9a5aded02f74998372b4208700f394e4cf40a7aa505373e0130b标签外,还有一些前面已经介绍过的标签属于块级标签

  包括骨架类标签(100db36a723c770d327fc0aef2ce13b16c04bd5ca3fcae76e30b72ad730ca86d),列表类标签(ff6d136ddc5fdfeffaf53ff6ee95f185c34106e0b4e09414b63b2ea253ff83d6def3eed00a09ea710a4bfa4b7fe7477167bc4f89d416b0b8236eaa5f43dee74273de882deff7a050a357292d0a1fca94),表单类标签(<a href="http://www.php.cn/wiki/125.html" target="_blank">for</a>m2b5469ab79cf842344327415c3b3bb95be6d67dae90cc1ad6469079e163d0939e911751791aa3ba95dc724e2fb9059765b7a15bed8615d1b843806256bebea725a07473c87748fb1bf73f23d45547ab8),HTML5新增的结构标签(23c3de37f2f9ebcb477c4a90aac6fffd15221ee8cba27fc1d7a26c47a001eb9b1aa9e5d373740b65a0cc8f0a02150c53c37f8231a37e88427e62669260f0074dc787b9a589a3ece771e842a6176cf8e92f8332c8dcfd5c7dec030a070bf652c3),HTML5新增的多媒体标签(24203f2f45e6606542ba09fd2181843a614eb9dc63b3fb809437a716aa228d24),HTML5新增的功能性标签(631fb227578dfffda61e1fa4d04b7d25a5e9d42b316b6d06c62de0deffc36939)

 

最后

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

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn