<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html5</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--国内用户请使用如下开源的静态资源库（Google 资源库在国内不稳定）-->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
<![endif]-->
<script type="text/javascript">
document.createElement("myhtml")
</script>
<style type="text/css">
#myhtml{
display: block;
background-color: gray;
padding: 20px;
font-size: 30px;
}
#drag0,#drag2{
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<hr>
<h3>HTML5 添加新元素</h3>
<myhtml>myhtml是自己添加的新元素</myhtml>
<hr>
<h3>HTML5 Canvas</h3>
<canvas id="myCanvas1" width="200" height="100" style="border: 1px solid #000000">显示实心文本</canvas>
<script type="text/javascript">
var c=document.getElementById('myCanvas1');
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Canva 实心文本",10,50);
</script>
<canvas id="myCanvas2" width="200" height="100" style="border: 1px solid #000000">绘制图像</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
ctx.fillStyle="#f4f8c1";
ctx.fillRect(0,0,175,75);
</script>
<canvas id="myCanvas3" width="200" height="100" style="border: 1px solid #000000">canvas 路径</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas3");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
<canvas id="myCanvas4" width="200" height="100" style="border: 1px solid #00ccc0;">绘制圆形</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas4");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
<canvas id="myCanvas5" width="300" height="100" style="border: 1px solid #000000">显示空心文本</canvas>
<script type="text/javascript">
var c=document.getElementById('myCanvas5');
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Canva 空心文本",10,50);
</script>
<br>
<canvas id="myCanvas6" width="200" height="100" style="border: 1px solid #000000">线性渐变</canvas>
<script type="text/javascript">
var c=document.getElementById('myCanvas6');
var ctx=c.getContext("2d");
//创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"blue");
grd.addColorStop(1,"white");
//填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
<canvas id="myCanvas7" width="200" height="100" style="border: 1px solid #000000">径向/圆渐变</canvas>
<script type="text/javascript">
var c=document.getElementById('myCanvas7');
var ctx=c.getContext("2d");
//创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"green");
grd.addColorStop(1,"white");
//填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
<img id="liverpool" src="image1/img1.png" alt="liverpool" width="100" height="85">
<canvas id="myCanvas8" width="200" height="100" style="1px solid #d4ddd4">图像放于画布上</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas8");
var ctx=c.getContext("2d");
var img=document.getElementById("liverpool");
ctx.drawImage(img,10,10)
</script>
<hr>
<h3>内联SVG</h3>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
<hr>
<h3>HTML5 MathML</h3>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>=</mo>
<msup><mi>c</mi><mn>2</mn></msup>
</mrow>
</math>
<hr>
<h3>HTML5 拖放</h3>
<p>拖动图片到矩形框中</p>
<div id="drag0" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag1" src="image1/img2.png" draggable="true" ondragstart="drag(event)" width="90" height="80">
</div>
<div id="drag2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script type="text/javascript">
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data))
}
</script>
<hr>
<h3>HTML5 Geolocation 地理定位</h3>
<div>
<p id="demo1">地理位置</p>
<button onclick="getLocation()">点击获取位置</button>
</div>
<div id="mapholder"></div>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var x=document.getElementById("demo1");
function getLocation(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,showError);
}else{
x.innerHTML="该浏览器不支持获取地理位置";
}
}
/*
function showPosition(position){
x.innerHTML="维度:"+position.coords.latitude+"<br>经度:"+position.coords.longitude;
}
*/
function showError(error){
switch(error.code){
case error.PERMISSION_DENIED:
x.innerHTML="用户拒绝对获取地理位置的请求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息是不可用的。"
break;
case error.TIMEOUT:
x.innerHTML="请求用户地理位置超时。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知错误。"
break;
}
}
function showPosition(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
latlon = new google.maps.LatLng(lat, lon)
mapholder = document.getElementById('mapholder')
mapholder.style.height = '250px';
mapholder.style.width = '500px';
var myOptions = {
center: latlon,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
};
var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
var marker = new google.maps.Marker({
position: latlon,
map: map,
title: "You are here!"
});
}
</script>
<hr>
<h3>HTML5 Vedio</h3>
<video width="300" height="500" controls>
<source src="video1/video1.mp4" type="video/mp4">
该浏览器不支持vedio
</video>
<div style="text-align: left;">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<button onclick="makeNormal()">普通</button>
<br>
<video id="video1" width="320">
<source src="video1/video2.mp4" type="video/mp4">
</video>
</div>
<script type="text/javascript">
var myVideo=document.getElementById("video1");
function playPause(){
if (myVideo.paused) {
myVideo.play();
}else{
myVideo.pause();
}
}
function makeBig(){
myVideo.width=640;
}
function makeSmall(){
myVideo.width=200;
}
function makeNormal(){
myVideo.width=320;
}
</script>
<hr>
<h3>HTML5 Audio音频</h3>
<audio controls>
<source src="audio1/1000452.mp3" type="audio/mpeg">
</audio>
<hr>
<h3>HTML5 input类型</h3>
选择颜色:<input type="color" name="favcolor">
选择日期:<input type="date" name="birthday">
日期和时间：<input type="datetime" name="birthdaytime">
datetime-local:<input type="datetime-local" name="birthdaytime2">
年和月:<input type="month" name="month1">
<br>
E-mail:<input type="email" name="email1">
数值(0-100)：<input type="number" name="number1" min="0" max="100">
数值阈：<input type="range" name="range1" min="1" max="100" value="66">
搜索：<input type="search" name="search1">
电话:<input type="tel" name="tel1">
<br>
时间：<input type="time" name="time1">
URL:<input type="url" name="url1">
周：<input type="week" name="week1">
<hr>
<h3>HTML5 表单元素</h3>
datalist输入域选项:<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<form action="#" method="get">
user:<input type="text" name="user_name">
加密:<keygen name="security">
<input type="submit">
</form>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
<hr>
<h3>HTML5 表单属性</h3>
<h5>自动完成功能 autocomplete 属性</h5>
<form action="#",autocomplete="on">
name:<input type="text" name="name">
age:<input type="text" name="age">
email:<input type="email" name="email2" autocomplete="off">
<input type="submit">
</form>
<br>
<p>novalidate 属性规定在提交表单时不应该验证 form 或 input 域.<br>
autofocus 属性规定在页面加载时，域自动地获得焦点。<br>
form 属性规定输入域所属的一个或多个表单。<br>
formaction 属性用于描述表单提交的URL地址。formaction 属性会覆盖 form 元素中的 action 属性。
<br>formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 的表单)。formenctype 属性覆盖 form 元素的 enctype 属性。
</p>
<form action="#1" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
<input type="submit" formmethod="post" formaction="#2" value="使用 POST 提交">
</form>
<p>novalidate属性描述了 input 元素在表单提交时无需被验证。</p>
<p>formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。</p>
<p>height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度</p>
<input type="image" src="image1/img3.png" alt="Submit" width="100" height="60">
<pre>
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。用于以下类型的 input 标签：date pickers、number 以及 range。
multiple 属性规定 input 元素中可选择多个值。
</pre>
选择图片<input type="file" name="img" multiple>
<p>pattern 属性描述了一个正则表达式用于验证 input 元素的值。</p>
<p>placeholder 属性提供一种提示（hint），描述输入域所期待的值。简短的提示在用户输入值前会显示在输入域上。</p>
<p>required 属性规定必须在提交之前填写输入域（不能为空）。</p>
<p>step 属性为输入域规定合法的数字间隔。</p>
<hr>
<h3>HTML5 语义元素</h3>
<p>
HTML5 提供了新的语义元素来明确一个 Web 页面的不同部分：header,nav,section,article,aside,figcaption,figure,footer
</p>
<hr>
<h3>HTML5 Web存储</h3>
<p>localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。</p>
<p><button onclick="clickCounter()" type="button">点击显示计数1</button></p>
<div id="result1"></div>
<script type="text/javascript">
function clickCounter(){
if (typeof(Storage)!=="undefined") {
if (localStorage.clickcount) {
localStorage.clickcount=Number(localStorage.clickcount)+1;
}else{
localStorage.clickcount=1;
}
document.getElementById("result1").innerHTML="点击按钮 "+localStorage.clickcount+"次。";
}else{
document.getElementById("result1").innerHTML="该浏览器不支持web存储。";
}
}
</script>
<p>sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。</p>
<p><button onclick="clickCounter2()" type="button">点击显示计数2</button></p>
<div id="result2"></div>
<script type="text/javascript">
function clickCounter2(){
if (typeof(Storage)!=="undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}else{
sessionStorage.clickcount=1;
}
document.getElementById("result2").innerHTML="点击按钮 "+sessionStorage.clickcount+"次。";
}else{
document.getElementById("result2").innerHTML="该浏览器不支持web存储。";
}
}
</script>
<h5>Web Storage 开发一个简单的用户列表程序</h5>
<div style="border: 1px dashed #ddd;width: 360px;text-align: left;">
<label for="name">name:</label>
<input type="text" name="name" id="name1" class="text"><br>
<label for="age">age:</label>
<input type="text" name="age" id="age1"><br>
<input type="button" onclick="save()" value="Add record">
<br>
<label for="search_name">input name:</label>
<input type="text" name="search_name" id="search_name">
<input type="button" onclick="find()" value="search user">
<p id="find_result"></p>
</div>
<script type="text/javascript">
function save(){
var name=document.getElementById("name1").value;
var age=document.getElementById("age1").value;
localStorage.setItem(name,age);
alert("add successfully!");
}
function find(){
var search_name=document.getElementById("search_name").value;
var find_age=localStorage.getItem(search_name);
var find_result=document.getElementById("find_result");
find_result.innerHTML=search_name+" 的age是:"+find_age;
}
</script>
<hr>
<h3>HTML5 Web SQL 数据库</h3>
<pre>
规范中定义的三个核心方法：
openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql：这个方法用于执行实际的 SQL 查询。
</pre>
<hr>
<h3>HTML5 应用程序缓存（Application Cache）</h3>
<pre>
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
</pre>
<hr>
<h3>HTML5 Web Workers</h3>
<pre>
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。
您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
由于 web worker 位于外部文件中，它们无法访问下列 JavaScript 对象：window 对象,document 对象,parent 对象
</pre>
<hr>
<h3>HTML5 SSE（server-sent event）服务器发送事件</h3>
<pre>Server-Sent 事件指的是网页自动获取来自服务器的更新。</pre>
<hr>
<h3>HTML5 WebSocket</h3>
<pre>WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API
中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API ，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了
一条快速通道。两者之间就直接可以数据互相传送。
现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器
对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器
需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，
显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
</pre>
<hr>
<h3>HTML 插件</h3>
<pre>辅助应用程序（helper application）是可由浏览器启动的程序。辅助应用程序也称为插件。
插件可以通过 object 标签或者 embed 标签添加在页面中。
</pre>
<br><br><br>
</body>
</html>
查看19道真题和解析
投递淘天集团等公司10个岗位