新書推薦:
《
大英博物馆东南亚简史
》
售價:HK$
177.0
《
纯粹·我只要少许
》
售價:HK$
80.6
《
投机苦旅:一位投机客的凤凰涅槃
》
售價:HK$
88.5
《
重返马赛渔场:社会规范与私人治理的局限
》
售價:HK$
69.4
《
日子慢慢向前,事事慢慢如愿
》
售價:HK$
55.8
《
场景供应链金融:将风口变成蓝海
》
售價:HK$
111.8
《
汗青堂丛书146·布鲁克王朝:一个英国家族在东南亚的百年统治
》
售價:HK$
91.8
《
人生是旷野啊
》
售價:HK$
72.8
|
編輯推薦: |
HTML是永恒的页面语言,不管是PC端还是移动端,不管是微信的页面还是iOS、Android的页面,都离不开HTML。随着移动APP的流行,HTML 5也发挥了越来越大的作用。本书是一本HTML代码书,300余段代码能让你更轻松地学会HTML,更得心应手地应用HTML。
|
內容簡介: |
本书精选300余段HTML代码,覆盖了几乎所有的HTML元素,是网站建设和网页设计人员在设计HTML结构代码时不可或缺的设计方案、技巧和参照。本书的代码从基础的HTML元素讲起,每一个讲解都附有实践,涵盖了从HTML4到HTML5的新元素,这些网页跨平台、跨设备、跨浏览器,充分向读者演示了如何使用HTML的各个元素和使用技巧。
本书从创建HTML文档开始介绍,分别按章节介绍了HTML各元素的作用和使用方法,并对常用的HTML代码段进行了介绍和演示。全书分为17章,包含HTML文档、头部meta元素、文字、图像、链接、页面布局、文档结构划分、多媒体、表格、表单、框架、Canvas、地理位置、本地存储、应用缓存及其他常用代码等网页结构设计技术。这些结构代码所阐述的HTML元素的常用方法对于快速设计简洁、通用的HTML网页结构的开发人员和设计人员具有重要的指导作用。
本书内容简洁明了、代码精练、重点突出、实例丰富、语言通俗易懂、原理清晰明白,是广大网页设计入门者和提高者的良好选择,同时也非常适合大中专院校学生学习阅读,也可作为高等院校非计算机专业,以及计算机非网络工程及相关专业的辅助读物。
|
關於作者: |
赵荣娇,毕业于中国传媒大学,工学硕士。目前就职于**网航旅事业部,担任前端开发工程师,曾参与旅游特卖首页、1688订单等项目开发。热爱技术,喜欢分享。中国传媒大学新媒体研究院主办《信息科技周刊》总编辑、《新媒体技术动态》发起人。著有《超实用的CSS代码段》一书。
|
目錄:
|
第1章 创建HTML文档
1.1 HTML文档的基本结构
1.2 HTML文档类型
1.3 利用HTML元素定义中文网页
1.4 利用title定义网页的标题
1.5 利用meta元素定义页面元信息
1.6 利用head元素定义文档头部
1.7 利用body元素定义文档主体
1.8 利用base元素定义基底网址
1.9 定义网页在不同显示媒体下的样式
1.10 指定外部资源的link元素
1.11 添加网站Logo
1.12 预先获取资源Link Prefetch
1.13 利用script元素定义客户端脚本
1.14 添加注释
1.15 载入外部脚本库
1.16 延迟脚本执行
1.17 异步执行脚本
1.18 利用noscript元素实现脚本的替代内容
1.19 HTML属性
1.20 为元素指定类或ID名称
1.21 为元素添加title属性
第2章 头部 meta元素
2.1 定义页面关键字
2.2 设置页面描述
2.3 设定作者信息
2.4 限制搜索方式
2.5 网页语言与文字
2.6 定时跳转页面
2.7 设定网页缓存过期时间
2.8 禁止从缓存中调用
2.9 删除过期的Cookie
2.10 设置网页的过渡效果
第3章 标记文字
3.1 标题<hn><hn>
3.2 表示关键字和产品名称<b><b>
3.3 强调<em><em>
3.4 表示外文词语或科技术语<i><i>
3.5 表示重要的文字<strong><strong>
3.6 表示不正确或校正<s><s>
3.7 为文字添加下画线<u><u>
3.8 添加小号字体内容<small><small>
3.9 添加上标<sub><sub>和下标<sup><sup>
3.10 强制换行<br>
3.11 指明可以安全换行的建议位置<wbr>
3.12 表示输入和输出<code><var><samp><kbd>
3.13 表示缩写<abbr><abbr>
3.14 定义术语<dfn><dfn>
3.15 引用来自他处的内容<q><q>
3.16 引用其他作品的标题<cite><cite>
3.17 表示时间和日期<time><time>
3.18 ruby、rt和rp元素
3.19 bdo元素
3.20 bdi元素
3.21 表示一段一般性的内容 <span><span>
3.22 突出显示文本<mark><mark>
第4章 显示图像
4.1 必须知道的图像格式和压缩形式
4.2 图像<img>的超简应用
4.3 语义化带标题的图片
4.4 提前载入图片
4.5 图像区域映射
4.6 使用base64:URL格式的图片
第5章 生成超链接
5.1 生成指向外部的超链接
5.2 使用相对URL
5.3 生成页面内超链接
5.4 图像链接
5.5 电子邮件链接
5.6 设定浏览环境
5.7 在框架中打开
第6章 组织文字内容
6.1 段落
6.2 页面主体的结构化布局
6.3 使用预先编排好格式的内容
6.4 引用他处内容
6.5 添加主题分隔线
6.6 将内容组织为列表
6.7 输出有顺序关系的内容
6.8 使用无序列表输出无序并列的内容
6.9 使用自定义列表输出有标题的并列内容
6.10 列表项的使用
6.11 使用菜单列表
6.12 使用下拉列表
6.13 在页面中输出对话
第7章 划分文档结构
7.1 添加基本的标题
7.2 隐藏子标题hgroup
7.3 生成节<section>
7.4 为区域添加头部和尾部
7.5 添加导航区域
7.6 在页面中输出文章
7.7 生成附注栏
7.8 在页面输出联系人信息
7.9 生成详情区域
第8章 多媒体文件
8.1 使用多媒体打造丰富的视觉效果
8.2 全面兼容的video
8.3 多媒体文件标签
8.4 object元素
8.5 param元素
8.6 嵌入Flash代码
8.7 实现Flash全屏播放
8.9 文字的滚动
8.10 定义媒介源
8.11 定义媒介外部文本轨道
第9章 表格
9.1 生成基本的表格
9.2 让表格没有凹凸感
9.3 添加表头
9.4 为表格添加结构
9.5 制作不规则的表格
9.6 正确地设置表格列
9.7 设置表格边框
9.8 其他表格设计
第10章 表单与文件
10.1 制作基本表单
10.2 自动聚焦
10.3 禁用单个input元素
10.4 关闭输入框的自动提示功能
10.5 关闭输入法
10.6 按回车键跳转至下一个输入框
10.7 定制input元素
10.8 生成隐藏的数据项
10.9 输入验证
10.10 生成按钮
10.11 使用表单外的元素
10.12 显示进度
10.13 密钥对生成器
第11章 网页中的框架
第12章 HTML 5 Canvas
第13章 HTML 5地理定位
第14章 HTML 5本地存储
第15章 HTML 5应用缓存
第16章 移动开发
第17章 其他常用代码
|
內容試閱:
|
13.2 获取当前位置
可以通过navigator.geolocation 的getCurrentPosition 方法来获取用户的信息,示例代码如下:
navigator.geolocation.getCurrentPosition getPositionSuccess , getPositionError ;
在以上代码中,调用了getCurrentPosition 方法,并为其传递了两个参数,该方法可以接受3 个参数,前两个参数是函数,*后一个是对象:第1 个参数是成功获取位置信息的回调函数,是必要参数;第2 个参数用于捕获获取位置信息异常的情况的处理回调函数,第3 个参数是相关的配置项。
当浏览器成功获取到用户的位置信息时,getCurrentPosition 的**个函数类型的参数将被调用,将对应的position 对象传入到调用的函数中,这个对象中包含了浏览器返回的具体数据,这非常重要。
function getPositionSuccess position {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
document.write "您所在的位置:经度" + lat + ",纬度" + lng ;
}
其中,position 对象包含了用户的地理位置信息,该对象的coords 子对象包含了用户所在的纬度和经度信息,通过position.coords.latitude 可以访问纬度信息,position.coords.longitude 可访问经度信息,用户的位置信息越精确,这两个数字后面的小数点越长。此外,在Firefox 中,position 对象下还附带有另一个address 对象,这个对象包含这个经纬度下的国家名,城市名甚至街道名,示例代码如下:
01 function getPositionSuccessposition {
02 var lat = position.coords.latitude;
03 var lng = position.coords.longitude;
04 alert"您所在的位置:经度" + lat + ",纬度" + lng;
05 if typeof position.address !== "undefined" {
06 var country = position.address.country;
07 var province = position.address.region;
08 var city = position.address.city;
09 alert'' 您位于'' + country + province + ''省'' + city + ''市'';
10 }
11 }
本章源代码提供一个完整的示例:
01
02
03 点击这个按钮,获得您的坐标:
04 试一下
05
06
07 var x = document.getElementById"demo";
08 function getLocation {
09 if navigator.geolocation {
10 navigator.geolocation.getCurrentPositionshowPosition;
11 } else {
12 x.innerHTML = "Geolocation is not supported by this browser.";
13 }
14 }
15 function showPositionposition {
16 var a = "Latitude: " + position.coords.latitude + "
Longitude: " + position.coords.
longitude;
17 x.innerHTML = a;
18 console.loga
19 }
20
|
|