Summary of the main changes and improvements in HTML5 compared to HTML4-H5 Tutorial-php.cn

Summary of the main changes and improvements in HTML5 compared to HTML4

黄舟

Release： 2017-02-20 13:56:04

Original

1972 people have browsed it

I have been very busy helping teachers with projects during this period. I often didn’t go to class and just stayed in the laboratory. I didn’t have much time to read other things. I was assigned the front-end page design in the project. Sometimes when I browse the web, I see that mobile APPs and html5 are quite popular recently. With the rapid development of the mobile Internet, especially the 4G era has arrived, and Microsoft has implemented it in win10 The new browser edge has replaced IE, so now many websites are beginning to abandon IE and move towards html5. This is a trend, especially on mobile web pages, while on the PC side, there is still a gap between different browsers. There are some compatibility issues that need to be resolved urgently, but in the near future, html5 will become the dominant browser markup language.

What is html5?
html5 is a hypertext markup language first named by WHATWG (Web Hypertext Application Technology Working Group), and then combined with xhtml2.0 (standard) organized by W3C to produce the latest generation of hypertext. Markup language. It can be simply understood as: HTML 5 ≈ HTML+CSS 3+javascript+API

The static web pages we currently develop on the web front-end are generally html4.01. It also complies with W3C specifications. So what are the substantial differences between the two?

1. On the document type declaration
　html:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

    　　<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Copy after login

　html5:

XML/HTML Code复制内容到剪贴板
    
    
        <!DOCTYPE html>

Copy after login

It can be seen from the comparison between the two: In the document declaration, html4 has a long section of code, and it is difficult to remember this code. I think many people Is it generated directly by tools? But html5 is different. There are only simple declarations, which is also convenient for people to remember.

2. Set the page character encoding
In HTML5, you can specify the character encoding by directly appending the charset attribute to the element, as shown below:

html:<meta charset= “UTF-8 ”>
    　　html5:<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Copy after login

Starting from HTML5, it is recommended to use UTF-8 for the character encoding of files.

3. In terms of structural semantics
HTML: There is no tag that reflects structural semantics. We usually name it like this: p id="header". This represents the website head.

html5: It has great advantages in semantics. Some new tags are provided, such as: header, article, footer

What are the benefits of providing such tags? I think the most important thing is SEO optimization, whether we name the web page modules ourselves or have such labels. Because the ultimate goal of building a website is only one, and that is to make money. If you want to make a profit, you can only improve your website ranking through SEO optimization technology, so that your website will be valuable. It is precisely this point that html5 meets. Why do you say that? Because the tags he defined are more conducive to optimization and spiders can identify you.

4. Other new contents
New input types include: number (number), date (date), color (color), range (range), etc.

New inline elements include time, meter and progress.

The new embedded elements are video and audio. New interactive elements are details, datagrid and command.

5.Flash has brought trouble to many web developers. Playing Flash on a web page requires a bunch of code and plug-ins. The

The above is a summary of the main changes and improvements in HTML5 compared to HTML4. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!