最近在研究HTML5 boilerplate的模版,以此为线索可以有条理地学习一些前端的best practice,好过在W3C的文档汪洋里大海捞针……啊哈哈哈……

开头的IE探测与no-js类是什么?

Modernizer探测到浏览器启用了js的时候会将.no-js替换成.js,这样在CSS里可以为禁用js或者启用js的浏览器添加额外的规则,像这样

.no-js xx {
/* Some CSS code for browsers with js disabled */
}

算是对没有if-else的CSS的一种workaround。其他lt-ie*的类也是同理。

参见: What is the purpose of the HTML “no-js” class?

<meta http-equiv="X-UA-Compatible" content="IE=edge">

用于让IE使用可用的最高版本的模式,e.g. IE8用IE8模式,IE9用IE9模式。 参见What's the difference if <meta http-equiv="X-UA-Compatible" content="IE=edge"> exists or not?

旧版的HTML5 boilerplate还带了chrome=1这个值,是为了让有Google Chrome Frame这个插件的IE可以用上chrome的特性和JS引擎,但是这个插件已经退役了,所以新版的HTML5 boilerplate也去掉了这个值。

注意这段代码过不了W3C提供的validation,当然也可以理直气壮地无视它啊哈哈哈。如果实在是很在意,可以用.htaccess,参考这个讨论,或者直接在服务器代码里发送这个header(比如端口不是80又想兼容IE的)。

关于favicon

为iOS从safari放置到桌面的web app设置图标:Configuring Web Applications

关于favicon,一般最好用ico(一些旧版的浏览器不支持png= =),还有一些逗比浏览器(e.g.360)只肯使用网站根目录下的favicon.ico(连端口都不能有),这些点要注意。

参考:

charset放在哪里

为了防止被利用不正确的编码进行攻击(比如IE会猜到用utf-7),一定要声明charset,而且要放在HTML文件的前1024byte(参考HTML5标准),最好放在title的前面(参考Google Dcotype

viewport

width=device-width, initial-scale=1一般会在移动端浏览器下取得比较好的效果(尤其是在有响应式设计的时候。不设的话通常移动端的浏览器会按电脑屏幕的尺寸绘图,一打开网页长得跟个PC版的略缩图一样……)

这个入门slides蛮好的

normalize.css

注意现在维护的normalize.cssv3对IE只支持到IE8,IE6~7需要已经不再维护的normalize.cssv1(不过想用HTML5的就不会考虑照顾这些低版本IE了吧2333)

源代码的注释也是学习各浏览器兼容性的好材料。

main.css

里面自带了一大堆helper class以及一些opinionated的默认值(e.g.默认文本颜色设为#222而不是比较刺眼的纯黑),另外设置了一堆打印格式和用于设置隐藏的样式。

modernizr

很有名的处理浏览器新特性兼容性的JS库,略复杂,参考官网即可

plugins.js

用来放各种插件(包括jQuery插件)。里面有一段代码是用来防止一些逗比浏览器没有console导致报错的,运行完后这类浏览器会多出一个windows.console,里面的各种各样的方法(e.g. window.console.log)都是空函数,这样被调用不会有任何效果但是也不会报错。

追记: 昨晚刚看到这个,今天就遇到了…………没按F12前的IE9就是没有console的。如果遇到IE里javascript失效,按了F12之后又生效,就可以删掉使用console的地方或者将这段代码放到开头的js里。(当然更好的做法就是用工具清理一遍代码后再用于测试233)

怎样同时使用HTML5 boilerplate与bootstrap

使用Initializr即可

参考:Is Bootstrap a complement or an alternative to HTML5 Boilerplate or viceversa?

引用外站文件的时候为什么用//做协议

为了让浏览器对不同的协议(https/http)载入不同的文件,这样不会有烦人的提示跑出来,参考The Protocol-relative URL

WebpageTest

在挖官方文档和相关链接的时候偶然发现了这个好东西:WebpageTest,可以检测不同地点里多种浏览器(包括部分移动端浏览器)下页面载入的性能与网络IO,这样就可以为一些没有开发者工具的浏览器做profiling啦~

Google Doctype

一些web开发小知识的集合,原来的地址已经挂了,不过在google code上存着镜像:Google Doctype的镜像

HTML5 boilerplate 笔记(转)的更多相关文章

  1. HTML5 Boilerplate笔记(3)

    HTML5 Boilerplate项目网址:https://github.com/h5bp/html5-boilerplate

  2. HTML5 Boilerplate笔记(2)(转)

    最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用.   一:HTML5 ...

  3. 关于HTML5 boilerplate 的一些笔记

    最近在研究HTML5 boilerplate的模版,以此为线索可以有条理地学习一些前端的best practice,好过在W3C的文档汪洋里大海捞针……啊哈哈哈…… 开头的IE探测与no-js类是什么 ...

  4. HTML5 Boilerplate - 让页面有个好的开始

    最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用.   一:HTML5 ...

  5. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  6. HTML模块化:使用HTML5 Boilerplate模板

    HTML5 Boilerplate 是一个由 Paul Irish(Google Chrome 开发人员.jQuery 项目成员.Modernizr 作者.yayQuery 播客主持人)主导的“前端开 ...

  7. HTML5 Boilerplate

    time: 2016-10-20 20:00 HTML5 Boilerplate(H5BP)是一个由 Paul Irish(Google Chrome 开发人员.jQuery 项目成员.Moderni ...

  8. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. HTML5基础——笔记

    HTML5基础——笔记 近几年来,互联网+.大数据.云计算‘物联网‘虚拟现实‘人工智能.机器学习.移动互联网等IT相关新名词.新概念层出不穷,相关产业发展如火如荼.互联网+移动互联网已经深入到人民日常 ...

随机推荐

  1. npm获取配置值的两种方式

    命令行标记 在命令行上放置--foo bar设置foo配置参数为bar. 一个 -- 参数(argument)告诉cli解析器停止读取flags.一个 在命令行结尾的--flag参数(paramete ...

  2. 动态规划:划分DP

    划分型动态规划之数的划分 先贴上2014年10月31日的那份代码,甚至怀念当时在机房YY这道题的场面 高中最快乐的时候.. #include<iostream> using namespa ...

  3. Flex UI刷新后保持DataGrid中的ScrollBar的位置不变

    这是之前我发的一个贴子问题描述:http://q.cnblogs.com/q/53469/

  4. JetbrainsCrack

    http://blog.csdn.net/lcyong_/article/details/61205672 http://blog.csdn.net/nn_jbrs/article/details/7 ...

  5. windows注册表存储位置

    win7/8/10 通常情况: HKEY_LOCAL_MACHINE \SYSTEM : \system32\config\system HKEY_LOCAL_MACHINE \SAM : \syst ...

  6. python3 迭代器,生成器

    一 .什么是迭代 1. 重复 2.下次重复一定是基于上一次的结果而来 while True: cmd=input(':') print(cmd) l=[1,2,3,4] count=0 while c ...

  7. (二十八)fopen与读写的标识r,r+,rb+,rt+,w+.....

    fopen与读写的标识r,r+,rb+,rt+,w+..... 函数简介 函数功能: 打开一个文件 函数原型:FILE * fopen(const char * path,const char * m ...

  8. Google I/O完整盘点,这才是地球上最「性感」的发布会

    https://news.cnblogs.com/n/569588/ Google.ai:展现 AI 最好的一面 Google 今天新发布了第二代的 Tensor 处理单元(TPU),这是一个云计算硬 ...

  9. letsencrypt的证书转换上传到360网站防护方法

    命令:openssl 首先letsencrypt生成的证书在 letsencrypt/live/xxx.com/ 下,需要使用cert.pem和privkey.pem文件. 生成crt文件: open ...

  10. CentOS7配置阿里云yum源和EPEL源

    配置阿里云yum源(参考:http://mirrors.aliyun.com/help/centos) 1.备份 [root@bogon ~]# cd /etc/yum.repos.d/ [root@ ...