行内元素和块元素

• 块元素

  • 无论内容多少，该元素独占一行
  • P、h1——h6、div….

• 行内元素

  • 内容撑开宽度，左右都是行内元素的可以排在一行
  • a、strong、em…

• 列表标签

  • 有序列表

    <!--有序列表（order list）
    应用范围：试卷、问答-->
    <ol>
        <li>Java</li>
        <li>Python</li>
        <li>运维</li>
        <li>前端</li>
        <li>C/C++</li>
    </ol>
    

  • 无序列表

    <!--无序列表
    应用范围：导航，侧边栏。。
    -->
    <ul>
        <li>Java</li>
        <li>Python</li>
        <li>运维</li>
        <li>前端</li>
        <li>C/C++</li>
    </ul>
    

  • 自定义列表

    <!--自定义列表
    dl：标签
    dt：列表名称
    dd：列表内容
    应用范围：公司网站的底部
    -->
    <dl>
        <dt>学科</dt>
        <dd>Java</dd>
        <dd>Python</dd>
        <dd>C++</dd>
    </dl>
    

• 表格

  <!--table
  行：tr
  列：td
  -->
  <table border="1px">
      <tr>
          <!--colspan  跨列-->
          <td colspan="3">1-1</td>
      </tr>
      <tr>
          <!--rowspan  跨行-->
          <td rowspan="2">2-1</td>
          <td>2-2</td>
          <td>2-3</td>
      </tr>
      <tr>
          <td>3-2</td>
          <td>3-3</td>
      </tr>
  </table>
  

• 视频&音频

  <!--音频、视频
  src：资源路径
  controls：控制条
  autoplay：自动播放
  -->
  <video src="../resources/video/111.mp4" controls autoplay></video>
  <audio src="../resources/audio/123.flac" controls autoplay></audio>
  

网页元素