Home > Web Front-end > H5 Tutorial > body text

A brief discussion on which page elements h5 enhances

php中世界最好的语言
Release: 2018-01-09 10:16:31
Original
2059 people have browsed it

Today I will give you a brief talk about which page elements h5 has enhanced. Friends who need it can save the notes.

<!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


I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Detailed explanation of vue.js syntax and common instructions

How to count table sum in bootstrap Quantity

How to implement vue.js todolist

The above is the detailed content of A brief discussion on which page elements h5 enhances. For more information, please follow other related articles on the PHP Chinese website!

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
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!