WEB前端编码规范精修订.docx
《WEB前端编码规范精修订.docx》由会员分享，可在线阅读，更多相关《WEB前端编码规范精修订.docx（33页珍藏版）》请在冰豆网上搜索。
WEB前端编码规范精修订
集团标准化工作小组#Q8QGGQT-GX8G08Q8-GNQGJ8-MHHGN#
WEB前端编码规范
XXXX有限公司
XXXXXXXX管理平台
Web前端代码编写规范
文件状态：
[√]草稿
[]正式发布
[]正在修改
文件标识：
当前版本：
作者：
李光强
完成日期：
XXXXXX
2016年1月
修改历史
编号
修订后
版本号
修订人
修订内容简述
修订
日期
1
李光强
起草
第一部分HTML规范
HTML并不是一种编程语言，而是一种标记语言，它没有任何真正的编程语言中的循环或是流程控制语句。
然而，HTML代码的格式和风格是非常重要的，因为要经常对HTML代码进行维护和修改，因此HTML代码必须有很清晰的逻辑结构和布局，而使其易懂和易于维护。
HTML语言是不区分大小写的，但为改善可读性，规定小写所有字母（除最上一行引用外）。
与HTML不一样，XHTML对大小写是敏感的，
和<TITLE>是不同的标签。</p><p>具体规范如下：</p><p>1.文件定义</p><p><head></p><p><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/></p><p>2.网站head区代码规范：</p><p>head区是指<head>和</head>之间的内容。</p><p>必须加入的标签：</p><p>公司版权注释</p><p><!</p><p>---</p><p>文件：</p><p>说明：</p><p>说明本HTML是用于什么功能</p><p>作者：</p><p>李四</p><p>时间：</p><p>2016/1/30</p><p>---></p><p>网页显示字符集</p><p>简体中文：</p><p><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"></p><p>繁体中文：</p><p><metahttp-equiv="Content-Type"content="text/html;charset=BIG5"></p><p>英语：</p><p><metahttp-equiv="Content-Type"content="text/html;charset=iso-8859-1"></p><p>作者与版权信息</p><p>此处用于存储开发公司版权信息，如：</p><p><metaname="author"content=""></p><p><metaname="copyright"content="版权所有"/></p><p>网页的css,javascript规范</p><p>在引用CSS和JS文件时，统一放置在<head></head>中，先放CSS引用，再放js引用。</p><p><linkhref="style/"rel="stylesheet"type="text/css"/></p><p>html中javascript的书写：</p><p><scriptlanguage="javascript"type="text/javascript"></script></p><p>网页标题</p><p>Title中使用“-”分割，如：</p><p>设备管理平台-运维系统。</p><p>设置搜索关键词</p><p><metaname="keywords"content=""/></p><p>GoogleAdWords关键字工具：</p><p>查询特定关键词的常见查询及扩展匹配。</p><p>KEYWRODS关键字最多不超过5个建议长度：</p><p>小于等于100个汉字，如果使用的网页编码是UTF-8，不同关键字之间用英文“,”分隔。</p><p>网站简介</p><p><metaname="description"content=""/></p><p>description是描述网页内容的，因此最好是可以用一句话来概括本网页的主题内容。</p><p>description不要超过255个字符，搜索引擎索引一般都会索引Description的前255个字符，因此，这255个字符是做搜索引擎优化的关键。</p><p>如果使用的网页编码是UTF-8，那么在Description中的标点符号最好都使用英文，例如英文的逗号、句号等。</p><p>如果是中文的话，那么就使用中文的标点符号即可。</p><p>其它标签[非必需]</p><p>1.设定网页的到期时间。</p><p>一旦网页过期，必须到服务器上重新调阅，这样有利于页面信息。</p><p><metahttp-equiv="expires"content="wed,26feb200908:</p><p>21:</p><p>57gmt"></p><p>2.禁止浏览器从本地机的缓存中调阅页面内容。</p><p><metahttp-equiv="pragma"content="no-cache"></p><p>3.用来防止别人在框架里调用你的页面。</p><p><metahttp-equiv="window-target"content="_top"></p><p>4.自动跳转。</p><p>5指时间停留5秒。</p><p>5.网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。</p><p><metaname="robots"content="none"></p><p>CONTENT的参数有all,none,index,noindex,follow,nofollow。</p><p>默认是all。</p><p>6.收藏夹图标</p><p><linkrel="shortcuticon"href="/"type="image/x-icon"/>图片大小16px*16px</p><p>7.订阅RSS浏览</p><p>是一种描述和同步网站内容的格式。</p><p>用户可以通过RSS阅读器订阅。</p><p><linkhref=””title=”新现代教育网”type=”application/rss+xml”rel=”alternte”/></p><p>完整示例</p><p>3.html中元素的书写：</p><p><body>区域标签</p><p>段落</p><p>段落使用<p>标签进行定义。</p><p><p>Thisisaparagraph</p></p><p>标题</p><p>即正文标题一般用<h1></h1>标签，最好和title标签的内容有关联。</p><p>标题使用<h1>至<h6>标签进行定义。</p><p><h1>定义最大的标题。</p><p><h6>定义最小的标题。</p><p><h1>Thisisaheading</h1></p><p><h2>Thisisaheading</h2></p><p><h3>Thisisaheading</h3></p><p><h4>Thisisaheading</h4></p><p><h5>Thisisaheading</h5></p><p><h6>Thisisaheading</h6></p><p>文章中的小标题一定也要加粗。</p><p>可以把网页中的重要内容做成这样。</p><p>用户不用登陆这个网页就可看到更新的内容。</p><p>字体的设置标签</p><p>换行：</p><p><br/></p><p>字体修饰不要使用<font><strong>等进行标注，一般使用css样式进行字体样式排版</p><p>注意事项</p><p>1.<body>为了保证浏览器的兼容性，必须设置页面背景：</p><p><bodybgcolor="#FFFFFF"></p><p>2.关闭所有的标签</p><p>。</p><p>即：</p><p>一定要有结束标记。</p><p>3.属性值用双引号“”括起来,属性统一使用小写</p><p>例如：</p><p><imgheight="60"width="760"src="images/"/></p><p>4.给所有的属性赋值</p><p>不正确的写法：</p><p><input……checked/></p><p>正确的写法为：</p><p><input……checked="checked"/></p><p>5.标签要合理嵌套</p><p>7.特殊字符用编码标识</p><p>如"<"用"<"表示，">"用">"表示。</p><p>8.网页中图片优化</p><p>一定要加alt属性，alt属性指定了当图片不能显示的时候就显示供替换文本。</p><p>内容最好与关键词相关。</p><p>如：</p><p><imgsrc="images/"alt="网站LOGO"/></p><p>一些小图标最好用.png或.gif格式图片，比如说箭头，文章列表前的图标等，在CSS中做成背景。</p><p>这些小图标最好做一张图片，用CSS来定位。</p><p>9.用结构化的元素输出内容</p><p><ul></p><p><li>新现代</li></p><p><li>新现代</li></p><p><li>新现代</li></p><p></ul></p><p>或者使用</p><p><dl></p><p><dt></dt></p><p><dd></dd></p><p></dl></p><p>10．标签要有缩进，便于代码阅读修改。</p><p>11、tr、td必须定义在table之间；</p><p><table></p><p><tbody></p><p><tr></p><p><td>……</td></p><p>….</p><p></tr></p><p></tbody></p><p></table></p><p>注：</p><p>tbody绝对不可以省略。</p><p>12、button按钮必须定义在form之间，否则netscape不支持；</p><p><formaction=”……”method=”post”></p><p><inputtype=”button”name=”but”value=”back”></p><p></form></p><p>13、html注释</p><p>（1）每一独立部分都要表明注释。</p><p>例如：</p><p><!</p><p>—右边begin--><!</p><p>--右边end--></p><p><!</p><p>—左边begin--><!</p><p>—左边end--></p><p>块代码的注释</p><p><!</p><p>—头部begin--></p><p>大量代码块，使用此种样式，方便阅读</p><p><!</p><p>—头部end--></p><p>（2）注释要用描述性语言，能够清楚的表达每一部分的意思。</p><p>4.HTML元素的排序规则</p><p>能够使用的HTML元素包括：</p><p>div、p、ul、table、span、input、select等。</p><p>基本上div、table、ul、p都属于结构性比较强的元素，而span、input则是比较弱的元素，因此不允许有span嵌套div、table等等的情况出现，span可以嵌套input,可以嵌套span。</p><p>在写页面的时候可以先不考虑界面呈现，按照这样的规则，把数据直接绑定到HTML元素的节点上。</p><p>5.九大原则</p><p>原则一：</p><p>一般要写兼容多种浏览器的网页，最省事的方法就先写适合chrome的样式，并在chrome进行调度。</p><p>测试时可以使用多种浏览器。</p><p>原则二：</p><p>逐步叠加的方式，如果需要用这个样式的模块很多，并且会存在些许的不同，千万不要把样式一步写到位，最好把框架性的先写好，细节性的留到第二个步骤，甚至第三个步骤，当然最好步骤不要超过三步，这样很不利于维护。</p><p>由若干个二级定义对一级定义进行补充，这样的既可以减少代码，又可以减少繁多的CLASS命名。</p><p>不要轻易修改共用的CSS，否则可能会影响其它页面。</p><p>在每个一级CSS前添加注释，说明哪些页面使用了该CSS。</p><p>原则三：</p><p>从总到分。</p><p>顺序应该是这样：</p><p>总体需要用到的>>结构>>模块>>二级模块>>细节；并且这个文档最不容易修改的处于最上端，频繁用于修改的在末端。</p><p>最忌讳即兴发挥，这样写出的东西经不起推敲，稍有变化就要忙得乱成一团。</p><p>结构性的东西应该慎重精细。</p><p>原则四：</p><p>尽量把能够放在一组的小图标或者图片放在一个图片文件里，这样的好处有很多。</p><p>1、图片文件的总量会变小；</p><p>2、利于下载，太多的小图片下载效果是不理想的，常常会发现这个图片出来，那个没出来，这样在写样式的时候只需要写一个总体的，对于具体的要显示的只需要标一个位置，非常省时间，样式也很精炼；</p><p>3、显而易见，这样做非常便于管理，替换或新增的时候工作量很小。</p><p>原则五：</p><p>切图的原则，应该切大的图绝不切小，应该切小的绝不切大，能够用颜色代替的绝不切图。</p><p>把一个大图切成很多份并不一定能够加快页面的显示速度，相反会浪费很多不必要的带宽。</p><p>不光要控制图片文件的多少，还要考虑到这样切会不会造成页面增加许多额外的代码。</p><p>原则六：</p><p>图片使用能名称表达图片意义的名词命名，尽量不要使用编号命名。</p><p>原则七：</p><p>涉及多行多列的特别是列宽有不固定的，坚决用表格，千万不要为了DIV而DIV。</p><p>多个图片规则排列时，可以使用<dl><dt></dt><dd></dd></dl>。</p><p>原则八：</p><p>尽可能不把样式直接写到元素的标签里（除非这个样式出现的几率特别小，有相当程度的偶然性）。</p><p>原则九：</p><p>尽量不要用ID来定义或索引样式，ID的唯一性比较高，且用ID索引样式效率非常低而且兼容性的问题也比较明显。</p><p>6．文件命名原则</p><p>前台文件组织</p><p>在前台页面文件中，每个大类功能模块（子系统）单独创建一个文件夹，使用与之相关的有意义的英文名词命名。</p><p>例如有一个系统包括后台管理（admin）、前台商城（shop）、会员中心（member）和商家中心（store）等子系统，文件夹组织：</p><p>每个子系统中应该包含一个缺省的html文件，文件名统一用，即当用户缺省访问该目录时，自动加载该页面。</p><p>公用页面（如登录、页头、页脚、导航、菜单、信息/错误提示等），可以统一放在common目录中。</p><p>页面命名规则</p><p>具有管理功能的页面，如用名、角色、设备、日志、文章等的管理，可以归纳为列表（）、新建（）、编辑（）等几类操作，所以在页面组织时，每类模块单独创建一个文件夹，使用能够表达模块意义的英文名词命名，并在其中分别创建、、等文件，对应于内容列表、添加、编辑等操作。</p><p>示例：</p><p>其它说明：</p><p>1.在列表页面里统一使用“四栏式”显示风格，即列表页面里必须包括模块目录/位置提示、工具栏（含添加、编辑、删除、刷新、查询等操作控件）、表格、分页操作等部分。</p><p>示例：</p><p>2.表格用于显示查询内容，在打开时，必须默认加载一定的记录；表格栏目仅显示用户常用或关心的字段；在显示时必须对表格内容进行必要的格式处理；对记录常用的操作可以放置于操作栏内（如上图中的操作栏内放置有编辑和删除两个操作按钮）。</p><p>3.表格可以统一使用easyuidatagrid或bootstapdatatables。</p><p>.资源文件的命名原则</p><p>资源文件包括css、js、图片等内容。</p><p>所有资源文件统一存储在web根目录resource文件夹中。</p><p>示例：</p><p>每个子系统（大类）文件夹命名规则同规则。</p><p>每个子系统文件夹中分别包括css、js和images，示例：</p><p>多个子系统公共使用的资源，统一存储在common文件夹中，如常用的js操作，可以命名为，放置在common/js/。</p><p>图片命名规则</p><p>图片分成两部分，一是网页设计时使用的静态资源，通常不会因系统的运行而发生变化，另一类是程序生成、用户上传、终端上传的图片。</p><p>（1）静态图片存储在resources\大类目录\images中，使用能表达图片意义的英文单词命名，不能使用图片编号命名。</p><p>网面使用的小图标，可以放置在一个图片文件中，使用css裁切和背景方式显示在页面中。</p><p>（2）动态图片存储在resources\upload目录中，在其中创建分类图片目录。</p><p>例如，与系统相关的图片存储在system目录中，设备监控相关图片存储在management中等。</p><p>为了避免同一文件夹中文件数量限制，在分类目录中，按上传日期分成不同的次级目录，命名规则为上传文件所在的yyyyMM（年度月份），其中月份使用两位数字表示。</p><p>例如：</p><p>上传的图片统一使用GUID标识进行命名，即在上传时，由接收的java程序自动生成guid编号+.图片扩展名进行命名。</p><p>注意：</p><p>保存图片时，文件扩展名必须保持不变。</p><p>示例：</p><p>7.常用HTML标识符</p><p>HTML标记一览:</p><p>文件标记</p><p><HTML></p><p>●</p><p>文件声明</p><p>让浏览器知道这是HTML文件</p><p><HEAD></p><p>●</p><p>开头</p><p>提供文件整体资讯</p><p><TITLE></p><p>●</p><p>标题</p><p>定义文件标题，将显示于浏览顶端</p><p><BODY></p><p>●</p><p>本文</p><p>设计文件格式及内文所在</p><p>排版标记</p><p><!</p><p>--注解--></p><p>○</p><p>说明标记</p><p>为文件加上说明，但不被显示</p><p><P></p><p>○</p><p>段落标记</p><p>为字、画、表格等之间留一空白行</p><p><BR></p><p>○</p><p>换行标记</p><p>令字、画、表格等显示于下一行</p><p><HR></p><p>○</p><p>水平线</p><p>插入一条水平线</p><p><CENTER></p><p>●</p><p>居中</p><p>令字、画、表格等显示于中间</p><p>反对</p><p><PRE></p><p>●</p><p>预设格式</p><p>令文件按照原始码的排列方式显示</p><p><DIV></p><p>●</p><p>区隔标记</p><p>设定字、画、表格等的摆放位置</p><p><NOBR></p><p>●</p><p>不折行</p><p>令文字不因太长而绕行</p><p><WBR></p><p>●</p><p>建议折行</p><p>预设折行部位</p><p>字体标记</p><p><STRONG></p><p>●</p><p>加重语气</p><p>产生字体加粗BOLD的效果</p><p><B></p><p>●</p><p>粗体标记</p><p>产生字体加粗的效果</p><p><EM></p><p>●</p><p>强调标记</p><p>字体出现斜体效果</p><p><I></p><p>●</p><p>斜体标记</p><p>字体出现斜体效果</p><p><TT></p><p>●</p><p>打字字体</p><p>COURIER字体，字母宽度相同</p><p><U></p><p>●</p><p>加上底线</p><p>加上底线</p><p>反对</p><p><H1></p><p>●</p><p>一级标题标记</p><p>变粗变大加宽，程度与级数反比</p><p><H2></p><p>●</p><p>二级标题标记</p><p>将字体变粗变大加宽</p><p><H3></p><p>●</p><p>三级标题标记</p><p>将字体变粗变大加宽</p><p><H4></p><p>●</p><p>四级标题标记</p><p>将字体变粗变大加宽</p><p><H5></p><p>●</p><p>五级标题标记</p><p>将字体变粗变大加宽</p><p><H6></p><p>●</p><p>六级标题标记</p><p>将字体变粗变大加宽</p><p><FONT></p><p>●</p><p>字形标记</p><p>设定字形、大小、颜色</p><p>反对</p><p><BASEFONT></p><p>○</p><p>基准字形标记</p><p>设定所有字形、大小、颜色</p><p>反对</p><p><BIG></p><p>●</p><p>字体加大</p><p>令字体稍为加大</p><p><SMALL></p><p>●</p><p>字体缩细</p><p>令字体稍为缩细</p><p><STRIKE></p><p>●</p><p>画线删除</p><p>为字体加一删除线</p><p>反对</p><p><CODE></p><p>●</p><p>程式码</p><p>字体稍为加宽如<TT></p><p><KBD></p><p>●</p><p>键盘字</p><p>字体稍为加宽，单一空白</p><p><SAMP></p><p>●</p><p>范例</p><p>字体稍为加宽如<TT></p><p><VAR></p><p>●</p><p>变数</p><p>斜体效果</p><p><CITE></p><p>●</p><p>传记引述</p><p>斜体效果</p><p><BLOCKQUOTE></p><p>●</p><p>引述文字区块</p><p>缩排字体</p><p><DFN></p><p>●</p><p>述语定义</p><p>斜体效果</p><p><ADDRESS></p><p>●</p><p>地址标记</p><p>斜体效果</p><p><SUB></p><p>●</p><p>下标字</p><p>下标字</p><p><SUP></p><p>●</p><p>上标字</p><p>指数（平方、立方等）</p><p>清单标记</p><p><OL></p><p>●</p><p>顺序清单</p><p>清单项目将以数字、字母顺序排列</p><p><UL></p><p>●</p><p>无序清单</p><p>清单项目将以圆点排列</p><p><LI></p><p>○</p><p>清单项目</p><p>每一标记标示一项清单项目</p><p><MENU></p><p>●</p><p>选单清单</p><p>清单项目将以圆点排列，如<UL></p><p>反对</p><p><DIR></p><p>●</p><p>目录清单</p><p>清单项目将以圆点排列，如<UL></p><p>反对</p><p><DL></p><p>●</p><p>定义清单</p><p>清单分两层出现</p><p><DT></p><p>○</p><p>定义条目</p><p>标示该项定义的标题</p><p><DD></p><p>○</p><p>定义内容</p><p>标示定义内容</p><p>表格标记</p><p><TABLE></p><p>●</p><p>表格标记</p><p>设定该表格的各项参数</p><p><CAPTION></p><p>●</p><p>表格标题</p><p>做成一打通列以填入表格标题</p><p><TR></p><p>●</p><p>表格列</p><p>设定该表格的列</p><p><TD></p><p>●</p><p>表格栏</p><p>设定该表格的栏</p><p><TH></p><p>●</p><p>表格标头</p><p>相等于<TD>，但其内之字体会变粗</p><p>表单标记</p><p><FORM></p><p>●</p><p>表单标记</p><p>决定单一表单的运作模式</p><p><TEXTAREA></p><p>●</p><p>文字区块</p><p>提供文字方盒以输入较大量文字</p><p><INPUT></p><p>○</p><p>输入标记</p><p>决定输入形式</p><p><SELECT></p><p>●</p><p>选择标记</p><p>建立POP-UP卷动清单</p><p><OPTION></p><p>○</p><p>选项</p><p>每一标记标示一个选项</p><p>图形标记</p><p><IMG></p><p>○</p><p>图形标记</p><p>用以插入图形及设定图形属性</p><p>连结标记</p><p><A></p><p>●</p><p>连结标记</p><p>加入连结</p><p><BASE></p><p>○</p><p>基准标记</p><p>可将相对URL转绝对及指定连结目标</p><p>框架标记</p><p><FRAMESET></p><p>●</p><p>框架设定</p><p>设定框架</p><p><FRAME></p><p>○</p><p>框窗设定</p><p>设定框窗</p><p><IFRAME></p><p>○</p><p>页内框架</p><p>于网页中间插入框架</p><p>IE</p><p><NOFRAMES></p><p>●</p><p>不支援框架</p><p>设定当浏览器不支援框架时的提示</p><p>影像地图</p><p><MAP></p><p>●</p><p>影像地图名称</p><p>设定影像地图名称</p><p><AREA></p><p>○</p><p>连结区域</p><p>设定各连结区域</p><p>多媒体</p><p><BGSOUND></p><p>○</p><p>背景声音</p><p>于背景播放声音或音乐</p><p>IE</p><p><EMBED></p><p>○</p><p>多媒体</p><p>加入声音、音乐或影像</p><p>其他标记</p><p><MARQUEE></p><p>●</p><p>走动文字</p><p>令文字左右走动</p><p>IE</p><p><BLINK></p><p>●</p><p>闪烁文字</p><p>闪烁文字</p><p>NC</p><p><ISINDEX></p><p>○</p><p>页内寻找器</p><p>可输入关键字寻找于该一页</p><p>反对</p><p><META></p><p>○</p><p>开头定义</p><p>让浏览器知道这是HTML文件</p><p><LINK></p><p>○</p><p>关系定义</p><p>定义该文件与其他URL的关系</p><p>STYLESHEET</p><p><STYLE></p><p>●</p><p>样式表</p><p>控制网页版面</p><p><SPAN></p><p>●</p><p>自订标记</p><p>独立使用或与样式表同用</p><p>注：</p><p>∙●表示该标记属围堵标记，即需要关闭标记如</标记>。</p><p>∙○表示该标记属空标记，即不需要关闭标记。</p><p>∙IE表示该标记只适用于INTERNETEXPLORER。</p><p>∙NC表示该标记只适用于NETSCAPECOMMUNICATOR。</p><p>∙反对表示该标记不为W3C所赞同，通常这标记是IE或NC自订，且己为众所支持，只是HTML标准中有其它同功能或更好的选择。</p><p>弃用表示该标记己为W3C所弃用，是过时的标记，但HTML具向下兼容的特性，不用担心新浏览器不支援旧标记。</p><p>第二部分</p><p>1.基本书写规范 </p><p>所有的CSS的尽量采用外部调用</p><p> <LINKhref="/style/"rel="stylesheet"type="text/css"></p><p> 书写时重定义的最先，伪类其次，自定义最后（其中a:</p><p>linka:</p><p>visiteda:</p><p>hovera:</p><p>actived要按照顺序写）便于自己和他人阅读。</p><p> 为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px和这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11px和的字号比较合适。</p><p>字体选择：</p><p>优先使用微软雅黑，其次为宋体，可以统一在body中定义，而自定义样式中，不需要重复定义字体。</p><p>如：</p><p>CSS推荐模板 </p><p>body?</p><p>{font-size:</p><p>9pt;font-family:</p><p>Arial,Helvetica,sans-serif;color:</p><p>#333333;text-align:</p><p>center;margin:</p><p>0px;}</p><p>ul?</p><p>{margin:</p><p>auto;}</p><p>img?</p><p>{border:</p><p>0px;}</p><p>a?</p><p>{font-size:</p><p>9pt;text-decoration:</p><p>none;color:</p><p>#FFFFFF;}</p><p>a:</p><p>hover?</p><p>{font-size:</p><p>9pt;text-decoration:</p><p>underline;color:</p><p>#990000;}</p><p>{font-size:</p><p>9pt;color:</p><p>#3366cc;text-decoration:</p><p>none}</p><p>:</p><p>hover?</p><p>{font-size:</p><p>9pt;color:</p><p>#FF9900;text-decoration:</p><p>none}</p><p>.colorblue,colorblue:</p><p>ho</p>
</div>
<div class="readmore" onclick="showmore()" style="background-color:transparent; height:auto; margin:0px 0px; padding:20px 0px 0px 0px;"><span class="btn-readmore" style="background-color:transparent;"><em style=" font-style:normal">展开</em>阅读全文<i></i></span></div>
<script>
function showmore()
{
$(".readmore").hide();
$(".detail-article").css({
"height":"auto",
"overflow": "hidden"
});
}
$(document).ready(function() {
var dh = $(".detail-article").height();
if(dh >100)
{
$(".detail-article").css({
"height":"100px",
"overflow": "hidden"
});
}
else
{
$(".readmore").hide();
}
});
</script>
</div>
<script>
var defaultShowPage = parseInt("5");
var id = "23907958";
var total_page = "33";
var mfull = false;
var mshow = false;
function DownLoad() {
window.location.href='https://m.bdocx.com/down/23907958.html';
}
function relate() {
var reltop = $('#relate').offset().top-50;
$("html,body").animate({ scrollTop: reltop }, 500);
}
</script>
<script> var pre = "https://file1.bdocx.com/fileroot1/2023-5/22/cd9ba9e7-4172-417f-868a-a1a6bfa52bb0/cd9ba9e7-4172-417f-868a-a1a6bfa52bb0";
var freepage = parseInt('20');
var total_c = parseInt('33');
var start = defaultShowPage;
var adcount = 0;
var adindex = 0;
var adType_list = ";0;1;2;3;4;5;6;7;8;9;10;11;12;13;14;15;16;17;18;19;";
var end = start;
function ShowSvg() {
end = start + defaultShowPage;
if (end > freepage) end = freepage;
for (var i = start; i < end; i++) {
var imgurl = pre + (i + 1) + '.gif';
var html = "<img src='" + imgurl + "' onerror=\"this.src='/images/s.gif'\" alt=\"WEB前端编码规范精修订.docx_第" + (i + 1) + "页\" width='100%'/>";
$("#page").append("<div class='page'>" + html + "</div>");
$("#page").append("<div class='pageSize'>第" + (i + 1) + "页 / 共" + total_c + "页</div>");
if(adcount > 0 && adType_list.indexOf(";"+(i+1)+";")>-1)
{
if(adindex > (adcount-1)) adindex = 0;
$("#page").append("<div class='pagead' id='addiv"+(i + 1)+"'></div>");
document.getElementById("addiv"+(i + 1)+"").innerHTML =document.getElementById("adpre" + adindex).outerHTML;
adindex += 1;
}
}
start = end;
if (start > (freepage - 1)) {
if (start < total_c)
{
$("#pageMore").removeClass("btnmore");
$("#pageMore").html("亲，该文档总共" + total_c + "页，到这儿已超出免费预览范围，如果喜欢就下载吧！");
}
else
{
$("#pageMore").removeClass("btnmore");
$("#pageMore").html("亲，该文档总共" + total_c + "页全部预览完了，如果喜欢就下载吧！");
}
}
}
//$(document).ready(function () {
// ShowSvg();
//});
</script>
<div id="relate" class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8">
<div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">相关资源</div>
<div id="relatelist" style="padding-left:5px;">
<ul>
<li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30873333.html" title="电子课件-烹饪原料知识（第三版）.pptx">电子课件-烹饪原料知识（第三版）.pptx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30873224.html" title="至信搏远新材料科技有限公司年产1.2亿平方米锂电池铝塑膜建设项目（重大变更）项目环评报告.docx">至信搏远新材料科技有限公司年产1.2亿平方米锂电池铝塑膜建设项目（重大变更）项目环评报告.docx</a>
</li><li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872940.html" title="PS零基础入门学习教程(适合纯小白).ppt">PS零基础入门学习教程(适合纯小白).ppt</a>
</li><li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872775.html" title="大比例尺地质填图方法介绍.ppt">大比例尺地质填图方法介绍.ppt</a>
</li><li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872692.html" title="苏教版小学五年级英语A--Long--Wait赛课课件.pptx">苏教版小学五年级英语A--Long--Wait赛课课件.pptx</a>
</li><li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872599.html" title="团队沟通技巧培训：提高团队沟通和协作效率..pptx">团队沟通技巧培训：提高团队沟通和协作效率..pptx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872442.html" title="小学应急演练计划（精选6篇）.docx">小学应急演练计划（精选6篇）.docx</a>
</li><li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872299.html" title="心肺复苏急救技能学习ppt课件.ppt">心肺复苏急救技能学习ppt课件.ppt</a>
</li><li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872282.html" title="自然灾害应急处置与防范.ppt">自然灾害应急处置与防范.ppt</a>
</li><li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872145.html" title="first-fit_algorithm_first_fit_decreasing_演算法.ppt">first-fit_algorithm_first_fit_decreasing_演算法.ppt</a>
</li>
</ul>
</div>
</div>
<div class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8">
<div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">猜你喜欢</div>
<div id="relatelist" style="padding-left:5px;">
<ul>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/23037364.html" target="_parent" title="智能交通市场的需求热点和发展机会分析.docx">智能交通市场的需求热点和发展机会分析.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/23037365.html" target="_parent" title="中国人民大学历年经济学综合试题b.docx">中国人民大学历年经济学综合试题b.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/23037366.html" target="_parent" title="中级经济师经济基础知识背诵版.docx">中级经济师经济基础知识背诵版.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/23037367.html" target="_parent" title="中考化学专题测试质量守恒定律有答案.docx">中考化学专题测试质量守恒定律有答案.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/23037368.html" target="_parent" title="中考英语书面表达经典题型带答案经典1.docx">中考英语书面表达经典题型带答案经典1.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/23037369.html" target="_parent" title="中小学资料云南省曲靖市届高三英语上学期第三次月考试题扫描版.docx">中小学资料云南省曲靖市届高三英语上学期第三次月考试题扫描版.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/23037370.html" target="_parent" title="终稿基于微信新媒体的移动电商平台建设商业计划书.docx">终稿基于微信新媒体的移动电商平台建设商业计划书.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/23037371.html" target="_parent" title="小企业会计准则转为企业会计准则实务操作.docx">小企业会计准则转为企业会计准则实务操作.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/23037372.html" target="_parent" title="小学二年级教学学科工作总结.docx">小学二年级教学学科工作总结.docx</a></li>
</ul>
</div>
</div>
<div style=" font-size: 16px; background-color:#e5f0f7; margin-top:20px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px; margin-bottom:10px;">
相关搜索</div>
<div class="widget-box pt0" style="border: none; padding:0px 5px;">
<ul class="taglist--inline multi">
<li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=WEB">WEB</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e5%89%8d%e7%ab%af">前端</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e7%bc%96%e7%a0%81">编码</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e8%a7%84%e8%8c%83">规范</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e4%bf%ae%e8%ae%a2">修订</a></li> </ul>
</div>
<br />
<div >
当前位置：<a target="_parent" href="https://m.bdocx.com/">首页</a> >
<a href="https://m.bdocx.com/booklist-00009.html">求职职场</a><span> > </span><a href="https://m.bdocx.com/booklist-0000900006.html">社交礼仪</a>
</div>
<br />
<div class="cssnone">
<iframe title="来源" src="https://m.bdocx.com/BookRead.aspx?id=HlGw%2fIGtdwHSNLWJhFpAJA%3d%3d&parto=dltBgba2phoOCmTUcjiYRYGLKwZ1f2%2bYxeyo0ZBrXLENNIqMZK9L8ZDwnodhqOQhwsdrXElYbwmPRnqroE3h2BmJ7QcBi%2fu5X7kKG75ED%2fRzPvCJz9xM9keWZoVYpX%2fvdTjk3pZdm1aOhVqk2INM7c482FndderMxV04OOt%2fVrrjIkFKh7MVGhCfv8TWzjUZyKXWllT2y3CNeSvm2VFBtjsGDXSxdLbK" frameborder="0" style="width: 0px; height: 0px">
</iframe>
</div>
<span id="LabelScript"></span>
<script src="https://mstatic.bdocx.com/JS/bootstrap-collapse.js"></script>
</form>
<div class="siteInner_bg" style="margin-top: 40px; border: solid 0px red; margin-left: 0px; margin-right: 0px;">
<div class="siteInner">
<p style="text-align: center;">copyright@ 2008-2022 冰豆网网站版权所有</p><p style="text-align: center;">经营许可证编号:<a href="http://beian.miit.gov.cn/" target="_blank">鄂ICP备2022015515号-1</a></p><script>var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?2e77bd3f6fe91b0e21d3f22267249ee3";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();</script><script>(function(){
var el = document.createElement("script");
el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?81476e42bf626128cf29544ee216a8ed7deb9487dce7ed62313212129c4244a219d1c501ebd3301f5e2290626f5b53d078c8250527fa0dfd9783a026ff3cf719";
el.id = "ttzz";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(el, s);
})(window)</script>
</div>
</div>
<div class="trnav clearfix" id="navcontent" style="display: none; background-color:#3a71b1; ">
<div class="trlogoside" id="navlogo" style="display: none;">
<a href="https://m.bdocx.com/" title="冰豆网"><img src="https://www.bdocx.com/images/logo_bd.png" alt="冰豆网"></a>
<div class="trnavclose" id="navclose">
<span></span>
</div>
</div>
<div class="navcontainer">
<div class="row">
<ul class="nav navbar-nav trnavul headercontent" id="navigation" style="margin:20px 0 0px;">
<li><a target="_parent"href="https://m.bdocx.com/login.aspx">登录</a></li>
<li><a target="_parent"href="https://m.bdocx.com/">首页 </a></li>
<li><a target="_parent"href="https://m.bdocx.com/booklist-0.html">资源分类 </a></li>
<li><a target="_parent"href="https://m.bdocx.com/UserManage/Recharge.aspx?f=0"><img src="https://m.bdocx.com/images/s.gif" alt="new" class="hottip1">升级会员 <img src="https://www.bdocx.com/FileUpload/Images/48520fea-bc98-41ae-b183-84689c7075c9.gif" alt="new" class="hottip"></a></li>
<li><a target="_parent"href="https://m.bdocx.com/newslist.html">通知公告 </a></li>
<li><a target="_parent"href="https://m.bdocx.com/h-0.html">帮助中心 </a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
function stopPropagation(e) {
var ev = e || window.event;
if (ev.stopPropagation) {
ev.stopPropagation();
}
else if (window.event) {
window.event.cancelBubble = true;//兼容IE
}
}
$("#navmore").click(function (e) {
$("#navcontent").show();
$("#navlogo").show();
stopPropagation(e);
var navcontentwidth = $("#navcontent").width();
$('#navcontent').css({ 'right': '-' + navcontentwidth + 'px' });
$("#navcontent").show().animate({ "right": 0 }, 300);
});
$(document).bind('click', function () {
var navcontentwidth = $("#navcontent").width();
$("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); });
$("#navlogo").fadeOut(300);
});
$("#navcontent").click(function (e) {
stopPropagation(e);
});
$("#navclose").click(function (e) {
var navcontentwidth = $("#navcontent").width();
$("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); });
$("#navlogo").fadeOut(300);
});
</script>
<script>
function BaseShare(title, desc, imgUrl) {
var link = "https://m.bdocx.com/doc/23907958.html";
if (wx) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx4f717640abfd1120', // 必填，公众号的唯一标识
timestamp: '1729272681', // 必填，生成签名的时间戳
nonceStr: '38913E1D6A7B94CB0F55994F679F5956', // 必填，生成签名的随机串
signature: '904758472f31cca09082b63dfd1bc64adbbec1ff',// 必填，签名，见附录1
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
//openTagList: ["wx-open-launch-weapp"]//H5打开小程序
});
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.hideMenuItems({// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand']
});
var shareData = {
title: title, // 分享标题
desc: desc,//这里请特别注意是要去除html
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
};
wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
});
}
}
function BaseShare(title, desc, imgUrl, link) {
if (link=="")
link = "https://m.bdocx.com/doc/23907958.html";
if (wx) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx4f717640abfd1120', // 必填，公众号的唯一标识
timestamp: '1729272681', // 必填，生成签名的时间戳
nonceStr: '38913E1D6A7B94CB0F55994F679F5956', // 必填，生成签名的随机串
signature: '904758472f31cca09082b63dfd1bc64adbbec1ff',// 必填，签名，见附录1
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
//openTagList: ["wx-open-launch-weapp"]//H5打开小程序
});
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.hideMenuItems({// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand']
});
var shareData = {
title: title, // 分享标题
desc: desc,//这里请特别注意是要去除html
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
};
wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
});
}
}
</script>
<script>
$(document).ready(function () {
var arr = $(".headercontent");
for (var i = 0; i < arr.length; i++) {
(function (index) {
var url = "https://m.bdocx.com/header.aspx";
$.get(url + "?t=" + (new Date()).valueOf(), function (d) {
try {
arr.eq(index).empty().html(d);
} catch (e) { }
try {
arr.html(d);
} catch (e) { }
});
})(i);
}
});
</script>
<script src="https://mstatic.bdocx.com/js/jquery.lazyload.js"></script>
<script charset="utf-8">
$("img.lazys").lazyload({
threshold: 200,
effect: "fadeIn"
});
</script>
</body>
</html>