HTML5标签学习笔记

<!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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏魂祭心

原 canvas绘制clock

4164
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2665
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3195
来自专栏一个爱瞎折腾的程序猿

sqlserver使用存储过程跟踪SQL

USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_s...

2070
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5576
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2586
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

32010
来自专栏菩提树下的杨过

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

25410
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2192

扫码关注云+社区