每个前端开发者都应该积累着一份自己的 -- web开发规范文档

早年就存在自己在硬盘里一篇【前端开发规范文档】,当时就觉得写得不错,之后也一直在默默贴近着它来规范自己:

http://mrthink.net/demo/docs/frontend-specification-bymrthink.htm

今天又看了一遍这规范,来小注下里面的重点,希望对大家有帮助:

1)减少路径重定向

书写链接地址时, 必须避免重定向,例如:href=”http://itaolun.com/”, 即须在URL地址后面加上“/”;
访问地址中,没有带文件名后缀的(例如aspx,asp等等),服务器都会尝试解析为一个文件夹,自动加上一个路径斜线,然后再查找内部的默认页面。

http://www.cnblogs.com/chenxizhang/archive/2013/05/05/3060804.html

2)title 属性优化作用

常与 form 以及 a 元素一同使用,以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性。当然也可用于 p 标签,如:

<p title="Free Web tutorials">W3School.com.cn</p>

3)区分出来为 javaScript 预留钩子的 className 或 id 命名,比如:js_hide\ js_show

4)className 或 id 命名常用命名字段:


头部        header\hd

内容块      content\con\bd
            text
            txt
            title
            
尾部        footer

导航        nav\menu
            sub-nav\sub-menu
            
侧栏        side-con
栏目        item
外容器      wrapper\sprite
左右中      left\right\center
上下        top\bot
登录        login-bar
标志        logo
横栏、广告  banner
主体        main-container
热点        hot
新闻        news
下载        download
搜索        search
友情链接    friend-link
版权        copy-right
标签        tab
列表        list
            post-list
评论信息    cmt
提示信息    msg\note
小备注      tips
注册        regsiter
图标        icon
表单        fm
            input-text

5)AlphaImageLoader滤镜

 (IE滤镜的一种,其主要作用就是对图片进行透明处理;虽然FireFox和IE7以上的IE浏览器已经支持透明的PNG图片,但是就IE5-IE6而言还是有一定的意义)

_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);
实际操作中需要注意:AlphaImageLoader滤镜会导致该区域的链接和按钮无效,一般情况下的解决办法是为链接或按钮 添加:position:relative使其相对浮动 要注意的是,当加载滤镜的区域的父层有position:absolute绝对定位的时候使用position:relative也不能使链接复原。建议 使用浮动办法处理。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值