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>
html5学习测试的更多相关文章
- HTML5 学习总结（一）——HTML5概要与新增标签
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...
- HTML5 学习笔记（一）——HTML5概要与新增标签
目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...
- HTML5 学习笔记--------》HTML5概要与新增标签！
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...
- HTML5学习参考资料整理
给大家推荐一下学习研究HTML5必备的一些个网站,更加有利于大家对HTML5的学些和研究.如果各位童鞋还有更多的,欢迎投递资源给我们,也可以支持 我们,让我们利用大家的力量收集更多的HTML5学习资料 ...
- [html5] 学习笔记-表单新增的元素与属性（续）
本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...
- Html5学习导航
给大家推荐一下学习研究HTML5必备的一些个网站,更加有利于大家对HTML5的学些和研究.如果各位童鞋还有更多的,欢迎投递资源给我们,也可以支持我们,让我们利用大家的力量收集更多的HTML5学习资料, ...
- HTML5学习第四天
HTML5学习第四天 一.HTML列表 HTML列表,有无序表,有序表以及自定义表,列表于列表之间可以实现嵌套 列表相关操作 <ul> <li>(多选)谁世界第二可爱?< ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
随机推荐
- Regionals 2012 :: Asia - Dhaka
水 B Wedding of Sultan 题意:求每个点的度数 分析:可以在,每个字母的的两个端点里求出的的出度,那么除了起点外其他点还有一个入度,再+1 /******************** ...
- sql 关联查询
SELECT mms_sample_datas.* from mms_sample_datas where mms_sample_datas.mms_id in ( SELECT mms_sample ...
- BZOJ3784 : 树上的路径
树的点分治,在分治的时候将所有点到根的距离依次放入一个数组q中. 对于一棵子树里的点,合法的路径一定是q[L]..q[R]的某个数加上自己到重心的距离. 定义五元组(v,l,m,r,w),表示当前路径 ...
- BZOJ2093 : [Poi2010]Frog
从左往右维护两个指针l,r表示离i最近的k个点的区间,预处理出每个点出发的后继,然后倍增. #include<cstdio> typedef long long ll; const int ...
- c++ insert iterators 插入型迭代器
insert iterators 插入型迭代器 (1)front inserters 前向插入迭代器 只适用于提供有push_front()成员函数的容器,在标准程序库中这样的容器是deque和lis ...
- TYVJ P1026 犁田机器人 Label：水
背景 USACO OCT 09 2ND 描述 Farmer John為了让自己从无穷无尽的犁田工作中解放出来,於是买了个新机器人帮助他犁田.这个机器人可以完成犁田的任务,可惜有一个小小的缺点:这个犁田 ...
- 【BZOJ】2178: 圆的面积并
http://www.lydsy.com/JudgeOnline/problem.php?id=2178 题意:给出n<=1000个圆,求这些圆的面积并 #include <cstdio& ...
- 【wikioi】1029 遍历问题
题目链接:http://www.wikioi.com/problem/1029/ 算法:数学 本题有个2小技巧. 一棵二叉树的前序遍历a1a2a3...ai和后序遍历b1b2b3...bi有一种关系: ...
- Tomcat设置默认启动项目及Java Web工程设置默认启动页面
Tomcat设置默认启动项目 Tomcat设置默认启动项目,顾名思义,就是让可以在浏览器的地址栏中输入ip:8080,就能访问到我们的项目.具体操作如下: 1.打开tomcat的安装根目录,找到Tom ...
- JQuery文件上传插件uploadify在MVC中Session丢失的解决方案
<script type="text/javascript"> var auth = "@(Request.Cookies[FormsAuthenticati ...