HTML 如何使用Google AMP Amp-Accordion创建隐藏的标题

Google AMP（Accelerated Mobile Pages）是一个开源框架，旨在创建加载快速且适用于移动设备的网页，而amp-accordion是AMP库中的一个组件，允许在网页上使用可折叠的内容部分。Google提供了加速移动页面（AMP）框架，允许您创建用户可以打开和关闭的隐藏内容。

步骤

在文件开头使用声明来声明一个新的HTML5文档。
在元素内部，添加⚡属性，以指示这是一个AMP HTML文档。
在元素内部，添加具有charset属性设置为”utf−8″的元素。
使用title元素设置文档标题。
添加一个link元素，其中rel属性设置为”canonical”，href属性设置为文档的规范URL。
添加一个具有name属性设置为”viewport”的meta元素，content属性设置为”width=device−width,minimum−scale=1,initial−scale=1″。这将将视口宽度设置为设备的宽度，并将初始缩放设置为1。
添加一个具有src属性设置为”https://cdn.ampproject.org/v0.js”的script元素，以引用AMP JavaScript库。使用async属性异步加载脚本。
添加一个具有amp-custom属性的style元素，用于为文档定义自定义CSS样式。这是您可以添加任何要与AMP一起使用的自定义样式的地方。
在元素内部，添加文档的可见内容。
使用<amp−accordian>元素创建一个手风琴。在<amp−accordian>元素内部添加一个或多个<section>元素。每个<section>应包含一个标题（<h2>）和内容（<div>）。
将文档另存为.html文件扩展名，并在Web浏览器中打开以查看结果。

例子

<!doctype html>
<html amp lang="en">
    <head>
        <meta charset="utf-8">
        <title>AMP accordion</title>
        <link rel="canonical" href="self.html">
        <meta name="viewport" content="width=device-width">
        <script async src="https://cdn.ampproject.org/v0.js"></script>
        <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></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>
        <style amp-custom>
            /* Custom css */
        </style>
    </head>
    <body>
        <div class="container">
            <amp-accordion class="myaccordion">
                <section expanded>
                    <h3>Header</h3>
                    <div class="content">
                        Welcome to Tutorialspoint.
                    </div>
                </section>
                <section>
                    <h3>Header 2</h3>
                    <div class="content"> 
                       <a href="https://www.tutorialspoint.com/index.htm">Go to Tutorialspoint</a>
                    </div>
                </section>
            </amp-accordion>
        </div>
    </body>
</html>

我们已经在上面显示的HTML标记中添加了所需的AMP样板代码，页面的标题和一个包含一个部分的amp-accordion组件。部分中包含一个标题和一个包含隐藏文本的div。

CSS代码

我们可以为部分中的元素添加一些自定义的CSS样式，使我们的隐藏标题显示得更好看。

示例

body {background: #f2f2f2;font-family: Arial, Helvetica, sans-serif;}
            .container {max-width: 700px; margin: 0 auto;}
            .myaccordion {background: #ffffff;margin: 30px;}
            .myaccordion section h3 {padding: 1rem;background:  #fbfbfb;font-size: .9rem;}
            .myaccordion section .content {padding: 1rem;}

结论

在您的移动网页上，使用Google AMP amp-accordion组件是一种很棒的方法来添加隐藏的标题。通过按照本文中的说明，您可以创建一个完全功能的隐藏标题，用户可以切换打开和关闭。通过包含您自己的CSS样式，您还可以进一步改变隐藏标题的外观和感觉。总的来说，Google AMP框架提供了一系列强大的元素，可帮助您构建快速、响应式和有趣的移动网站。