为了演示附加标记的样子,下面是将图像嵌入页面所需的代码: </amp-img...amp-img组件允许运行时以这种方式有效地管理图像资源。像所有外部获取的AMP资源一样,amp-img组件必须预先给出一个显式的大小(如宽度/高度),以便在不获取图像的情况下可以知道高宽比。...<amp-img alt="A view of the sea" src="/static/inline-examples/images/sea.jpg" width="900" height...="675" layout="responsive" > 支持的layout有:fill(填充),fixed(固定), fixed-height(固定高度), flex-item...nodisplay(不显示), responsive(自适应) 一般设置responsive即可 更多详情参考https://amp.dev/documentation/components/amp-img
因此,AMP HTML 就提供了一个自定义标签。 AMP 要求所有的图片资源必须使用,禁止使用。...这个自定义标签就实现了所有我们在加载图片上面所使用到的优化手段。 还有许多场景,比如仅允许异步资源,就是为了防止阻塞页面的渲染,AMP 不允许使用第三方脚本就是如此。...> ¥388.00 ¥140.00 免费 <amp-img
因此,AMP HTML 就提供了一个自定义标签。 AMP 要求所有的图片资源必须使用,禁止使用。...这个自定义标签就实现了所有我们在加载图片上面所使用到的优化手段。 还有许多场景,比如仅允许异步资源,就是为了防止阻塞页面的渲染,AMP 不允许使用第三方脚本就是如此。...> ¥388.00 ¥140.00 免费 <amp-img
例如,amp-img 标记可提供完整的 srcset 支持,即使在尚不支持该标记的浏览器中也是如此。 2.AMP JS AMP JS 库可确保快速渲染 AMP HTML 网页。...标签替换为了“”,且要有结束标记:“”。
因此,AMP HTML 就提供了一个自定义标签。AMP 要求所有的图片资源必须使用,禁止使用。...这个自定义标签就实现了所有我们在加载图片上面所使用到的优化手段。 还有许多场景,比如仅允许异步资源,就是为了防止阻塞页面的渲染,AMP 不允许使用第三方脚本就是如此。...class="tt__name">腾讯课堂 上面最主要就是用到了然后我们通过代理,在 chrome 中打开,在 url 末尾加上 #development=1...如果在 6s 之内滑动下去的话就会发现图片是有进行 layzload 处理的可以看到,仅仅通过 标签,AMP 就帮我们把所有与图片相关的优化都处理了,只要我们遵循 AMP 的规范来编码就可以了
部分 HTML 标签必须使用 AMP 自定义的组件来替换如 、 用 、 替换。...noscript>的相关代码; 更多 AMP HTML 相关说明,可移步 AMP HTML官方文档 2)AMP HTML 组件 自定义组件 AMP HTML 自定义5个组件: amp-ad、amp-embed、amp-img...使用相应的组件即可,如下: [1510652022173_1946_1510652093440.png] [1510652040954_896_1510652111585.jpg] amp-video amp-img...3975_1510652192898.jpg] AMP JS 负责协调资源的加载时机和优先级,让外部资源按不同顺序加载使得页面的主要内容优先加载;AMP JS 的resources模块根据元素优先级(amp-img
> /* any custom style goes here */ body { background-color: white; } amp-img
而如 img 或 video 这样的标签不能直接使用,需要替换成别的标签才能使用,如在 AMP 中需要替换成amp-img,在mip中替换成mip-img。...cdn.ampproject.org/v0.js">script> head> Sample documenth1> Some text amp-img> p> <amp-ad width=300 height=250 type="a9...IMG 换成了<em>amp-img</em>。 请注意:根据HTML5,它是一个Void元素,因此它没有结束标记。但是,确实有一个结束标记。 视频 换成了amp-video。 音频 换成了amp-audio。
引入图片amp-img【英译AMP】 参考资料https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup
Material design规范的前端框架 交互动效库 **AMP-HTML规范 使用受限HTML以及缓存技术来提高移动网络中静态内容的性能 添加自定义的元素代替禁用掉的元素:amp-audio, amp-img
例如,amp-img 标记可提供完整的 srcset 支持,即使在尚不支持该标记的浏览器中也是如此。 AMP 网页通过 HTML 标记被搜索引擎和其他平台 发现。
领取专属 10元无门槛券
手把手带您无忧上云