【前端】#001 编码规范_html/css_WEB-ITnose-html tutorial-php.cn

【前端】#001 编码规范_html/css_WEB-ITnose

WBOY

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

asal

867 orang telah melayarinya

HTML编码风格：

文档类型： HTML5类型

<!doctype html>

Salin selepas log masuk

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

Salin selepas log masuk

<!doctype html>

Salin selepas log masuk

<html>

Salin selepas log masuk

  <head>

Salin selepas log masuk

     <metacharset="utf-8">

Salin selepas log masuk

  </head>

Salin selepas log masuk

  <body>

Salin selepas log masuk

  </body>

Salin selepas log masuk

</html>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

<strong>编程风格</strong>

Salin selepas log masuk

<!-- 不推荐 ?>

Salin selepas log masuk

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

Salin selepas log masuk

<!-- 推荐 ?>

Salin selepas log masuk

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

Salin selepas log masuk

<!-- 不推荐 ?>

Salin selepas log masuk

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

Salin selepas log masuk

<!-- 推荐 ?>

Salin selepas log masuk

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

Salin selepas log masuk

6. 优先使用 button标签，而不是

7. html标签必须设置 title 属性

CSS 开发规范

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

书写顺序

css应该按以下顺序书写，原则是 定位布局优先、细节其次

Z-index 使用规范

原则上模块css使用到绝对定位要遵守如下规范，但不强制执行。在开发过程中少用绝对定位布局，多使用布局管理器来管理布局。