现在的位置: 首页 > 综合 > 正文

HTML5 differences from HTML4 study notes

2014年03月04日 ⁄ 综合 ⁄ 共 2402字 ⁄ 字号 评论关闭

1. Introduction

a. Language can be written in HTML and XML.

b. define processing detail for implementation.

c. Improve markup for document.

d. Introduced markup and API for merging idioms.

The HTML5 specification will not be considered finished before there are at least two complete implementations of the specification. The goal is to ensure the specification is implementable.

2. Syntax

HTML5 can be written by HTML with "txt/html" media type or by XML with "application/xhtml+xml or application/xml" media type.

2.1 Character Encoding

HTML5 has three means of setting the character encoding

a. At the transport level, using http's "content-type" header.

b.Using a Unicode Byte Order Mark (BOM) character at the start of the file.

c. Using meta element in the HTML, within the first 1024 bytes of the document.

2.2 Document Type

The doctype declaration is <!DOCTYPE html> and is case-insensitive in the HTML syntax.

Since no longer SGML-based HTML, doytype is only need to eanble standard mode for documents using the HTML syntax.

2.3 MathML and SVG

The HTML syntax of HTML5 allows for MathML and SVG elements to be used inside a document.

ex:

<!doctype html>
<title>SVG in text/html</title>
<p>
 A green circle:
 <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
</p>

3. Language

3.1 new element

structue element
section article aside hgroup header  footer nav figure fiacaption 

other new element
video audio trace embed mark progress meter time ruby bid wbr canvas command detail datalist keygen output

input's new attribute
tel search url email datetime date month week time datetime-local number range color

3.2 new attributes

3.3 changed element

3.4 changed attributes

3.5 obsolete  element

3.6 obsolete attributes

4.Content Model Changes

4.1 HTML4

Content Model is what defines how elements are nested. (How to define an element as other element's child)

There two major category of element in HTML4, "inline level" and "block level".

An element is one kind, and it also allow children of one kind. And the two kinds may be different.

in HTML4 CSS use "inline level element" and "block level element" which has nothing to do the HTML4's Content Model.

"P" allows "inline level" 

"body" allows "block level"

"div" allows both

"P" is a "block-level" element and only allows "inline level"

4.2  HTML5 new content Model

Metadata content e.g.link,script
Flow content e.g.span,div (roughly like HTML4's block-level and inline together)
Sectioning content e.g.aside,section
Head content e.g.h1,hgroup
Phrasing content e.g. span,img,text (roughly like HTML4's inline)
Embedded content e.g. img,iframe,svg
Intractive content e.g. a,button,label

5. New API

HTML5 introduces a number of APIs that help in creating Web applications.

Video/Audio's new APIs for controlling playback and so on. 

抱歉!评论已关闭.