【Front-end】#001 Coding specification_html/css

【Front-end】#001 Coding specification_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:41:53

Original

892 people have browsed it

HTML coding style:

Document type: HTML5 type

<!doctype html>

Copy after login

<strong> 编码：</strong> 使用 meta 设置编码类型 UTF-8

Copy after login

<!doctype html>

Copy after login

<html>

Copy after login

  <head>

Copy after login

     <metacharset="utf-8">

Copy after login

  </head>

Copy after login

  <body>

Copy after login

  </body>

Copy after login

</html>

Copy after login

<strong>大小写：</strong>除了 Text  CDATA元素，其他都使用小写

Copy after login

<strong>缩进：</strong>整个文件要统一（具体看情况使用 2、4空格）

Copy after login

换行：出现块级元素(div、p)，列表元素(ul,ol),表格元素(table) 换行，行内元素大于80换行

Copy after login

<strong>编程风格</strong>

Copy after login

Strictly use closing tags to avoid nesting errors
Do not mix JS, CSS, and HTML (extract CSS and JS)
img, object Tags should use alt attributes
button, input and other form tags. Remember to add the title attribute
to simplify statements that reference CSS and JS

<!-- 不推荐 ?>

Copy after login

<linkrel="stylesheet"href="//www.google.com/css/maia.css"type="text/css">

Copy after login

<!-- 推荐 ?>

Copy after login

<linkrel="stylesheet"href="//www.google.com/css/maia.css">

Copy after login

<!-- 不推荐 ?>

Copy after login

<scriptsrc="//www.google.com/js/gweb/analytics/autotrack.js"type="text/javascript"></script>

Copy after login

<!-- 推荐 ?>

Copy after login

<scriptsrc="//www.google.com/js/gweb/analytics/autotrack.js"></script>

Copy after login

6. Prioritize the use of button tags instead of

7. The html tag must set the title attribute

CSS development specifications

Encoded character set: UTF-8 (no BOM), saved as CSS file
Must be written in lowercase letters
Use meaningful short words for naming (or team norms)
Add a space after the colon
The selector and each attribute occupy one line each (selectors and curly braces do not need to be on a new line)
Indentation: Fixed use 2 / 4 spaces, do not use the tab key
A blank line between the selector name and the selector name (a blank line between the two style selectors)
Each style needs to end with a semicolon Separate

/* 不推荐 */h3{  font-weight:bold;}

Copy after login

/* 推荐 */h3 {  font-weight: bold;}

Copy after login

/* 不推荐 */a:focus, a:active { position: relative; top: 1px; }/* 推荐 */h1,h2,h3 {  font-weight: normal;  line-height: 1.2;}

Copy after login

Writing order

css It should be written in the following order. The principle is positioning and layout first, details second

display mode display
positioning or floating mode position, float, clear
Up, down, left and right positioning offsets left, top, right, bottom
Height and width dimensions height, width
Inner and outer padding margin, padding
Border border
Background
Color color
Font text font
Text line-height, text-align
Other miscellaneous

Z-index usage specifications

In principle, module css must comply with the following specifications when using absolute positioning, but it is not enforced. During the development process, use less absolute positioning layout and more use the layout manager to manage the layout.

Map: The index range used is from 0-99, including tile maps, custom layers, legends, layer management, etc.
Interface business Module: The used index ranges from 100-199, real-time water conditions list, etc.
Footer: The used index range is from 700-799, including copyright, filing, Technical support, etc.
Navigation: The index range used is from 800-899, including logo, system name, navigation bar, etc.
Pop-up box: The index range used is from 900-999, including settings panel, prompt box, etc.