Home > Article > Web Front-end > About HTML5 and CSS replacement use
About HTML5 and CSS replacement use
- 迷茫Original
- 2017-01-17 09:38:591911browse
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
tt
u
s
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>Article text part 36cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e
Everyone knows that in html5, just use aba7b36f87decd50b18c7e3e3c150106 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
d8eccd9ed644b68a6460a2bb84548c82
4a249f0d628e2318394fd9b75b4636b1Hope you all have time to come Take a look at my blog473f0a7621bec819994bb5020d29372a
c1a436a314ed609750bd7c7d319db4daAdditional header information: Haha2e9b454fa8428549ca2e64dfac4625cdd7fb206ed7081b134e1edd3f2b3137f0
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.
1aa9e5d373740b65a0cc8f0a02150c53
4a249f0d628e2318394fd9b75b4636b1Important information, titles, etc. on the page473f0a7621bec819994bb5020d29372aab946e7546ab66a280dd9c9f9310ecd523c3de37f2f9ebcb477c4a90aac6fffd
48522e8b0d91f36e26c4513bf1195c6d
4a249f0d628e2318394fd9b75b4636b1The title information in the article area is actually quite important and plays a prominent role473f0a7621bec819994bb5020d29372a
ab946e7546ab66a280dd9c9f9310ecd5
e388a4556c0f65e1904146cc1a846beeArticle text...94b3e26ee717c64999d7867364b1b4a37618f95bdc39e398f223d37049478af1
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.
c37f8231a37e88427e62669260f0074d
ff6d136ddc5fdfeffaf53ff6ee95f185 25edfb22a4f469ecb59f1190150159c6Copyright Informationbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c6Site Mapbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c6Related Links548cefb384a95312edb7e8fb1f4ecc29 25edfb22a4f469ecb59f1190150159c6Go back to the top and waitbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b94468984122da5b51c58ef54d7045814144010
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>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 Blog5db79b134e9f6b82c0b36e0489ee08ed
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
.