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. Qt 之 ZIP开源库 QuaZIP
			
    2013-10-31 21:46 10856人阅读 评论(0) 收藏 举报  分类: Qt(12)  版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+]   一.简介      ...
    
			
    2. 
						
  2. 构建嵌入式Linux交叉编译工具链
			
    开源交叉编译工具链制作方法汇总: 1) 使用crosstool/crosstool-ng生成 2) 使用buildroot生成 ARM交叉编译工具链说明: 1) arm-linux-gcc是一个集合命 ...
    
			
    3. 
						
  3. MySQL慢日志分析之pt-query-digest
			
    http://www.php.cn/mysql-tutorials-357655.html 监控慢日志: pt-query-digest 切割分析慢日志 anemometer 删掉垃圾查询 pt-ki ...
    
			
    4. 
						
  4. P1080国王游戏
			
    传送 最大值最小什么的一看就是二分了qwq 然鹅并不知道怎么检查,所以我们换个思路 我们要求出最小的最大值,这肯定和大臣的排列有关,会不会有什么规律? 先看看只有两个大臣的情况 排列:1 2,ans1 ...
    
			
    5. 
						
  5. xcode archive灰色,无法打包的解决办法
			
    问题如图: 解决办法:目前的运行配置是使用模拟器,改成“iOS Device”即可 step1: step2: 修改后archive选项变为黑色,可点击状态了
    
			
    6. 
						
  6. Jmeter响应中中文乱码怎么解决？
			
    在jmeter的bin目录下有一个jmeter.properties的文件,打开它,搜索sampleresult.default.encoding,把它的注释打开,也就是把最前面的#去掉,改成samp ...
    
			
    7. 
						
  7. Jmeter之Switch Controller
			
    在测试过程中,各种不同的情况需要执行不同的操作,这个时候用if控制器比较麻烦,此时就可以使用Switch Controller代替. 一.界面显示 二.配置说明 1.名称:标识 2.注释:备注 3.S ...
    
			
    8. 
						
  8. mooc-IDEA 项目/文件之间跳转--002
			
    二.IntelliJ IDEA -项目之间跳转 1.Next Project Window :跳转到下一个项目 [ ctrl+alt+) ] 2.Previous Project Window:跳转到 ...
    
			
    9. 
						
  9. 将查询列表内容保存到excel表格中，并保存到相应的盘中
			
    1.先导入相应的jar包 2.一个小的Demo测试[实体类+测试类:保存excel的方法] Student实体类 public class Student{ private int id; priva ...
    
			
    10. 
						
  10. SpringBoot官方文档学习（二）使用Spring Boot构建系统
			
    强烈建议您选择一个支持依赖关系管理并且可以使用发布到“ Maven Central”仓库的构建系统.我们建议您选择Maven或Gradle.其他构建系统(例如,Ant)也可以和Spring Boot一 ...
    
			
    11.