Everyone who has heard of HTML5 knows its power, such as more descriptive markup, multimedia support that is less dependent on plug-ins, cross-document message communication, Web Sockets, client-side storage, more powerful forms, and improved accessibility. flexibility, advanced selectors, and powerful visual effects. Without further ado, let’s go into details

Abandoned tags and attributes

Abandoned tags

Abandoned because they can be replaced with CSS

basefont

big

center

font

strike

Deprecated due to breaking usability and accessibility

frame

frameset

noframes

Causing confusion, infrequent

acronym is used and abandoned because it often clutters the page. You can use abbr instead.

applet is abandoned because you can use object instead.

isindex is abandoned. Because using form controls instead of

dir is deprecated because using ul instead of

noscript elements can only be used in HTML, not XML.

Obsolete attributes

align

link, vlink, alink and text attributes on the body tag

bgcolor

height and width

scrolling attributes on iframe elements

valign

hspace and vspace

cellpadding, cellspacing and border attributes on table tags

The visual effects achieved by the above elements can be achieved with css, so they are abandoned

In addition, the target attribute is abandoned in the specification

The profile attribute on the head tag will no longer be supported

The longdesc attribute of img and iframe elements has also been removed

There are alternatives to these attributes in the HTML5 specification, you can view HTML Standard

New structural tags and attributes

Document type declaration

<!doctype html><html>
  <head>
    <meta charset="UTF-8">
    <title>文章标题</title>
  </head>
  <body>

Copy after login

Article text part

Everyone knows that in html5, just use Declaring the type of document, this sentence has two significant functions

The validator uses it to determine what validation rules should be used to verify the code

The document type declaration can force IE6 and IE7 Render pages with standard modules with IE8

hgroup combines the titles of web pages or sections

Hope you all have time to come Take a look at my blog

Additional header information: Haha

Header of the header page or section

The header element is an element with guidance and navigation functions. The header may contain a variety of content from the company logo to a search box, so don’t confuse the header with tags such as h1. The same page can contain multiple header elements, and each independent section or article section can have its own header.

Important information, titles, etc. on the page

< header>

The title information in the article area is actually quite important and plays a prominent role

Article text...

footer The end of the page or section

The footer element is used to provide the document or related Neighboring segments define tail information. The HTML5 specification allows multiple footer elements to appear in the same page, which means that footer can also be used in section or article. Footer, like header, usually also contains other elements. The footer usually includes additional information about its related blocks, such as author, related reading links, and copyright information.

The following is my exact essence, and there is absolutely no wrong introduction.

I united with a group of experts on the Internet to set up a free learning group for programming. You only need to come to us. Just listen to it in the group. The first part of the number is Siyi, the middle number is Lingerqi, and the last number is Yiwu4. There are free learning resources here. Live courses are broadcast every day. You don’t need to pay anything. You only need one. Just have a heart to learn. If you don't want to learn, don't join.

Navigation area of nav page or section

The page can contain multiple nav elements. Normally, the head and tail will contain navigation, which improves accessibility and allows visitors to clearly identify them. The nav element is a group of links that can be used as page navigation; the navigation elements link to other pages or other parts of the current page.

<nav>
  <ul>
    <li><a href="/home/">首页</a></li>
    <li><a href="/newBlog/">新随笔</a></li>
    <li><a href="/link/">联系</a></li>
    <li><a href="/manage/">管理</a></li>
  </ul>
</nav>

Copy after login

section The logical area or content combination of the page

The section section is a logical area on the page. When describing the logical area of the page, we can use the section element to replace the previously abused div tag. Section can be expressed as a subsection. In fact, we use the section element to reasonably categorize the content. Generally speaking, a section contains a head and a content content block.

The section element is not a general container element, so if an element needs to define a corresponding style or script, it is recommended to use the div element. The condition for using section is to ensure that the content of this element can be clearly displayed in the document. in the outline.

Article text or a complete internal

The most suitable element to describe the actual content of a web page is the article tag. The section tag is regarded as a description of the logical part of the document, while the article tag is regarded as a description of the specific content. A section can contain multiple articles, and the article content can be divided into several sections. The section element is a more general element that can be used to logically group other elements. If the content of the element can be displayed together to express the corresponding meaning, it can be defined as an article element, and there is no need to use the section element.

We can use header elements and footer elements inside the article element to more conveniently describe specific logical areas. We can also use the section element to divide the document into multiple parts.

Article represents an independent fragment of document content. article is a special section tag, which has clearer semantics than section. It represents an independent and complete block of related content. Generally, an article will have a title section (usually contained within the header) and sometimes a footer. Although a section is also a thematic piece of content, the article itself is independent and complete in terms of structure and content. When article is embedded in article, in principle, the content of the inner article is related to the content of the outer article.

aside supplementary or related content

Sometimes we need to add some additional information to the main content, such as introductions, charts, related links, etc. At this time, we can use the aside tag to identify it.

Custom Data Attributes

Developers can define any attribute they want on any element as long as they prefix it with data- to avoid confusion with future HTML Version conflicts, jQuery verification under asp.net MVC uses this method. Use custom data attributes to provide additional information to client scripts. Custom data attributes will not cause browser errors, and the HTML5 document type declaration ensures that the document is valid. Because all custom data attributes begin with the data- prefix, the validator for HTML5 documents ignores it when validating. You can use custom attributes in almost all browsers, so we can easily access them using JavaScript.

Finally look at a small demo:

(this.href,'winName','width=500,height=500')">My Blog

Do you know what the benefits of this code are? The answer is to improve accessibility.

The first step in constructing an accessible page is to ensure that all functions can still work normally when JavaScript is disabled. Operation. By the way, in HTML5, onclick and so on are abandoned. This is because the onclick attribute makes the behavior and content too tightly coupled