跳转到内容
主菜单
主菜单
移至侧栏
隐藏
导航
首页
最近更改
随机页面
MediaWiki帮助
代码酷
搜索
搜索
中文(中国大陆)
外观
创建账号
登录
个人工具
创建账号
登录
未登录编辑者的页面
了解详情
贡献
讨论
编辑“︁
HTML嵌入内容
”︁(章节)
页面
讨论
大陆简体
阅读
编辑
编辑源代码
查看历史
工具
工具
移至侧栏
隐藏
操作
阅读
编辑
编辑源代码
查看历史
常规
链入页面
相关更改
特殊页面
页面信息
外观
移至侧栏
隐藏
您的更改会在有权核准的用户核准后向读者展示。
警告:
您没有登录。如果您进行任何编辑,您的IP地址会公开展示。如果您
登录
或
创建账号
,您的编辑会以您的用户名署名,此外还有其他益处。
反垃圾检查。
不要
加入这个!
预览
高级
特殊字符
帮助
标题
2级
3级
4级
5级
格式
插入
拉丁字母
扩展拉丁字母
国际音标
符号
希腊字母
希腊字母扩展
西里尔字母
阿拉伯字母
扩展阿拉伯字母
希伯来字母
孟加拉语字符集
泰米尔数字和符号
泰卢固语字符集
僧伽罗语字符集
梵文字符集
古吉拉特语字符集
泰语字符集
老挝语
高棉语字母
加拿大原住民音节文字
卢恩
Á
á
À
à
Â
â
Ä
ä
Ã
ã
Ǎ
ǎ
Ā
ā
Ă
ă
Ą
ą
Å
å
Ć
ć
Ĉ
ĉ
Ç
ç
Č
č
Ċ
ċ
Đ
đ
Ď
ď
É
é
È
è
Ê
ê
Ë
ë
Ě
ě
Ē
ē
Ĕ
ĕ
Ė
ė
Ę
ę
Ĝ
ĝ
Ģ
ģ
Ğ
ğ
Ġ
ġ
Ĥ
ĥ
Ħ
ħ
Í
í
Ì
ì
Î
î
Ï
ï
Ĩ
ĩ
Ǐ
ǐ
Ī
ī
Ĭ
ĭ
İ
ı
Į
į
Ĵ
ĵ
Ķ
ķ
Ĺ
ĺ
Ļ
ļ
Ľ
ľ
Ł
ł
Ń
ń
Ñ
ñ
Ņ
ņ
Ň
ň
Ó
ó
Ò
ò
Ô
ô
Ö
ö
Õ
õ
Ǒ
ǒ
Ō
ō
Ŏ
ŏ
Ǫ
ǫ
Ő
ő
Ŕ
ŕ
Ŗ
ŗ
Ř
ř
Ś
ś
Ŝ
ŝ
Ş
ş
Š
š
Ș
ș
Ț
ț
Ť
ť
Ú
ú
Ù
ù
Û
û
Ü
ü
Ũ
ũ
Ů
ů
Ǔ
ǔ
Ū
ū
ǖ
ǘ
ǚ
ǜ
Ŭ
ŭ
Ų
ų
Ű
ű
Ŵ
ŵ
Ý
ý
Ŷ
ŷ
Ÿ
ÿ
Ȳ
ȳ
Ź
ź
Ž
ž
Ż
ż
Æ
æ
Ǣ
ǣ
Ø
ø
Œ
œ
ß
Ð
ð
Þ
þ
Ə
ə
格式
链接
标题
列表
文件
讨论
参考
说明
输入内容
输出结果
斜体
''斜体文字''
斜体文字
粗体
'''粗体文字'''
粗体文字
粗斜体
'''''粗斜体文字'''''
粗斜体文字
说明
输入内容
输出结果
参考资料
页面文本。<ref>[https://www.example.org/ 链接文本],其他文本。</ref>
页面文本。
[1]
命名参考资料
页面文本。<ref name="测试">[https://www.example.org/ 链接文本]</ref>
页面文本。
[2]
复用参考资料
页面文本。<ref name="测试" />
页面文本。
[2]
显示参考资料列表
<references />
↑
链接文本
,其他文本。
↑
链接文本
= HTML嵌入内容 = '''HTML嵌入内容'''是指通过特定HTML元素将外部资源(如图像、视频、音频、框架或文档)整合到网页中的技术。这些元素允许开发者扩展网页的功能性和交互性,是现代Web开发的核心组成部分。 == 核心嵌入元素 == === <code><nowiki><img></nowiki></code> 图像元素 === 最基础的嵌入元素,用于在页面中显示图像。语法要求至少包含<code>src</code>(资源路径)和<code>alt</code>(替代文本)属性。 <syntaxhighlight lang="html"> <!-- 基础示例 --> <img src="logo.png" alt="Company Logo" width="200" height="100"> <!-- 响应式示例 --> <img srcset="small.jpg 480w, medium.jpg 1024w, large.jpg 1600w" sizes="(max-width: 600px) 480px, (max-width: 1200px) 1024px, 1600px" src="fallback.jpg" alt="Responsive image"> </syntaxhighlight> {| class="wikitable" |+ 属性说明 ! 属性 !! 作用 !! 必需性 |- | <code>src</code> || 指定图像URL || 是 |- | <code>alt</code> || 无障碍访问和SEO || 是 |- | <code>width</code>/<code>height</code> || 显示尺寸(单位:CSS像素) || 否 |} === <code><nowiki><iframe></nowiki></code> 内联框架 === 用于嵌入另一个HTML文档,常用于地图、视频或第三方内容。 <syntaxhighlight lang="html"> <iframe src="https://example.com/widget" title="External Content" width="600" height="400" sandbox="allow-scripts allow-same-origin"> </iframe> </syntaxhighlight> <mermaid> graph TD A[父页面] -->|包含| B(iframe内容) B --> C[独立渲染上下文] C --> D[受同源策略限制] </mermaid> == 多媒体嵌入 == === <code><nowiki><video></nowiki></code> 与 <code><nowiki><audio></nowiki></code> === HTML5原生多媒体支持,无需插件即可播放媒体文件。 <syntaxhighlight lang="html"> <video controls width="640"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> Your browser does not support HTML5 video. </video> <audio controls> <source src="audio.ogg" type="audio/ogg"> <source src="audio.mp3" type="audio/mpeg"> </audio> </syntaxhighlight> 关键技术点: * <code>controls</code> 属性显示播放控件 * 多<code>source</code>元素实现格式回退 * 支持通过JavaScript API进行高级控制 === <code><nowiki><picture></nowiki></code> 响应式图像 === 根据设备条件动态选择最优图像资源。 <syntaxhighlight lang="html"> <picture> <source media="(min-width: 1200px)" srcset="large.jpg"> <source media="(min-width: 800px)" srcset="medium.jpg"> <img src="small.jpg" alt="Fallback image"> </picture> </syntaxhighlight> == 高级嵌入技术 == === SVG 矢量图形 === 直接嵌入可缩放的矢量图形: <syntaxhighlight lang="html"> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" fill="red" /> </svg> </syntaxhighlight> 数学公式示例(需浏览器支持MathML): <math> <mrow> <mi>x</mi> <mo>=</mo> <mfrac> <mrow> <mo>-</mo> <mi>b</mi> <mo>±</mo> <msqrt> <msup><mi>b</mi><mn>2</mn></msup> <mo>-</mo> <mn>4</mn><mi>a</mi><mi>c</mi> </msqrt> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow> </mfrac> </mrow> </math> == 安全考量 == 嵌入外部内容时需注意: * 使用<code>sandbox</code>属性限制iframe权限 * 为所有嵌入内容设置<code>alt</code>或<code>title</code>属性 * 验证媒体文件来源防止XSS攻击 * 考虑使用<code>loading="lazy"</code>延迟加载非关键资源 == 实际应用案例 == '''电商产品展示'''组合使用多种嵌入技术: <syntaxhighlight lang="html"> <div class="product-gallery"> <!-- 主图使用picture元素适配不同屏幕 --> <picture> <source media="(min-width: 768px)" srcset="product-large.jpg"> <img src="product-small.jpg" alt="Wireless Headphones"> </picture> <!-- 产品视频演示 --> <video controls width="300"> <source src="product-demo.mp4" type="video/mp4"> </video> <!-- 3D展示通过iframe嵌入 --> <iframe src="/3d-viewer?id=123" title="3D Product View"></iframe> </div> </syntaxhighlight> == 浏览器兼容性 == {| class="wikitable" |+ 主要元素支持情况 ! 元素 !! Chrome !! Firefox !! Safari !! Edge |- | <code><nowiki><img></nowiki></code> || 1.0+ || 1.0+ || 1.0+ || 12+ |- | <code><nowiki><video></nowiki></code> || 3.0+ || 3.5+ || 3.1+ || 12+ |- | <code><nowiki><picture></nowiki></code> || 38+ || 38+ || 9.1+ || 13+ |} 注:完整兼容性数据需参考 [https://caniuse.com Can I Use] 等资源 [[Category:编程语言]] [[Category:HTML]] [[Category:HTML图像与多媒体]]
摘要:
请注意,所有对代码酷的贡献均被视为依照知识共享署名-非商业性使用-相同方式共享发表(详情请见
代码酷:著作权
)。如果您不希望您的文字作品被随意编辑和分发传播,请不要在此提交。
您同时也向我们承诺,您提交的内容为您自己所创作,或是复制自公共领域或类似自由来源。
未经许可,请勿提交受著作权保护的作品!
取消
编辑帮助
(在新窗口中打开)