html5笔记

参考文档：http://www.runoob.com/html/html5-intro.html

 

新元素：

<!--HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是 块级 元素。
为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:-->
<!DOCTYPE html>
<html>
<meta name="whats" charset="utf-8">
<head>
<title>create an html element</title>
<script>document.write("myHero")</script>
<style>
myHero{
display:block;
background-color:#ddd;
padding:50px;
font-size:30px;
}
</style>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落</p>
<myHero>我的第一个新元素</myHero>
</body>
</html>
View Code
<!--针对IE浏览器html5shiv 是比较好的解决方案。
html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。
html5shiv.js 引用代码必须放在 <head> 元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件-->
<!DOCTYPE html>
<html>
<head>
<title>styling html5</title>
<!--[if It IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/htmlshiv.min.js"></script>
<![endif]-->
</head>

<body>
<h1>my first article</h1> 
<article>
london is the capital city of england.--whats
</article>
</body>
</html>
View Code

 canvas：

<!--HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
默认情况下 <canvas> 元素没有边框和内容。-->
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
你的浏览器不支持HTML5 canvas 标签
</canvas>

<script>
var c=document.getElementById("myCanvas");  <!--找到 <canvas> 元素-->
var ctx=c.getContext("2d");    <!--创建 context 对象-->
ctx.fillStyle="#FF0000";        <!--getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。-->
ctx.fillRect(0,0,150,75);      <!--设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。方法定义了矩形当前的填充方式。fillRect(x,y,width,height)-->
</script>                      <!--在画布上绘制 150x75 的矩形，从左上角开始 (0,0)-->

<script>
var d=document.getElementById("myCanvas");
var dtx=d.getContext("2d");
dtx.moveTo(0,0);
dtx.lineTo(200,100);
dtx.stroke();
</script>

<script>
var e=document.getElementById("myCanvas");
var etx=e.getContext("2d");
etx.beginPath();
etx.arc(95,50,40,0,2*Math.PI);
etx.stroke();
</script>

<script>
var f=document.getElementById("myCanvas");
var ftx=f.getContext("2d");
ftx.font="30px Arial"
ftx.fillText("hello world",10,50);
ftx.strokeText("MM",10,60)
</script>
</body>
</html>
View Code

渐变

<!--线性渐变-->
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
你的浏览器不支持HTML5 canvas 标签
</canvas>

<script>
var c=document.getElementById("myCanvas");  <!--找到 <canvas> 元素-->
var ctx=c.getContext("2d");   
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>                  
</body>
</html>

<!--径向/圆渐变 -->
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
你的浏览器不支持HTML5 canvas 标签
</canvas>

<script>
var c=document.getElementById("myCanvas");  <!--找到 <canvas> 元素-->
var ctx=c.getContext("2d");   
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>                  
</body>
</html>
View Code

图像：

<!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img id="scream" src="F:\htmldemo\picture\smiley.gif" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

</script>

</body>
</html>
View Code

 svg:

<!--SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准-->
<!DOCTYPE html>
<html>
<body>
<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>


</body>
</html>
View Code

拖放：

<!--拖放是一种常见的特性，即抓取对象以后拖到另一个位置。-->
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#div1,#div2
{float:left;width:35px;height:35px;margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
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>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="F:\htmldemo\picture\smiley.gif" draggable="true" ondragstart="drag(event)" width="32" height="32">
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
View Code

 video：

<!DOCTYPE html>
<html>
<meta name="whats" charset="UTF-8">
<body>
<div style="text-align:center">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<button onclick="makeNormal()">普通</button>
<br><br>
<video id="video1" width="320"  controls>
<source src="F:\htmldemo\video\movie.mp4" type="video/mp4">
<source src="F:\htmldemo\video\movie.ogg" type="video/ogg">
你的浏览器不支持video标签。
</video>
</div>

<script>
var myVideo=document.getElementById("video1");

function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause()
}

function makeBig()
{
myVideo.width=560;
}

function makeSmall()
{
myVideo.width="220";
}

function makeNormal()
{
myVideo.width="320";
}
</script>
</body>
</html>
View Code

audio：

<!DOCTYPE html>
<html>
<meta name="whats" charset="UTF-8">
<body>
<div style="text-align:center">
<button onclick="playPause()">播放/暂停</button>
<br><br>
<audio id="audio1" controls>
<source src="F:\htmldemo\audio\一次就好.mp3" type="audio/mpeg">
<source src="F:\htmldemo\audio\一次就好.ogg" type="audio/ogg">
你的浏览器不支持audio标签。
</audio>
</div>

<script>
var myAudio=document.getElementById("audio1");
function playPause()
{
if (myAudio.paused)
myAudio.play();
else
myAudio.pause()
}
</script>
</body>
</html>
View Code

 input类型:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<form >
选择你喜欢的颜色：<input type="color" name="favcolor"><br><!--color 类型用在input字段主要用于选取颜色-->
<input type="submit"><br>
日期：<input type="date" name="rq"><br><!--date 类型允许你从一个日期选择器选择一个日期。-->
<input type="submit"><br>
时间：<input type="datetime" name="dtime"><br><!--datetime 类型允许你选择一个日期（UTC 时间）-->
<input type="submit"><br>
无时区：<input type="datetime-local" name="time"><br><!--datetime-local 类型允许你选择一个日期和时间 (无时区).-->
<input type="submit"><br>
e-mail:<input type="email" name="useremail"><br><!--email 类型用于应该包含 e-mail 地址的输入域。-->
<input type="submit"><br>
month:<input type="month" name="smonth"><br><!--month 类型允许你选择一个月份。-->
<input type="submit"><br> 
number:<input type="number" name="snumber" min="1" max="10"><br><!--number 类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定：-->
<input type="submit"><br>
range:<input type="range" name="points" min="0" max="100"><br><!--定义一个不需要非常精确的数值（类似于滑块控制-->
<input type="submit"><br>
search:<input type="search" name="googlesearch"><br><!--search 类型用于搜索域，比如站点搜索或 Google 搜索-->
<input type="submit"><br>
tel:<input type="tel" name="usertel"><br><!--定义输入电话号码字段:-->
<input type="submit"><br>
time:<input type ="time" name="stime"><br><!--time 类型允许你选择一个时间。-->
<input type="submit"><br>
url: <input type="url" name="surl"><br><!--url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值-->
<input type="submit"><br>
week: <input type="week" nam="sweek"><br><!--week 类型允许你选择周和年-->
<input type="submit"><br>
</form>
</body>
</html>
View Code

 datalist：

<!--<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：-->
<!DOCTYPE html>
<html>
<body>
<form method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
</body>
</html>
View Code

keygen:

<!--<keygen> 元素的作用是提供一种验证用户的可靠方法。
<keygen>标签规定用于表单的密钥对生成器字段。
当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。
公钥可用于之后验证用户的客户端证书（client certificate）。-->
<!DOCTYPE html>
<html>
<body>
<form>
name:<input type="text" name="username"><br>
password:<keygen name="security">
<input type="submit"><br>
</form>
</body>
</html>
View Code

output:

<!--<output> 元素用于不同类型的输出-->
<!DOCTYPE html>
<html>
<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" min="0" max="100" id="a" value="50">100+
<input type="number" id="b" value="50">=
<output name="x" for ="a b"></output>
</form>
</body>
</html>
View Code

 语义元素：

<!DOCTYPE html>
<html>
<header>
<h4>run in chrome</h4>
</header>
<body>
<section>
<h1>wwf</h1>
<p>the world wide fund for nature is ...</p><!--<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。-->
</section>
<article>
<h2>wwe</h2>
<p>the world envirment...</p>
</article>
<aside>  <!--<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）-->
<h3>summer</h3>
<p>this summer...</p>
</aside>

<!--<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。
<figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
<figcaption> 标签定义 <figure> 元素的标题.
<figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。-->
<p>this is a picture</p>
<figure>
<img src="F:\htmldemo\picture\1.jpg" alt="hs" width="580" height="435">
<figcaption>aig1.-hs ,whats.</figcaption>
</figure>
<footer>    <!--<footer> 元素描述了文档的底部区域.-->
<p>posted by: whats</p>
<p><time pubdate datetime="2015-11-23"></time></p>
</footer>
<nav>   <!--<nav> 标签定义导航链接的部分。-->
<a href="http://www.runoob.com/html/">HTML<a>|
<a href="http://www.runoob.com/css/">CSS</a>|
<a href="http://www.runoob.com/js/">JS</a>|
<a href="http://www.runoob.com/jquery/">JQuery</a>
</nav>
</body>
</html>
View Code

web存储： 

<!--localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储-->
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
  {
  if (localStorage.clickcount)
    {
    localStorage.clickcount=Number(localStorage.clickcount)+1;
    }
  else
    {
    localStorage.clickcount=1;
    }
  document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
  }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>
</body>
</html>

<!--sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。-->
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
  {
  if (sessionStorage.clickcount)
    {
    sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
    }
  else
    {
    sessionStorage.clickcount=1;
    }
  document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
  }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter is reset.</p>
</body>
</html>
View Code

 

posted @ 2015-11-24 09:26  whats  阅读(178)  评论(0)  编辑  收藏  举报