Home > Article > Web Front-end > What is the difference between html5 and html
What is the difference between html5 and html
- 一个新手Original
- 2017-09-21 10:16:091721browse
Brief discussion: The difference between html5 and html
Recently, the most popular words in group chats are mobile website and html5. Some people may ask, what is the relationship between the two? With the rapid development of mobile Internet, especially the 4G era, and the fact that Microsoft does not provide update patches or maintenance for "XP system", "html5+css3" has gradually become a new generation of web front-end technology. , mobile websites have gradually become a trend.
What is html5?
html5 is a hypertext markup language first named by WHATWG (Web Hypertext Application Technology Working Group), and then combined with W3C's xhtml2.0 (standard) to produce the latest generation of Hypertext Markup Language. It can be simply understood as: HTML 5 ≈ HTML4.0+CSS3+JS+API.
What is the difference between hmtl5 and html?
The static web pages we currently develop on the web front-end are generally HTML4.0. At the same time, it complies with the W3C's xhtml1.0 specification. So what are the substantial differences between them?
1. On the document type declaration
html:
|
1 2 3 |
<!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"> |
HTML5:
1 |
<!DOCTYPE html> |
由这两者对比可见：在文档声明上，html有很长的一段代码，并且很难记住这段代码，想必很多人都是靠工具直接生成的吧？而html5却是不同，只有简简单单的声明，这也方便人们的记忆，更加精简。
2.在结构语义上
html4.0：没有体现结构语义化的标签，我们通常都是这样来命名的
1 |
<p id="header"></p> |
这样表示网站的头部。
html5：在语义上却有很大的优势。提供了一些新的html5标签，比如:
1 |
<header>、<nav>、<article>、<aside>、<footer>.. |
3. Powerful new features of HTML5
(1) Powerful drawing function
There may be some animation, or Pictures can be realized in HTML5 through the powerful painting function and JS. But it doesn't work in html4.0.
In HTML5, there are two things that can be drawn. Let’s take a look at which two magical things they are.
1.Canvas tag
Canvas draws 2D graphics through JavaScript. Canvas renders pixel by pixel.
In canvas, once the graphic is drawn, it will no longer receive the attention of the browser. If its position changes, the entire scene needs to be redrawn, including any objects that may have been covered by graphics.
2.SVG
SVG is a language that uses XML to describe 2D graphics. SVG is based on XML, which means that every element in the SVG DOM is available. You can attach a JavaScript event handler to an element. In SVG, every drawn shape is treated as an object. If the properties of an SVG object change, the browser can automatically reproduce the graphic.
Compared with other image formats (such as JPEG and GIF), the advantages of using SVG are:
(1) SVG images can be created and modified through a text editor
(2) SVG images can be searched, indexed, scripted or compressed
(3) SVG is scalable
(4) SVG images can be enhanced at any resolution Print with high quality
(5) SVG can be enlarged without losing image quality
Then both can be used for drawing. Let’s take a look at the differences between them. Differences:
Canvas
1. Depends on resolution
2. Does not support event handlers
3. Weak text Rendering capabilities
4. Ability to save result images in .png or .jpg format
5. Best suited for image-intensive games where many objects will be redrawn frequently
SVG
1. Does not depend on resolution
2. Supports event handlers
3. Best suited for applications with large rendering areas Program (such as Google Maps)
4. High complexity will slow down the rendering speed (any application that excessively uses the DOM is not fast)
5. Not suitable for game applications
(2) New video Tag
Maybe in html4.0, if we want to insert a video, we also need to quote a long section of code. But in the case of html5. We only need to use it for a video tag.
1 |
|
What are the benefits of providing such a label?
First: Save programmers time in writing code.
Second: I think the most important thing is SEO optimization.
Whether we name the web page module ourselves, there is still such a label. Because the ultimate purpose 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, and 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.
Summary: Although html5 has come out a few years ago, it was not popular at that time because it was not mature enough and the timing was not right. At this time when the Internet is developing rapidly, the era of 4G is also coming. If we don’t learn hml5+css3, we will be out!
The above is the detailed content of What is the difference between html5 and html. For more information, please follow other related articles on the PHP Chinese website!