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 条评论
登录 后参与评论

相关文章

来自专栏机器学习算法与Python学习

Python:爬虫系列笔记(8) -- 爬去MM图片

转载于:静觅 » Python爬虫实战四之抓取淘宝MM照片 链接:http://cuiqingcai.com/1001.html 1.抓取淘宝MM的姓名,头像,...

3916
来自专栏Huramkin的归档库

好用的批量扫米工具DomainMegaBot

项目地址 https://github.com/Har-Kuun/DomainMegaBot

511
来自专栏Java成神之路

博客园_01_为博客园添加目录的方法总结

本文转自:作者:妙音天女    地址:http://www.cnblogs.com/xuehaoyue/p/6650533.html

572
来自专栏Youngxj

在线可视化编辑源码

2633
来自专栏用户2442861的专栏

QLineEdit 输入验证(相关的设置)

LineEdit提 供一个文字输入栏位,可以输入文字或数字,我们可以对输入作验证,或是设定为一般显示、密码显示等等,以下的程式是个简单的设定示范:

532
来自专栏进击的君君的前端之路

AMD、CMD、RequireJS

873
来自专栏酷玩时刻

微信公众号开发之自定义菜单

在Jfinal-weixin中有封装菜单的创建、查询、删除、以及个性化菜单的创建、查询、删除、测试个性化菜单匹配结果

522
来自专栏Java成神之路

为博客园添加目录的方法总结

参考链接: http://www.cnblogs.com/xdp-gacl/p/3718879.html#2937655 http://www.cnblog...

682
来自专栏落影的专栏

iOS开发笔记(七)

正文 这次分享三个有意思的问题:二维码生成、Xcode8单元测试的问题、添加新字体。 二维码生成 iOS平台上的二维码生成有很多第三方库,也可以使用原生的方法,...

3639
来自专栏极客慕白的成长之路

ACM札记之一

输入n(n<=100)个整数,按照绝对值从大到小排序后输出。题目保证对于每一个测试实例,所有的数的绝对值都不相等。

782

扫描关注云+社区