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

相关文章

来自专栏移动端开发

事件分发机制

前言总结:     iOS的事件可以大概分为三种类型,我们会对这三种类型分别做一些介绍说明,先总结一下:     1.  Milti-Touch Events ...

24780
来自专栏非著名程序员

基础篇章:关于 React Native 之 ListView 组件的讲解

? (友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 我们讲完ScrollView组件,其实...

21080
来自专栏吴裕超

实现图片懒加载

Web 图片的懒加载就是通过读取img元素,然后获得img元素的data-src(也可以约定为其他属性名)属性的值,并赋予img的src,从而实现动态加载图片的...

38040
来自专栏hightopo

基于HTML5 Canvas 实现弹出框

34830
来自专栏HT

基于HTML5 Canvas 实现弹出框

  用户鼠标移入时,有弹出框出现,这样的需求很常见。这在处理HTML元素实现时简单,但是如果是对 HTML5 Canvas 构成的图形进行处理,这种方法不再适用...

72770
来自专栏沈唁志

WordPress博客网站下雪特效

22330
来自专栏MixLab科技+设计实验室

字符画生成01

14410
来自专栏Google Dart

Flutter 构建完整应用手册-设计基础知识 顶

这本食谱包含演示如何在写Flutter应用程序时解决常见问题的食谱。 每个配方都是独立的,可以作为参考帮助您构建应用程序。

14110
来自专栏阮一峰的网络日志

React 入门实例教程

现在最热门的前端框架,毫无疑问是 React 。 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度...

43970
来自专栏GIS讲堂

OL3+中链家地图找房功能实现

看看链家的地图找房功能,其实比较简单,主要包涵: 1)基于行政区划的统计展示; 2)分级别展示,逐级钻取。

25430

扫码关注云+社区

领取腾讯云代金券