html

知识回顾，方便大家复习用

具体学习还是菜鸟教程

知识点：

　　1.<base href="http://www.runoob.com/images/" target="_blank">

　　　　当一个链接没有地址时默认转到这个链接处

　　2.<meta>

　　　　为搜索引擎定义关键词:

　　　　<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

　　　　为网页定义描述内容:

　　　　<meta name="description" content="Free Web tutorials on HTML and CSS">

　　　　定义网页作者:

　　　　<meta name="author" content="Hege Refsnes">

　　　　每30秒中刷新当前页面:

　　　　<meta http-equiv="refresh" content="30">

　　3.表格

　　　　<colgroup><col>用来设置表格列的属性

　　　　<thead>,<tfoot>,<tbody>用在表代码中有一定的样式

　　4.列表

　　　　有序<ol><li>;无序<ul><li>;自定义<dl><dt><dd>

　　5.区块

　　　　<div><span>

　　6.表单

　　　　下拉框

　　　　a.<select><option></select>

　　　　b.<input list="aa">

　　　　<datalist id="aa"><option></datalist>

　　7.框架

　　　　iframe

　　8.如何应对不支持脚本;<onscript>

　　9.字符实体：各种字符

--------------------------------------------------------------------------------------------------------------------

　　1.html5新添加元素

　　　　<canvas>

　　　　新添媒体元素：<audio><video><source><embed><track>

　　　　新表单元素;<datalist><keygen><output>

　　　　新语义结构元素：<article><aside><bdi><command><details><dialog><summary><figure><figcation><header><footer><mark><nav>

　　　　　　　　　　　　<progress><ruby><rt><section><time><wbr>

　　2.移除的元素：

　　　　<acronym><applet><basefont><big><center><font><frame><frameset><noframe><strike><tt>

　　3.重要的新元素解释：

　　　　a.Canvas

　　　　   <canvas id="myCanvas" width height><canvas>

 

　　　　　　首先要做的是：获得画板对象-》获取2d绘制区域-》开始绘制

　　　　　　var c=document.getelementbyId("myCanvas");//获得画板对象

　　　　　　var ctx=c.getContext("2d");//获得2d的绘画区域

　　　　　　1.直线

　　　　　　ctx.fillstyle="颜色"；ctx.fillRect(x,y,x1,y1);

　　　　　　2.路径

　　　　　　ctx.moveTo(x,y);ctx.LineTo(x1,y1);ctx.stroke();

　　　　　　3.圆

　　　　　　ctx.beginPath();ctx.arc(x,y,r,begin,end);ctx.stroke();

　　　　　　4.字

　　　　　　ctx.font="4px arial";ctx.fillText=","",位置"；

　　　　　　渐变对象用在fillStyle上

　　　　　　创建：var grd=createLinerGradient(x,y,x1,y1);

　　　　　　grd.addColorStop(0,"red");grd.addColorStop(1,"white")

　　　　　　 var grd=ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red");grd.addColorStop(1,"white");

　　　　　　5.图像：ctx.drawImage(img,10,10);

　　　　b.SVG

　　　　　　<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-5;fill-rule:evenodd;"> </svg>

　　　　c.GeoLocation地理位置

　　　　　　调用：navigator.geolocation.getCurrentPosition(showPostion,showError)

　　　　　　成功的话会放回两个对象，一个是位置信息对象，一个是错误对象

　　　　　　showPostion(aa){

　　　　　　　　navigater.coords.latitude

　　　　　　　　navigator.coords.landtitude

　　　　　　}

 

　　　　　　例子：

<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
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;
    }
}

　　　　a.Web 存储

　　　　localStorage 和 sessionStorage 

　　　　localStorage :没有时间限制的存储；

　　　　sessionStorage:z针对一个Session的数据存储当用户关闭浏览器窗口后，数据会被删除。

　　　　使用之前先判断浏览器是否支持

　　　　if(typeof(Storage)!=="undefined") { // 是的! 支持 localStorage sessionStorage 对象! // 一些代码.....

　　　　localStorage.sitename="我的存储信息"

　　　　document.getElementById("result").innerHtml=localStorage.sitename } else { // 抱歉! 不支持 web 存储。 }

　　　　删除：localStorage.removeItem(key)

　　　　删除所有：localStorage.clear();

　　　　添加：localStorage.setItem(key,value);

　　　　获得：localStorage.getItem(key);

　　　　莫个索引的Key:localStorage.key(index);

　　　　移除：localStorage.removeItem("lastname");

　　　　var site = new Object; ... var str = JSON.stringify(site); // 将对象转换为字符串

　　　　var site = JSON.parse(str);//将字符串转换为JSON对象

　　　　e.Video Audio 

　　　　

　　　　<video controls><source></video>

　　　　<audio controls><audio>

　　　　<embed></embed>

　　　　autoplay muted loop preload src是这两个的属性

　　　　可在文中嵌入对象

　　　　<object data="horse.wav">

　　　　 <param name="autoplay" value="true">

　　　　</object>

　　　　<object width="400" height="50" data="bookmark.swf"></object>

　　　　没有关闭标签HTML4 无法识别 <embed> 标签

　　　　<embed width="400" height="50" src="bookmark.swf">

　　　　最佳解决方案浏览器兼容啥的问题：用优酷

　　　　<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"> 　　　　</embed>

　　　　也可以使用超链接来播放

　　　　f.

　　　　　　<pre>里面随便怎么弄样式都是排好的样式

　　　　　　<progress>

　　　　　　<q>标记一个短的引用

　　　　　　<rp>注释

　　　　　　<textarea>文本区

　　　　　　<wbr>文本什么地方会添加换行符

　　4.

　　　　//框架html5不支持他

　　　　<frameset cols="25%,*,25%">

　　　　　　<frame src="frame_a.htm">

　　　　　　<frame src="frame_b.htm">

　　　　　　<frame src="frame_c.htm">

　　　　</frameset>

　　　　<ins>新增文本

　　　　<kbd>

　　　　<mark>

　　　　<meter value="2" min="0" max="10">2 out of 10</meter>给定指定的范围

　　　　<noframes>//不支持frames的话用它

　　　　optgroup:把相关的选项组合在一起optionGroup

　　　　<select>

　　　　　　<optgroup>

　　　　　　<option value="volvo">Volvo</option>

　　　　　　<option value="saab">Saab</option>

　　　　　　<optgroup/>

　　　　</select>

　　　　结果在output中使用应用在表单中

　　　　<form ontput="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>

 

　　　　显示图像中的莫一块区域<map>

　　　　<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

　　　　<map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"></map>

　　5.一些功能实现

　　　　a.拖放

<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>
<p>拖动 W3CSchool.cc 图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

　　6.表单新属性：

• novalidate autocomplete

　　<input>新属性：

　　formaction ：用于表单提交按钮会覆盖form的action属性

　　formmethod ：覆盖form的method

　　formnovalidate:覆盖form的novalidate

　　formtarget 属性覆盖 <form>元素的target属性.

　　list :与fieldlist配合使用下拉列表框

　　min max

　　pattern :自定义正则表达式

　　placeholder 

　　rquired 

　　step 属性为输入域规定合法的数字间隔。

　　一般用来存放图片啥的figcaption用来存放对象说明， 元素的内容应该与主内容相关

　　<figure>

　　<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">

　　<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>

　　</figure>

　　7.解决浏 览器兼容问题：加载html5的特性

　　　　国外用户使用

　　　　<!--[if lt IE 9]>

　　　　<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

　　　　<![endif]-->

　　　　国内用户使用

　　　　<!--[if lt IE 9]>

　　　　<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>

　　　　<![endif]-->

 

　　8.利用pushState开发无刷新页面切换

　　　　history.state；history.pushState(state, title, url)；history.replaceState；window.onpopstate