行内标签和块级标签以及它们的区别

目录

1.行内标签：

2.块级标签：

3.区别：

行内标签

块级标签

---

1.行内标签：

<span>hello，world</span>
 <!-- 
        href 指向跳转的地址
        target="_blank" 新tab页打开
     -->
<!--内部跳转 -->
<a href="#top">
      <button>回到顶部</button>
    </a>
    <a href="#pageMiddle">
      <button>回到中部</button>
    </a>
<a href="./iframe.html">一个页面</a>
<button>开启我的页面吧</button>
 <!-- 
        controls 控制面板
        autopaly 自动播放 （必须和muted一起用）
        muted 静音
     -->
 <!-- 
        loop 循环播放
        移除操作面板 controls
     -->
<video style="width:1000px" autoplay muted loop src="https://v.gbimg.cn/20220705/7decdc8e41f206732cf1b31da03f2cb8/main_1.mp4" type="video/mp4"></video>
<!-- 
        audio类型： mp3 wav ogg

     -->
<audio controls src="../resources/KEY_L刘聪 _ $CC731 - Hey KONG.mp3" type="audio/mp3"></audio>
<select>
  <option></option>
</select>
<strong></strong><small></small>
<sub>下标</sub><sup>上标</sup>
<!-- 
        src (source 资源)
            相对路径
                ./ 当前文件夹
                ../ 上一级文件夹
                但是如果我们启动服务，只能在向前文件夹中生效
            绝对路径 
                D:\projects\wtzten\20220728\code\images\花.png
            (了解: /images/花.png  / 根路径)
        
        alt 图片没有加载出来时候展示 
        
        公共属性：
        style 样式
        title 标题 提示用户
     -->
<img src="" alt="">
<del>中划线</del>
<em>倾斜</em>
<input/>
<textarea></textarea>

2.块级标签：

 <!-- 
        使用标签关注两个点：
        1. 标签用途 
        2. 标签的默认样式
     -->
<div style="background-color:aquamarine ;width: 200px;">
  <h1>我是个大标题</h1>
  <h2>我正在慢慢···</h2>
  <h3>慢慢的</h3>
  <h4>emmmmmmm</h4>
  <h5>变小······</h5>
  <h6>最小啦哈哈哈哈</h6>
</div>
<P>我是一大段文字的那种哈哈哈哈哈哈哈没想到吧嘻嘻哈哈嘿嘿</P>
<hr />
<table></table>
 <!-- 
        border 边框
     -->
  <table border="1">
      <!-- 表格的标题 -->
      <caption>
        人员管理
      </caption>
      <!-- 表格的表头 -->
      <thead>
        <!-- 一行 -->
        <tr>
          <!-- 复制一行代码 直接 ctrl+c ctrl+v -->
          <!-- alt+shift+向下箭头 -->
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
        </tr>
      </thead>
      <!-- 表格的内容 -->
      <tbody>
        <!-- 第1行 -->
        <tr>
          <td>小明</td>
          <td>男</td>
          <td>22</td>
        </tr>
        <!-- 第2行 -->
        <tr>
          <td>小张</td>
          <td>男</td>
          <td>33</td>
        </tr>
        <!-- 第3行 -->
        <tr>
          <td>小红</td>
          <td>女</td>
          <td>11</td>
        </tr>
      </tbody>
    </table>
<form></form>
<!-- ul 无序列表 -->
    <!-- type desc实心 circle 空心 square 方块-->
    <!-- li 不能单独使用 只能嵌套 -->
<ul>
  <li>111</li>
  <li>321</li>
  <li>123</li>
</ul>
<!-- ol 有序列表 -->
    <!-- type 1 a A I -->
<ol>
   <li>111</li>
    <li>321</li>
    <li>123</li>
</ol>
<iframe>镶嵌网页</iframe>
<!-- 
        很多网站为了安全，会屏蔽iframe的嵌套
     -->
<iframe
      style="width: 100%; height: 500px"
      src="https://tieba.baidu.com/p/7939595549?pid=144910174255#144910174255"
    >

3.区别：

行内标签

1. 不会独占一行，与其他的行内标签共处一行

2. 不会换行

3. 不可以设置宽高

4. 可以设置边距（margin） 左右生效 但是上下不会生效

块级标签

1. 独占一行

2. 换行

3. 可以设置宽高

4. 可以设置边距（margin）

⚠️特殊情况

img, input 虽然行内标签，但是可以设置宽高 和 边距（margin），一般称之为行内块标签。