Home > Article > Web Front-end > Detailed description of HTML block-level elements
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
The title (Heading) element has six different levels,< ;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
//从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) (orHTML 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 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
to split between blocks
<p>段落1</p> <hr> <p>段落2</p>
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;"><pre class="brush:php;toolbar:false">
body {
color:red;
}
</pre></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>
margin: 1em 40px;
address
4398144403c02afb0c145bf989e4f57b
element allows the author to provide contact information for its nearest
or
6c04bd5ca3fcae76e30b72ad730ca86dancestor element. In the latter case, it applies to the entire document
当表示一个和联系信息无关的任意的地址时,使用e388a4556c0f65e1904146cc1a846bee
元素而不是208700f394e4cf40a7aa505373e0130b
元素。这个元素不能包含除了联系信息之外的任何信息,比如出版日期(这应该包含在865ebc4a8f40017839ddd62af936776f
元素中)。通常,208700f394e4cf40a7aa505373e0130b
元素可以放在当前section的c37f8231a37e88427e62669260f0074d
元素中,如果存在的话
【默认样式】
font-style: italic;
除了上面介绍的e388a4556c0f65e1904146cc1a846bee
、c8b28895262a62371d18ac056c4442e2
、e388a4556c0f65e1904146cc1a846bee
、f32b48428a809b51f04d3228cdf461fa
、b8a712a75cab9a5aded02f74998372b4
、208700f394e4cf40a7aa505373e0130b
标签外,还有一些前面已经介绍过的标签属于块级标签
包括骨架类标签(100db36a723c770d327fc0aef2ce13b1
、6c04bd5ca3fcae76e30b72ad730ca86d
),列表类标签(ff6d136ddc5fdfeffaf53ff6ee95f185
、c34106e0b4e09414b63b2ea253ff83d6
、def3eed00a09ea710a4bfa4b7fe74771
、67bc4f89d416b0b8236eaa5f43dee742
、73de882deff7a050a357292d0a1fca94
),表单类标签(<a href="http://www.php.cn/wiki/125.html" target="_blank">for</a>m
、2b5469ab79cf842344327415c3b3bb95
、be6d67dae90cc1ad6469079e163d0939
、e911751791aa3ba95dc724e2fb905976
、5b7a15bed8615d1b843806256bebea72
、5a07473c87748fb1bf73f23d45547ab8
),HTML5新增的结构标签(23c3de37f2f9ebcb477c4a90aac6fffd
、15221ee8cba27fc1d7a26c47a001eb9b
、1aa9e5d373740b65a0cc8f0a02150c53
、c37f8231a37e88427e62669260f0074d
、c787b9a589a3ece771e842a6176cf8e9
、2f8332c8dcfd5c7dec030a070bf652c3
),HTML5新增的多媒体标签(24203f2f45e6606542ba09fd2181843a
、614eb9dc63b3fb809437a716aa228d24
),HTML5新增的功能性标签(631fb227578dfffda61e1fa4d04b7d25
、a5e9d42b316b6d06c62de0deffc36939
)
可能有人会觉得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!