HTML5标签学习笔记

时间:2022-05-03
本文章向大家介绍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>