HTML学习笔记(四)——分组元素

来源：互联网发布：arm ds5 linux 破解版编辑：程序博客网时间：2024/06/05 10:26

一.分组元素总汇

元素名称说明 p 表示段落 div 没有语义的块级元素 blockquote 引自他处的大段内容 pre 代码与编程格式一样 hr 划分主题，水平线 ul，ol 无序列表，有序列表 li 用于ul，ol元素中的列表项 dl，dt，dd dl表示一个列表区域范围，上层列表项dt充当标题，下层列表项dd充当内容 figure 用作文档中插图的图像 figcaption 表示figure元素的标题

二．分组元素解析

1.<p>建立段落

<p>这是一个段落</p><p>这也是一个段落</p>

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

2.<div>通用分组

<div>这是一个通用分组</div><div>这是又一个通用分组</div>

解释：通常用来实现布局，块级元素。

3.<blockquote>引用大段他出内容

<blockquote>这是一个大段引自他出内容</blockquote><blockquote>这是另一个大段引自他出内容</blockquote>

解释：<blockquote>元素实际作用除了和<p>元素一样，有段落空隙的功能，还包含了首尾缩进的功能。语义上表示，大段的引用他处的内容。

4.<pre>展现格式化内容

<pre>#####    #####        #####    ##########</pre>

解释：<pre>元素实际作用就是编辑器怎么排版的，原封不动的展现出来。这种只适合简单的排版，复杂的排版就无法满足要求。

5.<hr>添加分隔
解释：<hr>元素实际作用就是添加一条分割线，意图呈现上下文主题的分割。

6.<ul><li>添加无序列表

<ul><li>张三</li><li>李四</li><li>王五</li><li>马六</li></ul>

解释：<ul>元素表示无序列表，而<li>元素则是内部的列表项。

7.<ol><li>添加有序列表

<ol><li>张三</li><li>李四</li><li>王五</li><li>马六</li></ol>

解释：<ol>元素表示有序列表，而<li>元素则是内部的列表项。

8.<dl><dt><dd>生成说明列表

<dl><dt>这是一份文件</dt><dd>这里是这份文件的详细内容1</dd><dd>这里是这份文件的详细内容2</dd></dl>

解释：这三个元素是一个整体，但<dt>或<dd>并非都必须出现。

9.<figure><figcaption>使用插图

<figure><figcaption>这是一张图</figcaption><img src="img.png"></figure>

解释：这两个元素一般用于图片的布局。

三.代码演示

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="utf-8">    <title>分组元素</title></head><body><p>这是一个段落</p><p>这是另一个段落</p><div>这是一个通用分组</div><div>这是另一个通用分组</div><blockquote>这是一个大段的来自他出的内容</blockquote><hr><blockquote>这是另一个大段的来自他出的内容</blockquote>    #####        #####            ####        #####    #####<pre>    #####        #####            ####        #####    #####</pre><ul>    <li>张三</li>    <li>李四</li>    <li>王五</li>    <li>马六</li></ul><ol>    <li>张三</li>    <li>李四</li>    <li>王五</li>    <li>马六</li></ol><dl>    <dt>这是第一份文件</dt>    <dd>这是第一份文件的详细内容1</dd>    <dd>这是第一份文件的详细内容2</dd>    <dt>这是第二份文件</dt>    <dd>这是第二份文件的详细内容1</dd>    <dd>这是第二份文件的详细内容2</dd></dl><figsure>    <figcaption>这是一张图片</figcaption>    <img src="img.png"></figsure><br><br><br><br><br><br><br><br><br></body></html>

四.结果

这里写图片描述

0 0