1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. 	<meta http-equiv="content-type" content="text/html; charset=utf-8">
  5. 	<title>Html5Test</title>
  6. 	<style>
  7. 		section{
  8. 			margin: 30px 0;
  9. 		}
  10. 	</style>
  11. </head>
  12. <body>
  13. 	<header>
  14. 		<hgroup>
  15. 			<h1>html5Tag</h1>
  16. 		</hgroup>
  17. 	</header>
  18. 	<nav></nav>
  19. 	<article>
  20. 		<header></header>
  21. 		<section>
  22. 			<command onclick="javascript:alert('hello world')">hello</command>
  23. 		</section>
  24. 		<section>
  25. 			<details>
  26. 				<summary>总得来说</summary>
  27. 				<p>总得来说的详细叙述</p>
  28. 			</details>
  29. 		</section>
  30. 		<section>
  31. 			<input type="text" list="books">
  32. 			<datalist id="books">
  33. 				<option value="三生三世十里桃花"></option>
  34. 				<option value="三生三世枕上书"></option>
  35. 				<option value="三生三世步生莲"></option>
  36. 			</datalist>
  37. 		</section>
  38. 		<section>
  39. 			<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  40. 			<input type="range" id="a" value="50">100
  41. 			+<input type="number" id="b" value="50">
  42. 			=<output name="x" for="a b"></output>
  43. 			</form>
  44. 			<p><b>注释：</b>Internet Explorer 不支持 <output> 标签。</p>
  45. 		</section>
  46. 		<section>
  47. 			<input type="month">
  48. 			<p><b>注释：</b>仅支持chrome内核的浏览器 <month> 标签。</p>
  49. 		</section>
  50. 		<section>
  51. 			<h2>可编辑列表</h2>
  52. 			<ul contenteditable="true">
  53. 				<li>这是列表</li>
  54. 				<li>这是列表</li>
  55. 				<li>这是列表</li>
  56. 				<li contenteditable="false">这个<mark>不可</mark>编辑</li>
  57. 			</ul>
  58. 		</section>
  59. 		<section>
  60. 			<figure>
  61. 				<img src="#" alt="Image">
  62. 				<figcaption>图片标题</figcaption>
  63. 			</figure>
  64. 			<p><b>注释：</b>figure元素表示的内容通常可以是图片、统计图、代码，也可以是音视频、统计表格等。figcaption表示其标题。</p>
  65. 		</section>
  66. 		<section>
  67. 			<p>
  68. 				进度为：<progress id="p" value="0"><span>0</span>%</progress>
  69. 			</p>
  70. 			<input type="button" value="开始加载进度" onclick="startUpdate();">
  71. 			<script>
  72. 				var progressBar = document.getElementById('p');
  73. 				var si = null;
  74. 				function startUpdate(){
  75. 					if(si) {
  76. 						clearInterval(si);
  77. 						si = null;
  78. 					}
  79. 					progressBar.value = 0;
  80. 					progressBar.childNodes[0].textContent = 0;
  81. 					si = setInterval(function(){
  82. 						var nowV = parseInt(progressBar.textContent);
  83. 						if (nowV >= 100) {
  84. 							clearInterval(si);
  85. 							si = null;
  86. 						}else{
  87. 							progressBar.value = ++nowV / 100;
  88. 							progressBar.childNodes[0].textContent = nowV;
  89. 						}
  90. 					}, 100);
  91. 				}
  92. 			</script>
  93. 		</section>
  94. 		<section>
  95. 			<p>磁盘使用量：<meter value="40" min="0" max="160">40/160</meter>GB</p>
  96. 			<p>你的得分是：<meter value='91' min='0' max='100' low='40' high='90' optimum='100'>A+</meter></p>
  97. 			<!-- 若不使用属性会影响进度条的显示 -->
  98. 			<meter>80%</meter>
  99. 			<meter>3/4</meter>
  100. 			<!-- 可以不在标签内填数值，会以进度条显示 -->
  101. 			<meter min='0' max='100' value='70'></meter>
  102. 		</section>
  103. 		<footer></footer>
  104. 	</article>
  105. 	<aside></aside>
  106. 	<footer></footer>
  107. </body>
  108. </html>

HTML5标签学习笔记的更多相关文章

  1. HTML5标签总结笔记

    HTML5标签笔记 1.格式标签 元素名和属性一般不区分大小写,特殊的如id和class需要区分 格式标签: <acronym> 定义只取首字母的标签 <abbr>定义缩写 & ...

  2. html5/css学习笔记

    请始终将正斜杠添加到子文件夹.假如这样书写链接:href="http://www.w3cschool.cc/html",就会向服务器产生两次 HTTP 请求.这是因为服务器会添加正 ...

  3. HTML5硕士学习笔记

    如今,该集团经过培训的同事给大家HTML5,他出席了两个5训练日,大概过一次给我们,在一个很形象.同事们更感兴趣的是. 课后共享所有的课件.在热情的新技术,我想工作有一个良好的早晨,我决定重新学习课件 ...

  4. HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

  5. HTML5+CSS3学习笔记（一）

    HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...

  6. HTML5+CSS3学习笔记（一） 概述

    HTML5+CSS3概述      HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就 ...

  7. 46.前端html5标签学习

    HTML:TR  TD  TH  OL  UL  LI 这几个标签要区别 一.什么是HTML: 超文本标记语言(HyperText Markup Language),标准通用标记语言下的一个应用: 是 ...

  8. HTML5 canvas学习笔记（一）

    canvas是HTML5中新增的标签,下面是各浏览器的支持程度: canvas的默认大小为:宽-300px,高-150px(注意:画布的大小作为canvas标签的行内样式设置,而且是没有“px”单位的 ...

  9. HTML5标签学习之~~~

    <article> 标签 article 字面意思为“文章”.在web页面中表现为独立的内容,如一篇新闻,一篇评论,一段名言,一段联系方式.这其中包括两方面,一为整个页面的主旨内容,另外就 ...

随机推荐

  1. javascript 时间格式化方法

    对jquery进行扩展的方法: //对时间格式化(jquery方法扩展) Date.prototype.Format = function (fmt) { //author: meizz var o ...

  2. telegram汉化和代理

    telegram在Ubuntu18.04的应用商店中可以一键下载. 1.注册:用国内手机号即可,就是验证码可能很慢. 2.汉化:关注zh-CN 频道,在点击其中的安装链接即可. 3.代理: 如果你使用 ...

  3. 正定矩阵(Positive-definite Matrix)

    原文链接 正定矩阵是自共轭矩阵的一种.正定矩阵类似复数中的正实数.定义:对于对称矩阵M,当且仅当存在任意向量x,都有 若上式大于等于零,则称M为半正定矩阵.正定矩阵记为M>0.也被称为正定二次型 ...

  4. xml中${}的使用含义(美元符号大括号，以Spring、ibatis、mybatis为例)

    项目中,经常会在xml中看到这样的写法: <properties resource="properties/database.properties"/> <dat ...

  5. JDK 动态代理 讨债实例

    现弄一个讨债接口 package cn.itcast.g_dongtaidaili; public interface Taozhai { void taozhai(); } 再弄一个讨债实现类 pa ...

  6. 图的m着色

    图的m着色 #include <bits/stdc++.h> using namespace std; int n, k, m, ans; struct node{ int m, colo ...

  7. lintcode_114_不同的路径

    不同的路径   描述 笔记 数据 评测 有一个机器人的位于一个 m × n 个网格左上角. 机器人每一时刻只能向下或者向右移动一步.机器人试图达到网格的右下角. 问有多少条不同的路径? 注意事项 n和 ...

  8. 用python写一个类似于linux中的tree

    import os filePath = 'g:/File' j = 0 # 查找的深度计数 def tree(filePath,j): dir_now = os.listdir(filePath) ...

  9. Python面向对象--高级（一）

    ## 属性的类型 - 属性可分为类属性和实例属性 - 实例属性可以通过在类中使用self定义,或者直接在类外部使用实例变量定义 class Person(object): def __init__(s ...

  10. 线程、进程、协程和GIL（三）

    上一篇文章介绍了:创建线程的两种方式.Event对象判断线程是否启动.利用信号量控制线程并发. 博客链接:线程.进程.协程和GIL(二) 这一篇来说说线程间通信的那些事儿: 一个线程向另一个线程发送数 ...