HTML5 differences from HTML4 study notes

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. 





  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值