简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > H5 Tutorial > body text

Simple HTML5 preliminary introductory tutorial_html5 tutorial skills

WBOY
Release： 2016-05-16 15:46:29
Original
1242 people have browsed it

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

HTML5 is the next generation of HTML.
HTML5 will become the new standard for HTML, XHTML and HTML DOM, with the goal of replacing the existing HTML4.01 and XHTML1.0 standards. It hopes to reduce the dependence of Rich Internet Applications (RIA) on Flash, Silverlight, JavaFX, etc., and provide more APIs that can effectively enhance network applications.
The last version of HTML was created in 1999. The world of the Web has changed dramatically since then.
HTML5 is still a work in progress. However, most modern browsers already have some HTML5 support.
HTML5 is the result of a collaboration between the W3C and the WHATWG.
WHATWG works on web forms and applications, while W3C focuses on XHTML 2.0. In 2006, the two parties decided to collaborate to create a new version of HTML.
Some rules established for HTML5:
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 markup to replace scripts
HTML5 should be device independent
The development process should be transparent to the public

The simplest HTML5 document

XML/HTML CodeCopy content to clipboard
  1. >
  2. <title>A Tiny HTML Documenttitle>
  3. <p>Let's rock the browser, HTML5 style.< ;/p> 

A super simple HTML5 document containing only one line of text. It looks like this in the browser:


The more common structure uses and to separate the information of the page from the actual content of the page, and uses to encapsulate the entire document , the current document looks like this:

XML/HTML CodeCopy content to clipboard
  1. >
  2. <html>
  3. <head>
  4. <title>A Tiny HTML Documenttitle>
  5. head>
  6. <body>
  7. <p>Let's rock the browser, HTML5 style.< ;/p> 
  8. body>
  9. html>

, and HTML5 does not require these elements, but this writing style is better.

HTML5 Document Type

XML/HTML CodeCopy content to clipboard
  1. >


The first line must be a specific document type declaration, which is used to tell which standard the subsequent document markup follows. HTML5's 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 characters you want.

It is very simple to add character encoding information in HTML5. Add the element in , as follows:

XML/HTML CodeCopy content to clipboard
  1. <head>
  2. <meta charset="utf- 8"> 
  3. <title>A Tiny HTML Documenttitle>
  4. head>


The Dreamweaver design tool automatically adds this metainformation when creating a new web page and also saves the file in UTF encoding. If you are using the simplest text editor, remember to select the correct encoding (UTF-8) when saving.

Page Language

It is a good practice to indicate the natural language used in web pages. To specify a language for content, use the lang attribute on any element.

To add language description to the entire page, you need to specify the lang attribute for the element, as shown in the following code:

XML/HTML CodeCopy content to clipboard
  1. <html lang="zh-CN"> 


This information detail is also useful for screen readers if the page contains text in multiple languages.

Add style sheet

As long as it is a professionally designed website, it will definitely use style sheets. When specifying the CSS style sheet to be used, you need to add the element in , as follows:

XML/HTML CodeCopy content to clipboard
  1. <head>
  2. <meta charset="utf- 8"> 
  3. <title>A Tiny HTML Documenttitle>
  4. <link rel="stylesheet" href="TinyHTML5.css">
  5. head>


Add JavaScript

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

XML/HTML CodeCopy content to clipboard
  1. <head>
  2. <meta charset="utf- 8"> 
  3. <title>A Tiny HTML Documenttitle>
  4. <link rel="stylesheet" href="TinyHTML5.css">
  5. <script src="TinyHTML5. js">script>
  6. head>


There is no need to add the language="JavaScript" attribute. The browser assumes you want to use JavaScript.

Special Note:

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

XML/HTML CodeCopy content to clipboard
  1. <head>
  2. <meta charset="utf- 8"> 
  4. <title>A Tiny HTML Documenttitle>


This comment tells IE to treat the page as downloaded from the remote website. Otherwise, IE will switch to a special lock mode and pop up a security warning after you click "Allow blocked content" The JavaScript code will not be executed until after the button is pressed.

(0014) refers to the length of the about:internet string.

Final result

A complete and beautiful HTML5 code finally looks like this:

XML/HTML CodeCopy content to clipboard
  1. >
  2. <html lang="zh- CN"> 
  3. <head>
  4. <meta charset="utf- 8"> 
  6. <title>A Tiny HTML Documenttitle>
  7. <link rel="stylesheet" href="TinyHTML5.css">
  8. <script src="TinyHTML5. js">script>
  9. head>
  11. <body>
  12. <p>Let's rock the browser, HTML5 style.< ;/p> 
  13. body>
  14. html>
Related labels：
html5
source：php.cn
Previous article：In-depth analysis of the use of Blob objects in HTML5_html5 tutorial skills Next article：What will be the development of HTML5? The prospects of HTML5_html5 tutorial skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How do I get my image to appear on the page's main display? What I want to do is receive some photos using NASAAPI. These photos are then displayed on...
From 2024-04-06 15:33:12
0
1
433
Can PDF files run HTML5 and Javascript? I have a stupid idea to try and make a program that won't be blocked on any computer since...
From 2024-04-05 12:57:00
0
1
456
What is the difference between enctype and formenctype in HTML5? I'm just wondering what's the difference between the attributes enctype and formenctype in...
From 2024-04-02 11:47:56
0
1
275
Make the page mobile-friendly? I have many web pages and some websites. The thing is, I'm a beginner. I'm using basic htm...
From 2024-04-01 20:42:38
0
1
259
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！