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=""  min=""  max=""  low="" high="" optimum=""> </meter>

</body>

</html>




效果：


2017-09-03  12:18:15
 
												


											
html5 新增的页面 元素的更多相关文章
	

    
								
  1. 【原】HTML5 新增的结构元素——能用并不代表对了
		
    做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.html ...
    
		
    2. 
						
  2. HTML5 增强的页面元素
		
    一.HTML5 改良的 input 元素的种类 1.<input type="number" id="num1"> var n1 = documen ...
    
		
    3. 
						
  3. html5实现本页面元素拖放和本地文件拖放
		
    HTML5拖放 拖放本地数据   1.HTML拖放 拖放(Drag 和 Drop)是HTML5标准的组成部分 2.拖放开始: ondragStart:调用了一个函数,drag(event),它规定了被 ...
    
		
    4. 
						
  4. html5--select与HTML5新增的datalist元素
		
    html5--select与HTML5新增的datalist元素 学习要点 掌握select元素与datalist元素的使用 select元素 用来建立一个下拉菜单选项列表 不仅可以在表单中使用,还可 ...
    
		
    5. 
						
  5. HTML5新增的结构元素
		
    HTML5的结构 一:新增的主体结构元素 在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉,页脚内容区块等文档结构相关联的结构元素. 1.1article元素 article元素代表文档 ...
    
		
    6. 
						
  6. 疯狂的表单-html5新增表单元素和属性
		
    疯狂的表单 2015/11/27 16:44:07 从三方面来介绍html5表单的新特性 表单结构更灵活 要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只 ...
    
		
    7. 
						
  7. [html5] 学习笔记-html5增强的页面元素
		
    在 HTML5 中,不仅增加了很多表单中的元素,同时也增加和改良了可以应用在整个页面中的元素.重点包含 figure.figcaption.details.summary.mark.progress. ...
    
		
    8. 
						
  8. html5新增的主体结构元素
		
    1.  article 主体结构元素 通常是一篇文章.一个页面.一个独立完整的内容模块一般会带个标题,并放在 header 标签中,article 元素可以互相嵌套,使用频率极高,强调独立性,多注意下 ...
    
		
    9. 
						
  9. 如何让老式浏览器支持html5新增的语义元素
		
    html5新增加了一些语义元素,如header, footer, nav, aritcle, aside,等等. 然而,有些老款浏览器无法识别这些元素,会把它们当成 inline 元素对待,这会导致一 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. SQL 多表查询的几种连接方式
			
    --创建数据库 create database GoodsSystem go --使用数据库 use GoodsSystem go --创建商品类型表 create table GoodsType ( ...
    
			
    2. 
						
  2. 北风设计模式课程---开放封闭原则（Open Closed Principle）
			
    北风设计模式课程---开放封闭原则(Open Closed Principle) 一.总结 一句话总结: 抽象是开放封闭原则的关键. 1."所有的成员变量都应该设置为私有(Private)& ...
    
			
    3. 
						
  3. React-Native 之 GD （四）使用通知方式隐藏或显示TabBar
			
    1.GDHalfHourHot.js  发送通知 /** * 近半小时热门 */ import React, { Component } from 'react'; import { StyleShe ...
    
			
    4. 
						
  4. 高通Camera bring up软件流程【转】
			
    本文转载自:http://blog.csdn.net/liwei16611/article/details/51279658 高通camera bring up分为两种类型:YUV和bayerbrin ...
    
			
    5. 
						
  5. linux安装 redis
			
    通过源码编译安装 1.下载源码包 wget http://download.redis.io/releases/redis-4.0.10.tar.gz 2.解压缩redis tar -zxf redi ...
    
			
    6. 
						
  6. ssh连接MAC服务器显示No route to host解决方法
			
    首先MAC操作系统是10 其它电脑通过ssh访问一台mac服务器时,有时候可以登录进去,有显示显示no route to host 并且通过浏览器访问布署在mac上的jenkins,反应奇慢,后来做了 ...
    
			
    7. 
						
  7. 字符串中的TOUPPER函数
			
    std::string& str_toupper(std::string& s) { std::transform(s.begin(), s.end(), s.begin(), []( ...
    
			
    8. 
						
  8. c# WPF——完成一个简单的百度贴吧爬虫客户端
			
    话不多说先上图 爬取10页大概500个帖子大概10s,500页2w多个帖子大概2min,由此可见性能并不是特别好,但是也没有很差. 好了话不多说,我们来一步一步实现这么个简易的客户端. 1.创建项目  ...
    
			
    9. 
						
  9. Tornado 的核是什么??
			
    Tornado 的核心是 ioloop 和 iostream 这两个模块,前者提供了一个高效的 I/O 事件循环,后 者则封装了 一个无阻塞的 socket .通过向 ioloop 中添加网络 I/O ...
    
			
    10. 
						
  10. POJ3321[苹果树] 树状数组/线段树 + dfs序
			
    Apple Tree Time Limit: 2000MS   Memory Limit: 65536K Total Submissions:39452   Accepted: 11694 Descr ...
    
			
    11.