Let’s talk about the difference between html and HTML5

author: admin Post: August 25, 2023 71read 0Comment

Someone asked me today, do you often use html5 or html? emmm… In fact, when I usually write web pages, I don’t make a special distinction between the two. If you have to say the difference, the obvious difference is the ones I listed below. As for understanding at a deeper level: HTML5 has gone far beyond the scope of markup language, behind it is a set of technology. Xiaobai’s study is too shallow, so he dare not talk too much. >.<

1. The type declaration of the document is different

html:

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

html5: The document declaration is relatively simpler, which is helpful for programmers to read and develop quickly.

2. Semantic structure

html: There is no structural semantic label (commonly speaking, it is inconvenient to read, and it does not tell you where the head is. Where is the tail)

html5: Added many semantic tags,

make the code structure clear and improve the readability of the code.

Here are some semantic tags in html5:

: short, descriptive, unique (improve search engine rankings)

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

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

Also suitable for marking up an introductory or navigational set of content within a page.

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

: The main content of the page, a page can only be used once. If it is a web application, surround its main function.

: Represents a document, page, application, or a separate container.

: A group of content with similar themes, such as a website The home page can be divided into sections for introduction, news items, contact information, etc.

: Specifies 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, it is the footer of the entire page.

: Specify the rules, enter disclaimer, comment, signature, copyright.

Applies only to phrases, not to mark long legal notices such as “Terms of Use”, “Privacy Policy”, etc.

: Indicates the importance of the content.

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

: Highlight text (yellow) to remind readers.

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

: A block of text that reminds the reader for practical purposes, without conveying any additional importance

: Unlike other The text of the text = =|||This translation is really…

: Create a figure (with a margin of about 40px by default).

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

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

Only used 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 them).

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

: 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 labeled with s.

: Explanation of acronyms. Use the title attribute to provide a full title, which is ok only on the first occurrence.

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

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

: Contact information (email address, link to contact page) for the author, related person, or organization.

If you provide the author’s contact information for the entire page, it is generally placed in the page-level footer. Cannot contain documents or other content such as documents.

: The content to remove.

: Added content.

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

: Tag code. Include sample code or filename ( )

: Preformatted text. Newlines and whitespace inherent to text are preserved.

3.html5 drawing function

1) canvas

Before HTML5, web front-end Developers cannot dynamically draw pictures on HTML pages 1) HTM5 adds a new element, which is equivalent to a canvas. But it does not have the ability to draw pictures, and scripts must be used to complete the actual drawing tasks. Use the getContext method to return an object that provides properties and methods for 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 for reading, I hope you will benefit a lot.

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

Recommended tutorial: “HTML Tutorial”

The above is to talk together For more details about the difference between html and HTML5, please pay attention to other related articles on 1024programmer.com!