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. Java中使用Redis的几种数据类型总结
			
    1.String,最基本的类型 方法  set.get 2.hash redis 127.0.0.1:6379> HMSET user:1 username redis.net.cn passw ...
    
			
    2. 
						
  2. edusoho 支持同一账号多人同时登录
			
    文件: ./src/Topxia/WebBundle/Listener/UserLoginTokenListener.php 函数: public function onGetUserLoginLis ...
    
			
    3. 
						
  3. Catalan numbers
			
    w https://en.wikipedia.org/wiki/Catalan_number 路径规划
    
			
    4. 
						
  4. ImageView的src与background及ScaleType
			
    1 概述 开发中经常使用Imageview的src和background属性,从字面上看src是路径,background是背景.二者都可以显示drawable或者颜色.设置drawable图片资源时 ...
    
			
    5. 
						
  5. MongoDB学习【二】—MongoDB基础和数据类型
			
    一.MongoDB基础知识 在MongoDB中相关术语的解释和sql术语对应关系 SQL术语/概念 MongoDB术语/概念 解释/说明 database database 数据库 table col ...
    
			
    6. 
						
  6. Java 位运算超全面总结
			
    1.原码.反码.补码 关于原码.反码.补码的相关知识作者不打算在这里长篇大论,相关知识已有别的大佬总结很好了,还请老铁自行 Google,不过有篇知乎回答是作者学编程以来见过对相关知识最通俗易懂,生动 ...
    
			
    7. 
						
  7. curl 使用 post 请求，传递 json 参数，下载文件
			
    curl -X POST http://ip:8888/nacos/v1/cs/file/download -H "Accept: application/octet-stream" ...
    
			
    8. 
						
  8. nginx下使用asan和valgrind两个静态检查工具
			
    1.valgrind valgrind安装:参考:https://blog.csdn.net/justheretobe/article/details/52986461 wegit:http://va ...
    
			
    9. 
						
  9. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_01 File类_3_绝对路径和相对路径
			
    
			
    10. 
						
  10. Spring Boot 之 Redis
			
    一.pom.xml引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifac ...
    
			
    11.