Heim > Artikel > Web-Frontend > Was ist der Unterschied zwischen HTML und HTML5?
Was ist der Unterschied zwischen HTML und HTML5?
- 醉折花枝作酒筹Original
- 2021-04-07 13:46:567256Durchsuche
Unterschiede: 1. In Bezug auf die Dokumentdeklaration ist der HTML-Code sehr lang und schwer zu merken, während die Deklaration von HTML5 relativ einfach ist und die Syntax „8b05045a5be5764f313ed5b9168a17e6“ hat. 2. HTML verfügt nicht über strukturelle semantische Tags, aber HTML5 hat viele neue semantische Tags hinzugefügt. 3. HTML5 kann zeichnen, HTML jedoch nicht.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.
1. Die Dokumenttypdeklaration ist anders
html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
html5: Die Dokumenttypdeklaration ist relativ einfacher, was für Programmierer hilfreich ist, sie schnell zu lesen und zu entwickeln.
<!DOCTYPE html>
2. In Bezug auf die semantische Struktur
html: Es gibt kein strukturelles semantisches Tag (für Laien ist es unbequem zu lesen und sagt nicht, wo sich der Kopf befindet und wo). ist der Schwanz)html:没有结构语义化的标签（通俗来讲就是不方便阅读，没有告诉你哪里是头，哪里是尾巴）
html5:添加了许多具有语义化的标签，
使代码结构清晰，提高了代码的可读性。
下面是html5中的一些语义化标签：
1fd589692e180fb978cda37041cfc5e26e916e0f7d1e588d4f442bf645aedb2f：简短、描述性、唯一（提升搜索引擎排名）
b35601808ee30eac9a0f11ecc3d2c015631de3dd0df8235a13014b55a1414c03：h1~h6分级标题，用于创建页面信息的层级关系。
1aa9e5d373740b65a0cc8f0a02150c53ab946e7546ab66a280dd9c9f9310ecd5：页眉通常包括网站标志、主导航、全站链接以及搜索框。
也适合对页面内部一组介绍性或导航性内容进行标记。
c787b9a589a3ece771e842a6176cf8e944f9630a3d507ae7532760da37622b0f：标记导航，仅对文档中重要的链接群使用。
61b85035edf2b42260fdb5632dc5728a07ebbc2b3735b6cb0330715d08d2749e：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
23c3de37f2f9ebcb477c4a90aac6fffd7618f95bdc39e398f223d37049478af1：表示文档、页面、应用或一个独立的容器.
2f8332c8dcfd5c7dec030a070bf652c34d7ab0de9a42de71c682b0860bad1410：具有相似主题的一组内容，比如网站的主页可以分成介绍、新闻条目、联系信息等条块。
15221ee8cba27fc1d7a26c47a001eb9bb68cffaf0006380b7e39ea0c3d532826：指定附注栏，包括引述、侧栏、指向文章的一组链接、广告、友情链接、相关产品列表等。
c37f8231a37e88427e62669260f0074d84122da5b51c58ef54d7045814144010：页脚，只有当父级是body时，才是整个页面的页脚。
d015d241ae6d34c34210679b5204fe857552a991a706bdbcb00625c14ce34064：指定细则，输入免责声明、注解、署名、版权。只适用于短语，不要用来标记“使用条款”、“隐私政策”等长的法律声明。
8e99a69fbe029cd4e2b854e244eab143128dba7a3a77be0113eb0bea6ea0a5d0：表示内容重要性。
907fae80ddef53131f3292ee4f81644bd1c6776b927dc33c5d9114750b586338：标记内容着重点（大量用于提升段落文本语义）。
在HTML5中em是表示强调的唯一元素，而strong则表示重要程度。
a4b561c25d9afb9ac8dc4d70affff4190d36329ec37a2cc24d42c7229b69747a：出于实用目的提醒读者的一块文字，不传达任何额外的重要性
46dd80ba616c57a652514755c74c421191be1970faf1a1e6511e94af3a0f5b95：标记时间。datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。 不再相关的时间用s标签。
8a7974376be5f6c00c121222b727adb94f2d06a7b2d26e0ad682bc6a608fa811：解释缩写词。使用title属性可提供全称，只在第一次出现时使用就ok。
abbr[title]{
border-bottom:1px dotted #000;
}7f9d788ef50b059a7f76f3d2e4ccc9d1c182393edfae081cb9fa666d3b96fd2b：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
208700f394e4cf40a7aa505373e0130bf6b6163991889e046b98f3ad8b2fe548：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。如果提供整个页面的作者联系信息，一般放在页面级footer里。不能包含文档或者文档等其他内容。
ffbe95d20f3893062224282accb13e8f1cd55414ff5abdfea5dd958e7e547fdd：标记代码。包含示例代码或者文件名 （6d267e5fab17ea8bc578f9e7e5e1570b ）
e03b848252eb9375d56be284e690e873bc5574f69a0cba105bc93bd3dc13c4ec：预格式化文本。保留文本固有的换行和空格。
3.html5的绘图功能
1）canvas
在HTML5以前，web前端开发者无法在HTML页面上动态地绘制图片。HTM5新增了一个5ba626b379994d53f7acf72a64f9b69716ab709d6e762724edaacac9390c2909
1fd589692e180fb978cda37041cfc5e26e916e0f7d1e588d4f442bf645aedb2f: kurz, beschreibend, eindeutig (verbessert das Suchmaschinenranking) 🎜🎜4774bba5cbb125fcced6c94706f1c915 631de3dd0df8235a13014b55a1414c03: h1~h6 hierarchische Überschriften, die zum Erstellen hierarchischer Beziehungen von Seiteninformationen verwendet werden. 🎜🎜1aa9e5d373740b65a0cc8f0a02150c53ab946e7546ab66a280dd9c9f9310ecd5: Der Header enthält normalerweise das Website-Logo, die Hauptnavigation, Site-weite Links und ein Suchfeld. 🎜🎜Es eignet sich auch zum Markieren einer Reihe von Einführungs- oder Navigationsinhalten innerhalb der Seite. 🎜🎜c787b9a589a3ece771e842a6176cf8e944f9630a3d507ae7532760da37622b0f: Navigation markieren, wird nur für wichtige Linkgruppen im Dokument verwendet. 🎜🎜61b85035edf2b42260fdb5632dc5728a07ebbc2b3735b6cb0330715d08d2749e: Der Hauptinhalt der Seite, der nur einmal auf einer Seite verwendet werden kann. Wenn es sich um eine Webanwendung handelt, umgeben Sie deren Hauptfunktionen. 🎜🎜23c3de37f2f9ebcb477c4a90aac6fffd7618f95bdc39e398f223d37049478af1: Stellt ein Dokument, eine Seite, eine Anwendung oder einen unabhängigen Container dar 🎜🎜2f8332c8dcfd5c7dec030a070bf652c34d7ab0de9a42de71c682b0860bad1410: Eine Gruppe von Inhalten mit einem ähnlichen Thema, z. B. die Homepage einer Website, die in Abschnitte zur Einführung, Nachrichten, Kontaktinformationen usw. unterteilt werden kann. 🎜🎜15221ee8cba27fc1d7a26c47a001eb9bb68cffaf0006380b7e39ea0c3d532826: Geben Sie die Seitenleistenspalte an, einschließlich Anführungszeichen, Seitenleisten, einer Reihe von Links zu Artikeln, Anzeigen, benutzerfreundlichen Links, verwandten Produktlisten usw. 🎜🎜c37f8231a37e88427e62669260f0074d84122da5b51c58ef54d7045814144010: Fußzeile, nur wenn das übergeordnete Element der Hauptteil ist, ist es die Fußzeile der gesamten Seite. 🎜🎜d015d241ae6d34c34210679b5204fe857552a991a706bdbcb00625c14ce34064: Geben Sie die Details an und geben Sie Haftungsausschluss, Anmerkung, Signatur und Urheberrecht ein. Nur für kurze Formulierungen verwenden, nicht für lange rechtliche Aussagen wie „Nutzungsbedingungen“ oder „Datenschutzerklärung“. 🎜🎜8e99a69fbe029cd4e2b854e244eab143128dba7a3a77be0113eb0bea6ea0a5d0: Zeigt die Wichtigkeit des Inhalts an. 🎜🎜907fae80ddef53131f3292ee4f81644bd1c6776b927dc33c5d9114750b586338: Markieren Sie die wichtigsten Punkte des Inhalts (wird hauptsächlich zur Verbesserung der Semantik von Absatztexten verwendet). 🎜🎜🎜In HTML5 ist em das einzige Element, das für Hervorhebung steht, während strong für Wichtigkeit steht. 🎜🎜🎜a4b561c25d9afb9ac8dc4d70affff4190d36329ec37a2cc24d42c7229b69747a: Ein Textblock, der den Leser an praktische Zwecke erinnert und keine zusätzliche Bedeutung vermittelt🎜🎜46dd80ba616c57a652514755c74c4211</ time> ;: Zeit markieren. Das datetime-Attribut folgt einem bestimmten Format. Wenn dieses Attribut weggelassen wird, muss der Textinhalt in einem zulässigen Datums- oder Uhrzeitformat vorliegen. Zeiten, die nicht mehr relevant sind, werden mit s gekennzeichnet. 🎜🎜8a7974376be5f6c00c121222b727adb94f2d06a7b2d26e0ad682bc6a608fa811: Erklärung der Abkürzungen. Verwenden Sie das Titelattribut, um den vollständigen Namen anzugeben. Dies ist in Ordnung, wenn es nur beim ersten Vorkommen verwendet wird. 🎜rrreee🎜7f9d788ef50b059a7f76f3d2e4ccc9d1c182393edfae081cb9fa666d3b96fd2b: Definitionsbegriffselement, das unmittelbar an die Definition angrenzen muss und im Beschreibungslisten-DL-Element verwendet werden kann. 🎜🎜208700f394e4cf40a7aa505373e0130bf6b6163991889e046b98f3ad8b2fe548: Kontaktinformationen (E-Mail-Adresse, Link zur Kontaktseite) des Autors, der interessierten Person oder Organisation. Wenn Sie die Kontaktinformationen des Autors für die gesamte Seite angeben, werden diese normalerweise in der Fußzeile auf Seitenebene platziert. Es darf keine Dokumente oder andere Inhalte wie Dokumente enthalten. 🎜🎜ffbe95d20f3893062224282accb13e8f1cd55414ff5abdfea5dd958e7e547fdd: Code markieren. Enthält Beispielcode oder Dateinamen (6d267e5fab17ea8bc578f9e7e5e1570b ) 🎜🎜e03b848252eb9375d56be284e690e873bc5574f69a0cba105bc93bd3dc13c4ec: Vorformatierter Text. Behält die inhärenten Zeilenumbrüche und Leerzeichen des Textes bei. 🎜🎜🎜3. HTML5-Zeichenfunktion 🎜🎜🎜1) Leinwand 🎜🎜Vor HTML5 konnten Web-Frontend-Entwickler keine Bilder dynamisch auf HTML-Seiten zeichnen. HTM5 fügt ein neues 5ba626b379994d53f7acf72a64f9b69716ab709d6e762724edaacac9390c2909-Element hinzu, das einem Canvas entspricht. Es verfügt jedoch nicht über die Fähigkeit, Bilder zu zeichnen, und zum Vervollständigen muss ein Skript verwendet werden eigentliche Zeichenaufgabe. Mit der getContext-Methode können Sie ein Objekt zurückgeben, das die Eigenschaften und Methoden des Malens bereitstellt. 🎜🎜• Schritt 1: Holen Sie sich das 5ba626b379994d53f7acf72a64f9b69716ab709d6e762724edaacac9390c2909 DOM-Objekt 🎜🎜• Schritt 2: Rufen Sie die getContext()-Methode des Canvas-Objekts auf, um das CanvasRederingContext2D-Objekt abzurufen (übergeben Sie einen Parameter in der getContext-Methode: „ 2d") 🎜🎜• Schritt 3: CanvasRederingContext2D aufrufen, um die Zeichnung abzuschließen🎜2) SVG: Skalierbare Vektorgrafiken, die zum Definieren vektorbasierter Grafiken für das Web verwendet werden.
Lernvideo-Sharing: HTML-Video-Tutorial
Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen HTML und HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!