Summary and sharing of naming conventions for html and DIV+CSS (collection)

The standard use of DIV+CSS naming rules in web page production can improve the optimization effect, especially when working in a team, it can provide collaborative production efficiency. The specific DIV CSS naming rules and CSS naming encyclopedia are included in this article.

A comprehensive collection of commonly used DIV+CSS naming, that is, CSS naming rules

When we develop CSS+DIV web pages (Xhtml), the most confusing and tangled thing is CSS naming, especially if novices don’t know it What place should be named, and what is the best way to name it.

1. Description of naming rules

1. All names should be lowercase

2. Attribute values ​​must be enclosed in double quotes (""), and It must have a value such as class="helloweb", id="helloweb"

3. Each tag must have a beginning and an end, and must have the correct level, and the layout must be regular and neat

4. Empty elements must have an ending tag or add "/" after the beginning tag. 5. Performance and structure are completely separated. The code does not involve any performance elements, such as: style, font, The definitions of bgColor, border, etc.

6,

to

should follow the principle from large to small to reflect the structure of the document and facilitate search engine queries.

7. Add a unique structural tag id to each table and form

8. Add alt tags to pictures. The advantage is that when an error occurs in the picture, alt can reflect it. To users

9. Try to use English naming principles

10. Try not to abbreviate words unless they are easy to understand at a glance

The following is an introduction to common CSS naming and DIV CSS naming methods.

2. CSS style naming for important parts of the outer layer of the web page

Coat wrap ------------------used for the outermost layer

Header ---------------Used for the header

Main content main------------Used for the body Content (middle)

Left main-left -------------Left layout

Right main-right -------- ---Right layout

Navigation bar nav ------------------Web menu navigation bar

Content content ------ --------Used for the middle body of the web page

Bottom footer ------------------Used for the bottom

3. DIV +CSS naming reference table

The following is the CSS style naming and CSS file naming reference table, DIV CSS naming collection:

①CSS style naming description web page public naming#wrapper page peripheral control overall layout width# container or #content container;

② is used for the outermost #layout layout #head, #header header part #foot, #footer footer part #nav main navigation #subnav secondary navigation #menu menu #submenu submenu #sideBar sidebar #sidebar_a, #sidebar_bleft column or right column #main page body #tag label #msg #message prompt information #tips tips #vote voting #friendlink friendly connection #title title;

③# summary summary #loginbar login bar #searchInput search input box #hot hot spot #search search #search_output search output and search results are similar #searchBar search bar #search_results search results #copyright copyright information #branding

④trademark#logo Website LOGO #siteinfo website information #siteinfoLegal legal statement #siteinfoCredits credibility #joinus join us #partner partner #service service #regsiter registration arr/arrow arrow #guild guide #sitemap site map #list list #homepage homepage #subpage secondary page Subpage #tool, #toolbar toolbar #drop drop-down #dorpmenu drop-down menu

⑤#status status #scroll scrolling.tab tab page.left.right.center left, center, right.news news.download .banner advertising banner (top advertising banner) electronic trade related .products products .products_prices product prices .products_description product description .products_review product review .editor_review editor review .news_release latest product .publisher manufacturer .screenshot thumbnail .faqs frequently asked questions .keyword key Word.blog blog.forum forum

⑥CSS file naming description master.css, style.css main module.css module base.css basically shares the layout.css layout, layout themes.css theme columns.css column font .css text, font forms.css form mend.css patch print.css print


Other instructions for CSS naming:

DIV+CSS naming summary: Whether using "." ( It doesn’t matter whether you choose to start naming with a symbol (lowercase period) or “#” (pound sign), but we’d better follow that the main, important, special, and outermost boxes use “#” (pound sign). ) selection symbol, and others are named with "." (lowercase period) selection symbol. Also consider naming the CSS selector to be reused and called in HTML.

Usually our most commonly used main names are: wrap (coat, outermost layer), header (header, head), nav (navigation bar), menu (menu), title (column title, general coordination h1\h2\h3\h4 tags are used)

, content (content area), footer (footer, bottom), logo (logo, can be used with h1 tags), banner (advertising banner, usually at the top), copyRight (copyright). Others can be used selectively according to your own needs.

Suggestion: The main, important, and outermost boxes should be named starting with the "#" (pound sign) selection symbol, and the others should be named starting with the "." (lowercase period) selection symbol.

2. The CSS style files are named as follows:

Main master.css

Layout, layout.css

Columns columns.css

Text font.css

Print style print.css

Theme themes.css

4. English naming skills

If you encounter something that is not commonly used, you can use a translation tool to translate it and name it in English.

The above is the detailed content of Summary and sharing of naming conventions for html and DIV+CSS (collection). For more information, please follow other related articles on the PHP Chinese website!