HTML5与CSS3权威指南.pdf6

第11章 获取地理位置信息

HTML5为window.navigator对象新增了一个geolocation属性

取得当前地理位置

void getCurrentPosition(onSuccess,onError,options);

第一个参数为获取成功执行的回调函数,第二个为失败时执行的回调函数,第三个为一些可选属性的列表(第二个和第三个可选)

navigator.geolocation.getCurrentPosition(function(position){

    //获取成功时的处理(参数position为一个position对象)

  })

getCurrentPosition方法的第二个参数为获取失败时调用的函数,可以是一个提示框等

当浏览器询问用户是否共享位置信息,选择否也会引发错误,回调函数有一个error对象,具有两个属性

code属性:用户拒绝了位置服务(值为1)  获取不到位置信息(值为2)  获取信息超时错误(值为3)

message属性:为一个字符串,包含了错误信息,在调试时有用处

getCurrentPosition方法的第三个参数,可以有:

enableHighAccuracy:是否要求高精度地理位置信息,需要综合考虑设备电量、具体地理情况来考虑,多数情况下为默认

timeout:对地理位置信息获取操作的限时操作(单位毫秒),在规定时间未获取到则返回错误

maximumAge:对地理位置信息进行缓存的有效时间(毫秒),过期后尝试再次获取信息

navigator.geolocation.getCurrentPosition(

    function(position){...},

    function(error){...},

    {maximumAge:60*1000*2,timeout:5000}

  )

持续监视当前地理位置的信息(定期自动获取)

int watchCurrentPosition(onSuccess,onError,options);

其参数与getCurrentPosition方法相同,同时返回一个数字,可以被clearWatch方法使用,停止监视

停止void clearWatch(watchId);

position对象:获取地理位置成功以后,调用的回调函数访问position对象的属性

latitude:维度

longitude:经度

altitude:海拔高度,不能获取则为null

accuracy经纬度的精度(米)

altitudeAccurancy海拔高度的精度(米)

heading设备的前进方法,面朝正北的顺时针角度表示,不能获取则为null

speed设备的前进速度,不能获取则为null(米/秒)

timestamp获取位置时的时间

第12章 CSS3概述

CSS3中,没有采用总体结构,而是采用分工协作的模块化结构

模块式的好处在于防止某些浏览器不完全支持一些功能时,拆分成多个模块以逐步支持

第3章 选择器

在样式中指定class缺点有:class本身没语义;使用混乱

属性选择器[att*=val][att^=val][att$=val]

结构性伪类选择器

伪类选择器就是CSS中已经定义好的选择器,不可以随便改名(前加“:”)

a:link a:visited a:hover a:active first-line first-letter before after

root选择器:将样式绑定到页面的根元素(整个<HTML>)

not选择器:排除这个结构元素下面的子结构元素

empty选择器:指定元素内容为空白时使用的样式

target选择器:<a href="#text1">文字</a>,跳转到id等于text1时,变化的样式

first-child last-child nth-child(:nth-child(3)第3个元素 若odd为奇数)和nth-last-child(:nth-last-child(3)倒数第3个元素 若even为偶数)

nth-of-type和nth-last-of-type,按照类型排序,上例是指全部元素的奇数元素的一个,这里指全部奇数元素的某一个

only-child选择器:仅仅只有一个子元素时应用样式

UI元素状态伪类选择器

除了结构性伪类选择器外,还有UI元素状态伪类选择器

:hover :active :focus :enabled(可用) :disabled(不可用):read-only(只读readonly="readonly") :read-write(非只读) :checked(radio单选框或checkbox复选框处于选取状态,Firefox必须写成-moz-checked)  :default(单选或复选框处于默认选取状态):indeterminate(任何一个单选框都没有被设定为选取状态时,整体的样式,用户选中其中一个则样式被取消):selection(元素处于选中状态)

通用兄弟元素选择器

<子元素>-<子元素之后的兄弟元素>{}

HTML5与CSS3权威指南.pdf6,布布扣,bubuko.com

时间: 2024-10-22 13:55:21

HTML5与CSS3权威指南.pdf6的相关文章

HTML5与CSS3权威指南.pdf9

第21章 Media Queries相关样式 该模块中允许添加媒体查询(media query)表达式,用以指定媒体类型,根据媒体类型来选择使用的样式(显示器.便携设备.电视机) 使用方法@media 设备类型 and (设备特性) {样式代码} 大部分设备特性的指定值接受min/max的前缀,表示大于等于或小于等于的逻辑 使用and关键字来指定某种设备类型的某些特性满足某个条件时使用的样式,下列表示设备窗口小于640px时所使用的样式 @media screen and (max-width:

HTML5与CSS3权威指南.pdf7

第14章 使用选择器在页面中插入内容 使用选择器来插入文字图片 上一章提到过使用before和after伪类为某个元素之前或之后插入内容 h2:after{content:'12345'},也可以指定个别元素不进行插入h2.class1:after{content:none},也可以插入图片h2:after{content:url(test.png)},将alt属性的值作为图像的标题显示h2:after{content:attr(alt)} 使用content属性来插入项目编号 h2:after

HTML5与CSS3权威指南.pdf8

第17章 与背景和边框相关的样式 与背景相关的新增属性 background-clip指定背景的显示范围 background-origin指定绘制背景图像时的起点 background-size指定背景中图像的尺寸 background-break指定内联元素的背景图像进行平铺时的循环方式 在Firefox浏览器需要加“-moz-” Safari浏览器需要加“-webkit-” background-clip的值有border(背景范围包括边框区域)和padding(背景范围包括padding

HTML5与CSS3权威指南.pdf1

第2章 HTML5与HTML4的区别 HTML5的文件扩展符与内容类型保持不变仍为“.html”或“.htm”,内容类型(ContentType)仍为“text/html” DOCTYPE声明: HTML4中,<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> HT

HTML5与CSS3权威指南.pdf5

第9章 通信API 跨文档消息传输 HTML5提供了网页文档之间互相接收与发送信息的功能,不仅同源(域+端口号)的Web网页之间可以互相通信,甚至可以实现跨域通信 想要接受从其他窗口发过来的信息,要对窗口对象的message事件进行监视 window.addEventListener("message",function(){...},false); 使用window对象的postMessage方法向其他窗口发送消息 otherWindow.postMessage(message,ta

HTML5与CSS3权威指南.pdf2

第三章 HTML5的结构 article元素更强调独立性,section元素强调分段,div元素强调css的套用,aretcle元素和section元素在核实的情况下可以调换 nav元素用作页面导航的链接组,通常里面包含<ul><li><a>元素 aside元素表示页面或文章的附属信息部分,可以是与当前页面或内容相关的参考资料,名词解释 time元素表示24小时中的某个时刻或日期<time datetime="2014-8-6T19:53-14:00&q

HTML5与CSS3权威指南.pdf3

表单验证 <input name="text" type="text" required pattern="^\w.*$"> required属性,可以应用在大多数的元素上,如果元素内容为空,则不允许提交 pattern属性,将属性设置为某个格式的正则表达式 <input pattern='[0-9][A-Z]{3}' name=part placeholder="输入一个数字与三个大写字母"> min

《HTML5与CSS3权威指南》读书笔记

<HTML5与CSS3权威指南> 机械工业出版社 Chapter 2 - HTML5与HTML4的区别 1.DOCTYPE声明 html4: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> html5: <!DOCTYPE html>

HTML5与CSS3权威指南.pdf4

拖放API HTML5实现了直接拖放操作API,简化HTML4利用mousedown.mousemove等事件实现的操作 实现拖放的步骤 1要将被拖动元素的draggable属性设置为true,img元素与a元素(必须指定href)默认允许拖放 2编写有关拖放的事件处理代码 DataTransfer对象的属性与方法 设定拖放时的视觉效果 dropEffect属性(目标元素)与effectAllowed属性(源元素)结合起来可以设定拖放时的视觉效果, 1如果effectAllowed属性设定为no