The sturdy life does not need explanation, the sturdy code does not need comments! As a programmer, we all involve working with the team in our work. In order to improve the efficiency of teamwork, we should pay attention to specifications when writing code, such as comments, html code embedding rules, class naming specifications, etc. A beautiful piece of code is like a poem, a colorful, well-organized programming language, maybe even comments are omitted (of course, you should remember to add comments for later maintenance convenience).
When we develop front-end static pages, we should carefully plan the html structure. A good html code is not only conducive to maintenance and correct rendering of the browser, but also conducive to good search engine inclusion. We should bring SEO thinking design the html page structure well, and write a beautiful, neat, and more semantic front-end page. Let's talk about the code specification from the following aspects:
1. Nesting rules of html tags
There are many XHTML tags: div, ul, li, dl, dt, dd, h1~h6, p, a, addressa, span, strong... When we use these tags to build the page structure, although we can They are infinitely nested. However, nesting also requires certain rules. You cannot let your own personal habits nest indiscriminately. So, what are the nesting rules of html tags?
(1) HTML tags include block-level elements (block) and inline elements (inline)
1. Block-level elements
Generally used to build website structure, layout, hosting content... It includes the following tags:
address、blockquote、center、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul
2. Embedded elements
Generally used in certain details or parts of the website content to "emphasize, distinguish styles, superscripts, subscripts, anchors", etc., the following tags are all embedded elements:
a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、u、var
(2) The nesting rules of HTML tags
1. A block element can contain inline elements or some block elements, but an inline element cannot contain a block element, it can only contain other inline elements:
<div><h1></h1><p></p></div> —— 对
<a href=”#”><span></span></a> —— 对
<span><div></div></span> —— 错
2. Block-level elements cannot be placed inside <p>:
<p><ol><li></li></ol></p> —— 错
<p><div></div></p> —— 错
3. There are several special block-level elements that can only contain embedded elements, and can no longer contain block-level elements. These special tags are:
h1、h2、h3、h4、h5、h6、p、dt
4. li can contain div tags-this one doesn't actually need to be listed separately, but many people on the Internet have some doubts about this, so I will explain it here:
Both li and div tags are containers for loading content. They are equal in status and have no hierarchy (for example: h1, h2, such a strict hierarchy^_^). You must know that the li tag can even be its parent ul or ol. Accommodating, why do some people think that li cannot hold a div? Don't look at Li so stingy, don't look at Li is very thin, in fact, Li has a big mind.
5. Block-level elements and block-level elements are juxtaposed, and embedded elements are juxtaposed with embedded elements:
<div><h2></h2><p></p></div> —— 对
<div><a href=”#”></a><span></span></div> —— 对
<div><h2></h2><span></span></div> —— 错
二、html编码规范
1.HTML doctype
首先，我们应该为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。
2.字符编码
通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。
3.引入 CSS 和 JavaScript 文件
根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。
例如：
<link rel="stylesheet" href="code-guide.css">
<script src="code-guide.js"></script>
4.减少标签的数量
任何时候我们都应该尽量使用最少的标签并保持最小的复杂度，编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。
5.属性顺序
在编写HTML 属性时我们应当按照以下给出的顺序依次排列，确保代码的易读性，提高团队合作开发效率。
-
class -
id,name -
data-* -
src,for,type,href -
title,alt -
aria-*,role
Almost every html tag we have the possibility to define class, class is used to identify highly reusable components, so it should be ranked first. id is used to identify specific components and should be used with caution (for example, bookmarks within a page), so it ranks second.
6. Write with SEO optimized thinking
To make a website, we definitely want to be easy to promote. When writing html code, we should write code that is conducive to search engine indexing. For example, we should add a title attribute to each a tag, and each img tag. Alt attribute and so on