html 基础 ​

一、inline 元素、block 元素、inline-block 元素 ​

inline 元素 ​

inline 元素全称Inline Elements。一个内联元素不会开始新的一行，并且只占有必要的宽度。

• 特点:

  • 和其他元素都在一行上。
  • 元素的高度、宽度、行高及顶部和底部边距不可设置。
  • 元素的宽度就是它包含的文字或图片的宽度，不可改变。

block 元素 ​

block 元素全称 Block-level Elements，一个块级元素总是开始新的一行，并且占据可获得的全部宽度(左右都会尽可能的延伸到它能延伸的最远)

• 特点:

  • 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）
  • 元素的高度、宽度、行高以及上下左右边距都可设置
  • 元素宽度在不设置的情况下，是它本身父容器的 100%（和父元素的宽度一致），除非设定一个宽度

inline-block 元素 ​

• inline-block 元素，它像内联元素，但具有宽度和高度。

• 特点:

  • 和其他元素都在一行上；
  • 元素的高度、宽度、行高以及顶和底边距都可设置

二、常见的 inline 元素、block 元素、inline-block 元素 ​

Inline 元素（内联元素）： ​

• <span>: 用于标记文本的一部分，常用于设置特定文本样式或添加小的修饰性元素。
• <a>: 创建超链接，用于导航到其他页面或资源。
• <strong>: 表示强调文本。
• <em>: 表示斜体强调文本。
• <img>: 用于插入图片。
• <input>: 表单输入元素，如文本输入框、复选框等。

Block 元素（块级元素）： ​

• <div>: 用于将内容组织成块，常用于布局目的或分隔不同部分。
• <p>: 表示段落。
• <h1>, <h2>, ..., <h6>: 表示标题，从大到小依次递减。
• <ul>, <ol>, <li>: 分别表示无序列表和有序列表以及列表项。
• <table>, <tr>, <td>: 表示表格、表格行和表格单元格。

Inline-block 元素（内联块级元素）： ​

• <span>: 和上面提到的一样，但是它可以被设置成内联块级元素。
• <img>: 和上面提到的一样，但是它可以被设置成内联块级元素。
• <input>: 和上面提到的一样，但是它可以被设置成内联块级元素。

三、inline 元素、block 元素、inline-block 元素的区别 ​

• 块级元素会独占一行，而内联元素和内联块元素则会在一行内显示。

• 块级元素和内联块元素可以设置 width、height 属性，而内联元素设置无效。

• 块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。

四、能够跨域引入资源的 HTML 标签 ​

• <img>：用于显示图像。可以加载来自其他域的图像并在页面上显示。
• <script>：用于加载外部 JavaScript 文件。可以引入其他域上的 JavaScript 脚本文件，并在页面中使用。
• <link>：用于加载外部样式表。可以引入其他域上的 CSS 文件，以应用样式到页面上。
• <audio>：用于嵌入音频内容。可以加载其他域上的音频文件并在页面上播放。
• <video>：用于嵌入视频内容。可以加载其他域上的视频文件并在页面上播放。
• <iframe>：用于嵌入另一个文档。可以加载其他域上的网页并在页面中嵌入显示。

这些标签在浏览器中有相应的安全例外，允许加载和展示来自其他域的资源。但是，请注意，虽然这些标签允许在页面上展示跨域资源，但对于执行一些读取操作（例如使用 getImageData 方法）或执行一些需要敏感权限的操作，仍然会受到同源策略的限制。