<!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>

html5学习测试的更多相关文章

  1. HTML5 学习总结（一）——HTML5概要与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...

  2. HTML5 学习笔记（一）——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

  3. HTML5 学习笔记--------》HTML5概要与新增标签！

      一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...

  4. HTML5学习参考资料整理

    给大家推荐一下学习研究HTML5必备的一些个网站,更加有利于大家对HTML5的学些和研究.如果各位童鞋还有更多的,欢迎投递资源给我们,也可以支持 我们,让我们利用大家的力量收集更多的HTML5学习资料 ...

  5. [html5] 学习笔记-表单新增的元素与属性（续）

    本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...

  6. Html5学习导航

    给大家推荐一下学习研究HTML5必备的一些个网站,更加有利于大家对HTML5的学些和研究.如果各位童鞋还有更多的,欢迎投递资源给我们,也可以支持我们,让我们利用大家的力量收集更多的HTML5学习资料, ...

  7. HTML5学习第四天

    HTML5学习第四天 一.HTML列表 HTML列表,有无序表,有序表以及自定义表,列表于列表之间可以实现嵌套 列表相关操作 <ul> <li>(多选)谁世界第二可爱?< ...

  8. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  9. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

随机推荐

  1. python 代码片段5

    #coding=utf-8 # python 有两个主要数据类型:int和float.根据Kiss原则,python只有一宗整数类型int. print 3**3 print int('123') p ...

  2. 稳定的奶牛分配 && 二分图多重匹配+二分答案

    题意: 农夫约翰有N(1<=N<=1000)只奶牛,每只奶牛住在B(1<=B<=20)个奶牛棚中的一个.当然,奶牛棚的容量有限.有些奶牛对它现在住的奶牛棚很满意,有些就不太满意 ...

  3. 精通CSS :nth-child伪类

    :nth-child 基本用法 :nth-child:nth-child(8) 选中第8个子元素 li:nth-child(8) span { background-color: #298EB2; b ...

  4. 20145315 《Java程序设计》实验三实验报告

    实验三 敏捷开发与XP实践 实验内容 下载并学会使用git上传代码: 与同学结对,相互下载并更改对方代码,并上传: 实现代码的重载. 实验步骤 下载并用git上传代码: 1.下载并安装好git,在cm ...

  5. 发布android app到android market的方法

      转载自: http://www.stwind.org/android-market 给你的程序签名注意事项:所有提交到Market的程序必须经过签名.未经签名的程序不能安装.你可以使用个人证书去签 ...

  6. 如何获取checkboxlist的多个选中项

    string[] array = dt.Rows[0]["s_type"].ToString().Split('|');                foreach (ListI ...

  7. FreeMarker教程

    一.什么是模板引擎,为什么要用模板引擎 在B/S程式设计中,常常有美工和程序员二个角色,他们具有不同专业技能:美工专注于表现——创建页面.风格.布局.效果等等可视元素:而程序员则忙于创建程式的商业流程 ...

  8. [转].net中的认证(authentication)与授权(authorization)

    本文转自:http://www.cnblogs.com/yjmyzz/archive/2010/08/29/1812038.html 注:这篇文章主要给新手看的,老手们可能会觉得没啥营养,就请绕过吧. ...

  9. Embedded Database service fails to start after installing or migrating to Symantec Endpoint Protection (SEP) 12.1.5 (RU5)

    https://support.symantec.com/en_US/article.TECH225587.html

  10. 移动Web单页应用开发实践——实现Pull to Request（上/下拉请求操作）

    在单页应用开发中,无论是页面结构化,还是Pull to Request,都离不开一个技术——页面局部滚动.当下的移动web技术,主要使用下面两种方式实现局部区域的滚动: 基于IScroll组件,也有很 ...