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>
时间: 2024-10-09 22:54:36

html5学习测试的相关文章

HTML5 学习笔记(一)——HTML5概要与新增标签

一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸.不开放). HTML5增强了浏览器的原生功能,符合HTML5规范的浏览器功能将更加强大,减少了Web应用对插件的依赖,让用户体验更好,让开发更加方便,另外W3C从推出HTML4.0到5.0之间共经历了17年,HTML的变化很小,这并不符合一个好产品的演进规则. 1.2.什么是HTML5 HTML5

HTML5 学习总结(一)——HTML5概要与新增标签

目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2.缺点 1.6.HTML5效果展示 1.7.HTML5学习与开发工具 1.7.1.基础要求 1.7.2.开发工具 1.8.HTML5语法规则与文档声明 1.8.1.语法规则 1.8.2.文档声明 1.8.2.文档声明 二.废弃的标签 三.新增的标签 3.1.新增的结构标签 3.2.新增加其它元素 3

[html5] 学习笔记-表单新增的元素与属性(续)

本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indeterminate属性.Image提交按钮的宽高属性. 1.controls属性 在html5中,可以在标签内部放置一个表单元素,并且通过该标签的controls属性来访问该表单元素. 1 <body> 2 <script> 3 function setValue(){ 4 var label

HTML5学习参考资料整理

给大家推荐一下学习研究HTML5必备的一些个网站,更加有利于大家对HTML5的学些和研究.如果各位童鞋还有更多的,欢迎投递资源给我们,也可以支持 我们,让我们利用大家的力量收集更多的HTML5学习资料,让我们的开发者和HTML5的爱好者受益,利人利己的事,童鞋们多多益善啊! 1. http://www.w3school.com.cn/html5/index.asp 介绍:W3C HTML5开发者指南,学习HTML5的各种标签,查询参考手册. W3C HTML 5 权威教程 2. http://h

HTML5 学习笔记--------》HTML5概要与新增标签!

一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸.不开放). HTML5增强了浏览器的原生功能,符合HTML5规范的浏览器功能将更加强大,减少了Web应用对插件的依赖,让用户体验更好,让开发更加方便,另外W3C从推出HTML4.0到5.0之间共经历了17年,HTML的变化很小,这并不符合一个好产品的演进规则. 1.2.什么是HTML5 HTML5

HTML5 学习总结(一)——HTML5概要与新增标签(转载)

目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2.缺点 1.6.HTML5效果展示 1.7.HTML5学习与开发工具 1.7.1.基础要求 1.7.2.开发工具 1.8.HTML5语法规则与文档声明 1.8.1.语法规则 1.8.2.文档声明 1.8.2.文档声明 二.废弃的标签 三.新增的标签 3.1.新增的结构标签 3.2.新增加其它元素 3

HTML5 学习

1.details元素 details元素标识用户要求得到并且可以得到的细节信息,用于描述文档或文档某个部分的细节.它可以与summary元素配合使用.summary元素提供标题或图例.标题是可见的,用户点击标题时,会显示出细节信息,也就是details里面定义的信息. <details> <summary>HTML 5</summary> This document teaches you how to learn about HTML 5 </details&

html5学习笔记(3)--主题结构元素-1

html5学习笔记(3)--主题结构元素-1 Article元素 以下为对应代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <article> <header> <h1>极客学院</h

html5学习(一)--canvas画时钟

利用空余时间学习一下html5. 1 <!doctype html> 2 <html> 3 <head></head> 4 <body> 5 <canvas id="clock" width="500" height="500"></canvas> 6 <script> 7 var clock=document.getElementById('cloc