Home >Web Front-end >HTML Tutorial >【Front-end】#001 Coding specification_html/css_WEB-ITnose
【Front-end】#001 Coding specification_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:53900browse
HTML coding style:
Document type: HTML5 type
<!doctype html>
<strong> 编码：</strong> 使用 meta 设置编码类型 UTF-8
<!doctype html>
<html>
<head>
<metacharset="utf-8">
</head>
<body>
</body>
</html>
<strong>大小写：</strong>除了 Text CDATA元素，其他都使用小写
<strong>缩进：</strong>整个文件要统一（具体看情况使用 2、4空格）
换行：出现块级元素(div、p)，列表元素(ul,ol),表格元素(table) 换行，行内元素大于80换行
<strong>编程风格</strong>
- 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
<!-- 不推荐 ?>
<linkrel="stylesheet"href="//www.google.com/css/maia.css"type="text/css">
<!-- 推荐 ?>
<linkrel="stylesheet"href="//www.google.com/css/maia.css">
<!-- 不推荐 ?>
<scriptsrc="//www.google.com/js/gweb/analytics/autotrack.js"type="text/javascript"></script>
<!-- 推荐 ?>
<scriptsrc="//www.google.com/js/gweb/analytics/autotrack.js"></script>
6. Prioritize the use of button tags instead of 7fa4c5df29cac0c536723c0cd068ebe7
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;} /* 推荐 */h3 { font-weight: bold;}
/* 不推荐 */a:focus, a:active { position: relative; top: 1px; }/* 推荐 */h1,h2,h3 { font-weight: normal; line-height: 1.2;} 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.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn