html+css代码需要注意的地方(整理)

刚进入前端这行,一直在奋斗中,小公司无人指导,只能慢慢摸索咯!

做什么事情都要有习惯!代码也不例外。(估计很多人都忽略了吧!我也是其中一个0.0 )

写代码有好的习惯,可以避免许多意想不到的错误。很多人学习时都会忽略,直到把那些错误的习惯用到熟,改起来就困难了。

所以在写代码时你应该好好看看一些细节及规范,不需要一次就记住,通读一遍有个印象,在实战中遇到了就翻一翻,时间长了,就会了嘛。

现在开始整理(个人理解):

  1.代码为什么要有好的代码习惯?

    答案当然是方便查找错误,减少出错的几率。

  2.html+css要注意的地方有哪些?(建议)

      html部分:

        1. 页面声明:

            以前那么多标准,烦都烦死了,直到html5来了,我喜欢,简单粗暴有内涵。

            <!DOCTYPE HTML>

            简单吧,直接秒杀4.0,4.1....

        2. 把css放到<head>中,避免用@import(因为使用了import之后就相当于把另外的CSS放在了标签的底部)——然而我还没有用到

        3. 避免使用css表达式,css表达式只有在IE中有用,他的执行的次数随着页面的缩小、放大和滚动等会有出现变化。

            ps:想到了一个相关的知识,用表达式解决的。

                 问题:去掉点击a标签后产生的虚线框。

                 解决办法:

                    body a{outline:none;blr:expression(this.onFocus=this.blur());}

                    兼容大部分主流浏览器。    详细后面会介绍

        4. 语言属性声明。

            <html lang="zh-CN">

        5. html标签使用小写。(大写不是不能用,但是不方便阅读。经常遇到熟悉的单词大写就不认识了...)

        6. 使用utf-8编码。

            html中: <meta charset="utf-8">

            css中: @charset "utf-8";

        7. IE兼容模式

            完美解决IE兼容模式代码: <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">

        8. 用空格代替table制表符。(曾近在日包的学长说过,日本审核很严格,每行都会去看你是不是按了4下空格键,天朝╮(╯▽╰)╭)。

        9. 在html中已经声明 自闭合元素(单闭合标签)后的斜杠可以省略,既然可以省略,省略更好,省字节。(双闭合标签千万别省,不然错那都不知道了,经常会因为这些小细节,找一下午,中枪有木有?)

        10. 属性定义最好用双引号。(这个看着来)。

        11. html5中提到js,css文件引入不需要定义type属性。(能省就省)。

        12. 布尔类型声明不赋值,表单常用到。   

              如:<input type="checkbox" value="1" checked>  中的checked 

        13. 避免用javascript生成标签(不易查找、编辑且降低性能)。

    css部分:

        一行代码可以看出许多细节:         

                /* Bad CSS */
                .selector, .selector-secondary, .selector[type=text] {
                 padding:15px;
                 margin:0px 0px 15px;
                 background-color:rgba(0, 0, 0, 0.5);
                 box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
                }

                /* Good CSS */
                .selector,
                .selector-secondary,
                .selector[type="text"] {
                 padding: 15px;
                 margin-bottom: 15px;
                 background-color: rgba(0,0,0,.5);
                 box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
                }

        上部分代码时不建议的写法,下部分的代码时建议的写法。

        1. 选择器组合时,将单独的选择器单独放一行。

        2. 声明块左括号前应该空一格。

        3. 声明块右括号应该单独占一行。

        4. 声明语句 :的后面空一格

        5. 多个属性值逗号后面空一格

        6. 最后一行属性不要忘记 ;  (这个地方我已经中过很多次了,都是在修改时(维护)容易出错。)

        7. 零值后面的单位px和0值的起始值省略掉。 如0px=>0   , 0.5=>.5

        8.部分重复颜色值缩写。如#ffffff=>#fff   (注意:#00ffac 、#eaeaea 不能乱缩写成#0fac,#eae。别搞错了).

    其余要注意的地方:

        9. css声明顺序

                      .declaration-order {
                        /* Positioning */
                        position: absolute;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        left: 0;
                        z-index: 100;

                        /* Box-model */
                        display: block;
                        float: right;
                        width: 100px;
                        height: 100px;

                        /* Typography */
                        font: normal 13px "Helvetica Neue", sans-serif;
                        line-height: 1.5;
                        color: #333;
                        text-align: center;

                        /* Visual */
                        background-color: #f5f5f5;
                        border: 1px solid #e5e5e5;
                        border-radius: 3px;

                        /* Misc */
                        opacity: 1;
                      }

        

            ——>脱离文本流属性优先(依次position 、float、display)

            ——>盒模型属性(尺寸属性)

               (width、height、margin、padding、border)

            ——>其他属性

        10. 单行属性规则:

            一行属性单独一行,多行属性分行书写

            如:

               .span1 { width:150px; }

               .span2 { 

                  width: 150px;

                  height: 150px;

               }

            经常检查错误时会遇到多行写到一起,报第50行出错,多行时就会不明显。

        11. 不要使用 “标签+类名”、“标签+ID” 结构,如 a.str  ......

          可以避免修改页面元素的类型二导致样式失效,如  我把上述a标签改成span标签。结果样式失效了╮(╯▽╰)╭。

        12. 不要使用实体引用

            比如“>”尽量写成"&gt;"  (这个==!例子忘记了,不过要小心。)

        13.尽量避免后代选择器  也就是“>”。比较耗时 (别人说的...)

好了列了这么多估计都晕了.... 多看看不需要记,写代码留点心,时间长久练成习惯了。

还有许多细节,希望补充...一起学习一起进步

时间: 2024-11-06 23:07:37

html+css代码需要注意的地方(整理)的相关文章

css代码整理、收集

整理了一下之前用到过的css代码,实现一种效果或许有许多种写法,我这里整理了一下我个人认为兼容性比较好,结构比较简洁的代码……如有写得不对的地方敬请前辈们指点赐教一下,小弟不胜感激!此学习笔记是动态的——我日后发现有好的代码段会陆陆续续整理添加上去. css:ellipsis省略号 <style> .news{width:320px; text-overflow:ellipsis; -o-text-overflow:ellipsis; -moz-binding:url('ellipsis.xm

转载网易博客:整理各大网站让网站变灰的css代码

2013-07-21 15:06:47 北京时间2013年4月20日8时02分四川省雅安市芦山县(北纬30.3,东经103.0)发生7.0级地震.震源深度13公里.各大网站将其网站变灰,本人整理了下部分网站变灰的css代码. 1.将网站全部变灰 html { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-

整理及优化CSS代码的7个原则

作为网页设计师(前端工程师),你可能还记得曾经的那个网页大小建议:一个网页(包括HTML.CSS.Javacript.Flash和图片)尽量不要超过30KB的大小,随着互联网的日益庞大,网络带宽也在飞速发展,很多设计师已经不再考虑这条30KB的理想准则.随着越来越受欢迎的CSS布局和Javascript对网站用户体验的强化,使得这种现象越来越普遍,尤其是对于大型网站来说,仅仅一个CSS文件就已经超过了30KB的上限. 但是即便如此,现在也有很多准则来帮助你在完成CSS布局后进行CSS代码的压缩和

在sublimen中整理CSS代码及其兼容性问题

1,使用鼠标选中前面浅灰色缩进. 2,Ctrl+H 查找替换  点击 Find All 查找全部缩进. 3,按backspace向后删除两次,如下图所示: 4,向下按一次方向键,再向左按一次方向键,最后向后删除一次backspance  如下图所示: 5,CSS代码就整理好了!!!!这里一定记住在书写CSS样式时,一定要记得同时书写注释. 在书写CSS样式时,可以先写好大体注释: /*all tag 全员基本样式*/ ... /*header导航*/ ... /*banner轮播图*/ ...

如何写出优雅的CSS代码 ?(转)

对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混乱,虽然表达出了最终的效果,然而却晦涩难懂,显然团队成员在读这样的代码时就显得无从下手,更不利于后期的维护了.那么如何写出优雅的代码呢?下面我将以一个很小的项目就以下几个方面简单的表达一下自己的看法,如有不妥,望批评指正. 如何整理一个项目. 如何写出清晰易懂的HTML代码. 如何写出优雅的css代

【知识点】如何写出优雅的CSS代码 ?

对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混乱,虽然表达出了最终的效果,然而却晦涩难懂,显然团队成员在读这样的代码时就显得无从下手,更不利于后期的维护了.那么如何写出优雅的代码呢?下面我将以一个很小的项目就以下几个方面简单的表达一下自己的看法,如有不妥,望批评指正. 如何整理一个项目. 如何写出清晰易懂的HTML代码. 如何写出优雅的css代

如何写出优雅的css代码?

如何写出优雅的css代码? 对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来井井有条,清晰易懂,这样的代码有利于团队合作和后期的维护:而有的混乱,虽然表达出了最终的效果,然而却晦涩难懂,显然团队成员在读这样的代码时就显得无从下手,更不利于后期的维护了.那么如何写出优雅的代码呢?下面我将以一个很小的项目就以下几个方面简单的表达一下自己的看法,如有不妥,望批评指正. 如何整理一个项目. 如何写出清晰易懂的HTML代码. 如

20个编写现代CSS代码的建议

明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较大值会被保留下来,可以从下面这个简单的例子来学习: .square { width: 80px; height: 80px; } .red { background-color: #F44336; margin-bottom: 40px; } .blue { background-color: #2

【转】一个DIV+CSS代码布局的简单导航条

原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现.同时不用图片做背景,直接使用背景色实现,鼠标经过悬停对应栏目名称是对应背景蓝色变深. 导航条部分效果截图 一般导航条采用ul li列表布局,这里也不例外DIVCSS5实例也采用列表标签ul li+ CSS布局. 一.布局思维思考   -   TOP 在实际DIV+CSS布局项目中,一般不会只使用一次