Create a simple HTML5 page ch01e2.html
<HTML> <Head> <Metaname= "Viewport"content= "width=device-width,initial-scale=1.0"> </Head> <Body>hello to the HTML5 world. </Body></HTML>
The only difference between HTML5 and other HTML pages is that we use the file type definitions (DTD Document typedefinition): <!doctype html>
Safari (the most commonly used iphone browser) will be based on <meta name= "viewport" content= "width=device-width,initial-scale=1.0" > , Set the page width to the screen width, and Disable browser scaling based on initial-scale=1.
HTML5 and version number
Why does HTML5 not have a version number?
1. The browser does not Support a version of HTML, but rather supports a feature. That is, if the browser supports you to use a feature, in time you declare the document as HTML4, the browser will still follow the HTML5 Standard to display the page.
2. The name can be very concise.
Move Document Type
Is it reliable to use the HTML5 Document type <!doctype html> ?
The document type is only used for confirmation, not the actual display of the browser.
Is it reliable in quirks mode (a technique that some Web browsers use to maintain backward compatibility with older web designs)?
<!doctype html> is the minimum amount of information required for a browser to work as standard, so it is very reliable when using <!doctype html> .
We use <!doctype html> instead of <! DOCTYPE Html> This is because HTML5 is not case sensitive, but we will use lowercase for consistency reasons.
Cross-browser HTML5
Old browsers do not recognize HTML5 elements and cannot style them, but there are a number of tools that can solve this problem, such as Modernizr.
Windows Mobile 's own browser does not recognize the HTML5 element. If you do not have Windows Mobile You can use IE7 to test because they are all based on the same browser engine. Modernizr:http://www.modernizr.com/
New HTML file ch01e3.html
<!DOCTYPE HTML><HTML> <Head> <title>Mobile Cookbook</title> <MetaCharSet= "Utf-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"> <style>Header, footer{Display:Block;} </style> </Head> <Body> <Header>Main Navigation here</Header>Body Content here<Footer>Footer links Here</Footer> </Body></HTML>
Create a new HTML file ch01e4.html and introduce Modernizr.
Modernizr-1.7.min.js Download: Http://pan.baidu.com/s/1c0v1Api Extract Code: KEPB
<!DOCTYPE HTML><HTML> <Head> <title>Mobile Cookbook</title> <MetaCharSet= "Utf-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"> <Scriptsrc= "Modernizr-1.7.min.js"></Script> <style>Header, footer{Display:Block;} </style> </Head> <Body> <Header>Main Navigation here</Header>Body Content here<Footer>Footer links Here</Footer> </Body></HTML>
：
The use of Modernizr needs to be introduced in the
1.html5shim, also valid for printing: http://code.google.com/p/html5shim/
2.InnerShiv, supports innerhtml of elements. http://jdbartlett.github.com/innershiv/
HTML5 CSS Reset
The following code clears the default style of the HTML5 element:
Article,aside,canvas,detailsfigcaption,figure,footer,header,hgroup,menu,nav,se
ction,summary,time,mark,audio,video{
margin:0;
padding:0;
border:0;
font-size:100%;
Font:inherit;
Vertical-align:baseline;
}
Make the HTML5 element into a block-level element in the old version of IE:
The following code makes the HTML5 roundness a block-level element, but not all HTML5 elements need to be shown as block-level elements.
The following are the block-level elements in HTML5:
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
Display:block;
}
Modernizr
Modernizr not only allows the HTML5 element to be styled, he can also detect the compatibility of various HTML5 functions in different browsers. You can customize what you download in version 2.0: http://www.modernizr.com/download/
Learn HTML5 's free resources
If you are not familiar with HTML5, you can learn it on the following website:
HTML5 doctor:http://html5doctor.com/
Dive into html5:http://diveintohtml5.org/
HTML5 rocks:http://www.html5rocks.com/
If you would like to learn more about HTML5, you can read the official HTML5 documentation, the documentation for the Web version: http://dev.w3.org/ Html5/spec/overview.html
WHATWG version of the online standard:http://www.whatwg.org/specs/web-apps/current-work/multipage/
HTML5 Mobile Web Development (iii)--using HTML5 in mobile websites
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
