Let's talk about the difference between html and HTML5

Someone asked me today, do you often use html5 or html? emmm... Actually, when I usually write web pages, I don't make any special distinction between the two. If I have to talk about the differences, the obvious differences are the ones I list below. As for a deeper understanding: HTML5 has gone far beyond the scope of markup language. Behind it is a set of technologies. Xiaobai's study is too shallow and he dare not talk much. >.<

1. The document type declaration is different

html:

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

html5: Document declaration is relatively simple and conducive to Programmers read and develop quickly.

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 to go) 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:

< title>: short, descriptive, and unique (improves search engine ranking)

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

: 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.

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

: 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.

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

: A group with similar themes Content, such as a website's homepage, can be divided into sections for introduction, news items, contact information, and more.

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

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

: Specify the details and enter disclaimer, annotation, signature, and copyright.

is only suitable for short phrases and should not be used to mark long legal statements such as "Terms of Use" and "Privacy Policy".

: Indicates the importance of the content.

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

: Highlight text (yellow) to remind readers.

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

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

: Different Text for other texts = =|||This translation is really...

: Create a figure (the default is about 40px margin).

: The title of the figure must be the first or last element embedded in the figure.

: Specify a citation or reference, such as the title of a book, the name of a song, movie, etc., a concert, concert, specification, newspaper, or legal document, etc.

is used only to refer to the source itself, not to quote from it.

: quoted text, displayed on a new line by default.

: short quotes (cross-browser issues, try to avoid using them).

You can use the cite attribute (not the cite element!) on blockquoto and q elements, which is useful for search engine automation tools. cite=“URL” cites the source address.

: mark the 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.

: Explain 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; }

: Definition term element, which must be next to the definition, can be in Used in the description list dl element.

: 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.

: 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"

The above is the detailed content of Let's talk about the difference between html and HTML5. For more information, please follow other related articles on the PHP Chinese website!