Home > Developer > Web Develop
?? Before the advent of HTML5, it was common to divide elements into block-level, inline, and inline block elements. This article describes HTML block-level elements in detail
H?? The heading (Heading) element has six different levels, is the highest level, and is the lowest. A TITLE element can briefly describe the topic of the section
?? From the beginning , the importance gradually decreases, and the font size decreases gradually. When using heading elements, be aware of the following points
?? 1. Instead of using lower-level headings to reduce the font of the headings, use the CSS's font-size style
?? 2, avoid skipping a certain level of title: Always from the beginning, the next use and so on
?? 3, <section> when using elements, for the sake of convenience, avoid repeating on a page , should be used to represent the title of the page, other headings when starting from . <section>when used, each section should use a
"Default Style"
//从h1到h6margin: 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 adds a label that represents a header group that is used to combine headings only when the chunk needs to have multiple levels of headers
<hgroup> <h1>水果</h1> <h2>苹果</h2></hgroup>
P??<p> An element (paragraph) represents a paragraph of text that typically behaves as a whole block of text that is detached from adjacent text, or as a vertical white space or indented in the first line
"Default Style"
margin: 16px 0;<p>段落1</p><p>段落2</p><p>段落3</p>
Div??<div> Element (divide) (or HTML document partitioning element) is a general-purpose flow content container that does not semantically represent any particular type of content and can be used to group other elements, typically for styling related requirements (using the class or ID attribute) Or grouping a group of elements with the same attributes (for example, Lang), it should be used when no other semantic element is available (for example, <article> or <nav> )
hr?? The element represents a theme transformation between paragraph-level elements (for example, a change in a story's scene, or a change in the subject of a chapter). In earlier versions of HTML, it was a horizontal line. Now it can still appear as a horizontal line in a visual browser, but it is currently defined as semantically, not on the expressive level.
?? Used for segmentation between paragraph-level elements, which do not need to be split between chunks
<p>段落1</p><hr><p>段落2</p>
"Default Style"
margin: 8px 0;border-style: inset;border-width: 1px;
Or:??<pre> element represents a predefined format literal. The text in this element is usually shown in the format of the original file, in the form of an equal-width font, and white space characters (such as spaces and line breaks) are displayed, usually representing the contents of the layout, such as code blocks and character paintings.
<pre>body { color:red;}</pre>
"Default Style"
margin: 1em 0;white-space: pre;
Blockquote??<blockquote> Element (or HTML block-level reference element), which represents the text that is the reference content. Typically, this part of the content is indented at the time of rendering. If the citation originates from the network, it is possible to set the source URL address of the original content to the cite attribute, and to inform the reader of the source of the citation in the form of text, the <cite> element
?? [note] The referenced attribution must be defined outside the reference
<blockquote cite="http://baike.baidu.com/view/921793.htm"> <p>横眉冷对千夫指,俯首甘为孺子牛</p></blockquote> <p>鲁迅</p>
"Default Style"
margin: 1em 40px;
Address??<address> element allows the author to provide contact information for its most recent <article> or <body> ancestral elements. In the latter case, it applies to the entire document
?? When you represent an arbitrary address that is unrelated to the contact information, the <p> element is used instead of the <address> element. This element cannot contain any information other than the contact information, such as the publication date (which should be included in the <time> element). Typically, <address> an element can be placed in the element of the current <footer> section, if one exists
"Default Style"
font-style: italic;
Other?? In addition to the above,,,, <div> <p> <blockquote> and <address> tags, there are some of the previously introduced tags belong to block-level label
?? Including Skeleton class label (,), List Class label (,,,, <body> <ul> <ol> <dl> <dd> <dt> ), Form Class label (,,,, form <fieldset> <output> <legend> <optgroup> , <option> ), HTML5 new structure tags (,,,,, <article> <aside> <footer> <nav> <section> ), HTML5 new Multimedia tags ( <figure> , <figcaption> ), HTML5 New Functional tags ( <summary> , <details>)
At last?? One might think that a <br> tag should be a block-level element because it has a newline, similar to the characteristics of a block-level element. But it's actually an inline element, and its purpose is to generate a newline in the text
HTML block-level elements
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
