Detailed explanation of the experience and analysis of semantic CSS code of html5

Once upon a time, a man published a design draft. After publishing the design draft, he opened a DW and dragged out a page. After he worked hard, he had to write a background. The martial arts man called "Artist".

The following is a tutorial article about the experience and analysis of html5 semantics and html5 semantics. The content is a tutorial carefully selected and compiled by this website. I hope it will be helpful to netizens. The following is the detailed content:

Once upon a time, a man published a design draft. After publishing the design draft, he opened a DW and dragged out a page. After he worked hard, he had to write a background. The martial arts man called "Artist". What's even more difficult is that when every need changes, you can modify a lot of numbness.

So div+css was brought to the stage of the Internet era, and more than one "DIV+CSS" sunflower book was born overnight. At that time, we lived in the era of div+css, and at that time, we used it.

After that, my waist was not sore, my legs were not hurt, and I became more excited when working overtime.

Ghost once explained semantics in the article "Semanticization in Page Refactoring" two years ago, and also the dock's "What are the benefits of semantic HTML structures? 》

Reconstruction has taken 7 years. Perhaps today, we can write a page skillfully, but how easy is it to write a page well? Let us sort out our ideas, review the basics, and combine them with the current trends, and then talk about the topic of semanticization. Is Shenma semanticization? Why semanticize?

Semantics in reconstruction can basically be divided into two parts: (x) semantics of html tags and semantics of css naming.

(x) Semantics of HTML tags

No nonsense:

(Figure 1)

Figure 1 The implementation method of non-semanticization: no_emantic_html The implementation method of semanticization: emantic_html

You're right

Do you have a special liking? After getting a design draft, countless magical skills have fallen on the screen inadvertently? If it's no_emantic_html, congratulations on having a fetish.

Use reasonable HTML tags and their unique properties to format the document content - this is Shuke's explanation of semantic tags, so it's not possible

There is no need to use the place where html is structured, because it is a semantic label. The original word is division, which means separation and block. It is generally only used in the place where html is structured, in the previous version of (x)html.

But how can we write semantic labels? Start with the basics. The ones we deal with the most every day are labels such as div h1-h6 ul-li p. I wonder if you have any in-depth understanding of these labels. Let’s take a look at the table below.

The above only lists some of the tags we commonly use. For more tags, please refer to w3c. Basically all html tags are abbreviations of a word or phrase, which actually means it is more convenient for our understanding of semantics. In fact, among all (x)html tags, except

And 2 semantic-free labels, other labels have their meanings. Only by knowing which labels are there and understanding the original meaning of each label can you know how to use it. You don't know when to use it

Define list tags? And what if you don't know there is ^{a label? If you see basically all divs on a page, it means that you don’t understand the use of semantic tags very well: it is obviously a title, which can be implemented with tags, but it has to be implemented with no semantic tags, or a paragraph, is it more semantic to use tags?}

^{Everyone knows the annual CSS Nude Festival, right? If the selected tags are almost all without semantics, then there is almost no structural information in the web page after de-style, and the readability is very poor; if the selected tags are suitable for semantics, the web page still has very good readability after de-styles; each browser has its own default style, and the default style gives different displays to each tag. The correctness of the tag can reflect the usability of the website, which is also one of the easiest ways to test the usability of a website.}

^{This is recommended for everyone to check the use of W3C official website tags, use web developer to disable its CSS to see how to see?}

^{Semantics of CSS Naming}

^{CSS semantic naming refers to the class or id name attached to the html tag with an easy-to-understand name. Semantic naming involves team naming specifications. Only by better semantic naming based on team specifications is the king.}

^{In my understanding, a semantic CSS naming should at least comply with the following conventions:}

^{Try to avoid pinyin naming and use English words to name it}

^{There are three ways to connect words: underscore_, spacer symbol-, and camel naming . Please refer to the team's specifications for specific use, but I personally recommend not using more than 2 connection methods at the same time.}

^{Do not follow meaningless numbers after words , such as logo1234 (except for the team agreement)}

^{For connection naming of excessively long words, you can use abbreviation, but it should be ensured that all members can understand it.}

^{Some agreed words can help you name them quickly:}

头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column登录条：loginbar标志：logo广告：banner轮转：promo页面主体：main热点：hot新闻：news 下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链接：friendlink版权copyright

^{There are too many of this, so I won’t list them one by one here. If you encounter words you don’t know, please add some English to it!}

[1][2]Next page