html5 模态框代码 html5模块化

转载

编程思想者 2023-07-31 14:15:09

文章标签 html5 模态框代码 html HTML5 css 文章分类 HTML5 移动开发

HTML5 Boilerplate 是一个由 Paul Irish（Google Chrome 开发人员、jQuery 项目成员、Modernizr 作者、yayQuery 播客主持人）主导的“前端开发模版”。HTML5 Boilerplate 是一套具有非常多先进特性的框架，可以让开发者快速制作出面向未来的网站。

开始一个Web项目，HTML的书写总是重中之重，一个好的HTML能从根源上规避大量潜在问题，所以Web App应该全部应用一个标准化的高质量HTML模板，而不是将所有页面交由开发人员自由发挥。

这里推荐使用HTML5 Boilerplate项目作为App的默认模板以及文件路径规范，无论是网站或者富UI的App，都可以采用这个模板作为起步。

可以使用

git clone git://github.com/h5bp/html5-boilerplate.git

或者直接下载HTML5 Boilerplate项目代码。HTML5 Boilerplate的文件结构如下：

从上往下看：

css 用于存放css文件，并内置了Normalize.css作为默认CSS重置手段（其实Normalize.css不能算是CSS reset）。
doc 存放项目文档
img 存放项目图片
js 存放javascript文件，其中第三方类库推荐放在vendor下
.htaccess 内置了很多对于静态文件在Apache下的优化策略，如果Web服务器不是Apache则可以参考其他Web服务器配置优化。
404.html 默认的404页面，
index.html 项目模板
humans.txt 相对于面向机器人的robots.txt，humans.txt更像是小幽默，这在里可以写关于项目/团队的介绍，或者放置一些彩蛋给那些喜欢对你的应用刨根问底的用户们。
robots.txt 用于告诉搜索引擎蜘蛛爬行规则
crossdomain.xml 用于配置Flash的跨域策略
favicon.ico apple-touch-icon.png等小图标。

如果是一个主要面向移动设备，则主要将jQuery换成了Zepto.js，以适应移动设备。

HTML5 Boilerplate的模板核心部分不过30行，但是每一行都可谓千锤百炼，可以用最小的消耗解决一些前端的顽固问题：

使用条件注释区分IE浏览器

<!DOCTYPE html>
<html class="no-js">

之所以要这样写：

可以使用class作为全局条件区分低版本的IE浏览器并进行调整，这显然要优于使用CSS Hack。
可以避免IE6条件注释引起的高版本IE文件阻塞问题，原文的解决方法是在前面加一个空白的条件注释，但是这里显然将原本无用空白的条件注释变得有意义了。
仍然可以通过HTML验证。
与Modernizr等特征检测类库使用相同的class，更具备通用性。

no-js标签是需要与Modernizr等类库配合使用的，如果你不想在项目中引入Modernizr，需要在Head部分加入一行使no-js标签变为js，代码来自Avoiding the FOUC：

<script>(function(H){HH.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>

通过上面的条件注释，就可以在CSS中针对不同情况分别处理：

.lt-ie7 {} /* IE6等版本时 */
.no-js {} /* JavaScript没有启用时 */

meta标签的书写顺序

为了让浏览器识别正确的编码，meta charset标签应该先于title标签出现。

meta X-UA-Compatible标签可以指定IE8以上版本浏览器以最高级模式渲染文档，同时如果已经安装Google Chrome Frame则直接使用Chrome Frame渲染。而指定渲染模式的meta X-UA-Compatible标签同样需要优先出现：

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>

设置移动设备显示窗口宽度

<meta name="viewport" content="width=device-width">

这是移动设备专属的标签，具体设置需要根据项目实际情况调整。

使用Modernizr做浏览器差异检测

Modernizr常做前端的应该都不陌生。引入Modernizr后，html标签的no-js将会被自动替换为js，同时Modernizr会向html标签添加代表版本检测结果的class。

对于低版本浏览器的向上兼容需要根据项目实际需求处理，Modernizr也非常周到的给出的绝大多数HTML5功能的兼容方法。

脚本

一个完整的Boilerplate里还包含一个build目录，里面config目录里有针对ant的配置文件，default.properties自然是默认属性定义，用户可以修改project.properties来定义自己的属性；tools目录下有各种编译工具。

编译时，libs下的文件不会再改变，但mylibs中文件以及另两个都会一起压缩到一个js文件中，style.css也会被压缩，同时 images目录下会针对jpg和png优化。js中consloe.log函数将被去除，html文件也可以压缩，默认使用htmlbuildkit，还可以用htmlclean或htmlcompress来压缩。

再看看default.properties里定义哪些选项