HTML5基础
首先学习HTML我认为需要搞懂块级元素与行内元素这两个概念
块级元素与行内元素
块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。
你能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报 了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。.
内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”。
块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属 性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。
可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。大致的元素分类见全文。
块元素(block element)
* address - 地址
* blockquote - 块引用
* center - 居中对齐块
* dir - 目录列表
* div - 常用块级元素，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - h6标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
内联元素(inline element)
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本
这两个概念在运用CSS样式 padding和margin时显得更容易理解一点!
HTML5
html5有哪些新特性、移除了那些元素？
1.拖拽释放(Drag and drop) API
2.语义化更好的内容标签（header,nav,footer,aside,article,section）
3.音频、视频API(audio,video)
4.画布(Canvas) API
5.地理(Geolocation) API
6.本地离线存储
localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除
7.表单控件，calendar、date、time、email、url、search
8.新的技术webworker(多线程处理) ,websocket, Geolocation ,applicationCache(离线应用)
WebSocket是HTML5一种新的协议。它实现了浏览器与服务器全双工通信,服务器可以主动传送数据给客户端
WebWorker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
9.移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
HTML5新增27个元素废弃16个元素,按照优先等级划分可以分为结构性元素,级块级元素行内语义性元素和交互性元素
结构性元素
结构性元素主要负责web的上下文结构的定义,确保html的完整性
Section 给内容分段 在web页面页面应用中,该元素也可以用于区域的章节表述,对网站内容进行分块,通常由内容和标题组成
当一个内容需要定义样式或者通过脚本定义行为时推荐使用div,div关注结构的独立性,而sesction关注内容的独立性,
section的作用是对页面上的内容分块处理,如对文章分段,相邻的section元素的内容应当是相关的,而不是article那样的独立,比如section里面放所有的评论,每条评论放在article里,
article元素可以看做是特殊的section元素article则更强调独立性,完整性,section更强调相关性,如果一块内容相对来说比较独立,就使用article,如果对一块内容分成几段,就使用section,在h5中,div变成了一个容器,可以对容器进行整体的css套用
使用section时注意,
1.不要将section元素当做设置样式的页面容器应该使用div
2.如果article,aside或者nav元素更符合条件不要使用section
3.不要为没有标题比如h1-6的内容使用section
Article 标识文章 表示一篇文章的主体内容,可以被外部引用的内容,可以是一篇论坛评论,一段用户评论等,因为article是一段独立的内容,通常一个article有自己header(头部)或footer(底部),当article嵌套使用时,内部的article内容原则上和外部的article内容相关针对该新闻的相关评论就可以使用嵌套article的方式,用来呈现评论的article被包含在整体内容的article元素里面评论的每个人相对来说都是比较独立的,完整的,放在article中,所有评论放在section中,
Header 页面主体的头部
Footer页面底部通常在这里会标出网站的一些相关信息,例如,关于我们,法律申明等
Nav 导航信息 专门用于菜单导航,链接导航的元素,链接到其他页面或者是当前页面的其他部分,一般一组链接就使用nav,具有辅助信息的链接,外层可以嵌套aside
可用于以下场景,
导航条,侧边栏导航,页内导航,翻页操作
级块级元素
级块级元素主要完成web页面区域的划分,确保内容有效分隔,
Aside 辅助信息用于表达注记,侧栏,摘要,插入的引用等作为补充主体的内容从一个简单页面显示看,就是一个侧边栏,可以在左边,也可以在右边,从一个页面的局部看,就是摘要用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用,侧边栏,广告,导航条以及其他有别于主要内容的部分,
Aside元素主要有两种用法
1.作为主要内容的附属信息部分,包含在article元素中,可以是当前文章的参考资料或者名词解释等辅助信息
2.作为页面或者站点全局的附属信息部分在article元素之外使用,最典型的形式是侧边栏,其中的内容可以是友情链接,博客中的其他文章列表广告单元等
<aside><nav><ul><h1><li>...
Figure是对多个元素进行组合并展示的元素,通常与figcaption联合使用,
Code表示一段代码块
行内语义性元素
Progress进度条
Video视频元素,用于支持和实现视频文件的直接播放
Audio音频元素,用于实现音频文件的直接播放
交互性元素
交互性元素主要用于功能性的内容表达,会有一定的内容和数据关联,是各种事件等基础,
Detail用来表示一段具体内容默认不显示
以下为详细分类
标记文字
生成内部超链接(相当于锚点)
内部超链接可以把同一文档的另一个元素移入视野需要用到id选择器
<a href=#fruits/>..........<p id=fruits/>
Target属性_blank在新窗口或标签页打开文档,_parent在父窗框组(frameset)中打开框架_self在当前窗口打开文档(默认),_top在顶部窗口打开文档,<frame>在指定窗口打开文档
b-加粗
em-斜体
i-表示外文词语或科技术语
s-表示不准确或者校正
strong-表示重要的文字
u-为文字添加下划线
sup/sub-上标或下标,比如数字的几次方
q-引用来自他处的内容,cite属性表示来源文章的url
br-换行
cite-引用其他作品的标题
mark-突出显示文本
ins/del-插入或删除
ruby-东亚语言的注音标签<ruby>魑<rp>(</rp><rt>chi</rt><rp>)</rp></ruby>
span-标签见下文详解
span标签详解
<span> 标签被用来组合文档中的行内元素,以便通过样式来格式化它们。
<p><span>some text.</span>some other text.</p>
如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。
可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。
可以对同一个 <span> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
HTML:
<p class="tip"><span>提示：</span>... ... ...</p>
CSS:
p.tip span {
font-weight:bold;
color:#ff9955;
}
组织内容
p-建立段落
div-没有具体含义,为内容建立结构并赋予其含义,通常用的属性,class,id
pre-浏览器使用源文件中的格式显示,不合并空白符,
hr-在H5中是贯穿页面的直线
ol-将将内容组织为列表 start属性设定列表首项的编号值,默认首项从1开始type表示编号类型1十进制,a小写拉丁字母,A大写拉丁字母,i小写罗马字母,I大写罗马字母 内容是0个或者多个li
ul-包含0个或者多个li没有局部属性呈现形式由css控制
dl,dt,dd-生成说明列表 dl表示说明列表,dt表示说明列表的术语,dd表示说明列表中的定义
figure-使用插图,一个独立的内容单元,通常作为一个整体呗文档的主体引用,把它从文档中删除也不会影响文档的意思,figure元素可以包含一个figcaption元素,表示插图的标题
文档分节
h1-h6各级标题
hgroup给标题分组,使低级标题更像高级标题的子标题
section表示文档中的一节,可以明确的生成节并且将其标题分开,通常包含一个或多个段落及一个标题,但是标题不是必须的,<section><h1>标题1</h1><p>段落内容......</p></section>
feader添加首部
footer添加尾部
nav添加导航区域可以结合ul使用
article 代表html文档中一段独立成篇的内容,增加了文档内容的独立性,比如多个的页首,标题,内容,导航,页尾进行独立
aside生成附注栏,用来表示和周边内容稍沾点边的内容,类似书籍或杂志中的侧栏,并非主体一部分,可能是一些背景信息,到相关文章的链接等,
address 提供联系信息,在article中表示提供联系信息属于该article的,在body中表示提供的联系信息属于整个文档的.多余<a>标签嵌套使用
details生成详情区域 details元素在文档中生成一个区域,用户可以展开它以了解关于某主题的更多详情,details元素通常包含一个summary元素,后者的作用是为该详情区域生成一个说明标签或者标题,<details><summary>详情标题</summary> <ol>.......</ol></details>
表格元素
table元素最棒的特性是作者不必操心尺寸的问题,浏览器会保证让列的宽度足以容纳最宽的内容,让行的高度足以容纳最高的单元格,<table><tr><td></td></tr></table>其border属性可以设置表格的边框,值必须为1或者空字符串
th 表头单元格
tbody,thead,tfoot 表示构成表格主体行,不包括表头行(thead)和表脚行(tfoot)<thead><tr><th></th></tr></thead>
td和th的跨行和跨列
rowspan属性 跨多行,属性值为数字
colspan属性 跨多列,属性值为数字
headers属性的值可被设置为一个或多个th单元格的id属性值
<tr><th id=”rank” >rank</th></tr>
<tr><th id=”first” header=”rank”><td header=”rank first”></td></tr>
<tr><th id=”second” header=”rank”><td header=”rank second”></td></tr>
caption元素可以用来为表格定义一个标题并将表格关联起来
表单大类
Form 元素
属性action,method,name,accept-charset,
enctype,制定了浏览器发送服务器的数据采用的编码方式参数值有三个1,application/x-www-form-urlencoded默认的编码方式,不能上传文件 multipart/form-data用于将文件长传到服务器,text/plain
autocomplete控制表单自动完成,避免反复输入重复的数据,属性值on/off默认值为on
target,指定表单反馈信息的目标显示位置,默认情况下浏览器会用提交表单后服务器反馈的信息替换表单所在的原页面,_blank将反馈信息显示在新窗口或者标签页上,_parent显示在父窗框组中,_self显示在当前窗口(默认)_top显示在顶层窗口,<frame>显示在指定窗框中
novalidate设置此属性可以不经过输入验证就能提交表单,也可以设置用脑提交表单的button或input元素的formnovalidate属性
Button 元素
name,disabled ,form,type,value,autofocus
Button设置为submit类型时的元素
form指定按钮关联的表单
formaction覆盖form元素的action属性,另外资费那个表单将要提交的url
formenctype覆盖表单元素的enctype属性
formmethod,formtarget,
formnovalidate覆盖表单的novalidate属性,表名是否执行客户端数据有效性检查
Select元素
属性name,disabled,form,size,autofocus,required
Multiple设置后可以选择多个属性
Optgroup用来在select元素的内容中建立一定的结构,用途是对option元素编组,label属性可以为正组选项提供一个小标题,disabled阻止选项组内任何选项,
Textarea元素
多行文本框,可以输入多行文字
属性form,autofocus,required,placeholder,wrap,maxlength,dirname,readonly,rows,cols,disabled,name
Rows和cols属性可以用来设置其大小,wrap有两个值,hard和soft可以用来控制在用户输入文字中插入换行符的方式,其他与input的同名属性用法相同
Output元素
表示计算结果,属性有for关联两个数字输入框进行加减乘除
Keygen元素
生成公开/私有密钥对,这是公开密钥加密技术中的重要功能,提交表单时钙元素会生成一堆新的密钥,公钥被发送到服务器,而私钥则由浏览器保存并保存在密钥仓库
属性challenge,autofocus,name,disabled,form
Keytype属性用来生成密钥对的算法
Challenge用来指定一条与公钥一起发送服务器的密钥管理口令
fieldset元素
对表单元素进行编组 ,一般用在input元素
Name ,form,disabled
legend元素为编组提供标题
<label> 标签
为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。
例子:<p><label for=”name” >Name:<input id =”name” name =”name”/></label>/</p>
使用数据列表
可以将input元素的list属性设置为datalist元素的id属性值,这样用户在文本输入框中输入数据时只需从后以元素提供的一批选项中选择就行了
datalist元素
可以用来提供一批值,以便用户输入需要的数据,提供给用户输入的值各用一个option元素指定
Option元素
属性disabled,selected,label,value
Label属性为选项设定一条说明信息
Input 元素
Input元素为输入数据把关
Name,type,value
autofocus自动聚焦,
disabled禁用input属性,样式变得不能输入,Readonly只读
form
Input和button都有form属性,用来使用表单外的元素,将某个这类元素与并非其祖先元素 的form元素挂钩,只需将其form属性设置为相关form的id属性即可
Type的属性值
Text
属性值
Dirname 指定元素内容文字方向的名称
List指定为文本框提供建议值的datalist元素,其值为datalist元素的id值
Maxlength设定文本框输入的支付最大数目,也是password类型属性
Pattern指定一个用于输入验证过的正则表达式,也是password类型属性
Placeholder指定关于所需数据类型的提示,也是password类型属性
Readonly将文本框设为只读,也是password类型属性
Required表明用户必须输入一个值,否则无法通过验证,也是password类型属性
Size通过指定文本框可见字符数设定其宽度,也是password类型属性,
Checkbox
Checked初始化勾选,required必须勾选该复选框,否则无法通过验证
Radio 属性和复选框的相同
color只能输入颜色信息
data只能输入日期/time只能输入时间/week只能输入年及星期/datetime只能输入带时区信息的时间包括日期和时间/datetime-local输入不带时区信息的时间,包括日期和时间/month只能输入年和月,时间类型的额外属性list,min,readonly,required,step
number只能输入整数和浮点数/属性
list,min可输入的最小值,max可输入的最大值,readonly,required,step指定上下调节数值的步长
range只能输入指定范围内的数值属性值和number的相同
Radiobutton
将输入限制为一组固定选项中进行选择
email电子邮箱/url只能输入完全限定的url/tel只能输入电话号码 三者元素类型的额外属性
List,maxlenth,pattern,placeholder,readonly,size,email还有独特的属性multiple表示可以接受多个电子邮箱地址
Search获取搜索用词
Image 这类元素生成的按钮显示为一幅图像,点击它可以提交表单,alt提供元素的说明文字,formaction,formenctype,formmethod,formtarget,formnovalidate,height/width以像素为单位设置图像高度与宽度,src图片来源
Hidden隐藏域
File上传文件 属性accept指定接受的MIME类型,multiple可以一次性上传多个文件,目前撰写时尚无主流浏览器支持,required必须指定一个值,否则无法通过验证
嵌入内容
img元素
Src,alt,height,width,usemap,ismap
map元素
我们可以创建一个客户端分区响应图,通过点击某张图片上的不同区域让浏览器导航到不同的url上,这一过程不需要通过服务器的引导,因此需要使用元素上的各个区域以及他们所代表的行为,客户端分区响应图的关键元素是map
Map元素包含多个area元素,他们各自代表了图片上可被点击的一块区域,
Area元素属性,alt,href,target,rel,media,hreflang,type,shape,coords
Href此区域被点击时浏览器应该加载的url,rel描述当前文档与目标文档之间的关系,media此区域适用于媒介,hreflang目标文档的语言,type目标文档的ＭＩＭＥ了类型
Shape和coords属性来标明用户可以点击各个图像区域
属性值rect代表矩形区域,coords提供四个方向的数值,,circle代表圆形区域,coords提供三个值,,poly代表多边形(六个值),default默认区域,代表覆盖整张图片shape使用此属性值时,不需要提供coords值
<map><area href=”myhtml.html”shape=”rect” coords=”3,5,68,62” alt=”网络异常”/>....</map>
使用img元素的usemap属性时,属性值必须是一个井号串名称引用,意思是一个由#字符开头的字符串,这样就把map与图像关联了,使用ismap属性给图片创建了一个服务器端分区响应图
iframe元素
嵌入另一张HTML文档
属性src,srcdoc,name,width,height,sandbox,seamless
<ul><li><a href=”***.html” target-”myframe”>****</a></li>.....</ul>
<iframe name=”myframe” ></iframe>
我们创建一个name属性为myiframe的iframe这样就创建了一个名为myiframe的浏览上下文,我们可以把这个浏览上下文与其他元素(具体指 a,form,button,input,base)的target属性结合使用,
Src属性指定iframe一开始应该载入并显示的url而srcdoc属性让你定义一张用于内嵌显示的HTML文档,seamless指示浏览器把iframe的内容显示的更像HTML文档的一个整体组成部分,sandbox属性如果不加任何属性值,那么就会禁用脚本,表单,插件,直线其他浏览上下文的链接 属性值有allow启用表单,allow-scripts启用脚本,allow-top-navigation应许链接指向顶层的浏览器上下文,这样就能使用另一个文档替换当前整个文档,或者创建新的标签和窗口,allow-same-origin应许iframe里的内容被视为与文档其余部分拥有同一个来源位置
Object与embed元素
通过插件嵌入内容,作为扩展浏览器能力的一种方式,用于添加插件支持而插件能够处理浏览器不直接支持的内容,他们也可以用来嵌入浏览器能够直接处理的内容,比如图像,
Embed属性src,tyoe,height,width
<embed src=”www.youtube.com/v/qzaasdf” type=”application/x-shockwave-flash” allowfullscreen=”true”/>
这是嵌入了 一个来自网站上的视频,src指定内容地址,type指定内容的MIME类型,allowfullscreen属性可以启用全屏观看
Object属性data,type,height,width,usemap,name,form
内容可以是空白或者任意数量的param元素
<object data=”www.youtube.com/v/qzaasdf” type=”application/x-shockwave-flash” >
<param name=”allowFullScreen “ value=”true”/>
Object 可以添加备用内容,当插件不存在时显示object中的内容
</object>
Data指定内容地址,param定义将要传递给插件的参数
Object元素可以替代img元素<object data=”***.png” type=”image/png”
Progress 元素
显示进度条,value,max,form,
Value定义了当前的进度,它位于0到max之间max属性被忽略了,范围在0-1用浮点数来表示进度比如0.3代表30%,其他进度条元素参见Meter 元素
嵌入音频和视频,audio,video,source,track,
嵌入图形canvas
使用web存储
用来实现浏览器内多个标签页之间的通信
Web存储应许我们在浏览器里保存简单的键/值数据,web存储和cookie很相似,但它有更好的实现方式,这两种类型共享相同的机制,但是被保存数据的可见性和寿命存在区别
使用本地存储
我们通过全局属性localStorage访问本地存储功能,这个属性会返回一个Storage对象,此对象被用来保存键/值形式的字符串对,键和值都是字符串,键必须是唯一的浏览器不会删除我们使用localStorage对象添加的数据,除非用户自己清除数据
localStorage对象方法和属性
setItem(<key>,<value>)添加一个新的键值对,如果键已经使用就更新它的值
getItem(<key>)取得与指定键关联的值
removeItem(<key>)取得指定索引的键
clear()移除保存的键/值对
key(<index>)取得指定索引的键
[<key>]用数组的访问形式取得与指定键关联的值
length返回已经保存的键/值对数量
使用会话存储
会话存储的工作方式和本地存储很接近,不同之处在于数据是各个浏览上下文私有的,会在文档被关闭时移除,我们通过全局变量sessionStorage访问会话存储,它会返回一个storage对象对于会话存储,只会在内嵌文档中触发,比如iframe里的文档
使用地理定位
位置信息来源
Ip定位(一般精确到城市级)
GPS定位(需要硬件设备支持)
Wi-Fi定位(适合大城市,农村等无接入点地区效果不好)
手机定位
自定义定位:通过编程计算出用户的位置外,也可以应许用户自定义其位置,应用程序可能应许用户输入他们的地址,邮政编码等详细信息,应用程序根据这些信息提供位置感知服务
通过全局属性navigator.geolocation可以访问地理定位功能,它返回一个Geolocation对象,
Geolocation对象
|
名称 |
说明 |
返回 |
|
getCurrentPosition(callback,errorCallback,options) |
获取当前位置 |
Void |
|
watchPosition(callback,error,options) |
开始监控当前位置 |
数值(id) |
|
clearWatch(id) |
停止监控当前位置 |
void |
navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
//成功时
function onSuccess(position){
//返回用户位置
//经度
var longitude =position.coords.longitude;
//纬度
var latitude = position.coords.latitude;
//使用百度地图API(或者使用腾讯地图也可以)
//创建地图实例
var map =new BMap.Map("container");
//创建一个坐标
var point =new BMap.Point(longitude,latitude);
//地图初始化，设置中心点坐标和地图级别
map.centerAndZoom(point,15);
}
//失败时
function onError(error){
switch(error.code){
case 1:
alert("位置服务被拒绝");
break;
case 2:
alert("暂时获取不到位置信息");
break;
case 3:
alert("获取信息超时");
break;
case 4:
alert("未知错误");
break;
}
}
在本例中调用了getCurrentPosition,有成功和失败时的回调函数,并且成功时返回一个position对象,失败时返回一个PositionError对象
position对象
|
名称 |
说明 |
返回 |
|
coords |
返回当前位置的坐标 |
Coordinates |
|
timestamp |
返回获取坐标信息的时间 |
字符串 |
我们真正感兴趣的是Coordinates对象,它由Position.coords属性返回,
Coordinates对象
|
名称 |
说明 |
返回 |
|
latitude |
返回纬度 |
数值(十进制) |
|
longitude |
返回经度 |
数值(十进制) |
|
altitude |
返回海拔高度 |
数值(米) |
|
accuracy |
返回坐标经度 |
数值(米) |
|
altitudeAccuracy |
返回海拔精度 |
数值(米) |
|
heading |
返回行进方向 |
数值(度) |
|
Speed |
返回行进速度 |
数值(米/秒) |
PositionError对象
|
名称 |
说明 |
返回 |
|
code |
返回代表错误类型的代码 |
有如下数值 1用户未授权使用地理定位功能 2不能确定位置 3请求位置的尝试已超时 |
|
message |
返回描述错误的字符串 |
字符串 |
getCurrentPosition对象的第三个参数是一个PositionOptions对象,这个功能应许我们可以部分控制位置信息的获取方式
PositionOptions对象
|
名称 |
说明 |
返回 |
|
enableHighAccuracy |
告诉浏览器我们希望得到可能的最佳结果 |
布尔值 |
|
timeout |
限制请求位置的时间,设置多少毫秒后会报告一个超时错误 |
数值 |
|
maximumAge |
告诉浏览器我们愿意接受缓存过的位置,只要它不早于指定的毫秒数 |
数值 |
监控位置
可以使用watchPosition方法不断获得关于位置的更新这个方法所需的参数和getCurrentPosition方法相同,工作方式也一样,它们的区别在于:随着位置发生改变,回调函数会反复的调用,当你想停止监控时,可以把此方法返回的id值传递给clearWatch方法
其他
oninput,onpropertychange,onchange的用法
oninput:
oninput 事件在用户输入时触发。
该事件在 <input> 或 <textarea> 元素的值发生改变时触发。
提示： 该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。
onchange
onchange 事件会在域的内容改变时发生。
onchange 事件也可用于单选框与复选框改变后触发的事件。
onchange触发事件必须满足两个条件：
a）当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）
b）当前对象失去焦点(onblur)；
onpropertychange的话，只要当前对象属性发生改变，都会触发事件，但是它是IE专属的；
oninput是onpropertychange的非IE浏览器版本，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并非该对象所有属性改变都能触发事件，它只在对象value值发生改变时奏效。
在textarea中，如果想捕获用户的键盘输入，用onkeyup检查事件就可以了，但是onkeyup并不支持复制和粘贴，因此需要动态监测textarea中值的变化，这就需要onpropertychange（用在IE浏览器）和oninput（非IE浏览器）结合在一起使用了。
移动端 触摸事件
ontouchstart、ontouchmove、ontouchend、ontouchcancel
1、Touch事件简介
pc上的web页面鼠 标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，但是在移动终端如 iphone、ipod Touch、ipad上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件，分别对应了触屏开始、拖拽及完成触屏事件和取消。
当按下手指时，触发ontouchstart；
当移动手指时，触发ontouchmove；
当移走手指时，触发ontouchend。
当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。
2、Touch事件与Mouse事件的出发关系
在触屏操作后，手指提起的一刹那（即发生ontouchend后），系统会判断接收到事件的element的内容是否被改变，如果内容被改变，接下来的事 件都不会触发，如果没有改变，会按照mousedown，mouseup，click的顺序触发事件。特别需要提到的是，只有再触发一个触屏事件时，才会 触发上一个事件的mouseout事件。
