I found it after searching for a long time before, and it was uploaded and shared by everyone. I hope it will be helpful to everyone. Welcome to download or save it forever.
This file is the credit score data in kaggle. If it is not convenient to download on kaggle, you can download it here.
File: n459.com/file/25127180-478845139
The following are irrelevant:
-------------------------------------------Dividing line----- ----------------------------------------
If your HTML is full of divs, be careful
. Students who do front-end development know that the basic components of a web page are HTML, JavaScript, and CSS. Developers usually pay more attention to JavaScript and CSS, and practice various language specifications and design patterns. There is obviously less attention to HTML. As long as you can make a designer-drawn interface, everything will be fine, and you don't care about whether HTML is standardized and reasonable. So the following situations can be seen everywhere:
The button is clickable
of the title is used
,
Etc.) The
corresponding text label is
Rather than
And not
see? one move
Take the world! Is there any problem? It doesn't seem to be a big problem, after all, the page looks in line with the design and can interact normally. But have you thought about it, if
Can solve everything, why do we need the other dozens or hundreds of labels? This is about the semantics of HTML.
see? one move
What is Semanticization?
Semanticization means that HTML elements have corresponding meanings. It is used to describe the content of an element or its relationship with other elements. In HTML, except
The degree of meaning of label names is also different, such as
To further illustrate the importance of semantics, the following uses title and button elements as examples.
Title element
Is the title of the page, plus the
The hierarchical structure of the page is formed.
When your HTML is full of divs, then you have to be careful
What is semantic
Title element
In many rich text editors, you can automatically generate a content table of contents using the appropriate title structure. For example, the directory structure of this article is like this:: When your HTML is full of divs, then you have to be careful
: What is semantic
: Title element
: Button
: Non-semantic elements
: In summary, you can see that HTML itself conveys the structural information of the entire article. On the contrary, if all are used
, It becomes like this:
Button
The function of the button is to submit a form or change the state of an element. By definition, buttons have the following characteristics:
The focus
can be obtained. It can be activated by hitting the space bar or the enter key. It
can be activated by a mouse click.
When you use
Focus state
Keyboard interaction
Mouse interaction
More than that, when the screen reader encounters the submit element, it will recognize the semantics and tell the user that this is a submit button. If only
When we use semantic HTML elements, we give meaning to the content, and the content has life.
Non-semantic elements
mentioned earlier,
Inline elements
If you really can’t find the corresponding HTML element to represent the content, you can useThe general principle is to give priority to using corresponding semantic elements to express content. Second, use labels with less clear meaning. Finally consider using
Summary
Although using semantic HTML elements will not bring significant benefits to your project, I still recommend you to do so. At the very least, semantic HTML pages can lead to better SEO rankings, more friendly to screen readers, and greater code readability. If you are a pursuit Coder, I believe you will agree with me.