Book Notes on CSS practice (1) details

Some html tags with semantics

Some html tags with semantics

Do you really need div labels? Do you really need a class attribute?
CSS is learned by more and more designers. During page design, there are always too many div labels or class attributes. So, are these div labels really necessary in real situations? Is it necessary to add this class attribute? When using div, according to the previous rule, you should think about whether there are more suitable tags in HTML than div. Do not be overly infatuated with div labels.
Do not include a single element in the div label
The above is just a suggestion in the book. In fact, there are many times that we do not need the div tag. Let's look at the example in the book:
<Div id = "menu">
<Ul>
<Li> First item </li>
<Li> Second item </li>
<Li> Third item </li>
</Ul>
</Div> Isn't it better? We can also reduce the dom structure. To know that there are too many dom layers, whether we are looking for DOM elements or page loading speed, there is an impact.
<Ul id = "menu">
<Li> First item </li>
<Li> Second item </li>
<Li> Third item </li>
</Ul>
Programmers will reuse the class attribute in multiple repeated elements when they only need to use the class attribute once on a parent object.
The following is an example of the incorrect usage of the class attribute:
<Ul>
<Li class = "cheese-type"> Cheddar </li>
<Li class = "cheese-type"> Mozzarella </li>
<Li class = "cheese-type"> Parmesan </li>
<Li class = "cheese-type"> Swiss </li>
</Ul> which of the two methods is more elegant?
<Ul class = "cheese-types">
<Li> Cheddar </li>
<Li> Mozzarella </li>
<Li> Parmesan </li>
<Li> Swiss </li>
</Ul>
Do not ignore the DOCTYPE label
Here we will not explain the relationship between HTML and XHTML, nor the various specifications used by DOCTYPE labels. If you are interested, you can find http://www.w3schools.com/tags/tag_doctype.asp.
The DOCTYPE label is rarely written when you write a page by yourself. Unless it is automatically created by IDE, it is really lazy to write. In the book, it is the most undervalued tag.
So what can the DOCTYPE tag do? Well, there are a lot of online discussions here. I will not describe them any more. I just want to take the original words in W3C. Oh.
Why specify a doctype? Because it defines which version of (X) HTML your document is actually using, and this is a critical piece of information needed by some tools processing the document.
For example, specifying the doctype of your document allows you to use tools such as the Markup Validator to check the syntax of your (X) HTML. such tools won't be able to work if they do not know what kind of document you are using.
But the most important thing is that with most families of browsers, a doctype declaration will make a lot of guessing unnecessary, and will thus trigger a "standard" rendering mode.
Three-tier structure of modern Web documents
A Web document generally consists of three layers. (X) HTML is the structure layer of the document, CSS is the presentation layer of the document, and JavaScript is the behavior layer of the document.