gpt4 book ai didi

amp-html - 直接从示例粘贴时出现放大器验证错误

转载 作者:行者123 更新时间:2023-12-03 23:22:48 25 4
gpt4 key购买 nike

我正在尝试使用 Google 的 Amp 制作我网站的新移动版本。在官方网站上,他们列出了其使用示例。我复制并粘贴了 herehere 中的代码以创建:

<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s
1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-
ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-
start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-
start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-
start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-
start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-
start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-
start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style
amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-
animation:none;animation:none}</style></noscript>
</head>
<body>
<h1>Welcome to the mobile web</h1>
<!-- <button class="hamburger" on='tap:sidebar1.toggle'></button> -->
<amp-sidebar id='sidebar1' layout='nodisplay'>
<ul>
<li> Nav item 1</li>
<li> Nav item 2</li>
<li> Nav item 3</li>
<li> Nav item 4</li>
<li> Nav item 5</li>
<li> Nav item 6</li>
<li> Nav item 7</li>
<li> Nav item 8</li>
<li> Nav item 9</li>
<li on="tap:sidebar1.close"> Close</li>
</ul>
</amp-sidebar>
</body>
</html>

在控制台中,我收到验证错误“标签 'li' 中的属性 'role' 丢失或不正确,但属性 'on' 需要。”和“标签‘li’中的‘tabindex’属性缺失或不正确,但属性‘on’需要。”

这直接取自示例,未经修改。我是否注释掉或删除切换按钮都没有关系。我还有一个更详细的例子,它也有验证错误。错误行指向在点击时关闭侧边栏的最后一个 li 元素。

有任何想法吗?

最佳答案

如果您将 on 属性放在通常不可点击的元素上(如 abutton 元素),出于可访问性的原因,您需要在该元素上放置一个 aria rolerole=button

关于amp-html - 直接从示例粘贴时出现放大器验证错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44473913/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com