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

2198
来自专栏hightopo

基于 HTML5 Canvas 的工控机柜 U 位动态管理

1964
来自专栏Python小屋

Python使用tkinter打造自定义对话框完整代码

问题来源:前一阵发过一个技术文章Python编写抽奖式随机提问程序,其中有个弹出式对话框,好像上海科技大学宋老师在群里当时问了一句对话框中中奖姓名是否能显示的大...

4654
来自专栏谦谦君子修罗刀

react-native-swiper组件-横扫你的轮播图

一念起,万水千山。一念灭,沧海桑田。 许久不曾召幸React Native爱妃,未曾想一见竟让寡人目瞪口呆。啥~~~你就说你买包包的速度能跟上你版本迭代更新的...

4876
来自专栏伪君子的梦呓

用 Python 向你比个心

之前写了一篇用 Python 画一个小猪佩奇和哆啦 A 梦,然后最近看到有人用 turtle 画了一个心,觉得挺有意思的,于是把代码复制到本地,再加了个播放音乐...

1213
来自专栏张善友的专栏

初探ReactJS.NET 开发

ReactJS通常也被称为"React",是一个刚刚在这场游戏中登场的新手。它由Facebook创建,并在2013年首次发布。Facebook认为React在处...

2125
来自专栏hightopo

基于HTML5 Canvas 实现弹出框

2003
来自专栏GIS讲堂

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

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

1583
来自专栏非著名程序员

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

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

1878
来自专栏拂晓风起

Cocos2d-js 3.0 颜色变换(调整sprite/图片的色调)

1332

扫码关注云+社区