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. rman备份/恢复
			
    全备脚本 cat rman_full.sh #!/bin/bash export ORACLE_BASE=/opt/oracle export ORACLE_HOME=$ORACLE_BASE/pro ...
    
			
    2. 
						
  2. CSS3实现图片黑白滤镜居中，hover缩放遮罩的效果
			
       hover: 在前端开发中经常会遇到项目展示,往往会采用卡片方式来描述.众多网站中,普遍采用CSS3的scale()方法来实现交互. 本文即是利用纯CSS实现图片居中缩放,此类方法各大网站均有应 ...
    
			
    3. 
						
  3. c# html 转Word--Spire.Doc
			
    利用 Spire.Doc 组件,NuGet搜索“FreeSpire.Doc”有个免费版. using System;using System.Collections.Generic;using Sys ...
    
			
    4. 
						
  4. python 定时器，轮询定时器
			
    首先想要实现的效果是:每隔1段时间,就去调用1个接口确认结果,直到接口返回的结果为true,停止调用 所以这里会用到python的定时器 先来了解最简单的定时器: python 定时器默认定时器只执行 ...
    
			
    5. 
						
  5. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_02 递归_3_练习_使用递归计算阶乘
			
    结束条件是乘到 当前数字等于1
    
			
    6. 
						
  6. shell脚本一一项目6
			
    主题:获取网卡的流量 ifconfig 查看流量 文件流量数据量 脚本内容 #!/bin/bash#name: mark# check network dev's liuliangnic=$1 ech ...
    
			
    7. 
						
  7. delphi中如何实现文件的复制？
			
    http://zhidao.baidu.com/link?url=nyAzCpeXAbaT8M3qqAePCF1Zr7q-oK4hpAUNIaRYpHcbmIwYsLr1TXoTt8759HtR1EB ...
    
			
    8. 
						
  8. Delphi MlSkin V1.1 发布啦！ 它能让你的程序拥有像QQ一样多彩炫丽的外观！
			
    http://bbs.csdn.net/topics/390740239 本帖最后由 u014161811 于 2014-03-24 09:46:40 编辑 QQ皮肤透明TEdit透明TMemo图片按 ...
    
			
    9. 
						
  9. arduino相关文献阅读
			
    首推这个 https://wenku.baidu.com/view/e657b1f0bcd126fff6050baf.html 用Arduino IDE开发程序流程 当程序编写好之后,关闭前需要将文件 ...
    
			
    10. 
						
  10. clinical-逻辑核查数据的操作
			
    1. 前端页面样式 2. 前端代码 添加: 展示: 修改 删除 3. 后台代码 封装的DAO类数据 # coding: utf-8 from pdform.services.db.dbCore imp ...
    
			
    11.