HTML5 入坑须知

HTML5/CSS3 学习快速笔记进行中……

HTML5 文档 | DOCTYPE Declaration

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>A Minimum HTML5 Document</title>
</head>
<body>
    Content...
</body>
</html>

文档类型声明非常简单,只需要 <!DOCTYPE html>

语义化标签 | Semantic Elements

大纲结构

section 定义文档或应用程序中的区域(或节)
nav 定义文档的主导航区域
article 用来包裹独立的内容片段
aside 用来表示与页面主内容松散相关的内容
hgroup 用来包裹标题元素

HTML5 大纲生成器
http://gsnedders.html5.org/outliner/
http://hoyois.github.io/html5outliner/

header 页眉
footer 页脚

其他 details, figcaption, figure, summary, time, mark

这些标签使代码变得更有语义,利于 SEO(搜索引擎优化)

检测用户浏览器对 HTML5/CSS3 特性的支持 | HTML5/CSS3 Features Detection

Modernizr
Polyfills and Modernizr

术语解释

Polyfill: a JavaScript shim that replicates the standard API for older browsers
腻子脚本:为旧浏览器再造出标准 API 的 JavaScript 填充代码段。意思就是一种使旧浏览器也支持新特性的 hack 吧。

CSS3 媒体查询 | CSS3 Media Queries

width: viewport 宽度
height: viewport 高度
device-width: 渲染表明的宽度 (设备屏幕的宽度)
device-height: 渲染表明的高度 (设备屏幕的高度)
orientation: 检查设备处于横向还是纵向
aspect-ratio: 基于 viewport 的宽高比 (16:9 可以这样定义 aspect-ratio:16/9)
device-aspect-ratio: 渲染表明的宽高比
color: 每种颜色的位数
color-index: 设备的颜色索引表中的颜色数 (必须是非负整数)
monochrome: 检测单色帧缓冲区中每像素所使用的位数 (必须是非负整数)
resolution: 用来检测屏幕或打印机的分辨率
scan: 电视机的扫描方式
grid: 用来检测输出设备是网格设备还是位图设备

流式布局 | Flow Layout

将元素的固定像素宽度转换为百分比宽度

公式:目标元素宽度 ÷ 上下文元素宽度 = 百分比宽度

将文字的固定像素大小转换为等量的相对尺寸:用 em 替换 px

弹性图片:width 用百分比 , max-width 用百分比或固定像素值

自适应图片解决方案 (考虑带宽限制):http://adaptive-images.com/

流式布局与媒体查询的配合 (例):`

@media screen and (min-width: 1001px) and (max-width: 1080px) {
    #navigation ul li a { font-size: 1.4em; }
}
@media screen and (min-width: 805px) and (max-width: 1000px) {
    #navigation ul li a { font-size: 1.25em; }
}
@media screen and (min-width: 769px) and (max-width: 804px) {
    #navigation ul li a { font-size: 1.1em; }
}

CSS 网格系统 | CSS Grid System

Semantic (http://semantic.gs)
Skeleton (http://getskeleton.com)
Less Framework (http://lessframework.com)
1140 CSS Grid (http://cssgrid.net)
Columnal (http://www.columnal.com)
Boostrap (http://getbootstrap.com/css/#grid)

使用这类产生一些冗余代码,但可以通过它们快速搭建界面布局,适合做快速原型。

私有前缀 | Vendor Prefixes

-prefix-free (http://leaverou.github.io/prefixfree/)
Can I use… (http://caniuse.com/)

一些快速技巧 | Quick Tips

多栏布局 column-width, column-count

文字换行 word-wrap: break-word;

CSS3 子字符串匹配属性选择器 | CSS3 Substring Matching Attribute Selectors

三种匹配模式分别是
以特定前缀开头 Element[attribute^=“value”]
包含特定字符串 Element[attribute*=“value”]
以特定后缀结尾 Element[attribute$=“value”]

*HTML5 中的 ID 值可以用数字开头
如:body[id^=“2”] .navHistory { color: #00b4ff; } 这个规则表示任意含有 .navHistory 类名的元素,只要它被包含在 ID 值以 2 开头的中,则其文字颜色为#00b4ff。

CSS3 结构伪类 | CSS3 Pseudo-classes

selector:pseudo-class {property:value;}
selector.class:pseudo-class {property:value;}
http://www.w3.org/TR/selectors/#pseudo-classes

自定义网页字体 | Web Fonts

CSS3 颜色格式 | CSS3 Color Formats

#HEX
rgb(red, green, blue)
rgba(red, green, blue, alpha)
hsl(hue, saturation, lightness)
hsla(hue, saturation, lightness, alpha)

*版本 9 以下的 IE 浏览器不支持 RGB 和 HSL。因此,如果需要针对这些浏览器提供备用的颜色声明,则要将其放在 RGB 或 HSL 值之前。

CSS 预处理器 | CSS Pre-processor

http://sass-lang.com/
http://lesscss.org/

可缩放图标 | Scalable Icons and Glyphs

http://fico.lensco.be/
http://fortawesome.github.io/Font-Awesome/

自适应图片方案 | Adaptive Images

http://adaptive-images.com/

IDE 相关

Validating JavaScript code with JSDoc types annotations
Annotating JavaScript for the Closure Compiler
Setting up WebStorm for working with TypeScript files on Mac OS

Frameworks

CreateJS
EaselJS API
BitmapData for EaselJS

Pixi.js Pixi API

dat.GUI | dat.GUI(on GoogleCode)
D3.js

p5.js

To be continue…