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. Netflow elasticflow
			
    http://itfish.net/article/27660.html https://github.com/robcowart/elastiflow/tree/master
    
			
    2. 
						
  2. C++模板声明与实现分开--由此想到的编译，链接原理
			
    参考了以下两篇文章: C++编译链接原理简介  语言程序编译过程 2 问题来源:当模板文件的实现与声明分开在不同文件中时,链接时会提示找不到相应模板函数,如下 一,编译和链接的大概原理: 1,编译,遍 ...
    
			
    3. 
						
  3. The MEAN stack is a modern replacement for the LAMP (Linux, Apache, MySQL, PHP/Python) stack
			
    w https://www.mongodb.com/blog/post/building-your-first-application-mongodb-creating-rest-api-using- ...
    
			
    4. 
						
  4. H5 刮图-刮一刮
			
    <!DOCTYPE html><html><head><style>*{margin:0;padding:0} </style></h ...
    
			
    5. 
						
  5. 图书-软件架构：《Design Patterns: Elements of Reusable Object-Oriented Software》（即后述《设计模式》一书）
			
    ylbtech-图书-软件架构:<Design Patterns: Elements of Reusable Object-Oriented Software>(即后述<设计模式&g ...
    
			
    6. 
						
  6. OpenStack 多节点纳管 vCenter 5.5
			
    目录 目录 测试环境 Nova 配置OpenStack 纳管 vCenter 虚拟机 Glance 配置OpenStack 纳管 vCenter 镜像 Cinder 配置OpenStack 纳管 vC ...
    
			
    7. 
						
  7. json模块：字符串与字典之间的转换--loads,dumps,load,dump
			
    一.json转化成字典: product.json文件:将该文件内容转换成python中字典,方法如下: 方法一:使用.loads(),先读后转换 import  json   #导入json, 注: ...
    
			
    8. 
						
  8. [USACO 2008 Jan. Silver]架设电话线 —— 最短路+二分
			
    一道图论的最短路题.一开始连最短路都没想到,可能是做的题太少了吧,完全没有思路. 题目大意: FJ的农场周围分布着N根电话线杆,任意两根电话线杆间都没有电话线相连.一共P对电话线杆间可以拉电话线,第i ...
    
			
    9. 
						
  9. Mac入门--如何使用brew安装多个PHP版本
			
    一 安装7.1 1. 安装PHP7.1 brew install php@7.1 2. 修改配置 php-fpm.conf,一般在/usr/local/etc/php下(如果php-fpm.conf中 ...
    
			
    10. 
						
  10. ElasticSearch 基础 1
			
    ElasticSearch 基础=============================== 索引创建 ========================== 1. RESTFUL APIAPI 基本 ...
    
			
    11.