zoukankan      html  css  js  c++  java
  • html5 新增的页面 元素

    figure 和 figcaption元素
    test.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    
    <body>
    <form>
        <figure>
            <img src="海豚.png"  alt="海豚"></img>
            <img src="火烈鸟.png"  alt="火烈鸟"></img>
            <img src="鹿鹿.png"  alt="鹿鹿"></img>
            <figcaption>动物</figcaption>
        </figure>
    </form>
    </body>
    </html>
    
    

    图片

                                     

    效果:

     detail和summary元素

    test.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    
    <body>
    <script>
        function detail_onclick(detail) {
             var p=document.getElementById("p");
             if(detail.open)  {
                   p.style.visibility='hidden';
             }else {
                 p.style.visibility="visible";
             }
    
    
        }
    
    
    </script>
    <details id="detail" onclick="detail_onclick(this)">
        <summary>战狼2</summary>
        <p id="p" style="visibility:hidden ">吴京自导自演的电影,是一部红遍全国的动作片,广受国人的好评,央视多次报道</p>
    </details>
    </body>
    </html>

    效果:

     mark元素

    test.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    
    <body>
    <p>这是用来测试<mark>mark</mark>元素的例子</p>
    </body>
    </html>

    效果:

        

     meter

    test.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    
    <body>
    <meter  value="45"  min="0"  max="100"  low="10" high="90" optimum="60"> </meter>
    </body>
    </html>
    效果:


    2017-09-03 12:18:15
     
  • 相关阅读:
    Revit命令之平面区域
    Revit平面视图控制
    电动手摇两用风机Revit族模型
    中田麻吉
    传递项目标准工具
    Sketchup机电专业BIM插件EngeeringToolBox
    机电专业协同模式
    lumion2.5下载及破解安装详细过程
    人防工程空调设计规范
    BIM软件之BIMsight
  • 原文地址:https://www.cnblogs.com/guangzhou11/p/7469273.html
Copyright © 2011-2022 走看看