HTML行块标签

1. 标签的特性

p h1-h6 ul li ol li等等这些标签，我们使用时，独占一行。

a input label em i b strong u del s等等这些标签，我们使用时，内容多宽，标签就占多宽，后面跟着的内容会出现在这些标签的右面

1.1. 块元素

默认情况块元素在网页中独占一行，与内容无关，其他元素无法和它在同一行上。

1.2. 行内元素

内容撑开元素，内容多宽，元素就多宽。一般行内元素成行排列

2. 标签的语义

在网页中，很多标签都有语义，代表着不同的内容。例如：

p标签表示段落

h1表示1级标题

em标签文字强调

i表示表示斜体字体

3. div和span

没有任何语义的标签

div为块标签，span为行标签。

div主要用来划分区块，哪些元素属于一个整体，我们就可以用div来包裹。

<div>
  <div>
    <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">

    <h3>小米 12S Ultra</h3>
    <p>这真徕卡|专业徕卡影像</p>
    <p>5999元起</p>
  </div>
  <div>
    <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">

    <h3>小米 12S Ultra</h3>
    <p>这真徕卡|专业徕卡影像</p>
    <p>5999元起</p>
  </div>
  <div>
    <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">

    <h3>小米 12S Ultra</h3>
    <p>这真徕卡|专业徕卡影像</p>
    <p>5999元起</p>
  </div>
  <div>
    <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">

    <h3>小米 12S Ultra</h3>
    <p>这真徕卡|专业徕卡影像</p>
    <p>5999元起</p>
  </div>
  <div>
    <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">

    <h3>小米 12S Ultra</h3>
    <p>这真徕卡|专业徕卡影像</p>
    <p>5999元起</p>
  </div>
  <div>
    <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">

    <h3>小米 12S Ultra</h3>
    <p>这真徕卡|专业徕卡影像</p>
    <p>5999元起</p>
  </div>
  <div>
    <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">

    <h3>小米 12S Ultra</h3>
    <p>这真徕卡|专业徕卡影像</p>
    <p>5999元起</p>
  </div>
</div>