html5学习测试

时间：2023-03-09 08:51:14
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>

相关文章