What is the difference between H5 and HTML-Front-end Q&A-php.cn

What is the difference between H5 and HTML

醉折花枝作酒筹

Release： 2023-01-06 11:16:48

Original

10462 people have browsed it

The difference between h5 and html is: 1. In terms of document type declaration, html has a long code that is difficult to remember, while html5 only has a simple declaration, which is convenient for people to remember; 2. In terms of structural semantics, HTML4.0 does not have tags that reflect structural semantics, but HTML5 has great advantages in semantics.

What is the difference between H5 and HTML

The operating environment of this tutorial: windows7 system, html&&HTML5 version, Dell G3 computer.

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.

1. In 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" >

Copy after login

html5：

<!DOCTYPE html>

Copy after login

It can be seen from the comparison between the two: in the document declaration On the website, HTML has a long code, and it is difficult to remember this code. I guess many people use tools to generate it directly, right? But html5 is different. It only has simple declarations, which is also easier for people to remember and is more streamlined.

2. In terms of structural semantics

html4.0: There is no tag that reflects structural semantics. We usually name it like this

< divid = "header" ></ div >

Copy after login

This represents the header of the website department.

html5: It has great advantages in semantics. Provides some new html5 tags, such as:

< header > 、< nav >、< article >、< aside >、< footer >..

Copy after login

3. Powerful new features of HTML5

(1) Powerful drawing function

There may be some animations or pictures , in HTML5 it can be achieved 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 high-resolution 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 what’s the difference between them. Difference:

Canvas

1. Depends on resolution

2. Does not support event handler

3. Weak text rendering capability

4. Ability to save result images in .png or .jpg format

5. Best suited for image-intensive games where many objects will be frequently redrawn

SVG

1. Not dependent on resolution

2. Supports event handlers

3. Best suited for applications with large rendering areas (such as Google Maps)

4. High complexity will slow down the rendering speed (any application that excessively uses DOM is not fast)

5. Not suitable for game applications

(2) Add 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.

 < videosrc = "视频地址" ></ video >//详细属性可以见下图

Copy after login

4. Benefits

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.

Recommended learning: html video tutorial

The above is the detailed content of What is the difference between H5 and HTML. For more information, please follow other related articles on the PHP Chinese website!