zoukankan      html  css  js  c++  java
  • 【html】页面制作规范文档

    页面制作也有两年多了,每天都在写 html/css/js 代码,下面是这两年总结的一些页面制作的规范,有不合理的地方希望能够指出。

    文件命名规范

    1) 文件目录、文件名称统一用小写的英文字母、数字、下划线组合,文件名要与表现的内容相近,不到万不得已不要以拼音作为名称,如 登录页面:login.html(不要用 denglu.html)。

    2) 目录结构规范:清晰的站点目录结构方便文件的维护和整理,同时对增加搜索引擎的友好度和移植也有着重要的影响。

    图片制作规范

    1) 如果图片作为内容放在 html 代码里,则必须定义它的宽度和高度。

    2) 如果图片不包含任何信息,仅是作为装饰使用,请将该图片从 html 中分离出来。

    3) 检查是否有可能在不损失画质的基础上压缩图片,或者采用不同的文件格式来获得最大程度的压缩。

    4) 利用 css sprite 将一些小图片合成一张大图片,用 background-position 来定位图片。

    5) 如果有用到透明,则用 gif/png 格式图片,确保各个主流浏览器的兼容。

    6) 为网站制作 favicon.ico,不管有没有 favicon.ico,浏览器总是会去请求它。因此,我们需要为网站制作一个小图标,并将其缓存到用户的电脑中去。

    html代码规范

    1) 要建立一个符合标准的页面,doctype 声明是必不可少的。

    2) 每个页面最好有标题、描述、关键字。

    3) 大部分 javascript 的调用应写在最下面,即 </html> 的后面。

    4) html 代码要求所有的标签必须小写。

    5) 禁止使用 frame 框架。

    6) 属性值必须使用双引号,以免引发不必要的页面问题。

    7) 所有标签必须有闭合标签,如 <p></p>,<div></div>

    如果使用 img 或者 br、hr、input 这样的单体标签,那么必须使用空格加斜线为闭合标签,如 <img />,<br />,<input />。

    8) 必须设置 img 的 alt 属性,如没替换文本则留空。

    9) 必须给 a 标签加上 title 属性,如没有则留空。

    10) 如果无特殊说明,所有链接必须新开窗口。

    11) 所有的特殊符号编码化。

    12) 可以在主要的区域加上注释,但要尽量减少注释的内容。

    13) html 标签必须合理嵌套,如 <ul><li></li></ul>。

    14) 保持页面的整洁,尽量减少 html 的层次,用最少的代码写出符合标准的页面。

    15) 正确使用 html 标签定义页面内容,每一个标签都有自己的语义。

    如,文字用 span 段落用 p 标题用 h1-h6 布局用 div 等。

    16) 每个页面都要有一个 <h1></h1> 里面的内容为 psd 的 slogan。

    17) 相同域名下的链接用相对路径。

    18) 注册类页面,注册按钮必须先锁住,等 html 加载完成后解锁。

    19) 禁止在页面中使用表现级标签,如 font、bgcolor 等。

    禁止不符合 web 标准的标签,如 <font></font>,<b></b>,<u></u>,<i></i>。

    css编写规范

    1、css代码规范

    1) 尽量少用或避免使用 id 来定义 css。

    2) css 命名可以用横线来连接,如 xx-info。

    3) 属性值书写顺序应当按照“上右下左”书写。

    4) 当用 css 定义链接的多个状态时,应当遵循正确的书写顺序,即 lvha。

    5) css 代码书写应当写在一行里。

    6) 在定义 css 时,一定要注意默认值这个问题,通常我们会重置 css。

    7) 删除废弃的 css,要做到所有声明的类或 id 都能用到。

    8) 避免使用滤镜,它的兼容性和效率同样不是很好。

    2、css 缩写规则

    1) 属性值为 0 时,省略单位。

    2) 颜色缩写:#000000 缩写为 #000 或者 black。

    3) 字体缩写:font-size:12px;font-family:"宋体";line-height:20px;font-weight:bold; 缩写为 font:bold 12px/20px "宋体";

    注意:字体缩写时,至少要定义 font-size 和 font-family 两个值。

    4) 边距缩写:如

    margin-top:10px; margin-right:10px; margin-bottom:10px; margin-left:10px;

    缩写成 margin:10px;

    margin-top:10px; margin-right:12px; margin-bottom:10px; margin-left:12px;

    缩写成 margin:10px 12px;

    margin-top:10px; margin-right:12px; margin-bottom:15px; margin-left:12px;

    缩写成 margin:10px 12px 15px;

    margin-top:10px; margin-right:11px; margin-bottom:12px; margin-left:13px;

    缩写成 margin:10px 11px 12px 13px;

    5) 边框缩写:

    border:border-width | border-style | color,如 border:1px solid red;

    6) 背景缩写:

    background:background-color | background-image | background-repeat | background-attachment | background-position,如 background:#000 url(images/bg.jpg) no-repeat 30% 20px;

    7) 列表缩写:

    list-style:list-style-type | list-style-position | list-style-image,如 list-style:disc outside none;

  • 相关阅读:
    前端面试分享
    1
    22
    微信同声传译插件的使用
    微信小程序基于第三方插件微信同声传译,以及一些问题解决办法
    阿里云服务器各种活动集锦
    腾讯云多人直播开发第一天,基于IE游览器的ActiveX开发
    vue组件化学习第三天
    vue组件化学习第二天
    vue组件化学习第一天
  • 原文地址:https://www.cnblogs.com/yjzhu/p/2754877.html
Copyright © 2011-2022 走看看