Home > Web Front-end > H5 Tutorial > A brief discussion on html5 enhanced page elements

A brief discussion on html5 enhanced page elements

黄舟
Release: 2017-02-24 14:11:18
Original
1404 people have browsed it

A brief talk about the page elements enhanced by 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>
Copy after login


The above is a brief talk about the page elements enhanced by html5, For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template