一、src 属性
src（source 的缩写）属性用于指定嵌入内容的源地址。它可以指向一个外部文件，如 JavaScript 脚本、CSS 样式表、图片等，也可以指向一个内联的代码片段。例如，在 HTML 中，可以使用以下方式嵌入一个 JavaScript 脚本：
```html
```
这里的 "path/to/script.js" 是脚本文件的路径。通过指定 src 属性，浏览器会下载并执行指定的脚本文件，从而实现相应的功能。
类似地，对于 CSS 样式表，可以使用以下方式嵌入：
```html
```
"path/to/style.css" 是样式表文件的路径。浏览器会下载并应用指定的样式表，以改变页面的外观。
对于图片，可以使用以下方式嵌入：
```html
```
"path/to/image.jpg" 是图片文件的路径，"alt" 属性用于提供图片的替代文本，当图片无法显示时，替代文本会显示在页面上。
二、width 和 height 属性
width 和 height 属性用于指定嵌入内容的宽度和高度。对于图片来说，这两个属性非常重要，它们可以控制图片的显示大小。例如：
```html
```
这里将图片的宽度设置为 300 像素，高度设置为 200 像素。如果不指定这两个属性，浏览器会根据图片的原始尺寸来显示图片，可能会导致页面布局的混乱。
对于其他嵌入内容，如视频、音频等，width 和 height 属性也可以用来控制其显示大小，但具体的效果可能因浏览器和嵌入内容的类型而有所不同。
三、type 属性
type 属性用于指定嵌入内容的 MIME 类型。MIME 类型是一种用于标识文件类型的标准化方法，它可以帮助浏览器正确地处理和显示嵌入的内容。例如，对于 JavaScript 脚本，MIME 类型通常为 "text/javascript"；对于 CSS 样式表，MIME 类型通常为 "text/css"。
在 HTML 中，可以使用以下方式指定嵌入内容的 MIME 类型：
```html
```
通过指定正确的 MIME 类型，浏览器可以更好地理解和处理嵌入的内容，避免出现兼容性问题。
四、async 和 defer 属性
async 和 defer 属性用于控制嵌入脚本的加载和执行顺序。
async 属性表示脚本应该异步加载和执行，即脚本的加载不会阻塞页面的其他内容的加载。当脚本加载完成后，浏览器会立即执行脚本。例如：
```html
```
defer 属性表示脚本应该延迟加载和执行，即脚本会在页面加载完成后再执行。与 async 属性不同的是，defer 属性保证了脚本的执行顺序，按照它们在页面中出现的顺序依次执行。例如：
```html
```
使用 async 和 defer 属性可以提高页面的加载性能，特别是当嵌入的脚本较多时。
五、data-* 属性
data-* 属性是 HTML5 中引入的自定义数据属性，用于在 HTML 元素上存储自定义数据。这些属性以 "data-" 开头，可以包含任意的名称和值，并且可以通过 JavaScript 来访问和操作。
例如，可以在一个 div 元素上添加一个自定义数据属性：
```html
```
然后，在 JavaScript 中可以通过以下方式访问这个属性：
```javascript
var element = document.querySelector('div');
var customValue = element.dataset.custom;
```
这里的 "element.dataset.custom" 就是获取到的自定义数据属性的值。
使用 data-* 属性可以方便地在 HTML 元素上存储和传递数据，而不需要使用额外的 DOM 属性或自定义数据结构。
除了以上属性外，还有一些其他的属性和技术可用于嵌入应用标记，如 iframe 属性、object 元素、embed 元素等。每种属性和技术都有其特定的用途和适用场景，开发者可以根据具体的需求选择合适的方式来嵌入应用标记。
通过合理使用这些属性和技术，开发者可以更好地控制和管理嵌入在页面中的应用标记，提高页面的性能和用户体验。
浙公网安备 33059102000262号