HTML5 Mobile Web Development (iii)--using HTML5 in mobile websites

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.