一起來聊聊html與HTML5的差別

今天有人問我了，你常用html5還是html？ emmm......其實自己在平常寫網頁時，對這兩者沒有刻意區分。如果非要說差別的話，顯而易見的差別就是下面我列出來的這些了。至於往深層理解了：HTML5已經遠遠超越了標記語言的範疇，其背後是一組技術集。小白學習太淺，不敢多講。 >.<

1.文件的型別宣告不同

html:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

html5:文檔宣告相對來說更簡單，有利於程式設計師快速閱讀和開發。

2.語意結構面向

html:沒有結構語意化的標籤（通俗來講就是不方便閱讀，沒有告訴你哪裡是頭，哪裡是尾巴）

html5:添加了許多具有語義化的標籤，

#使程式碼結構清晰，提高了程式碼的可讀性。

以下是html5中的一些語意化標籤：

< title>：簡短、描述、唯一（提升搜尋引擎排名）

：h1~h6分級標題，用於建立頁面資訊的層級關係。

：頁眉通常包括網站標誌、主導航、全站連結以及搜尋框。

也適合標記頁面內部一組介紹性或導覽性內容。

：標記導航，僅對文件中重要的連結群使用。

：頁面主要內容，一個頁面只能使用一次。如果是web應用，則包圍其主要功能。

：表示文件、頁面、應用程式或一個獨立的容器.

：具有相似主題的一組內容，例如網站的主頁可以分成介紹、新聞條目、聯絡資訊等條塊。

：指定附註欄，包括引述、側欄、指向文章的一組連結、廣告、友誼連結、相關產品清單等。

：頁腳，只有當父級是body時，才是整個頁面的頁腳。

：指定細則，輸入免責聲明、註解、署名、版權。

只適用於短語，不要用來標記「使用條款」、「隱私權政策」等長的法律聲明。

：表示內容重要性。

：標記內容著重點（大量用於提升段落文本語意）。

：反白顯示文字（yellow），提醒讀者。

在HTML5中em是表示強調的唯一元素，而strong則表示重要程度。

：出於實用目的提醒讀者的一塊文字，不傳達任何額外的重要性

：不同於其他文字的文字= =|||這個翻譯真的是······

：建立圖（預設有40px左右margin）。

：figure的標題，必須是figure內嵌的第一個或最後一個元素。

：指明引用或參考，如圖書的標題，歌曲、電影、等的名稱，演唱會、音樂會、規範、報紙、或法律文件等。

只用於參考來源本身，而不是從中引述。

：引述文本，預設新的一行顯示。

：短的引述（跨瀏覽器問題，盡量避免使用）。

可以對blockquoto和q元素使用cite屬性（不是cite元素！），對搜尋引擎自動化工具有用。 cite=“URL”引述來源位址。

：標記時間。 datetime屬性遵循特定格式，如果忽略此屬性，文字內容必須是合法的日期或時間格式。不再相關的時間用s標籤。

：解釋縮寫。使用title屬性可提供全稱，只在第一次出現時使用就ok。

abbr[title]{ border-bottom:1px dotted #000; }

：定義術語元素，與定義必須緊挨著，可以在描述列表dl元素中使用。

：作者、相關人士或組織的聯絡資訊（電子郵件地址、指向聯絡資訊頁的連結）。

If you provide the author contact information for the entire page, it is usually placed in the page-level footer. It cannot contain documents or other content such as documents.

: Removed content.

: Added content.

A rare element that can surround both block level and phrase content.

: Mark code. Contains sample code or file names (< > )

: Preformatted text. Preserves text's inherent line breaks and spaces.

3.html5 drawing function

1) canvas

Before HTML5, web front-end developers could not draw in HTML Dynamically draw pictures on the page 1) HTM5 adds a new element, which is equivalent to a canvas. However, it does not have the ability to draw pictures, and a script must be used to complete the actual drawing task. Using the getContext method can return an object that provides the properties and methods of painting.

• Step 1: Get the DOM object

• Step 2: Call the getContext() method of the Canvas object to get the CanvasRederingContext2D object (pass a parameter in the getContext method : "2d")

• Step 3: Call CanvasRederingContext2D to complete the drawing

2) SVG:Scalable vector graphics, used to define vector-based graphics for the network.

Thank you everyone for reading, I hope you will benefit a lot.

This article is reproduced from: https://blog.csdn.net/yezi__6/article/details/82881729

Recommended tutorial: "HTML Tutorial"

以上是一起來聊聊html與HTML5的差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！