Home

Web Front-end

HTML Tutorial

About HTML5 and CSS replacement use

迷茫

Jan 17, 2017 am 09:38 AM

css css3 html html5

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

Statement of this Website

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7509

CakePHP Tutorial

1378

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

Related knowledge

How to write split lines on bootstrap Apr 07, 2025 pm 03:12 PM

There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.

How to insert pictures on bootstrap Apr 07, 2025 pm 03:30 PM

There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.

How to resize bootstrap Apr 07, 2025 pm 03:18 PM

To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-

How to set up the framework for bootstrap Apr 07, 2025 pm 03:27 PM

To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

How to use bootstrap button Apr 07, 2025 pm 03:09 PM

How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text

How to view the date of bootstrap Apr 07, 2025 pm 03:03 PM

Answer: You can use the date picker component of Bootstrap to view dates in the page. Steps: Introduce the Bootstrap framework. Create a date selector input box in HTML. Bootstrap will automatically add styles to the selector. Use JavaScript to get the selected date.

How to use bootstrap in vue Apr 07, 2025 pm 11:33 PM

Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.

See all articles