Hi All,
分享一下我学HTML5 摘抄的读书笔记（我用的还是英文，因为一些新的东西还是来自于欧美国家，希望大家习惯于看一些英文材料）：
1. Difference between Sections and Articles?
Think of a section as a logical part of a document. Think of an article as actual content, such as a magazine article, blog post, or news item.
These new tags describe the content they contain. Sections can have many articles, and articles can also have many sections.
A section is like the sports section of a newspaper. The sports section has many articles. Each of those articles may again be divided into its own bunch of sections. Some sections like headers and footer s have proper tags. A section is a more generic element you can use to logically group other elements. Semantic markup is all about conveying the meaning of your content.
2. New Elements
<header> - Defines a header region of a page or section. [C5, F3.6, IE8, S4,O10]
<footer> - Defines a footer region of a page or section. [C5, F3.6, IE8, S4, O10]
<nav> - Defines a navigation region of a page or section. [C5, F3.6, IE8, S4, O10]
<section> - Defines a logical region of a page or a grouping of content. [C5, F3.6, IE8, S4, O10]
<article> - Defines an article or complete piece of content. [C5, F3.6, IE8, S4, O10]
<aside> - Defines secondary or related content. [C5, F3.6, IE8, S4, O10]
Custom data attributes
Allows addition of custom attributes to any elements using the data- pattern. [All browsers support reading these via JavaScript’s getAttribute() method.]
<meter> - Describes an amount within a range. [C5, F3.5, S4, O10]
<progress> - Control that shows real-time progress toward a goal. [Unsupported at publication time.]
<canvas> - The canvas element is a container element much like the script element. It’s a blank slate we can draw on.
<audio> [<audio src="drums.mp3"></audio>] - Play audio natively in the browser. [C4, F3.6, IE9, S3.2, O10.1, IOS3, A2]
<video> [<video src="tutorial.m4v"></video>] - Play video natively in the browser. [C4, F3.6, IE9, S3.2, O10.5, IOS3, A2]
3. New Tags
1) URL field [<input type="url">] - Displays a form field for URLs. [O10.1, IOS]
2) Telephone field [<input type="tel">] - Displays a form field for telephone numbers. [O10.1, IOS]
3) Search field [<input type="search"> - Displays a form field for search keywords. [C5, S4, O10.1, IOS]
4) Slider (range) [<input type="range">] - Displays a slider control. [C5, S4, O10.1]
5) Number [<input type="number">] - Displays a form field for numbers, often as a spinbox. [C5, S5, O10.1, IOS]
6) Date fields [<input type="date">] - Displays a form field for dates. Supports date, month, or week. [C5, S5, O10.1]
7) Dates with Times [<input type="datetime">] - Displays a form field for dates with times. Supports datetime,
8) datetime-local, or time. [C5, S5, O10.1]
9) Color [<input type="color">] - Displays a field for specifying colors. [C5, S5] (Chrome 5 and Safari5 understand the Color field but do not display any specific
4. CSS3 - new Styles & selector
1) :nth-of-type [p:nth-of-type(2n+1){color: red;}]
Finds all n elements of a certain type. [C2, F3.5, S3, IE9, O9.5, IOS3, A2]
:first-child [p:first-child{color:blue;}]
Finds the first child element. [C2, F3.5, S3, IE9, O9.5, IOS3, A2]
3) :nth-child [p:nth-child(2n+1){color: red;}]
Finds a specific child element counting forward. [C2, F3.5, S3, IE9, O9.5, IOS3, A2]
4) :last-child [p:last-child{color:blue;}]
Finds the last child element. [C2, F3.5, S3, IE9, O9.5, IOS3, A2]
5) :nth-last-child [p:nth-last-child(2){color: red;}]
Finds a specific child element counting backward. [C2, F3.5, S3, IE9, O9.5, IOS3, A2]
6) :first-of-type [p:first-of-type{color:blue;}]
Finds the first element of the given type. [C2, F3.5, S3, IE9, O9.5, IOS3, A2]
7) :last-of-type [p:last-of-type{color:blue;}]
Finds the last element of the given type. [C2, F3.5, S3, IE9, O9.5, IOS3, A2]
8) Column support [#content{ column-count: 2; column-gap: 20px; column-rule: 1px solid #ddccb5; }]
Divides a content area into multiple columns. [C2, F3.5, S3, O9.5, IOS3, A2]
9) :after [span.weight:after { content: "lbs"; color: #bbb; }]
Used with content to insert content after the specified element. [C2, F3.5, S3, IE8, O9.5, IOS3, A2]
10) Media Queries [media="only all and (max- 480)"]
Apply styles based on device settings. [C3, F3.5, S4, IE9, O10.1, IOS3, A2]
11) border-radius [border-radius: 10px;]
Rounds corners of elements. [C4, F3, IE9, S3.2, O10.5]
12) RGBa Supprt [background-color: rgba(255,0,0,0.5);]
Uses RGB color instead of hex codes along with transparency. [C4, F3.5, IE9, S3.2, O10.1]
13) box-shadow [box-shadow: 10px 10px 5px #333;]
14) Rotation: [transform: rotate(7.5deg);]
Rotates any element. [C3, F3.5, IE9, S3.2, O10.5]
15) Gradients: [linear-gradient(top, #fff, #efefef);]
Creates gradients for use as images. [C4, F3.5, S4]
16) @font-face [@font-face { font-famil y: Awes omeF ont; ]
src: url(http://example.com/awesomeco.ttf); font-wei ght: bold; }] - Allows use of specific fonts via CSS. [C4, F3.5, IE5+, S3.2, O10.1]
17) Creates drop shadows on elements. [C3, F3.5, IE9, S3.2, O10.5]
5. New Attributes
1) The role attribute [<div role="document">]
Identifies responsibility of an element to screen readers. [C3, F3.6, S4, IE8, O9.6]
Role Use
banner Identifies the banner area of your page
search Identifies the search area of your page
navigation Identifies navigational elements on your page
main Identifies where your page’s main content begins
contentinfo Identifies where information about the content exists, such as copyright information and publication date
complementary Identifies content on a page that complements the
main content but is meaningful on its own
application Identifies a region of a page that contains a web application as opposed to a web document
document Identifies a region containing document content, as opposed to application content.
article Identifies a composition that forms an independent part of a document.
definition Identifies a definition of a term or subject.
directory Identifies a list of references to a group, like a table of contents. Used for static content.
heading Identifies a heading for a section of a page.
img Identifies a section that contains elements of an image. This may be image elements as well as captions and descriptive text.
list Identifies a group of noninteractive list items.
listitem Identifies a single member of a group of noninteractive list items.
math Identifies a mathematical expression.
note Identifies content that is parenthetic or ancillary to the main content of the resource.
presentation Identifies content that is for presentation and can be ignored by assistive technology.
row Identifies a row of cells in a grid.
rowheader Identifies a cell containing header information for a row in a grid.
2) aria-live [<div aria-live="polite">]
Identifies a region that updates automatically, possibly by Ajax. [F3.6 (Windows), S4, IE8]
3) aria-atomic [<div aria-live="polite" aria-atomic="true">]
Identifies whether the entire content of a live region should be read or just the elements that changed. [F3.6 (Windows), S4, IE8]
6. Format and Supported Browsers
Embedded OpenType (EOT) [IE5–8]
TrueType (TTF) [IE9, F3.5, C4, S4]
OpenType (OTF) [IE9, F3.5, C4, S4, O10.5]
Scalable Vect or Graphics (SVG) [IOS]
We b Open Font (WOFF) [IE9, F3.6]
7. Client storage
localStorage
Stores data in key/value pairs, tied to a domain, and persists across browser sessions. [C5, F3.5, S4, IE8, O10.5, IOS, A]
sessionStorage
Stores data in key/value pairs, tied to a domain, and is erased when a browser session ends. [C5, F3.5, S4, IE8, O10.5, IOS, A]
We b SQL Databases
Fully relational databases with support for creating tables, inserts, updates, deletes, and selects, with transactions. Tied to a domain and persists across sessions. [C5, S3.2, O10.5, IOS3.2, A2]
Offline We b Applications
Defines files to be cached for offline use, allowing applications to run without an Internet connection. [C4, S4, F3.5, O10.6, IOS3.2, A2]
本笔记内容摘抄于HTML5 and CSS3.pdf电子书，下载连接 http://it-ebooks.info/book/29/