TML（超文本标记语言）中的元素可以分为两类：块级元素和内联元素。块级元素会自动占据一行，并且可以设置宽度和高度。内联元素不会自动占据一行，而是根据文本内容的长度自动调整宽度。块级元素可以包含其他元素，包括文本、图像、链接等。内联元素通常不包含其他元素。

1. 块级元素具有以下特点：

• 块级元素会自动占据一行，并且可以设置宽度和高度。
• 块级元素可以包含其他元素，包括文本、图像、链接等。
• 块级元素可以设置背景颜色、边框、字体等样式属性。

以下是一些常见的块级元素：

• <div>：用于定义一个块级容器，可以包含其他元素。
• <p>：用于定义段落，通常包含文本内容。
• <h1>到<h6>：用于定义标题，从h1到h6分别表示从大到小的标题级别。
• <table>：用于定义表格，包含多个行和列。
• <form>：用于定义表单，包含输入框、按钮等元素。
• <ul>和<ol>：用于定义无序列表和有序列表，包含多个列表项。
• <img>：用于定义图像，用于在网页中显示图片。

这些块级元素可以通过设置 CSS 样式属性来实现不同的布局和样式效果，例如设置背景颜色、边框、字体、大小、颜色等。同时，块级元素还可以通过设置 CSS 定位属性来实现定位和浮动效果，例如设置position: relative;、float: left;

2. 内联元素具有以下特点：

• 内联元素不会自动占据一行，而是根据文本内容的长度自动调整宽度。
• 内联元素可以设置字体、颜色、大小等样式属性。
• 内联元素通常不包含其他元素，而是直接嵌入文本内容中。

以下是一些常见的内联元素：

• <a>：用于定义超链接，通常用于链接到其他网页或文件。
• <em>：用于定义强调文本，通常呈现为斜体效果。
• <strong>：用于定义加粗文本，通常呈现为粗体效果。
• <span>：用于定义自定义样式的文本，通常用于应用特定的 CSS 样式。
• <img>：用于定义图像，通常用于在网页中显示图片。

这些内联元素可以通过设置 CSS 样式属性来实现不同的样式效果，例如设置字体、颜色、大小等。同时，内联元素还可以通过设置 CSS 定位属性来实现定位和浮动效果，例如设置position: relative;、float: left。

<img> 元素在 HTML 中既可以是块元素，也可以是内联元素，这取决于它的 display 属性的值。

默认情况下，<img> 元素是内联元素，它会根据文本的流动方式进行布局。这意味着如果在一行中放置了多个 <img> 元素，它们会在一行中排列，并且不会自动换行。

但是，如果将 <img> 元素的 display 属性设置为 block，那么它就会成为块元素。块元素会占据一行，并且可以设置宽度和高度。在这种情况下，多个 <img> 元素会自动换行，并且可以通过设置 margin 属性来调整它们之间的间距。

html

<img src="image.jpg" alt="图片描述" style="display: block;">

在上面的示例中，<img> 元素的 display 属性被设置为 block，这会使它成为一个块元素。你可以根据需要调整图片的宽度和高度，以及 margin 属性来控制图片之间的间距。

、开发背景

　　2年前做了一个基于element-ui的layout组件发布到npm package上去，广受大家的欢迎，下载量每周颇升。这个组件的好处在于开发者不用写太多html代码和逻辑，只要通过配置json的方式就能马上生成后台，包括菜单栏和导航面包屑等一键生成，还能根据不同的需求做定制化后台界面，就像拼积木一样，让用户只专注于内容核心代码的开发。现在还没做大范围的推广，如果我觉得它做得足够好，我一定会放到npm上推荐给各位读者使用哈。当初为了解答网友的疑问，我还专门建立了该组件的官网。logo看起来有没有很熟悉？哈哈哈，它其实就是element-ui的logo进行改造的，意义就是告诉使用者，这是element-ui功能的组合加强版。

　　为了迎合公司的OKR，我提出了对表单表格组件的封装。为什么我会有这个想法？其实这个组件我很早就想做了，只是以前做的是基于UI层面的，近期我接手了公司的一个项目叫童画，每天做的事情感觉就是复制粘贴，修改部分不同的功能和字段名称。组件的意义在于可以在遇到同一类设计场景时，可以复用，从而减少设计的时间和形成产品的统一性。传统的搜索表单不就是这样吗？上面是表单搜索字段，中间是搜索结果的表格，下面是搜索结果的分页。把表单和表格组合起来的好处在于很多搜索字段都是基于表格组件的某些字段，那我根据search字段进行筛选不就可以了么，很久之前，我们总是在吐槽产品经理总是喜欢截图现有功能，然后做字段修改，搞成原型扔给前端。如果前端也能像他这样简单，那该多好呀，类似这样的想法油然而生。刚开始我只是为了方便我的工作，没想到领导却重视了起来，想把这个组件推广给公司其他十几个前端同事使用，于是乎，我便认真开搞了起来。有理论还不行，得有场景实践，刚好公司的项目童画有很多场景，我根据它里面的场景，做了很多功能的封装和兼容。

　　写到这里，有人会说了，这不就是CRUD组件吗？有这想法的话，说明你还太年轻和小看这个组件的功能了。传统的CRUD组件灵活性不是很高，这个组件的好处是配置即可用，不用考虑其他搜索，翻页，清空等各种逻辑，让组件达到高度复用，封装了场景的插槽类型，但为了防止翻车，我还是预留了变态需求的插槽。字段的使用更多采用elementUI的命名方式，让使用者减少学习成本。这样做的好处是什么呢？首先，前端再也不用写页面了，其次，对于比较规矩的搜索表单页面，完全可以通过请求接口的形式交给后端来配置呈现页面即可，根本没有前端什么事了，前端的工作可以解放出来做更复杂的功能开发。

二、部分原理

1. 搜索字段通过search=true进行筛选；
2. 分页通过请求的total总数进行分页；
3. Vue.prototype.$query接入请求。

三、组件文档

为了使用方便，我把它做成了组件并放到了公司的私服上，接下来的工作就是写文档啦，以下是部分文档的编写，因为时间问题，没来得及好好检查，各位看官将就看一下就行啦。

export default {
options: {
  request: {
    api: '/student/web/student/enroll/list',
    method: 'GET',
    paramMap: {
      index: 'pageIndex',
      limit: 'pageSize'
    },
    resultMapping: {
      total: 'total',
      data: 'pageData'
    }
  },
  size: '',  // medium/mini/small, 默认medium
  labelWidth: 90,
  submitBtn: true, // 搜索按钮，默认true，非必填
  submitText: '查询', // 搜索按钮的文字，默认查询，非必填
  clearBtn: true, // 清除按钮，默认true
  clearSize: 'mini', // medium/mini/small, 默认medium
  clearText: '清除', // 清除按钮的文字，默认清除，非必填
  column: [
    {
       slotType: 'selection'
    },
    {
      prop: 'keyword',
      label: '学员/家长',
      search: true,
      hide: true
    },
    {
      prop: 'studentName',
      label: '学员'
    },
    {
      prop: 'telephone',
      label: '家长手机号',
      width: 130
    },
    {
      prop: 'type',
      label: '报名类型',
      width: 90,
      search: true,
      type: 'select',
      slot: true,
      slotType: 'text',
      slotArray: [{
        label: '新报',
        value: 1
      },
      {
        label: '续报',
        value: 2
      }],
      dicData: [{
        label: '新报',
        value: 1
      },
      {
        label: '续报',
        value: 2
      }]
    },
    {
      prop: 'courseFee',
      label: '缴费金额',
      slot: true,
      slotType: 'regEx',
      regEx: '¥{{courseFee/100}}'
    },
    {
      prop: 'payType',
      label: '支付方式',
      search: true,
      type: 'select',
      width: 100,
      dicData: [
        {
          label: '微信',
          value: '微信'
        },
        {
          label: '支付宝',
          value: '支付宝'
        },
        {
          label: '银行卡转账',
          value: '银行卡转账'
        },
        {
          label: '其它',
          value: '其它'
        }
      ]
    },
    {
      prop: 'courseCount',
      label: '报名课时'
    },
    {
      prop: 'followTeacher',
      label: '跟进人'
    },
    {
      prop: 'createTime',
      label: '报名时间',
      param: 'beginTime,endTime',
      format: 'yyyy 年 MM 月 dd 日',
      valueFormat: 'timestamp',
      search: true,
      width: 160,
      type: 'daterange'
    },
    {
      prop: 'auditor',
      label: '报名老师',
      search: true,
      param: 'teacherId', // 修正请求参数名
      type: 'select',
      dicData: [],
      dicUrl: '/org/web/org/user/list/teacher',
      dicMap: {
        label: 'userName',
        value: 'id'
      }
    },
    {
      prop: 'status',
      label: '报名状态',
      slot: true,
      slotType: 'tag',
      width: 110,
      slotArray: [{
        type: 'warning',
        label: '待审核',
        value: 1
      },
      {
        type: 'danger',
        label: '审核不通过',
        value: 3
      },
      {
        type: 'success',
        label: '审核通过',
        value: 2
      }],
      dicUrl: ''
    },
    {
      prop: 'operation',
      label: '操作',
      width: 80,
      slot: true,
      slotType: 'operation',
      slotArray: [
        {
          label: '去审核',
          value: 'handle',
          filter: ({status}) => {
            return status === 1
          }
        }
      ]
    }
  ]
}
}

生成的页面

四、最后感谢

最后，感谢同事世丞在字段命名上给了很多建议，同时也感谢领导给了很多刁难的意见，让这个组件的功能越发强大，也让开发者使用更方便，达到配置即可使用的地步。当然了，组件还需要更多场景的训练才能真正实现各种功能的兼容。后期我希望可以尽快放到layout官网上，供大家使用。

五、关于作者

一个会美工与后端PHP/nodejs的全栈工程师

更多学习内容欢迎关注

微信公众号 ：程序员周先生

lt;!DOCTYPE html>

<html>

<head>

<title>我的网页</title>

</head>

<body>

<h1>欢迎来到我的网页</h1>

<p>这是一个简单的 HTML 网页设计。</p>

<img src="https://picsum.photos/200" alt="随机图片">

<ul>

<li>项目 1</li>

<li>项目 2</li>

<li>项目 3</li>

</ul>

</body>

</html>

在这个例子中，我们创建了一个简单的 HTML 网页，其中包括以下元素：

• <!DOCTYPE html>：告诉浏览器这是一个 HTML5 文件。
• <html>：定义 HTML 文档的根元素。
• <head>：包含有关文档的元数据，如标题等。
• <title>：定义网页标题，将显示在浏览器标签页上。
• <body>：定义网页的主要内容。
• <h1>：定义一个一级标题。
• <p>：定义一个段落。
• <img>：定义一个图片，并指定图片的源和替代文本。
• <ul> 和 <li>：定义一个无序列表，并列出项目。