怎么做网站底部版权信息,漳州网站建设优化推广,南京企业网站搭建,盱眙网站制作基本原则* 遵循内容#xff08;HTML#xff09;、显示#xff08;CSS#xff09;、行为#xff08;JavaScript#xff09;分离的代码组织模式 * 代码格式化#xff0c;保持干净整洁 HTML部分2.1. 添加必须的utf-8的字符集#xff0c;并且使用HTML5的简洁方式#xff1…基本原则* 遵循内容HTML、显示CSS、行为JavaScript分离的代码组织模式 * 代码格式化保持干净整洁 HTML部分2.1. 添加必须的utf-8的字符集并且使用HTML5的简洁方式 meta charsetutf-8 / 2.2. 遵循xhtml 1.0规则 1) 所有标签必须结束 2) 所有标签必须小写 3) 标签属性必须使用成对引号单引号或双引号 4) 标签属性必须有值 select option selectedselected/option /select input typecheckbox checkedchecked / 5) 所有特殊符号必须转义、、、©、»… 2.3. 标签属性命名规范 id 连接符命名法“hello-world” class: 连接符命名法“hello-world” name 骆驼式命名法“helloWorld” 1) 表单元素的id必须加以下前缀 label lbl text txt password txt textarea txt file txt radio rad checkbox chk submit btn reset btn button btn hidden hid 2) 用于结构布局的元素id命名 主容器 main 页头 header 页脚 footer 内容区域 content LOGO logo 主导航 main-nav 二级导航 sub-nav 3) name命名 一般用于表单元素根据当前元素id属性值命名去掉id属性值的前缀和所有连接符使用骆骆式命名法命名例如id”txt-id-card”那么name”idCard”。 2.4. 合理使用标签语义化结构 1) 标签合理嵌套 a、span、strong、em、p、h1~h6等元素不能包含div、ul、ol、dl、p 2) 严禁多div症、多span症、多table症正确使用标签表现DOM结构在文档去除css的情况下任然具有结构和可读性以下是html标记的使用规范 p文本段落 dl定义列表可包括标题和内容简介的列表 ul无序列表 ol有序列表 h1~h6文章标题、内容区块标题根据重要性由大到小区分h1一个页面只出现一次 strong/em强调文本 img图像必须加上alt属性当图像无法显示时可表示图像信息背景和按钮使用css处理不使用img元素 table数据网格规则的分栏布局尽可能显性的定宽和定高。 3) 合理化表单结构 a) 使用fieldset元素包裹相同类别的字段 b) 使用legend元素表示字段类别名称 c) 使用label表示字段文本添加必要的for属性以在点击字段文本时文本框能获得焦点 d) 文本框不使用size属性定义宽度而使用css的width属性 e) 添加maxlength属性限制输入字符的长度。 4) 严禁使用已在xhtml 1.0中已移除的的标签 s、i、b、font 2.5. 控制页面默认显示状态 使用js来控制和切换显示的区块、导航、tab必须先用css处理DOM默认显示状态。 应用示例 #tabs div { display:none } #tabs div.selected { display:block } div idtabs ul lia href#tab-1item1/a/li lia href#tab-2item2/a/li lia href#tab-3item3/a/li /ul div idtab-1 classselected/div div idtab-2/div div idtab-3/div /div CSS部分3.1. Css 命名规则 1) 样式类名全部用小写首字符必须是字母禁止数字或其他特殊字符。由以字母开头的小写字母a-z、数字0-9、下划线_组成。 2) 可以是单个单词也可以是组合单词要求能够描述清楚模块和元素的含义使其具有语义化。避免使用 123456…red,blue,left,right之类的如颜色、字号大小等矢量命名如class”left_news”、class”2” 以避免当状态改变时名称失去意义。 3) 尽量用单个单词简单描述class名称。 4) 双单词或多单词组合方式形容词_名词、命名空间_名次、命名空间_形容词_名词。例如news_list、mod_feeds、mod_my_feeds、cell_title 3.2. Class和ID的使用方法 把id留给后台开发和JS使用除此之外页面的page id(如首页的外层需要一个ID id”page_index”)页面结构header main footer允许用id命名。其他禁止id使用在样式表CSS命名中一律使用class命名 3.3. 命名空间 在编码思想上我们可以将页面拆分成不同的层级布局、模块、元件。 什么是CSS命名空间 通过统一的命名规范定义命名的范围成为CSS class id命名空间。 布局: 以语义化的单词layout作为命名空间例如主栏布局命名 layout_main 只改变layout_命名空间后面的命名layout始终保留。布局的命名空间为layout_xxx。 模块页面是由一个或多个模块组成模块的英文单词是module规范简写成mod如新闻模块mod_news照片展示模块mod_photo_show。模块的命名空间为mod_xxx 。 元件元件是属于模块内部的也可以说模块是由元件和它内部的自有元素组成。如用户照片信息元件cell_user_photo。元件的命名空间为cell_xxx 。 3.4. 添加文档样式 1) 引用外部文件方式添加样式 2) 严禁编写标记内代码比如div styledisplay:none;就应该写成div classhide然后在样式表中去完成样式代码编写。 3) 严禁在文档中使用style typetext/css/style代码块。 4) 分割样式表降低代码复杂性方便管理和维护。但不分割的太细碎应考虑以后的维护和管理。 5) 如果是发布版本请压缩合并代码将多个样式文件合并为单个文件在线css代码压缩工具http://www.csscompressor.com/ 3.5. 属性简写 为了节省字节数及文件大小以下属性请使用简写方式 padding: top right bottom left; margin: top right bottom left; border: style width color; border-top: style width color; border-right: style width color; border-bottom: style width color; border-left: style width color; border-color: top right bottom left; border-style: top right bottom left; border-width: top right bottom left; background: color url(image) repeat position; list-style: type position url(image); font-weight: 400 / 700; 3.6. 缩写16进制色值 color和background-color的属性值如果使用的是16进制色值当6个数字两两相等时请使用缩写方式编写比如#996600请缩写为#960 3.7. 字体 1) 全局定义字体body{font: 12px arial, helvetica, sans-serif; line-height: 1.5;} 2) font-family: a) 等宽字体组合Arial, Helvetica, sans-serif; b) 不等宽宽扁字体组合 Verdana, Trebuchet MS, sans-serif; c) 中文字体除非内容文本需要不推荐强制定义 3.8. 页面采用固定流式布局使用像素px固定元素尺寸。 3.9. 编写兼容的CSS代码 1) 页面必须在ie6~8、firefox、opera、safari、chrome下显示兼容 2) 不使用IE有条件注释方式对某一版本浏览器编写额外的样式表 针对某一版本浏览器编写额外的样式表会对维护和管理照成困难。如出现有显示不兼容现象应首先考虑代码是否有问题如属性是否对当前浏览器支持必须编写与常用浏览器都兼容的代码 不推荐的引用方式 !--[if IE 6] link typetext/css relstylesheet hrefie6.css / ![endif]-- !--[if lte ie 7] link typetext/css relstylesheet hrefie7.css / ![endif]-- 3) 不要使用!important或下划线等招数编写代码。 3.10. 添加必须的注释 可根据全局、布局、区块、功能等进行分类和添加注释方便维护和代码搜索。 3.11. CSS 通用命名 (1)页面框架命名一般具有唯一性推荐用ID命名 ID名称 命名 ID名称 命名 头部 header 主体 main 脚部 footer 容器 wrapper 侧栏 side_bar 栏目 column 布局 layout (2)模块结构命名 CLASS名称 命名 CLASS名称 命名 模块(如新闻模块) mod (mod_news) 标题栏 title 内容 content 次级内容 sub_content (2)导航结构命名 CLASS名称 命名 CLASS名称 命名 导航 nav 主导航 main_nav 子导航 sub_nav 顶部导航 top_nav 菜单 menu 子菜单 sub_menu (3)一般元素命名 CLASS名称 命名 CLASS名称 命名 二级 sub 面包屑 breadcrumb 标志 logo 广告 Bner (禁用banner或ad) 登陆 login 注册 regsiter/reg 搜索 search 加入 join 状态 status 按钮 btn 滚动 scroll 标签页 tab 文章列表 list 短消息 msg/message 当前的 current 提示小技巧 tips 图标 icon 注释 note 指南 guide 服务 service 热点 hot 新闻 news 下载 download 投票 vote 合作伙伴 partner 友情链接 link 版权 copyright 演示 demo 下拉框 select 摘要 summary 翻页 pages 主题风格 themes 设置 set 成功 suc 按钮 btn 文本 txt 颜色 color/c 背景 bg 边框 border/bor 居中 center 上 top/t 下 bottom/b 左 left/l 右 right/r 添加 add 删除 del 间隔 sp 段落 p 弹出层 pop 公共 global/gb 操作 op 密码 pwd 透明 tran 信息 info 重点 hit 预览 pvw 单行输入框 input 首页 index 日志 blog 相册 photo 留言板 guestbook 用户 user 确认 confirm 取消 cancel 报错 error 轮播走马灯 carousel 插件项目外和js.css等平级的文件夹 plugIn 工具 tool 图片命名1) 背景图片bg001,bg002,bg003…… 2) 一般图片img001,img002,img003…… 3) 特定图片如banner,logo按照具体情况命名 4) 按钮图片btn_submit,btn_cancel……. JavaScript部分5.1. 在文档中引用js 1) 使用外部文件方式引用js 2) 将引用js的代码集中放置在一起可放置在/head之前或/body之前严禁在body间分散放置 3) 使DOM结构和js代码分离禁止写在标记内部 4) 如果是发布版本请将多个稳定版本的js文件压缩、归类放置到单个文件内压缩和最小化js文件在线packer压缩工具http://dean.edwards.name/packer/。 5.2. 不直接操作DOM样式使用已在样式表中定义的class来操作DOM样式 5.3. DOM加载 把需要在DOM加载后立即执行的代码封装在同一个函数内执行不要编写多个window.onload事件或jQuery的ready()事件。 5.4. 严禁使用多个library库 5.5. 优化jQuery代码提高性能 1) 选择器从最近的ID开始继承或直接使用ID选择器$(”#id tag”) 2) 选择器在使用class前加上标签名$(”span.span1”) 3) 尽量使用ID选择器代替class 4) 要获取子元素请使用子选择器而不要使用后代选择器$(”#id span”) 5) 缓存jQuery对象不要在代码中重复出现相同的选择器var btn$(”#id”) 6) 使用data()存储临时变量 7) 限制直接操作DOM在更新DOM前应该准备好需要的东西 8) 避免使用live()方法绑定事件 9) 在父级元素监听事件对目标元素进行操作 $(”#id”).click(function(e){var input$(e.target);}); 10) 推迟加载拖放、动画、视觉特效等代码把可能会影响页面加载速度的代码绑定到$(window).load()事件中。转载于:https://www.cnblogs.com/llqwm/p/10024595.html
