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">这个不可编辑</li>
			</ul>
		</section>
		<footer></footer>
	</article>
	<aside></aside>
	<footer></footer>
</body>
</html>
IT文库 » HTML5标签学习笔记
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址