2018-03-11 17:11:47

web开发的一些小提示

一些注意

  1. 页面编码规范
    1.1. 统一使用 UTF-8 编码,用@charset "utf-8"指定页面编码。
    1.2. 全局字体设置:
    windows 7系统:微软雅黑 Arial;
    windows XP及以下:新宋体,宋体,Arial
    MAC默认字体:Helvetica Neue和Helvetica Hiragino Sans GB。
    font-family:"Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,Verdana,sans-serif,"WenQuanYi Micro Hei","\5B8B\4F53";
    1.3. 中文字体使用编码转换
    1.4. 推荐使用web安全色
  2. 属性写在一行内,属性之间、属性名和值之间以及属性与“{}”之间应减少空格,去掉最后一个“;”,例如:.class{width:200px;height:100px}

  3. 属性的书写顺序:
    3.1. 按照元素模型由外及内,由整体到细节书写,大致分为五组:

    位置:position,left,right,float
    盒模型属性:display,margin,padding,width,height
    边框与背景:border,background
    段落与文本:line-height,text-indent,font,color,text-decoration,...
    其他属性:overflow,cursor,visibility,...
    

    3.2. 针对特殊浏览器的属性,应写在标准属性之前,例如:-webkit-box-shadow:;-moz-box-shadow:;box-shaow:;

  4. 带有前缀的属性,单独一行,通过缩进,让每个属性的值垂直对齐,方便编辑维护。

  5. 谨慎添加新的选择符规则,尤其不可滥用 id,尽可能继承和复用已有样式

  6. 选择符、属性、值均用小写(格式的颜色值除外),缩写的选择符名称须说明缩写前的全称,例如 .cl -> Clearfix

  7. 避免使用各种CSS Hack。

  8. 勿使用冗余低效的 CSS 写法,例如:ul li a span{... }

  9. 慎用 !important

  10. 建议使用具有语义化的classname或id.

11.避免使用兼容性不好的使用滤镜 .

12.开发过程中的未定事项,须用 [!] 标出,以便于后续讨论整理。

13.注释格式,统一使用双斜杠加*。

14.上下模块之间的间距统一使用下一个模块的margin-top来实现,好处是:如果没有下一个模块也不会多出一段空隙。

15.hover,selected,disabled,current等具有特定意义的请勿直接占用。

16.:link :visited :hover :active书写顺序 L-V-H-A,速记:LoVe(喜欢)HAte(讨厌)。

17.不要使用 @import

中文字体css编码转换

  微软雅黑   \5FAE\8F6F\96C5\9ED1  或 Microsoft YaHei
  黑体       \9ED1\4F53
  新宋体     \65b0\5b8b\4f53
  宋体       \5b8b\4f53

css命名中英文对照


  current 当前    hover 悬停    selected 挑选   disabled 禁用   focus 得到焦点    
  blur 失去焦点   checked 勾选    success 成功    error 出错

  header(hd) 头部   content(cnt) 内容   title(tit) 标题   item 项目(条)   
  cell 单元   image/pic(img) 图片   text(txt) 文字    top 顶部    scrubber 时序菜单

  nav 导航    mainbav 主导航   subnav 子导航    topnav 顶部导航   
  breadcrumb 面包屑导航  flink 友情链接    footer 尾    copyright 版权
  menu 菜单   submenu 子菜单   dropdown 下拉菜单

  searchBar 搜索条   search 搜索条    searchTxt 搜索框   
  searchBtn 搜索按钮    search_key 搜索词

  member 会员   ucenter 用户中心    loginBar 登陆条   
  login 登录    loginBtn 登录按钮   regsiter 注册按钮  
  btn-regsiter注册按钮    name 用户名    password 密码  
  nickname 昵称   mobilephone/mobile 手机    
  telephone/tel 电话   defaultavatar 默认头像

  hot 热点    news 新闻   banner/AD 广告    download 下载
  content 内容    title 标题    summary 摘要    time 时间
  share 分享    digg 顶    like 喜欢

  list 列表   pList 图片列表    tList 文字列表    tpList 图文列表
  table 表格    row 行   column 列    gutter 间隔   viewport 视口
  tab 标签    tags 标签   scroll 滚动 

  sidebar 侧边栏   column 栏目   section 区块    msg 提示信息   
  status 状态   vote 投票   tips 小技巧    guild 指南    note 注释
  icon- 图标    btn- 按钮

  goods 商品    goodsList 商品列表    goodsDetail 商品详情    goodsInfo 商品信息
  tuan 团购   tuanList 团购列表   tuanDetail  团购详情    tuanInfo 团购信息

  transition 动画   shadow 阴影   fade 淡入淡出   flip 翻页效   
  slide 滑动    slideup 上滑动   slidedown 下滑动   turn 翻页 
  horizontal 水平   vertical 垂直   collapsible 折叠    corners 拐角  
  flow 流    reverse 反向    pop 弹窗

  count 总数/计数   plus 加号/正   minus 减号/负    controlgroup 控制组

页面命名

  default/index.html    首页
  404.html              404错误页
  print.html            打印页
  header.html           页头
  footer.html           页脚
  sitemap.html          网站地图
  passport.html         通行证
  rank.html             排行榜
  roll.html             滚动新闻

  solution.html         解决方案
  joinus.html           加入我们
  partner.html          合作伙伴
  service.html          服务
  aboutus.html          关于我们
  contact.html          联系我们
  company.html          公司介绍
  organization.html     组织结构
  culture.html          企业文化
  strategy.html         发展策略
  honor.html            公司荣誉
  aptitudes.html        企业资质
  events.html           大事记
  business.html         商务合作
  contract.html         服务条款
  privacy.html          隐私声明
  CSR.html              企业社会责任

  news-开头.html         新闻相关
  article-开头.html      资讯相关
  picture-开头.html      图片相关
  photo-开头.html        相册相关
  product-开头.html      产品相关
  goods-开头.html        商品相关
  system-开头.html       系统相关
  tag-开头.html          tag相关
  brand-开头.html        品牌相关
  help-开头.html         帮助相关
  member-开头.html       会员相关
  search-开头.html       搜索相关

文件命名

  admin     后台管理
  app       应用
  article   资讯
  common    公共
  config    配置
  data      数据
  digg      顶
  en-us     英文
  extend    延伸
  install   安装
  Lang      语言包
  Lib       库
  mall      商城
  picture   组图
  product   商品
  search    搜索
  section   区块
  shop      商店
  static    静态
  system    系统
  templates 模版
  tuan      团购
  ucenter   用户中心
  upload    上传
  video     视频
  vote      投票
  zh_tw     繁体中文
  zh-cn     简体中文

HTTP 状态消息

当浏览器从 web 服务器请求服务时,可能会发生错误。

从而有可能会返回下面的一系列状态消息:

1xx

100 Continue 服务器仅接收到部分请求,但是一旦服务器并没有拒绝该请求,客户端应该继续发送其余的请求。
101 Switching Protocols 服务器转换协议:服务器将遵从客户的请求转换到另外一种协议。

2xx

200 OK 请求成功(其后是对GET和POST请求的应答文档。)
201 Created 请求被创建完成,同时新的资源被创建。
202 Accepted 供处理的请求已被接受,但是处理未完成。
203 Non-authoritative Information 文档已经正常地返回,但一些应答头可能不正确,因为使用的是文档的拷贝。
204 No Content 没有新文档。浏览器应该继续显示原来的文档。如果用户定期地刷新页面,而Servlet可以确定用户文档足够新,这个状态代码是很有用的。
205 Reset Content 没有新文档。但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容。
206 Partial Content 客户发送了一个带有Range头的GET请求,服务器完成了它。

3xx

300 Multiple Choices 多重选择。链接列表。用户可以选择某链接到达目的地。最多允许五个地址。
301 Moved Permanently 所请求的页面已经转移至新的url。
302 Found 所请求的页面已经临时转移至新的url。
303 See Other 所请求的页面可在别的url下被找到。
304 Not Modified 未按预期修改文档。客户端有缓冲的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户,原来缓冲的文档还可以继续使用。
305 Use Proxy 客户请求的文档应该通过Location头所指明的代理服务器提取。
306 Unused 此代码被用于前一版本。目前已不再使用,但是代码依然被保留。
307 Temporary Redirect 被请求的页面已经临时移至新的url。

4xx

400 Bad Request 服务器未能理解请求。
401 Unauthorized 被请求的页面需要用户名和密码。
402 Payment Required 此代码尚无法使用。
403 Forbidden 对被请求页面的访问被禁止。
404 Not Found 服务器无法找到被请求的页面。
405 Method Not Allowed 请求中指定的方法不被允许。
406 Not Acceptable 服务器生成的响应无法被客户端所接受。
407 Proxy Authentication Required 用户必须首先使用代理服务器进行验证,这样请求才会被处理。
408 Request Timeout 请求超出了服务器的等待时间。
409 Conflict 由于冲突,请求无法被完成。
410 Gone 被请求的页面不可用。
411 Length Required "Content-Length" 未被定义。如果无此内容,服务器不会接受请求。
412 Precondition Failed 请求中的前提条件被服务器评估为失败。
413 Request Entity Too Large 由于所请求的实体的太大,服务器不会接受请求。
414 Request-url Too Long 由于url太长,服务器不会接受请求。当post请求被转换为带有很长的查询信息的get请求时,就会发生这种情况。
415 Unsupported Media Type 由于媒介类型不被支持,服务器不会接受请求。
416 服务器不能满足客户在请求中指定的Range头。
417 Expectation Failed

5xx

500 Internal Server Error 请求未完成。服务器遇到不可预知的情况。
501 Not Implemented 请求未完成。服务器不支持所请求的功能。
502 Bad Gateway 请求未完成。服务器从上游服务器收到一个无效的响应。
503 Service Unavailable 请求未完成。服务器临时过载或当机。
504 Gateway Timeout 网关超时。
505 HTTP Version Not Supported 服务器不支持请求中指明的HTTP协议版本。

本文链接:https://blog.zxysilent.com/post/web-tips.html

-- EOF --

Comments