Maison > Article > interface Web > Une brève discussion sur les éléments de page améliorés HTML5

Une brève discussion sur les éléments de page améliorés HTML5

黄舟original: 2017-02-24 14:11:181372parcourir

Une brève discussion sur les éléments de page améliorés HTML5

<!DOCTYPE html>  

    <html>  

        <head>  

            <meta charset="UTF-8">  

            <title>浅谈html5增强的页面元素</title>  

        </head>  

        <body>  

            <!--figure与figcaption:带有可选标题的元素组合-->  

            <figure>  

                <img src="img/QQ截图20160103144626.png"  alt="图片"/>  

                <img src="img/webp.jpg" alt="图片" width="211" height="191"/>  

                <figcaption>我的图片组合</figcaption>  

            </figure><br />  

            <!--detail与summary元素：用于标示该元素内部的子元素可以展开收缩显示-->  

            <details id="details" ontoggle="detailfn(this)" style=" cursor: pointer;" >  

                <summary>精武风云</summary>  

                <p id="p" style="visibility: hidden;">陈真（甄子丹 饰）当年为报杀师之仇，独闯虹口道场。。。</p>  

            </details><br />  

            <!--mark:突出显示或高亮显示-->  

            <mark>html5</mark>的高亮显示<br />  

            <!--progress:进度条-->  

            <section>  

                <h2>progress元素的使用实例</h2>  

                <p>完成的百分比<progress id="p" max="100"><span>0</span>%</progress> </p>  

            </section><br />  

            <!--meter:规定范围内的数量值--->  

            <p>磁盘使用量：<meter value="40" min="0" max="160">40/160</meter>GB</p><br />  

            <!--dialog:对话框，默认隐藏，js控制-->  

            <input type="button" value="打开对话框"  onclick="document.getElementById(&#39;dg&#39;).show();"/>  

            <input type="button" value="打开对话框showModal" onclick="document.getElementById(&#39;dg&#39;).showModal();" />  

            <dialog id="dg" style="width:15%;text-align: center;">  

                  <form>  

                     <label for="txtName" value="用户名："></label>  

                     <input type="text"  id="txtName"/><br />  

                     <label for="pwd" value="密码："></label>  

                     <input type="text"  id="pwd"/><br />  

                     <input type="button" value="登录" />  

                     <input type="button" value="关闭" onclick="document.getElementById(&#39;dg&#39;).close();" />  

                  </form>  

            </dialog><br /><hr />  

            <!--改良的a元素：download属性直接下载-->  

            <a href="img/QQ截图20160103144626.png" download="文件名"><img src="img/QQ截图20160103144626.png" /> </a><br />  

            <!--ol:改良的 start与reversed属性：自定义开始编号与反编号-->  

            <h3>start与reversed实例</h3>  

            <ol start="5" reversed="">  

                <li>内容1</li>  

                <li>内容2</li>  

                <li>内容3</li>  

                <li>内容4</li>  

                <li>内容5</li>  

            </ol><br />  

            <!--dl:定义术语列表： dt表示术语，dd表示定义-->  

            术语解释：   

            <dl>  

                <dt>rss</dt>  

                <dt>rss也叫聚合rss是在线共享内容的一种简易方式（也叫聚合内容）</dt>  

            </dl><br />  

            <!--cite:表示作品-->  

            <p>最近上映的<cite>美国队长3</cite> 这个电影不错！</p><br />  

            <!--iframe:sandbox属性添加限制增强安全性-->  

            <!--script:async与defer属性加快加载速度-->  

        </body>  

    </html>

Ce qui précède est une brève discussion sur les éléments de page améliorés HTML5 Éléments de la page Contenu, veuillez faire attention au site Web PHP chinois (www.php.cn) pour plus de contenu connexe !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple de code pour dessiner des rectangles et des cercles sur un canevas HTML5Article suivant：Exemple de code pour dessiner des rectangles et des cercles sur un canevas HTML5

Articles Liés

Voir plus