HTML5&CSS3读书笔记

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-width: 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/