html分组的展开与隐藏,HTML分组元素

5268f80b9b1e01f982625ef6fac83ca1.png

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、

通用分组
这是一个通用分组
这是另一个通用分组

解释:

元素在早期的版本中非常常用,通过
这种一般性分组元素进行布局。而在HTML5中,由于语义的缘故,被其他各种文档元素所代替。和

段落的区别是,两段文本的上下空隙是没有的,空隙间隔和
换行一样。

通过对比看看

的区别

这是一个段落

这是另一个段落

这是一个通用分组
这是另一个通用分组

0d891d7c3cdd79591f0083065d552d20.png

3、

引用大段它处内容
这是一个大段的来自它处的内容
这是另一个大段的来自它处的内容

解释:

元素实际作用除了和

元素一样,有段落空隙的功能,还包含了首尾缩进的功能。语义上表示,大段的引用它处的内容。

4、展现格式化内容

#####

#####

#####

#####

#####

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

db82c0adcbd374aad498fe0d503cda2e.png

5、


添加分隔
这是一个通用分组

这是另一个通用分组

解释:该元素实际作用就是添加一条分割线,意图呈现上下文主题的分割。

06fc1ab9f74232a084cc655bd986fd98.png

6、

  • 添加无序列表
    • 张三
    • 李四
    • 王五
    • 马六

    解释:

    • 元素表示无序列表,而
    • 元素则是内部的列表项

      7、

      1. 添加有序列表
        1. 张三
        2. 李四
        3. 王五
        4. 马六

        解释:

        1. 元素表示有序列表,而
        2. 元素则是内部的列表项。
          1. 元素目前支持三种属性

          ol元素属性

          52c148812df4963111ee6f1a06329526.png

        • 张三
        • 李四
        • 王五
        • 马六
        1. 张三
        2. 李四
        3. 王五
        4. 马六
        1. 张三
        2. 李四
        3. 王五
        4. 马六
        1. 张三
        2. 李四
        3. 王五
        4. 马六
        1. 张三
        2. 李四
        3. 王五
        4. 马六
        1. 张三
        2. 李四
        3. 王五
        4. 马六
        1. 张三
        2. 李四
        3. 王五
        4. 马六

        ab04239d492183b0d09564d07fabdcc5.png

        li元素属性

        d2410aefce811ea9da71576b6a83cec8.png

        1. 张三
        2. 李四
        3. 王五
        4. 马六
        1. 张三
        2. 李四
        3. 王五
        4. 马六

        e755fdffe1db2b426c98f2cbdf4aa6b7.png

        8、

        生成说明列表
        这是一份文件
        这里是这份文件的详细内容1
        这里是这份文件的详细内容2

        解释:这三个元素是一个整体,但

        或者
        并非都必须出现
        这是第一份文件
        这是第一份文件的详细内容1
        这是第一份文件的详细内容2
        这是第二份文件
        这是第二份文件的详细内容1
        这是第二份文件的详细内容2

        feb006467d6c53e75c5caebbb8be48a1.png

        9、

        使用插图

        这是第一张图

        1.png

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

        这是第一张图

        1.png

        34384a2e46e014cb03fbc2a0eafae5b9.png

        更多HTML分组元素相关文章请关注PHP中文网!

        1428d0e076c3959ab11d28a39bc84fab.png

        5268f80b9b1e01f982625ef6fac83ca1.png

        本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉

        本文系统来源:php中文网

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值