zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    108. Convert Sorted Array to Binary Search Tree
    How to check if one path is a child of another path?
    Why there is two completely different version of Reverse for List and IEnumerable?
    在Jenkins中集成Sonarqube
    如何查看sonarqube的版本 how to check the version of sonarqube
    Queue
    BFS广度优先 vs DFS深度优先 for Binary Tree
    Depth-first search and Breadth-first search 深度优先搜索和广度优先搜索
    102. Binary Tree Level Order Traversal 广度优先遍历
    How do I check if a type is a subtype OR the type of an object?
  • 原文地址:https://www.cnblogs.com/tinyTea/p/6477327.html
Copyright © 2011-2022 走看看