<!DOCTYPE html>

<html lang="zh-cn">

<head>

	<meta http-equiv="content-type" content="text/html; charset=utf-8">

	<title>Html5Test</title>

	<style>

		section{

			margin: 30px 0;

		}

	</style>

</head>

<body>

	<header>

		<hgroup>

			<h1>html5Tag</h1>

		</hgroup>

	</header>

	<nav></nav>

	<article>

		<header></header>

		<section>

			<command onclick="javascript:alert('hello world')">hello</command>

		</section>

		<section>

			<details>

				<summary>总得来说</summary>

				<p>总得来说的详细叙述</p>

			</details>

		</section>

		<section>

			<input type="text" list="books">

			<datalist id="books">

				<option value="三生三世十里桃花"></option>

				<option value="三生三世枕上书"></option>

				<option value="三生三世步生莲"></option>

			</datalist>

		</section>

		<section>

			<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

			<input type="range" id="a" value="50">100

			+<input type="number" id="b" value="50">

			=<output name="x" for="a b"></output>

			</form>

			<p><b>注释：</b>Internet Explorer 不支持 <output> 标签。</p>

		</section>

		<section>

			<input type="month">

			<p><b>注释：</b>仅支持chrome内核的浏览器 <month> 标签。</p>

		</section>

		<section>

			<h2>可编辑列表</h2>

			<ul contenteditable="true">

				<li>这是列表</li>

				<li>这是列表</li>

				<li>这是列表</li>

				<li contenteditable="false">这个<mark>不可</mark>编辑</li>

			</ul>

		</section>

		<section>

			<figure>

				<img src="#" alt="Image">

				<figcaption>图片标题</figcaption>

			</figure>

			<p><b>注释：</b>figure元素表示的内容通常可以是图片、统计图、代码，也可以是音视频、统计表格等。figcaption表示其标题。</p>

		</section>

		<section>

			<p>

				进度为：<progress id="p" value="0"><span>0</span>%</progress>

			</p>

			<input type="button" value="开始加载进度" onclick="startUpdate();">

			<script>

				var progressBar = document.getElementById('p');

				var si = null;

				function startUpdate(){

					if(si) {

						clearInterval(si);

						si = null;

					}

					progressBar.value = 0;

					progressBar.childNodes[0].textContent = 0;

					si = setInterval(function(){

						var nowV = parseInt(progressBar.textContent);

						if (nowV >= 100) {

							clearInterval(si);

							si = null;

						}else{

							progressBar.value = ++nowV / 100;

							progressBar.childNodes[0].textContent = nowV;

						}

					}, 100);

				}

			</script>

		</section>

		<section>

			<p>磁盘使用量：<meter value="40" min="0" max="160">40/160</meter>GB</p>

			<p>你的得分是：<meter value='91' min='0' max='100' low='40' high='90' optimum='100'>A+</meter></p>

			<!-- 若不使用属性会影响进度条的显示 -->

			<meter>80%</meter>

			<meter>3/4</meter>

			<!-- 可以不在标签内填数值，会以进度条显示 -->

			<meter min='0' max='100' value='70'></meter>

		</section>

		<footer></footer>

	</article>

	<aside></aside>

	<footer></footer>

</body>

</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. Ruby SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B:

    最近使用ruby-china的源连接不上 使用gem update遇到这个问题, 原来是ruby没有包含SSL证书,所以Https的链接被服务器拒绝. 解决方法很简单,首先在这里下载证书(http:/ ...

  2. Apache服务器开启gzip压缩的支持

    为什么要在服务器上开启压缩?其实,服务器上开启压缩,对整个网站的就是在服务器上把网页的内容压缩后传给客户端,客户端解压后再显示网页的内容.实际就是增加了服务器端和客户端的工作量,减少了网络传输的数据量 ...

  3. 【CCPC-Wannafly Winter Camp Day4 (Div1) H】命命命运（概率DP）

    点此看题面 大致题意: 有\(6\)个人玩大富翁,共有\(n\)块地,进行\(500\)轮,已知每个人掷骰子掷出\(1\sim6\)的概率.当某人到达一块未被占领的地时,他可以占领它.求最后每个人占有 ...

  4. Prim算法求最大权，POJ(2485)

    题目链接:http://poj.org/problem?id=2485 解题报告: 这里有一点要注意的是,第一个点时,dis数组还没有初始化,还全部为inf.第一次来到更新权时,才把邻接矩阵的数据存到 ...

  5. linq 查询的两种方法 (在EF model中实现)

    众所周知:linq查询有两种方式 1.通过linq表达式查询 2.是通过linq方法查询 代码中 每一步都有注释

  6. npy数据的保存与读取

    保存 利用这种方法,保存文件的后缀名字一定会被置为.npy x = numpy.save("data_x.npy",x) 读取 data = numpy.load("da ...

  7. 旧文备份:AVR读写EEPROM分析

    由于AVR的EEPROM写周期比较长(一般为毫秒级),因此在编程使用过程中要特别注意.对于读EEPROM没什么好说的,读一个字节的数据要耗费4个时钟周期,可以忍受,写就比较麻烦了,虽然放在EEPROM ...

  8. C#接口定义

    C#接口定义 C#不支持多重继承,但是客观世界出现多重继承的情况又比较多.为了避免传统的多重继承给程序带来的复杂性等问题,C# 提出了接口的概念.通过接口可以实现多重继承的功能.  继承该接口的类或结 ...

  9. 详解LinkedHashMap如何保证元素迭代的顺序

    大多数情况下,只要不涉及线程安全问题,Map基本都可以使用HashMap,不过HashMap有一个问题,就是迭代HashMap的顺序并不是HashMap放置的顺序,也就是无序.HashMap的这一缺点 ...

  10. 【赛时总结】 ◇赛时·II◇ AtCoder ABC-100

    ◆赛时·II◆ ABC-100 ■唠叨■ ABC终于超过百场比赛啦(毫不犹豫地参加).然后莫名其妙的好像是人很多,评测慢得不可理喻.然后我就--交了一大发--错误程序--然后B题就没了.最后的D题居然 ...