UE前端——xhtml+css规范-戴冬冬(607080)

UE前端XHTML+CSS规范 ver 1.0UE前端XHTML+CSS规范版本制订者生效时间更改内容审核人审核意见.戴冬冬2009-3-1试行一 XHTML部分1 常规说明1 文档类型声明，目前非特殊情况下我们采用XHTML 1.0 Transitional DTD (一般为：)，即DreamWeaver 8和cs3版本默认的DTD2 根据项目文档选择页面编码格式，一般中文项目采用GBK，英文项目采用UTF-8，而程序页一般情况下也采用UTF-8，特殊项目或有特定需求的按需求确定编码格式；3 静态页面XHTML代码应采用自动缩进的形式编写，这样代码层次结构清晰。正确使用代码缩进，缩进时使用tab(键盘中的TAB键)；2 代码书写1 模块化书写：1.1 书写整体框架：按照框架结构分为头部（header）、导航（nav）、主体（main）等，建立清晰的整体框架。1.2 拆解栏目模块，按模块放入框架中：应严格按照模块化书写方式进行，模块有完整的外包围结构，模块与模块间有清晰的注释（注释方法参看第4节）2 标签语义化书写：2.1 使用恰当的标签，减少冗余标签嵌套:div：主要用于布局，分割页面的结构ul/ol：用于无序/有序列表dl,dt,dd：当页面中出现第一行为类似标题/简述，然后下面为详细描述的内容时应该使用该标签span：没有特殊的意义，可以用作排版的辅助，然后在css中定义spanh1-h6：标题, 根据重要性依次递减 h1：最重要的标题label：使表单更有亲和力而且能辅助表单排版举例： 未语义化的标签使用方式 语义化的标签使用方式2.2 不推荐使用的标签：能通过过渡定义的标签，但通不过严格定义。 文字的外观，大小和颜色（Defines the font face, size, and color of text） 文本下划线（Defines underlined text） 句中对齐（Defines centered text） 删除线（Defines strikethrough text） 删除线（Defines strikethrough text） 无视框时的内容（Defines a noframe section） 定义嵌入视图（Defines an inline sub window (frame)） 不建议使用（可搜寻，使用input代替）（Deprecated. Defines a single-line input field. Use instead） 目录式列举（Defines a directory list） 菜单列表（Defines a menu list） 定义基本字体（Defines a base font） 定义java程序（Defines an applet）能通过框架定义验证，不鼓励使用。 定义个别视框（Defines a sub window (a frame)） 视框格式总定义（Defines a set of frames）3 Id和class的合理搭配： id是指一个元素在整个文档中的“唯一标志”，而class则是它所属的“类别”。按照语法，同名的id在一个文档里只应该出现一次 ，而class名可重复使用。 建议在书写时候有选择地使用id和class，一般在书写框架结构的时候可采用id（如#header、#footer），使得文档更为清晰，但是特别注意的是在程序页中，id经常被用在程序处理中，请慎用，防止id冲突。4 制作合理的循环部分：4.1 在制作cms（针对旧版本cms系统）输出的页面时，如新闻列表等，采用表格的列表方式。4.2 在制作程序输出的页面时，采用ul/li结构的循环列表，减少程序的断行控制和控制页面的体积。5 表单完善设置 5.1 表单中的标签要写上。5.2 在页面中碰到有单选框、复选框的时候要给单选框、复选框加上标签。如下面的代码格式可以让单选框的点击范围扩大：6 正确使用表格在输出数据列表时使用表格，注意,的合理使用，体现表格结构7 清除浮动统一标记:清除浮动统一使用 3 SEO优化1 保证整个页面在未加载css样式表时仍有较好的页面结构。2 重视h标签的使用。权重高，体现当前网页中相对比较重要的信息，但不宜过多，建议一个页面只放一个可以做副标题可以做新闻列表 -可做相关新闻的列表3 养成“隐藏标题”的习惯。我们在编写一些设计较重的页面的时候（尤其是专题页面），会出现很多图片类型的标题，此时h2中背景使用该图片，但h2中同样要有相应的文字做标题，在CSS中我们可以使用text-indent来将其“隐藏”。同理，在页面头部的大图片#head中，我们在把图片设置为背景后，同样有必要加入h1及其文字标题内容，然后通过display:none或者text-indent的方法来隐藏它，以此来保证SEO的优化和文档的语义化。4 养成使用a中的title以及img中alt的书写习惯。在很多情况下，a都要使用title来说明该链接的相关说明或目的意义。例如：当使用overflow隐藏掉a中的溢出文字时，该a中的title是必不可少的，它可以告诉用户被隐藏掉的文字内容是什么；又或者当一个图片型链接出现时，该a中的title同样是必不可少的，它可以告诉用户这个图片链接是做什么用的。注：仅在里添加alt标签在火狐提示文字是出不来的，alt是图片加载失败或未加载完全时显示出来的提示文字，要想鼠标移上去显示提示信息应该用title，严谨的写法是里加入alt和title这两个标签。5 避免img标签作为布局结构出现在XHTML文档中。所有的图片（除LOGO或Banner）应尽量在CSS中设置为background，在XHTML文档中以DIV的背景呈现出来。6 及标签的应用将需要加粗的文字使用标签来显示。将需要强调的文字（主要指包含关键词的信息）使用标签来强调主要内容。注：是粗体标签，属于实体标签，它所包围的字符将被设为bold（粗体）。是加重语气标签，属于逻辑标签，它的作用是加强字符语气。7 图片替换文字方法（方法之一）8 压缩和正文无关的代码（无用代码的封装）网页文件大小越小越好，控制在75K以内，用外部调用方式使用CSS样式和JS，将对SEO产生干扰或者负面影响的内容（如：广告和与正文无关的内容）尽量使用或者js封装成文件外部调用4 注释的统一写法1 模块间注释： 2 程序循环结构注释： 3 Cms输出注释： 4 Tab选项卡内容注释： 5 单行注释：5 测试1 浏览器兼容测试：目前必须测试的浏览器为IE6、IE7、FF2、FF3、Google Chrome2 固定内容测试：测试在多浏览器下显示的页面是否一致，是否在多浏览器下和设计稿保持一致；3 不确定内容测试：比如网友留言，网友消息，主页日志等，就是版块内容由网友发布，没有固定的格式，宽高和元素等。这时我们就必须模拟各种网友发布的内容，并测试高度自动撑开，宽度扯开，等等。4 分辨率测试：测试分辨率为1024*768的浏览器是否出现横向滚动条二 CSS部分1 CSS初始化1 页面初始化(css reset)统一代码：body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td ,span, object, iframe padding: 0; margin: 0; table border-collapse: collapse; border-spacing: 0; fieldset, img border: 0; ol, ul list-style: none; h1, h2, h3, h4, h5, h6 font-weight: normal; font-size: 100%; q:before, q:after content:”; 2 清除浮动统一写法：.clear:after content:.; display:block; height:0; clear:both; visibility:hidden; .clear +display:none; clear:both 2 CSS命名规则1 命名可读性：class 命名采用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符，命名必需有确切的含义，原则上不建议缩写，除非一看就懂的缩写，连字符使用“_”。2 框架型命名（采用语义化命名）一般而言，CSS类名的语义化声明方式应当考虑你的页面中某个相对元素的”用意”，独立于它的”定位”或确切的特性(结构化方式)。像left-bar, red-text, small-title这些都属于结构化定义的例子。让我们看看下面这个例子:而现在我们想把页面中的元素调换一下位置，如果你使用的是结构化方式(1)，那么你就要把所有CSS类名重新进行定义，因为它们的位置变了。在布局(3)中，我们看到元素都倒转了:right-bar 现在成了 “left-bar”，而left-content 成了 “right-content”。如果你使用语义化方式则避免了此类问题。换句话说，使用语义化方式的话，你在修改网站布局的时候可以仅仅修改相关CSS类的属性即可，而不用修改它们的类名了，如果网站的代码很庞大，这将节省大量的时间。框架型语义化命名清单（必须采用）全屏: full_bg（全屏背景）容器: wrapper（最外面的主框架）页头：header（子项：h_1、h_2、）内容：container页面主体：main页尾：footer导航：nav（子项：n_1、n_2、）菜单：menu（子项：m_1、m_2、）子菜单：submenu侧栏：sidebar栏目：column（扩展：column1、column2、）左右中：left right center搜索：search登陆：signin3 模块型命名：xxx /* 模块名 */xxx_title /* 模块标题 */xxx_con /* 模块内容 */xxx_btm /* 模块底部 */.4 常用命名：按钮：btn (例：btn_cancel)显示隐藏 _on / _off(例：tab_on)边距：pd_n更多：more_n标志：logo头部广告：banner广告部分：gg(多个 .gg_n )flash轮播：flash功能：func其他请参考附件1。5 字体颜色与链接命名（可与模块型共用，方便管理，如：class=”service color_1”）字体：font_n 颜色：.color_n /* 可同时定义链接颜色 */3 CSS书写顺序1 显示属性： displaylist-stylepositionfloatclear 2 自身属性： widthheightmarginpaddingborderbackground 3 文本属性： colorfonttext-decorationtext-align vertical-alignwhite-space4 CSS组合使用一个div容器同时调用两个（或两个以上）不同样式，那么这个div容器的样式属性等于两个（或两个以上）样式的属性加起来，可充分利用此特性来组合使用css，方便管理并减少