Simple HTML5 beginners and html5 beginners

Source: Internet
Author: User

Simple HTML5 beginners and html5 beginners
This article mainly introduces a simple HTML5 getting started tutorial. For some static text display methods, you can refer

HTML5 represents the future. W3C (World Wide Web Consortium) has abandoned XHTML, making HTML5 a standard and recognized.

HTML5 is the next generation of HTML.
HTML5 will become a new standard for HTML, XHTML, and html dom, with the goal of replacing the existing HTML4.01 and XHTML1.0 standards. It is expected to reduce the dependency of Internet rich applications (RIA) on Flash, Silverlight, JavaFX, etc.
And more APIs that can effectively enhance network applications.
The previous version of HTML was born in 1999. Since then, the Web world has undergone great changes.
HTML5 is still in progress. However, most modern browsers already have some HTML5 support.
HTML5 is the result of W3C cooperation with WHATWG.
WHATWG focuses on web forms and applications, while W3C focuses on XHTML 2.0. On April 9, 2006, the two sides decided to cooperate to create a new version of HTML.
Rules for HTML5:
The new features should be based on HTML, CSS, DOM, and JavaScript.
Reduce the need for external plug-ins (such as Flash)
Better error handling
More replace script Markup
HTML5 should be independent of devices
Development process should be transparent to the public

Simplest HTML5 document

Copy XML/HTML Code to clipboard
  1. <! Doctype html>
  2. <Title> A Tiny HTML Document </title>
  3. <P> Let's rock the browser, HTML5 style. </p>


A simple HTML5 document that contains only one line of text. Its effect in the browser is as follows:



More common structures are segmented using Copy XML/HTML Code to clipboard

  1. <! Doctype html>
  2. <Html>
  3. <Head>
  4. <Title> A Tiny HTML Document </title>
  5. </Head>
  6. <Body>
  7. <P> Let's rock the browser, HTML5 style. </p>
  8. </Body>
  9. </Html>

<Html>,

HTML5 Document Type

Copy XML/HTML Code to clipboard
  1. <! Doctype html>


The first line must be a specific document type declaration, which is used to indicate the standards followed by the document tag. HTML5 document type declaration is extremely simple.

Character encoding

Most websites now use UTF-8 encoding, Which is concise, fast to convert, and supports any non-English character you want.

It is easy to add the character encoding information in HTML5. Add the <meta> element in Copy XML/HTML Code to clipboard

  1. <Head>
  2. <Meta charset = "UTF-8">
  3. <Title> A Tiny HTML Document </title>
  4. </Head>


The Dreamweaver design tool automatically adds this metadata when creating a new webpage, and saves the file as UTF Encoding format. If you are using the simplest text editor, remember to select the correct encoding (UTF-8) when saving ).

Page Language

It is a good habit to specify the natural language used on a webpage. To specify a language for the content, you can use the lang attribute on any element.

The following code adds a language description for the entire page to specify the lang attribute for the Copy XML/HTML Code to clipboard

  1. <Html lang = "zh-CN">


If the page contains text in multiple languages, this information details are also useful for screen readers.

Add a style sheet

As long as it is a specially designed professional website, it will definitely use the style sheet. When specifying the CSS style sheet to be used, you need to add the <link> element in Copy XML/HTML Code to clipboard

  1. <Head>
  2. <Meta charset = "UTF-8">
  3. <Title> A Tiny HTML Document </title>
  4. <Link rel = "stylesheet" href = "TinyHTML5.css">
  5. </Head>


Add JavaScript

Adding JavaScript in HTML5 is similar to adding JavaScript on a traditional page, for example:

Copy XML/HTML Code to clipboard
  1. <Head>
  2. <Meta charset = "UTF-8">
  3. <Title> A Tiny HTML Document </title>
  4. <Link rel = "stylesheet" href = "TinyHTML5.css">
  5. <Script src = "TinyHTML5.js"> </script>
  6. </Head>


You do not need to add the language = "JavaScript" attribute. The browser assumes that you want to use JavaScript.

Note:

If you want to spend a lot of time in IE testing pages containing JavaScript, you should also add a special comment called the Web sign (saved from url = ), this line of comment should be placed behind the specified character encoding element, as follows:

Copy XML/HTML Code to clipboard
  1. <Head>
  2. <Meta charset = "UTF-8">
  3. <! -- Save from url = (0014) about: internet -->
  4. <Title> A Tiny HTML Document </title>


This comment tells IE to view the page as downloaded from a remote website. Otherwise, IE switches to a special lock mode and a security warning is displayed, the JavaScript code is executed only after you click the "allow blocked content" button.

(0014) indicates the length of an internet string.

Final Result

A complete and beautiful HTML5 code is eventually as follows:

Copy XML/HTML Code to clipboard
  1. <! Doctype html>
  2. <Html lang = "zh-CN">
  3. <Head>
  4. <Meta charset = "UTF-8">
  5. <! -- Save from url = (0014) about: internet -->
  6. <Title> A Tiny HTML Document </title>
  7. <Link rel = "stylesheet" href = "TinyHTML5.css">
  8. <Script src = "TinyHTML5.js"> </script>
  9. </Head>
  10. <Body>
  11. <P> Let's rock the browser, HTML5 style. </p>
  12. </Body>
  13. </Html>

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.