码迷,mamicode.com
首页 > Web开发 > 详细

html5 新增的页面 元素

时间:2017-09-03 13:29:53      阅读:381      评论:0      收藏:0      [点我收藏+]

标签:charset   for   hidden   document   font   value   get   com   span   

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
 

html5 新增的页面 元素

标签:charset   for   hidden   document   font   value   get   com   span   

原文地址:http://www.cnblogs.com/guangzhou11/p/7469273.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!