What is the difference between html5 and html

<h1 style="margin:0px; padding:10px 0px; font-size:20px; font-weight:500; color:rgb(0,136,219); text-align:center"> Brief discussion: The difference between html5 and html</h1> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 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. </p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">What is html5? </span></p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">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. </p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">What is the difference between hmtl5 and html? </span></p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">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? </p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">1. On the document type declaration</span></p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">html:</p> <table style='outline:0px; font-size:13px; font-variant:inherit; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border:1px solid rgb(204,204,204); bottom:auto; float:none; left:auto; margin:0.3em 0px; overflow:auto; padding:0px; position:relative; right:auto; top:auto; vertical-align:baseline; min-height:auto; background:none rgb(245,245,245); width:100%'><tbody><tr style="position:static; right:auto; border:0px; float:none; left:auto; margin:0px; outline:0px; overflow:visible; padding:0px; bottom:auto; top:auto; vertical-align:baseline; width:auto; min-height:auto; background:none" class="firstRow"> <td style='vertical-align:baseline; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border-width:0px 1px 0px 0px; border-top-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:initial; border-bottom-color:initial; border-left-color:initial; float:none; left:auto; margin:0px; outline:0px; overflow:visible; background:none rgb(247,247,249); position:static; right:auto; top:auto; bottom:auto; min-height:auto; font-size:13px; padding:9.5px 0px 9.5px 9.5px; color:rgb(175,175,175); border-right-style:solid; border-right-color:rgb(225,225,232); width:4.0393%'> <p style="right:auto; margin:0px; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; word-wrap:normal; background:none; top:auto; vertical-align:baseline; width:auto; min-height:auto; white-space:pre; text-align:right; padding:0px 0.5em 0px 1em">1</p> <p style="right:auto; margin:0px; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; word-wrap:normal; background:none; top:auto; vertical-align:baseline; width:auto; min-height:auto; white-space:pre; text-align:right; padding:0px 0.5em 0px 1em">2</p> <p style="right:auto; margin:0px; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; word-wrap:normal; background:none; top:auto; vertical-align:baseline; width:auto; min-height:auto; white-space:pre; text-align:right; padding:0px 0.5em 0px 1em">3</p> </td> <td style='position: static; font-family: Monaco,Menlo,Consolas,"Courier New",monospace; right: auto; border: 0px none; float: none; left: auto; margin: 0px; outline: 0px none; overflow: visible; padding: 0px; bottom: auto; top: auto; vertical-align: baseline; font-size: 13px; min-height: auto; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; width: 95.0873%; word-break: break-all;'><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><!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"></pre><div class="contentsignin">Copy after login</div></div></td></tr></tbody></table><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> HTML5:<br/></p><table style="outline:0px; font-size:13px; font-variant:inherit; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border:1px solid rgb(204,204,204); bottom:auto; float:none; left:auto; margin:0.3em 0px; overflow:auto; padding:0px; position:relative; right:auto; top:auto; vertical-align:baseline; min-height:auto; background:none rgb(245,245,245); width:100%"><tbody><tr style="position:static; right:auto; border:0px; float:none; left:auto; margin:0px; outline:0px; overflow:visible; padding:0px; bottom:auto; top:auto; vertical-align:baseline; width:auto; min-height:auto; background:none" class="firstRow"><td style="vertical-align:baseline; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border-width:0px 1px 0px 0px; border-top-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:initial; border-bottom-color:initial; border-left-color:initial; float:none; left:auto; margin:0px; outline:0px; overflow:visible; background:none rgb(247,247,249); position:static; right:auto; top:auto; bottom:auto; min-height:auto; font-size:13px; padding:9.5px 0px 9.5px 9.5px; color:rgb(175,175,175); border-right-style:solid; border-right-color:rgb(225,225,232); width:4.0393%"><p style="right:auto; margin:0px; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; word-wrap:normal; background:none; top:auto; vertical-align:baseline; width:auto; min-height:auto; white-space:pre; text-align:right; padding:0px 0.5em 0px 1em">1</p></td><td style="position: static; font-family: Monaco,Menlo,Consolas,"Courier New",monospace; right: auto; border: 0px none; float: none; left: auto; margin: 0px; outline: 0px none; overflow: visible; padding: 0px; bottom: auto; top: auto; vertical-align: baseline; font-size: 13px; min-height: auto; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; width: 95.0873%; word-break: break-all;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><!DOCTYPE html></pre><div class="contentsignin">Copy after login</div></div></td></tr></tbody></table><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">由这两者对比可见：在文档声明上，html有很长的一段代码，并且很难记住这段代码，想必很多人都是靠工具直接生成的吧？而html5却是不同，只有简简单单的声明，这也方便人们的记忆，更加精简。</p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">2.在结构语义上</span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">html4.0：没有体现结构语义化的标签，我们通常都是这样来命名的</p><table style="outline:0px; font-size:13px; font-variant:inherit; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border:1px solid rgb(204,204,204); bottom:auto; float:none; left:auto; margin:0.3em 0px; overflow:auto; padding:0px; position:relative; right:auto; top:auto; vertical-align:baseline; min-height:auto; background:none rgb(245,245,245); width:100%"><tbody><tr style="position:static; right:auto; border:0px; float:none; left:auto; margin:0px; outline:0px; overflow:visible; padding:0px; bottom:auto; top:auto; vertical-align:baseline; width:auto; min-height:auto; background:none" class="firstRow"><td style="vertical-align:baseline; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border-width:0px 1px 0px 0px; border-top-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:initial; border-bottom-color:initial; border-left-color:initial; float:none; left:auto; margin:0px; outline:0px; overflow:visible; background:none rgb(247,247,249); position:static; right:auto; top:auto; bottom:auto; min-height:auto; font-size:13px; padding:9.5px 0px 9.5px 9.5px; color:rgb(175,175,175); border-right-style:solid; border-right-color:rgb(225,225,232); width:4.0393%"><p style="right:auto; margin:0px; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; word-wrap:normal; background:none; top:auto; vertical-align:baseline; width:auto; min-height:auto; white-space:pre; text-align:right; padding:0px 0.5em 0px 1em">1</p></td><td style="position: static; font-family: Monaco,Menlo,Consolas,"Courier New",monospace; right: auto; border: 0px none; float: none; left: auto; margin: 0px; outline: 0px none; overflow: visible; padding: 0px; bottom: auto; top: auto; vertical-align: baseline; font-size: 13px; min-height: auto; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; width: 95.0873%; word-break: break-all;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><p id="header"></p></pre><div class="contentsignin">Copy after login</div></div></td></tr></tbody></table><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">这样表示网站的头部。</p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">html5：在语义上却有很大的优势。提供了一些新的html5标签，比如:</p><table style="outline:0px; font-size:13px; font-variant:inherit; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border:1px solid rgb(204,204,204); bottom:auto; float:none; left:auto; margin:0.3em 0px; overflow:auto; padding:0px; position:relative; right:auto; top:auto; vertical-align:baseline; min-height:auto; background:none rgb(245,245,245); width:100%"><tbody><tr style="position:static; right:auto; border:0px; float:none; left:auto; margin:0px; outline:0px; overflow:visible; padding:0px; bottom:auto; top:auto; vertical-align:baseline; width:auto; min-height:auto; background:none" class="firstRow"><td style="vertical-align: baseline; font-family: Monaco,Menlo,Consolas,"Courier New",monospace; border-width: 0px 1px 0px 0px; border-top-style: initial; border-bottom-style: initial; border-left-style: initial; border-top-color: initial; border-bottom-color: initial; border-left-color: initial; float: none; left: auto; margin: 0px; outline: 0px none; overflow: visible; background: rgb(247, 247, 249) none repeat scroll 0% 0%; position: static; right: auto; top: auto; bottom: auto; min-height: auto; font-size: 13px; padding: 9.5px 0px 9.5px 9.5px; color: rgb(175, 175, 175); border-right: 1px solid rgb(225, 225, 232); width: 4.0393%; word-break: break-all;"><p style="right:auto; margin:0px; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; word-wrap:normal; background:none; top:auto; vertical-align:baseline; width:auto; min-height:auto; white-space:pre; text-align:right; padding:0px 0.5em 0px 1em">1</p></td><td style="position: static; font-family: Monaco,Menlo,Consolas,"Courier New",monospace; right: auto; border: 0px none; float: none; left: auto; margin: 0px; outline: 0px none; overflow: visible; padding: 0px; bottom: auto; top: auto; vertical-align: baseline; font-size: 13px; min-height: auto; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; width: 95.0873%; word-break: break-all;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><header>、<nav>、<article>、<aside>、<footer>..</pre><div class="contentsignin">Copy after login</div></div></td> </tr></tbody></table> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px">3. Powerful new features of HTML5</span><br></p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px"> (1) Powerful drawing function</span></p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 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. </p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> In HTML5, there are two things that can be drawn. Let’s take a look at which two magical things they are. </p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 1.Canvas tag</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> Canvas draws 2D graphics through JavaScript. Canvas renders pixel by pixel. </p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 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. </p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 2.SVG</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 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. </p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">Compared with other image formats (such as JPEG and GIF), the advantages of using SVG are: </p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> (1) SVG images can be created and modified through a text editor</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">  (2) SVG images can be searched, indexed, scripted or compressed</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">  (3) SVG is scalable</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">  (4) SVG images can be enhanced at any resolution Print with high quality</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> (5) SVG can be enlarged without losing image quality</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> Then both can be used for drawing. Let’s take a look at the differences between them. Differences: </p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px"> Canvas</span></p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 1. Depends on resolution</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 2. Does not support event handlers</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 3. Weak text Rendering capabilities</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 4. Ability to save result images in .png or .jpg format</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 5. Best suited for image-intensive games where many objects will be redrawn frequently</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px"> SVG</span></p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 1. Does not depend on resolution</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 2. Supports event handlers</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 3. Best suited for applications with large rendering areas Program (such as Google Maps)</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">   4. High complexity will slow down the rendering speed (any application that excessively uses the DOM is not fast) </p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 5. Not suitable for game applications</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"><span style="margin:0px; padding:0px"> (2) New video Tag </span></p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> 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. </p> <table style='outline:0px; font-size:13px; font-variant:inherit; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border:1px solid rgb(204,204,204); bottom:auto; float:none; left:auto; margin:0.3em 0px; overflow:auto; padding:0px; position:relative; right:auto; top:auto; vertical-align:baseline; min-height:auto; background:none rgb(245,245,245); width:100%'><tbody><tr style="position:static; right:auto; border:0px; float:none; left:auto; margin:0px; outline:0px; overflow:visible; padding:0px; bottom:auto; top:auto; vertical-align:baseline; width:auto; min-height:auto; background:none" class="firstRow"> <td style='vertical-align:baseline; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border-width:0px 1px 0px 0px; border-top-style:initial; border-bottom-style:initial; border-left-style:initial; border-top-color:initial; border-bottom-color:initial; border-left-color:initial; float:none; left:auto; margin:0px; outline:0px; overflow:visible; background:none rgb(247,247,249); position:static; right:auto; top:auto; bottom:auto; min-height:auto; font-size:13px; padding:9.5px 0px 9.5px 9.5px; color:rgb(175,175,175); border-right-style:solid; border-right-color:rgb(225,225,232); width:4.0393%'><p style="right:auto; margin:0px; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; word-wrap:normal; background:none; top:auto; vertical-align:baseline; width:auto; min-height:auto; white-space:pre; text-align:right; padding:0px 0.5em 0px 1em">1</p></td> <td style='position: static; font-family: Monaco,Menlo,Consolas,"Courier New",monospace; right: auto; border: 0px none; float: none; left: auto; margin: 0px; outline: 0px none; overflow: visible; padding: 0px; bottom: auto; top: auto; vertical-align: baseline; font-size: 13px; min-height: auto; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; width: 95.0873%; word-break: break-all;'><p style="position:static; margin:0px; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; right:auto; top:auto; vertical-align:baseline; width:auto; min-height:auto; background:none; padding:0px 1em"><code style='position:static; margin:0px; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; padding:0px; right:auto; top:auto; vertical-align:baseline; width:auto; min-height:auto; background:none'> </code><code style='right:auto; margin:0px; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; padding:0px; top:auto; vertical-align:baseline; width:auto; min-height:auto; background:none'><</code><code style="right:auto; margin:0px; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; padding:0px; top:auto; vertical-align:baseline; width:auto; min-height:auto; background:none; color:gray">video src</code><code style="right:auto; margin:0px; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; padding:0px; top:auto; vertical-align:baseline; width:auto; min-height:auto; background:none">=</code><code style="right:auto; margin:0px; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; padding:0px; top:auto; vertical-align:baseline; width:auto; min-height:auto; background:none; color:blue">"Video address"</code><code style="right:auto; margin:0px; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; padding:0px; top:auto; vertical-align:baseline; width:auto; min-height:auto; background:none">></</code><code style="right:auto; margin:0px; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; padding:0px; top:auto; vertical-align:baseline; width:auto; background:none; min-height:auto; font-weight:bold; color:rgb(255,120,0)">video</code><code style="right:auto; margin:0px; font-family:Monaco,Menlo,Consolas,"Courier New",monospace; border:0px; bottom:auto; float:none; left:auto; outline:0px; overflow:visible; position:static; padding:0px; top:auto; vertical-align:baseline; width:auto; min-height:auto; background:none">>//Detailed attributes can be found in The picture below</code></p></td> </tr></tbody></table> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> </p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">What are the benefits of providing such a label? </p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">First: Save programmers time in writing code. </p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">Second: I think the most important thing is SEO optimization. </p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px">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. </p> <p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;">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! </p>

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!