". 2. HTML does not have structural semantic tags, but HTML5 has added many new semantic tags. 3. HTML5 can draw, but html cannot."/> ". 2. HTML does not have structural semantic tags, but HTML5 has added many new semantic tags. 3. HTML5 can draw, but html cannot.">

Home  >  Article  >  Web Front-end  >  What is the difference between html and html5

What is the difference between html and html5

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-04-07 13:46:567270browse

Difference: 1. In terms of document declaration, the html code is very long and difficult to remember; while the declaration of html5 is relatively simple, with the syntax "8b05045a5be5764f313ed5b9168a17e6". 2. HTML does not have structural semantic tags, but HTML5 has added many new semantic tags. 3. HTML5 can draw, but html cannot.

What is the difference between html and html5

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

1. The document type declaration is different

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: The document declaration is relatively simpler and helps programmers to quickly Read and develop.

<!DOCTYPE html>

2. In terms of semantic structure

html:There is no structural semantic tag (in lay terms, it is inconvenient to read and does not tell you Where is the head, where is the tail)

html5:Added many semantic tags,

makes the code structure clear and improves the readability of the code.

The following are some semantic tags in HTML5:

1fd589692e180fb978cda37041cfc5e26e916e0f7d1e588d4f442bf645aedb2f: short, descriptive, unique (improves search engine ranking)

b35601808ee30eac9a0f11ecc3d2c015631de3dd0df8235a13014b55a1414c03: h1~h6 hierarchical headings, used to create hierarchical relationships of page information.

1aa9e5d373740b65a0cc8f0a02150c53ab946e7546ab66a280dd9c9f9310ecd5: The header usually includes the website logo, main navigation, site-wide links, and search box.

is also suitable for marking a set of introductory or navigational content within the page.

c787b9a589a3ece771e842a6176cf8e944f9630a3d507ae7532760da37622b0f: Mark navigation, only used for important link groups in the document.

61b85035edf2b42260fdb5632dc5728a07ebbc2b3735b6cb0330715d08d2749e: The main content of the page, which can only be used once on a page. If it is a web application, surround its main functions.

23c3de37f2f9ebcb477c4a90aac6fffd7618f95bdc39e398f223d37049478af1: Represents a document, page, application or an independent container.

2f8332c8dcfd5c7dec030a070bf652c3e78c933aca841091189ce788788c8bf4: A group of content with similar themes. For example, the homepage of a website can be divided into sections such as introduction, news items, contact information, etc.

15221ee8cba27fc1d7a26c47a001eb9bb68cffaf0006380b7e39ea0c3d532826: Specify the sidebar column, including quotes, sidebars, a set of links to articles, advertisements, friendly links, related product lists, etc.

c37f8231a37e88427e62669260f0074d84122da5b51c58ef54d7045814144010: Footer, only when the parent is body, is the footer of the entire page.

d015d241ae6d34c34210679b5204fe857552a991a706bdbcb00625c14ce34064: Specify the details and enter disclaimer, annotation, signature, and copyright. Use only for short phrases, not long legal statements such as "Terms of Use" or "Privacy Policy".

8e99a69fbe029cd4e2b854e244eab143128dba7a3a77be0113eb0bea6ea0a5d0: Indicates the importance of the content.

907fae80ddef53131f3292ee4f81644bd1c6776b927dc33c5d9114750b586338: Mark the key points of the content (largely used to improve the semantics of paragraph text).

In HTML5, em is the only element that represents emphasis, while strong represents the degree of importance.

##a4b561c25d9afb9ac8dc4d70affff4190d36329ec37a2cc24d42c7229b69747a: A block of text that reminds the reader for practical purposes and does not convey any additional importance

46dd80ba616c57a652514755c74c421191be1970faf1a1e6511e94af3a0f5b95: Mark time. The datetime attribute follows a specific format. If this attribute is omitted, the text content must be in a legal date or time format. Times that are no longer relevant are tagged with s.

8a7974376be5f6c00c121222b727adb94f2d06a7b2d26e0ad682bc6a608fa811: Explanation of abbreviations. Use the title attribute to provide the full name, which is OK if used only on the first occurrence.

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

7f9d788ef50b059a7f76f3d2e4ccc9d1c182393edfae081cb9fa666d3b96fd2b: Definition term element, which must be immediately adjacent to the definition, can be used in the description list dl element.

208700f394e4cf40a7aa505373e0130bf6b6163991889e046b98f3ad8b2fe548: Contact information (email address, link to contact page) for the author, person or organization. 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.

ffbe95d20f3893062224282accb13e8f1cd55414ff5abdfea5dd958e7e547fdd: Mark code. Contains sample code or file names (6d267e5fab17ea8bc578f9e7e5e1570b )

e03b848252eb9375d56be284e690e873bc5574f69a0cba105bc93bd3dc13c4ec: 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 pictures dynamically on HTML pages . HTM5 adds a new

5ba626b379994d53f7acf72a64f9b69716ab709d6e762724edaacac9390c2909 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 5ba626b379994d53f7acf72a64f9b69716ab709d6e762724edaacac9390c2909DOM 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, vector-based graphics used to define the web.

Learning video sharing: html video tutorial

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn