HTML grouping element-HTML Tutorial-php.cn

HTML grouping element

高洛峰

Release： 2017-02-14 15:47:40

Original

2693 people have browsed it

HTML5分组元素

所谓分组元素就是用来组织相关内容的HTML5元素，清晰有效的进行归类

一、元素分类汇总

元素名称说明

p 表示段落

div 一个没有任何语义的通用元素，和span是对应的元素

blockquote 表示引自它处的大段内容

pre 表示其格式应该被保留的内容

hr 表示其段落级别的主题转换，即水平线

ul，ol 表示无序列表，有序列表

li 用于ul，ol元素中的列表项

dl，dt，dd 表示包含一系列术语和定义说明的列表。dt在dl内部表示术语，一般充当标题，dd在dl内部表示定义，一般是内容

figure 表示图片

figcaption 表示figure元素的标题

二、分组元素解析

1、

建立段落

这是一个段落

这是另一个段落

解释：

元素实际作用就是将内部元素包含的文本形成一个段落；而段落和段落之间保持一定的空隙

2、

通用分组

这是一个通用分组

这是另一个通用分组

Explanation: The

element was very commonly used in earlier versions, and was laid out through the general grouping element of

. In HTML5, due to semantics, it is replaced by various other document elements. The difference from

paragraphs is that there is no upper and lower space between the two paragraphs of text, and the gap interval is the same as
line breaks.

Look at the difference between

and

by comparison

<p>这是一个段落</p>
<p>这是另一个段落</p>
<div>这是一个通用分组</div>
<div>这是另一个通用分组</div>

Copy after login

HTML grouping element

##3.

Quote a large section of other content
This is a long paragraph from somewhere else
This is another big paragraph from somewhere else

Explanation: The actual function of the
element is the same as that of the
element. It has the function of paragraph gap and also includes the function of indentation at the beginning and end. Semantically speaking, it refers to a large section of content elsewhere.

#4.
Display formatted content</p><pre class="brush:html;toolbar:false"><pref> ##### ##### ##### ##### ##### </pref>
Copy after login
Explanation: The actual function of the
element is how the editor typeset it, and it is displayed intact. Of course, this is only suitable for simple typesetting, and complex typesetting cannot meet the requirements. </p><p></p><p>##5. <hr>Add separation<img src="https://img.php.cn//upload/image/930/634/103/1487058091703651.png" title="HTML grouping element" alt="HTML grouping element" style="max-width:90%" style="max-width:90%"/><pre class="brush:html;toolbar:false"><div>这是一个通用分组</div> <hr> <div>这是另一个通用分组</div>
Copy after login
Explanation: The actual function of this element is to add a dividing line, intended to present the separation of contextual topics.
##6.
Add an unordered list
<ul>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>马六</li>
</ul>
Copy after login
Explanation: The
element represents an unordered list, while < The ;li> element is an internal list item
##7.
Add an ordered list
<ol>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>马六</li>
</ol>
Copy after login
Explanation: < The ol> element represents an ordered list, while the
element is an internal list item.
Element currently supports three attributes
’s ’ ’s ’ ’s ’ ’ ’s ’ ’ ’ s it ’s ’ ’ t - - to
## li element attribute
<ul>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>马六</li>
</ul>
<ol>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>马六</li>
</ol>

    张三
    李四
    王五
    马六


    张三
    李四
    王五
    马六


    张三
    李四
    王五
    马六


    张三
    李四
    王五
    马六


    张三
    李四
    王五
    马六
Copy after login
##8、
Generate description list

This is a document

Here are the details of this document1

Here are the details of this document 2
Explanation: These three elements are a whole, but< ;dt> or
does not have to appear
<ol>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>马六</li>
</ol>

    张三
    李四
    王五
    马六
Copy after login
##9,
Use illustrations
<dl>
<dt>这是第一份文件</dt>
<dd>这是第一份文件的详细内容1</dd>
<dd>这是第一份文件的详细内容2</dd>
<dt>这是第二份文件</dt>
<dd>这是第二份文件的详细内容1</dd>
<dd>这是第二份文件的详细内容2</dd>
</dl>
Copy after login
Explanation: These two elements are generally used for the layout of images
<figure>
     <figcation>这是第一张图</figcation>
     <img  src="1.png" alt="HTML grouping element" >
</figure>
Copy after login
More articles related to HTML grouping elements Please pay attention to PHP Chinese website!