❶ 推荐几本html5的书!
《HTML5程序设计》
《HTML5与CSS3权威指南》
《HTML5高级程序设计》
《HTML5移动Web开发指南》这本讲html5移动开发,也不错
❷ 基于HTML5的移动Web开发支持哪些新功能
HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点,如video、audio和canvas 标记。HTML5还引进了新的功能,可以真正改变用户与文档的交互方式,包括:epub360 等H5编辑工具都是围绕这个标准设计的:
· 新的解析规则增强了灵活性
· 新属性
· 淘汰过时的或冗余的属性
· 一个HTML5文档到另一个文档间的拖放功能
· 离线编辑
· 信息传递的增强
· 详细的解析规则
· 多用途互联网邮件扩展(MIME)和协议处理程序注册
· 在SQL数据库中存储数据的通用标准(Web SQL)
HTML5在2007年被万维网联盟(W3C)新的工作组采用。这个工作组在2008年1月发布了HTML 5的首个公开草案。眼下,HTML5处于“呼吁审查”状态,W3C预期它将在2014年年底达到其最终状态。
特性
HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的,微数据与微格式等方面的支持,构建对程序、对用户都更有价值的数据驱动的Web。
本地存储特性(Class: OFFLINE & STORAGE)
基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APP Cache,以及本地存储功能。Indexed DB(html5本地存储最重要的技术之一)和API说明文档。
设备兼容特性 (Class: DEVICE ACCESS)
从Geolocation功能的API文档公开以来,HTML5为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,例如视频影音可直接与microphones及摄像头相联。
连接特性(Class: CONNECTIVITY)
更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。
网页多媒体特性(Class: MULTIMEDIA)
支持网页端的Audio、Video等多媒体功能, 与网站自带的APPS,摄像头,影音功能相得益彰。
三维、图形及特效特性(Class: 3D, Graphics & Effects)
基于SVG、Canvas、WebGL及CSS3的3D功能,用户会惊叹于在浏览器中,所呈现的惊人视觉效果。
性能与集成特性(Class: Performance & Integration)
没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术,解决以前的跨域等问题,帮助您的Web应用和网站在多样化的环境中更快速的工作。
CSS3特性(Class: CSS3)
在不牺牲性能和语义结构的前提下,CSS3中提供了更多的风格和更强的效果。此外,较之以前的Web排版,Web的开放字体格式(WOFF)也提供了更高的灵活性和控制性。
❸ Web前端开发知识点之HTML5概述
今天小编要跟大家分享的文章是关于Web前端开发知识点之HTML5概述。正在学习和从事Web前端学习和工作的小伙伴们来和小编一起看一看吧,希望本篇文章能够对大家有所帮助。
HTML5发源于WorldWideWeb
Consortium(简称W3C),是Web标准的一种。它诞生于2004年8月W3C关于Web应用程序以及复合文档(Compound
Documents)的研讨会上,并于2010年正式推出。自推出以来,它便以惊人的速度被迅速推广,就连微软也因此为下一代IE9做了标准上的改进。HTML5是Web开发世界的一次重大改变,代表着未来趋势。其目标是能够创建更简单的Web程序。书写出更简洁的HTML代码。
HTML5的诞生具有划时代、革命性的意义,它正在被大面积地推广及使用。通过对Internet
Explore,Google,Firefox,Safari,Opera等主流Web浏览器发展策略的调查发现,它们均在对HTML5的支持上采取了相应的措施。
HTM15具有以下6点优势:
1、跨平台运行、易用性
HTML5最主要的优势在于其适合众多平台,从PC浏览器到手机、平板电脑,甚至未来的智能电视,只要设备浏览器支持HTML5,HTML5应用或游戏在该平台中就可直接运行,这使得应用HTML5创建网站更加简单。新的HTML主体结构元素和非主体结构元素如“article”、“section”、“nav”、“aside”、“time”、“pubdate”、“header”、“footer”、“address”等,使得文档的结构更清晰明确,读者更易访问内容。例如,之前使用“div”,即使定义了“class”或者“id”也难以让读者清楚知道其真正的含义。使用新的语义学的定义标签,可更好地了解HTML文档,并创造出更人性化的用户体验。
2、支持多媒体播放
以前涉及多媒体播放,普遍的做法就是使用Flash或其他第三方自主开发的播放器应用,较为复杂且难以使用。而HTMI5支持直接在浏览器中播放音频和视频文件,不需要使用Adobe
Flash这样的插件。HTML5通过标签
❹ 《移动web前端高效开发实战》pdf下载在线阅读全文,求百度网盘云资源
《移动web前端高效开发实战》网络网盘pdf最新全集下载:
链接:https://pan..com/s/1wpm-rUDxWfU4HsdRmGfNOQ
❺ html5书籍推荐
搜集并重点推荐了10本的书目,它们确实是学习HTML5的好帮手。
10、HTML5 APP商业开发实战教程
推荐指数:★★★★★
简介:本书通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于专业指南、高级程序设计、开发指南同类图书,本书是一本适合快速入手的自学教程。
以上推荐的10本书籍,侧重点各有不同,但其中肯定有一两本是你所需要的。
❻ 面向移动设备的html5开发框架 哪个最好
很久以前整理了篇将手机网站做成手机应用的JS框架。时隔一年多,很多新的技术已经出现,下面再来总结下还有哪些框架是适合面向手机设备的开发的。
1、jQuery Mobile
jQuery Mobile 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。
2、jQTouch
jQTouch 是一个 jQuery 的插件,主要用于手机上的 Webkit 浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的 JavaScript 库。支持包括 iPhone、android 等手机。
3、DHTMLX Touch
DHTMLX Touch是一个免费的HTML5/JavaScript框架,专门为触摸屏设备而优化。为您带来快速开发工艺精美的移动Web应用程序的能力。DHTMLX Touch UI Designer是一个可视化的编辑器用于构建移动用户界面。它能够帮您以最少的编码构建一流的用户界面。在其主页上提供一些示例可以展示DHTMLX Touch强大的用户界面。包括一个menu app for the iPad (适用于开发餐厅应用) 和Book Shop (一个电子书店应用)。
4、Mobilize.js
Mobilize.js是一个开源的HTML5-JavaScript框架用于从任何现在有标准网站快速,简便地构建移动网站。这个框架其实就是将需要在移动设备上显示的部分页面以jQuery Mobile的默认主题显示,而不是实现一个全新完整的移动页面。Mobilize.js 可用于任意网站,但对于基于WordPress和Sphinx的网站不需要使用该框架转换,因为已经有非常多的插件可以使用。
5、The M Project
The-M-Project是另外一个强大的JavaScript框架,它利用HTML5新的特性来更好和更简便地开发移动应用。这个框架遵循着名的MVC软件架构模式。它还支持离线,所以你的用户可以在没有连接网络的情况下继续操作(当下次有连线的时候,再将数据同步到服务器中)。提供优秀的文档(这个项目拥有一个引导新用户入门的开发指南)。可以查看提供的示例来对该项目有一个初目的了解。这些示例包括:ToDo App(待办事项目应用) 和 KitchenSink (这个示例包括这个框架提供的所有UI元素)。
6、WebApp.Net
WebApp.Net 提供了很多的 API,因此可以帮助你节省很多工作了。不需要花时间去进行 Ajax 调用的编码,因为已经内置了,另外还有很多其它内置功能,提供了详细的文档和应用演示。
7、Wijmo
Wijmo是一个基于jQuery UI的UI部件的套件。Wijmo部件进行了优化客户端Web开发和利用jQuery的优越的性能和易用性的力量。所有的Wijmo部件都配备了20多个主题和支持ThemeRoller。
8、960 Grid on jQuery-Mobile
jquery-mobile-960 是一个用于移动 Web 开发的网格框架,综合了 960.gs 的灵活性和 jQuery Mobile 的方便性。它的目的是让 jQuery Mobile 布局更加的灵活,使得应用应许在移动终端更加易用。
9、Sencha Touch Framework
Sencha Touch 是世界上第一个基于 HTML5 的移动 Web 开发框架,支持最新的 HTML5 和 CSS3 标准,全面兼容 Android 和 Apple iOS 设备,提供了丰富的 WEB UI 组件,可以快速的开发出运行于移动终端的应用程序。Shencha是第一个使用HTML5,CSS和JavaScript并且支持音频/视频,本地存储,圆角,渐变背景以及阴影的开发框架。
10、NimbleKit
NimbleKit 是为 iOS 设备构建应用程序最快速的方式,你不需要知道 Objective-C 或者 iOS SDK,你只需结合 JavaScript 代码编写 HTML 页面就可以了。
11、Touchy™ Boilerplate
Touchy Boilerplate 是一个用来创建移动web app,包括HTML模板,Meta tag等的工具。Touchy可以支持动态页面导航,固定页头,滚动内容,浏览历史记录等功能。Touchy使用jQuery或者 Zepto.JS。
12、PhoneGap
PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry智能手机的核心功能——包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以以此扩展无限的功能。PhoneGap是免费的,但是它需要特定平台提供的附加软件,例如iPhone的iPhone SDK,Android的Android SDK等,也可以和DW5.5配套开发。使用PhoneGap只比为每个平台分别建立应用程序好一点点,因为虽然基本代码是一样的,但是你仍然需要为每个平台分别编译应用程序。
13、joshfire
Joshfire是一个开源的跨设备开发框架,帮助开发者创建可以在多种设备上运行的web app。它使用HTML5和JavaScript,并且允许开发者快速整合本地应用和特定的web应用。Joshfire可以让你的应用接受键盘,鼠标,触摸屏,遥控器等设备的输入。Joshfire支持Node.JS。4.Sencha Touch:基于HTML5的移动网页开发框架。
14、 Julia
Julia框架由基本CSS3文件、JS库和各个平台的运行库构成。不像PhoneGap,Julia不仅仅包含调用本机代码的接口层,它还包含 Model-View-Controller(MVC)支持,Delegation支持,OAuth支持,异步数据库存取接口,HTML选择符(类jQuery调用接口),HTML模版(允 许嵌入JS代码)等应用开发必备的API接口。 基于Julia的应用开发就像网站开发那么简单,是的,你终于可以用HTML5开发一个完整的、跨平台 的、不亚于本机代码的、易于维护的移动应用了!大幕即将揭晓,让我们一起进入移动开发的新时代
15、SproutCore HTML5 Application Framework
SproutCore 是一个 HTML5 移动 Web 开发框架,它的目标是在无需浏览器插件的情况下,在浏览器中位应用程序提供极佳的桌面效果。
16、Titanium
这是一个强大的,健壮的移动Web开发框架。能够让使用现有的HTML, CSS和JavaScript知识来为 iOS和Android平台开发原生移动应用。作为一个越来越大的移动Web框架,它拥有超过300个的APIs和活跃的开发者社区。你从这个社区中得到每一个开发人员的帮助。Titanium Mobile支持原生的iOS和Android UI元素如Table views, tabs, switches和popovers。它提供能够与移动设备的摄像头和本地文件存储系统相交互的特性。
17、Lungo.js
Lungo.js 是一个采用HTML5, CSS3 和JavaScript技术实现的移动Web应用程序开发框架。利用这框架开发的应用程序可运行所有流行的平台包括:iOS, Android, Blackberry 和 WebOs。它还支持触摸事件如:tap, double-tap和swipe。整个框架没有用到任何图片包括图标,所有都矢量化。可以在这个框架中使用HTML5拥有的一些特性如:WebSQL, 地理位置定位,历史或设备方向等。Lungo.js是一个模块化并且完全可定制的框架。
18、xui.js
有时候你可能需要一个超轻量级的框架,只要拥有用于开发标准客户端所需要的功能如:DOM操作,事件处理,Ajax和一些动画效果。如果是这样的话,这个框架刚好非常适合你。整个框架采用GZIP压缩完之后只有4.2 KB。
19、EmbedJS
EmbedJS是一个用于嵌入式设备的JavaScript框架如:移动电话,TVs、tablets和so forth。EmbedJS强大之处在于,它拥有专门为特定平台和浏览器如iOS, Firefox, Android等提供相应的开发版本。这样就能够以最少的代码,为用户提供最佳的体验。而且假如你喜欢自己定制,可以利用其提供的EmbedJS Build tool工具实现。EmbedJS基于Dojo实现,所以你如果熟悉Dojo API语法,那EmbedJS将是你最佳的选择。
20、zepto.js
zepto.js是一个专为mobile WebKit浏览器(如:Safari和Chrome)而开发的一个JavaScript框架。它标榜自己在其简约的开发理念,能够帮助开发人员简单、快速地完成开发交付任务。更重要的是这个JS框架,是超轻量级的,只有5KB。zepto.js的语法借鉴并且兼容jQuery。
21、Baker
Baker是用来在iPad或者iPhone平台上发布交互式的电子书或者电子杂志的HTML5电子书框架。
22、ChocolateChip-UI
ChocolateChip-UI 是一个手机移动 Web 开发框架,采用 HTML5, WAML, CSS 和 JavaScript等技术实现。基于 ChocolateChip JavaScript 框架,包含最新的 ChUI.JS 和 ChUI.css.
23、Magazine Grid
Magazine Grid 是一个超现代的 CSS 框架,用于 iPad 和 iPhone 手机,使用类似杂志的设计风格。Magazine Grid 可让用户使用 HTML5 元素来组织杂志页,非常轻量级(<4k),在移动设备上加载非常快,对老的浏览器也支持。
24、Kendo UI
Kendo UI是一个强大的框架用于快速HTML5 UI开发。基于最新的HTML5、CSS3和JavaScript标准。 Kendo UI包含了开发现代JavaScript开发所需要的所有一切,包括:强大的数据源,通用的拖拉(Drag-and-Drop)功能,模板,和UI控件。
25、HTML App Host Framework
这是一个用于构建基于 Windows Phone 7 的 HTML/JavaScript 托管框架,使用 HTML5 技术。该框架由支持在标准 xap 格式中嵌入 html 应用的控件。
❼ 浅淡HTML5移动Web开发(二)
3、HTML5新增标签
在html5中新增量很多标签,加强连html标签的语义化,如等等,这些标签都各自有自己大意义,不再仅仅是span和div,虽然html4中也有很多语义化的标签,但是不如html5丰富。除了这些新增的标签,还有一些此前就有的标签,但是类别新增,最具代表性的就是表单form,而本文要介绍的就是form。
以上除了type=text外,其他的都是新增的,如果浏览器支持这些属性的话,就会自动调用相应组件,如在移动设备中type=number/email/text时,浏览器会调用不同版面的键盘,这样加快用户的输入,体验也更美好,如下
如果是type=range则会出现这样的组件,供选择范围,如果是type=color则会出现颜色选择器,如果是type=date则出现日期选择器,如果是type=search,则在输入时候出现一个一键清除的按钮,点击输入的文字全部清除
另外,除了input的type新增量类别,还增加一些很实用的属性,如placeholder,我们知道,input中我们常常会默认一些文案,当用户输入的时候会自动清除,html5之前我们是靠javascript实现的,但是有了html5,我们可以轻松实现,只需要placeholder=”默认文案”。
4、选择符
选择符大致分为元素选择符、关系选择符、属性选择符、伪类选择符、伪对象选择符,在PC端,我们用的最多的就是元素选择符、关系选择符和属性选择符如
div{……}、div.class{……}、div#id{……}、div span{……}、div[class=”classname”]{}
伪类选择符和伪对象选择符有很多,灵活运用可以减少很多不必要的代码。如E:nth-child(n){ …… }、E:nth-of-type(n){ …… }、E:disabled{ …… }、E:empty{ …… }、E:first-letter/E::first-letter{ …… }、E:first-line/E::first-line{ …… }、E:before/E::before{ ……}、E:after/E::after{…… }、E::selection{ …… }等,这里不细说。
以上是环球青藤小编为考生整理的HTML5移动Web开发的相关内容,希望对大家有帮助!更多HTML5相关内容尽在本平台,记得及时查看哦!
❽ 如何用html5构建移动端的webapp
H5e教育html5开发为您解答:
移动web在当今的发展速度是一日千里,作为移动领域的门外汉,在这段时间的接触后,发现前端开发这一块做一个小小的总结。
1.四大浏览器内核
1.Trident (IE浏览器) :因为在早期IE占有大量的市场份额,所以以前有很多网页是根据这个Trident的标准来编写的,但是实际上这个内核对真正的网页标准支持不是很好,同时存在许多安全Bug。
2.Gecko:( FireFox )优点就是功能强大、丰富,可以支持很多复杂网页效果和浏览器扩展接口,缺点是消耗很多的资源,比如内存。
3.Webkit: ( Chrome/ Safari / UC )优点就是Webkit拥有清晰的源码结构、极快的渲染速度,缺点是对网页代码的兼容性较低,会使一些编写不标准的网页无法正确显示。
4.Presto: ( 欧朋 ) Presto内核被称为公认的浏览网页速度最快的内核,同时也是处理JS脚本最兼容的内核,能在Windows、Mac及Linux操作系统下完美运行。
移动端开发主要对象是手持设备,其中绝大部分是IOS和Android系统,基于Webkit内核,可使用Chrome浏览器调试即可。
2.手机浏览器
浏览器已经逐渐从传统桌面转向手机端,竞争也越来越激烈。目前国内市场主流的手机浏览器:UC、网络、欧朋、QQ、海豚、safari、Chrome,这些浏览器都是基于webkit内核的,兼容性方面不存在问题,同时对html5和css3的支持很好,所以,大胆地应用html5和css3技术吧。
在开始编写webapp时,前端工程师使用HTML5,而放弃HTML4,因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序 的体验,可以减少开发者很多的工作量,当然了你决定使用HTML5前,一定要对此非常熟悉,要知道HTML5的新标签的作用。比如定义一块内容或文章区域 可使用section标签,定义导航条或选项卡可以直接使用nav标签等等。
3.终端分辨率
手机分辨率比PC分辨率要庞杂得多,各种分辨率有木有?大小差距那么大有木有?这在一定程度上给页面制作带来了不小的麻烦。所以针对这样的因素,必须有充分的考虑。考虑到浏览器自适应,需要设计和制作完成各种不同的方法。
1) 市场上主流手机生产商的产品分辨率。经过调研发现,目前主流的手机分辨率为:480*800像素、320*480像素,而1280*720像素(720P)会是接下来的趋势。这些都是很粗略的统计,要有精确的数据需要花费不少的精力,那是数据分析人员的工作。
2) 项目目标群所持设备的分辨率。项目目标群即用户,用户拥有什么样的手机分辨率,从一定程度上来说比第一点来得更加重要,它决定着项目开发的方向。
4.响应式web开发
在编写CSS时,我不建议前端工程师把容器(不管是外层容器还是内层)的宽度定死。为达到适配各种手持设备,我建议前端工程师使用自适应布局模式(支付 宝 采用了自适应布局模式),因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示,你无需再次考虑设备的分辨率。
响应式web开发不是一项开创性的技术变革,简单地说,响应式web设计采用了媒体查询、流式布局、液态图片三项技术,把它们组合在一起来制作页面,使得页面不只在传统桌面,在平板电脑和手机上,各种不同的分辨率都能够完美显示。而要做到这点,我觉得不难,请继续往下:
1) 准备工作:
a) 插件安装:window resize。您可以通过下载安装谷歌浏览器插件,安装成功后,当您调整浏览器窗口时,在浏览器右下角会有灰度提示当前窗口和类似于手机视图的大小提示。
b) 编辑器安装:Hbulder或Webstorm
c) 弄清视图和屏幕的区别。视图是浏览器的内容显示区域,屏幕是设备的物理显示区域。比如视图宽度我们一般用width表示,而屏幕宽度是用device-width来表示。相信做过手机页面的童鞋都经常见过这段代码:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
其中width=device-width就是说把页面宽度设置成和屏幕宽度一样。
d) 响应式设计创意网站收集 。这里有很多响应式Web设计的网站,供您参考和学习。
2) 征途ING:
e) 响应式web设计之媒体查询:
为了减少http请求,我想在css样式表里进行媒体查询会是个不错的选择,而不是在页面head部分使用link进行加载。样式表里的媒体查询格式为:
@media screen and (max-width:960px){}
大括号内部书写样式。该语句相当于判断语句,有两个条件,一个是视口宽度最大不超过960px,screen代表显示屏,这两个条件都具备了,就调用大括号内的样式。
f) 响应式web设计之流式布局:
流式布局以百分比进行布局。最重要是时刻关注元素的父级层,所有的元素都是以父级层为基准。流式布局的应用是为了和媒体查询完美地结合,形成平滑的布局变 化跳转效果。一般而言,media里的样式多以width、padding、margin、font-size、line-height这些为主。
g) 响应式web设计之液态图片:
要实现液态图片,只需加入如下代码:img{max-width:100%;}
web移动头部书写
1、首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
这个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;
<meta content="yes” name=" apple-mobile-web-app-capable" />
meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;
<meta content="black" name=" apple-mobile-web-app-status-bar-style" />
meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;
<meta content="telephone=no" name="format-detection" />
meta标签表示:告诉设备忽略将页面中的数字识别为电话号码
❾ 《HTML5应用开发实践指南》epub下载在线阅读全文,求百度网盘云资源
《HTML5应用开发实践指南》(Zachary Kessin)电子书网盘下载免费在线阅读
链接:https://pan..com/s/1ZJ3vD0V88ZaULHh1jGunfA
书名:HTML5应用开发实践指南
豆瓣评分:6.1
作者:Zachary Kessin
出版社:机械工业出版社
译者:陈升想/汪奋进
出版年:2013-4
页数:114
内容简介
如何利用**的HTML 5技术和技术创建可以运行在所有移动设备和桌面应用中的完美应用程序?这本实用指南将提供完美的解决方案!通过学习本书,读者不仅可以系统掌握**的HTML 5技术标准和细节,而且可以掌握JayaScript的一些高级技巧和开发工具的使用方法,开发出跨平台的应用。本书包含大量示例代码,详细展示了如何通过HTML 5把Web变成一流的开发环境。
《HTML 5应用开发实践指南》
作者简介
Zachary Kessin从1994年开始从事交互式Web应用程序开发。在过去几年中,Zachary主要致力于使用开发基于浏览器的大型应用程序、基于浏览器的Selenium测试、函数式编程以及代码生成。本书封面上的动物是一种欧洲海燕,也叫风暴海燕。“海燕”(petrel)这个名称来源于圣徒彼得,因为这种鸟看起来能在水上行走(实际上,它们只是在觅食的时候会不停地在水表面蹦蹦跳跳)。它们经常成群结队出现在大西洋和地中海,跟在船只后面吃船员丢弃的食物,如果天气恶劣的话还可能搭乘顺风船。风暴海燕是欧洲最小的鸟类,体长只有15~16厘米,翼展38~42厘米。它们的羽毛大体为黑色,只在尾部和翅膀的背面点缀了少许白色。它们的鸟喙薄且呈钩状,喙上的管状鼻孔用于排除喝海水之后多余的盐。它们的脚有蹼,可以游泳,但它们不经常为食物去潜水,它们更喜欢掠过水面来觅食。海燕主要食用小型鱼类、鱿鱼、浮游生物和甲壳类动物,也吃一些渔船或其他航运交通运输过程中丢弃的动物内脏。风暴海燕的大部分生活都在海上,只在繁殖季节才回到大陆。这些鸟类在北大西洋和地中海西部陡峭的岩石海岸和岛屿上筑巢。这段时间它们为了避免被较大的海鸟(如海鸥和贼鸥)捕食,都只选择在夜间出行。它们一个季节只生一枚蛋。到了冬季,它们飞越海洋一路向西迁徙到非洲南部。许多18世纪和19世纪的水手们称风暴海燕为“凯莉妈妈的信使”(Mother Carey’s chickens),并且相信这些鸟类是死去海员的灵魂来警告他们有风暴即将到来。“凯利妈妈”是一个传说中超自然的神灵,住在北方的一座冰山上,负责海上风暴。