HTML+CSS的书写格式

扯淡中的扯淡

首先现在好多都叫div+css也有叫html+css，我个人也喜欢称它为html+css。这个会从一个更高的层面上来看前端的标签，div只是html标签中的一个布局标签，它还有很多的标签，如果用div+css来起名，会让人感觉到页头同排版只有用div+css 也是标准化的页页（哈哈，本人刚起入这一行时常听到的是div+css，当时认为写成div的代码加上css样式就是符合w3c标准了，这样有会一个狭隘的想法，会有一个误区是页面用了大量的div，这样的页面及没有符合语义又没有符合SEO优化。随着对前端的理解慢慢改正过来了）。

W3C标准

W3C标准是一系列的标准，包含：结构层（HTML标准）、表现层（CSS标准）、行为层（DOM标准）等标准；

HTML+css要点：

个人要书写前端（HTML+css）代码时总结几条适合自己的格式：

HTML：

1.div尽量用页面布局，而不要用于内容的布局；

2.页面中对于有编号排列的集合用ol，因为它是有序的标签

3.对于有标签有描述的片段（只的是小的模块）用dl它有一个dt标题和dd对标题的一个描述；

4.在使用H1--h6时，对于重要的内容用h1-h3，对于侧栏的页面用h4-h5可以满足需求，同时个人建议H标签用于栏目标题上，内容标题和标题的部分内容一起显示这时用DL的DT和DD一起使用，否则就使用H标签，在这里对于它们的使用顺序也要考虑一下；

5.对于SEO优化的标签有二个比较重要的Strong和Em的。它们的权重是很高的，Strong有重点，突出之意，em有强调 提醒之意；

6.Span标签在页面中的语义非常小，可以接合p em strong等这些标签配合使用，为了解决这个CSS定义时Class属性名的定义；

7.对于有一个标题一个集合列表这样的模块，可以用H标签和UL标签使用。这样的意义是标题下面紧跟一个集合，是对标题的一个集合列表；

8.面向对象开发：首先分析设计原图（模块、CSS背景图片合并等），把每个模块看成一个对象来开发，然后抽象出父模块的HTML和CSS进行封装。最后开发整体代码，重用HTML和继承CSS样式

9.根据不同的设计效果，而制订不同的HTML标签方案；

CSS：

1.在写CSS时尽量不要写成DIV#Img这样的格式；

2.不建议CSS中嵌套的层次太多，建议三次为佳；（#header  #.nav ul li{属性：值}这样的写法会让浏览器会从右向右一层一层地去查找）；

3.建议把具有共性的CSS提成全局的这样每个需要使用的标签可以去继承；减少CSS代码会提高加载效率；

4.最外层的DIV标签建议使用ID属性，它会有一点加载快的优势，可根据项目的设计而定；

5.CSS样式的一个选择器里的属性可以写成一行。加减少CSS文件的大小，一个空间也有一个字符的；对于短小的选择器可以把它们成一条来写；如：.red{color:red;} .blue{color:blue;}

6.在书写CSS时，建议使用全小写字母，为了解决在写HTML属性和CSS中定义有可能不一致（有一个好的习惯）；

7.在CSS的选择器里添加一个背景属性时，如果这个属性要求背景图片是repeat-x属性时，背景图片不在过于小，这样会增加渲染时间；

8.在写CSS属性时，有的属性值可以组合在一个属性上，如：font:bold 14px/25px "宋体"; border:1px solid red; margin:0px 10px 0px 20px; padding:10px 20px 30px 40px; background:url() no-repeat scroll left top transparent;（CSS3样式里也有很多这样的组合在一起的，在这里不列举了，转为CSS在部分浏览器还没有得到很好的支持）等等吧；

9.在组合CSS背景图片时一定要考虑背景图片的空间大小；

 

DOM标准：

 DOM是采用的JavaScript语言来对浏览和HTML还有CSS进行一些动态的操作,JavaScriptj原生的对DOM的操作语言，JavaScript分为Window对象、内置对象、Dom对象、JS语法；

Jquery插件是对以上的对象进行了兼容封装和代码编写封装（指减少代码的编写），优点是浏览器上的兼容问题、减少代码的编写、简单的链式编程、动画效果、自定义动画效果、Ajax、异步加载、对HTML和CSS具有很好的支持并且操作简单、JS文件的压缩版只有二十几K小巧和使用灵活等功能；

 

 

 

在CSS中的个人书写规范：

selector{

      /* 定位属性 */

      display:block;

      float:left;

      position:absolute;

      top:0px;

      right:0px;

      bottom:0px;

      right:0px;

     /* 容器属性 */

      width:0px;

      height:0px;

      margin:auto;

      padding:0px;

      box-shadouw:1px 1px rgba();

      /* 格式属性 */

      line-height:10px;

      text-align:center;

      text-decoration:underline;

      text-shadouw:1px 1px rgba();

      /* 文本属性 */

      color:red;

      font-size:12px;

      font-weight:bold;

      font-family:"宋体";

      font-style:none;

      list-style:none;

      /* 边框背景属性 */

      background-color:red;

      background-image:url();

      border:1px solid red;

      border-raduis:5px;

      overflow:hidden;

}

由于自己的水平有限，表达可能有点不明确，希望见谅，那里有不对的地方，希望你能指正和相互交流学习！