html5学习测试

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<!-- 4秒后自动转去相应网址 -->
	<!-- <meta http-equiv="refresh" content="4; http://www.baidu.com/" /> -->
	<title>test output</title>
	<style>
		//body{ background: navy; color: yellow;}
	</style>
</head>
<body>
	<form name="main">
		<h3>output元素,在firefox中支持得很好</h3>
		<output name="result"></output>
		<script>
			document.forms.main.elements.result.value = "Hello中国";
		</script>
	</form>
	<hr>
	<a href="about:blank">baidu</a>
	<script>
		var a = document.links[0];
		a.href="http://www.baidu.com";
		a.protocol = "https";

		//a.setAttribute("href","http://www.163.com");
		a.setAttribute("target","_blank");
	</script>
	<hr>
	<h3>特殊符号</h3>
	10±0.01 <br>
	注册商标® <br>
	度° <br>
	元¥ <br>
	引号" Hello World. "
	<hr>
	<strong>鼠标</strong>移上去显示详细<em>abbr</em>:<abbr title="eXtensible Hyper Text Markup Language">XHTML</abbr>
	<hr>
	<kbd>Enter</kbd>
	<hr>
	<pre>
	<code>
function message(info){
	window.alert(info);
}
	</code></pre>
	<hr>
	<blockquote>
		天才是99%的汗水+1%的天分! 
	</blockquote>
	<hr>
	<table border=1>
		<colgroup span="1" style="width:150px;"></colgroup>
		<colgroup>
			<col span="2" style="width:100px; background:red">
		</colgroup>
		<colgroup>
			<col span="1" style="width:100px; background:#ccff99">
		</colgroup>
		<colgroup span="1" style="width:150px;"></colgroup>
		<thead>x
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>4</td>
			</tr>
		<tbody>
		<tbody>
			<tr>
				<td>5</td>
				<td>6</td>
				<td>7</td>
				<td>8</td>
				<td>4</td>
			</tr>
			<tr>
				<td>9</td>
				<td>0</td>
				<td>-</td>
				<td>=</td>
				<td>4</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>4</td>
			</tr>
		<tfoot>		
	</table>
	<hr>
	<form action="" name="frmTest">
	tel: <input type="tel"> <br>
	datetime: <input type="datetime"> <br>
	range: <input type="range" min="0" max="10" value="5"> <br>
	color: <input type="color" name="colorSel"> <input type="button" onclick="alert(frmTest.colorSel.value)"> <br>

	optgroup示例: 
	<select name="selOptGrp" id="">
		<optgroup label="娱乐">
			<option value="film">电影</option>
			<option value="film">音乐</option>
		</optgroup>
		<optgroup label="运动">
			<option value="football">足球</option>
			<option value="basketball">蓝球</option>
		</optgroup>
	</select> 
	<br>
	<datalist id="mylist">
			<option value="film">电影</option>
			<option value="film">音乐</option>
			<option value="football">足球</option>
			<option value="basketball">蓝球</option>
	</datalist>
	提示: <input type="text" name="mysport" list="mylist"> <br>
	progress: <progress max="100" value="20"></progress>
	</form>

	<h3>menu test fail:</h3>
	<div style="border:1px solid red; width:400px; height:300px; word-wrap:break-word; word-break:break-all;" draggable="true" contextmenu="mymenu">
		Hello World, This is great!		
		Hello World, This is great!Hello World, This is great!Hello World, This is great!
	</div>
	<menu id="mymenu" type="toolbar" label="someth">
		<li>a</li>
		<li>b</li>
		<li>c</li>
		<li>d</li>
	</menu>
</body>
</html>

 

posted @ 2015-02-14 22:51  庚武  Views(153)  Comments(0Edit  收藏  举报