WEB前端編碼規(guī)范
上傳人：文***
文檔編號：25508059
上傳時間：2021-07-26
格式：DOCX
頁數(shù)：47
大小：657.68KB
收藏
版權(quán)申訴
舉報
下載
第1頁 / 共47頁
第2頁 / 共47頁
第3頁 / 共47頁
資源描述：
和<TITLE>是不同的標簽。
具體規(guī)范如下：
1. 文件定義
<!DOCTYPE html PUBLIC -"http://W3C//DTD XHTML 1.0 Strict//EN" ""> <html xmlns="">
<head>
<meta http -equiv="Content -Type" content="text/html; charset=utf -8" />
</p>
<p >4、
2. 網(wǎng)站 head 區(qū)代碼規(guī)范：
head 區(qū)是指 <head>和</head> 之間的內(nèi)容。必須加入的標簽：
2.1 公司版權(quán)注釋
<!---
文件： XXX.html
說明：說明本 HTML 是用于什么功能
作者：李四
時間： 2016/1/30
--->
2.2 網(wǎng)頁顯示字符集
簡體中文 ： <meta http-equiv="Content-Type" content="text/html;
charset= utf-8 ">
繁體中文： <me</p>
<p >5、ta http-equiv="Content-Type" content="text/html;
charset= BIG5">
英 語： <meta http-equiv="Content-Type" content="text/html; charset= iso-8859-1 ">
2.3 作者與版權(quán)信息
此處用于存儲開發(fā)公司版權(quán)信息，如：
<meta name="author" content="">
<meta name="copyright" content=", 版權(quán)所有 "/>
2.4 網(wǎng)頁的 c</p>
<p >6、ss,javascript 規(guī)范
在引用 CSS和 JS文件時，統(tǒng)一放置在 <head></head> 中，先放 CSS引用，再放 js 引用。
<link href="style/style.css" rel="stylesheet" type="text/css" />
html 中 javascript 的書寫：
<script language="javascript" type="text/javascript"></script>
2.5 網(wǎng)頁標題
Title 中使用“ - ”分割，如：設(shè)備管理平臺 - 運維系統(tǒng)</p>
<p >7、。
2.6 設(shè)置搜索關(guān)鍵詞
<meta name="keywords" content=" " />
百度關(guān)鍵詞搜索指數(shù)： ，在這個工具里， 可以看到一些常用關(guān)鍵詞的每日搜
索次數(shù)。
熱門詞匯，目前收索量最多的詞匯。可以查看百度熱詞榜，
Google AdWords 關(guān)鍵字工具：查詢特定關(guān)鍵詞的常見查詢及擴展匹配。
KEYWRODS關(guān)鍵字最多不超過 5 個建議長度：小于等于 100 個漢字，如果使用的網(wǎng)頁編碼是 UTF-8，不同關(guān)鍵字之間用英文“ , ”分隔。
2.7 網(wǎng)站簡介
</p>
<p >8、
<meta name="description" content=" " />
description 是描述網(wǎng)頁內(nèi)容的， 因此最好是可以用一句話來概括本網(wǎng)頁的
主題內(nèi)容。
description 不要超過 255 個字符，搜索引擎索引一般都會索引 Description 的前 255 個字符，因此，這 255 個字符是做搜索引擎優(yōu)化的關(guān)鍵。
如果使用的網(wǎng)頁編碼是 UTF-8，那么在 Description 中的標點符號最好都使
用英文，例如英文的逗號、句號等。如果是中文的話，那么就使用中文的標點符
號即可。
2.</p>
<p >9、8 其它標簽 [ 非必需 ]
1. 設(shè)定網(wǎng)頁的到期時間。 一旦網(wǎng)頁過期， 必須到服務(wù)器上重新調(diào)閱， 這樣有利于頁面信息。
<meta http -equiv="expires" content="wed, 26 feb 2009 08:21:57 gmt">
2. 禁止瀏覽器從本地機的緩存中調(diào)閱頁面內(nèi)容。
<meta http -equiv="pragma" content="no -cache">
3. 用來防止別人在框架里調(diào)用你的頁面。
<meta http -equiv="window -target" content="_to</p>
<p >10、p">
4. 自動跳轉(zhuǎn)。
<meta http -equiv="refresh" content="5;url="> 5 指時間停留 5 秒。
5. 網(wǎng)頁搜索機器人向?qū)?. 用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。
<meta name="robots" content="none">
CONTENT的參數(shù)有 all,none,index,noindex,follow,nofollow 。默認是 all 。
6. 收藏夾圖標
<link rel="shortcut icon" href="/favicon.i</p>
<p >11、co" type="image/x -icon"/> 圖片大小 16px*16px
7. 訂閱 RSS瀏覽
是一種描述和同步網(wǎng)站內(nèi)容的格式。用戶可以通過 RSS閱讀器訂閱。
<link href= ”abc.aspx” title= ”新現(xiàn)代教育網(wǎng)” type=”application/rss+xml ” rel= ”alternte ” />
2.9 完整示例
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>12、
3. html 中元素的書寫：
<body>區(qū)域標簽
3.1 段落
段落使用 <p> 標簽進行定義。
<p>This is a paragraph</p>
3.2 標題
即正文標題一般用 <h1></h1>標簽，最好和 title 標簽的內(nèi)容有關(guān)聯(lián)。
標題使用 <h1> 至 <h6> 標簽進行定義。 <h1> 定義最大的標題。 <h6> 定義
最小的標題。
<h1>This </p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>13、is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
文章中的小標題一定也要加粗。
可以把網(wǎng)頁中的重要內(nèi)容做成這樣。 用戶不用登陸這個網(wǎng)頁就可看到更新的內(nèi)容。
3.3 字體的設(shè)置標簽
換行： <br/>
字體修飾不要使用 <font><strong</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>14、> 等進行標注，一般使用 css 樣式進行字體
樣式排版
3.4 注意事項
1.<body> 為了保證瀏覽器的兼容性 ，必須設(shè)置頁面背景：
<body bgcolor="#FFFFFF">
2. 關(guān) 所有的
打開的 必 關(guān) ，例如 <p></p>，當然 有一種關(guān) 方式，如： <br/> 。
即：一定要有 束 。
3. 屬性 用雙引號 “” 括起來 , 屬性 一使用小寫
例如： <img height="60" width="760" src="images/lo</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>15、go.gif"/>
4. 所有的屬性
不正確的寫法： <input ?? checked />
正確的寫法 ： <input ?? checked= "checked"/>
5. 要合理嵌套
不正確的寫法： <div><h1> </div></h1>
正確的寫法 ： <div><h1></h1></div>
7. 特殊字符用
如 " <" 用 "<" 表示， " >" 用 ">" 表示。
8. 網(wǎng) 中 片 化
一定要加 alt 屬性，al</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>16、t 屬性指定了當 片不能 示的 候就 示供替 文本。 內(nèi)容最好與關(guān) 相關(guān)。
如： <img src="images/logo.gif" alt=" 網(wǎng)站 LOGO"/>
一些小 最好用 .png 或 .gif 格式 片，比如 箭 ，文章列表前的 等，在 CSS中做成背景。 些小 最好做一 片，用 CSS來定位。
9. 用 構(gòu)化的元素 出內(nèi)容
<ul>
<li>新現(xiàn)代 </li>
<li>新現(xiàn)代 </li>
<li>新現(xiàn)代 </li>
</ul>
或者使用
<dl>
<dt><</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>17、/dt>
<dd></dd>
</dl>
10． 標簽要有縮進，便于代碼閱讀修改 。
11、 tr 、td 必須定義在 table 之間；
<table>
<tbody>
<tr>
<td> ?? </td>
? .
</tr>
</tbody>
</table>
注： tbody 絕對不可以省略 。
12、 button 按鈕必須定義在 form 之間，否則 netscape 不支持；
<form action= ”??” method= ” post ”</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>18、>
<input type= ” button ” name= ” but ” value= ” back ”> </form>
13、 html 注釋
(1) 每一獨立部分都要表明注釋。例如：
<! —右邊 begin--> <!-- 右邊 end-->
<! —左邊 begin--> <! —左邊 end-->
塊代碼的注釋
<! —頭部 begin-->
大量代碼塊，使用此種樣式，方便閱讀
<! —頭部 end-->
(2) 注釋要用描述性語言，能夠清楚的表達每一部分的意思。
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>19、
4. HTML 元素的排序規(guī)則
能夠使用的 HTML元素包括： div 、p、ul 、table 、span、input 、select 等?；旧?div 、table 、ul 、p 都屬于結(jié)構(gòu)性比較強的元素，而 span、input 則是比較弱的元素，因此不允許有 span 嵌套 div 、 table 等等的情況出現(xiàn)， span 可以嵌套 input, 可以嵌套 span。
在寫頁面的時候可以先不考慮界面呈現(xiàn)， 按照這樣的規(guī)則， 把數(shù)據(jù)直接綁定到 HTML元素的節(jié)點上。
5. 九大原則
原則一：
一般要寫兼容多種瀏覽器的</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>20、網(wǎng)頁， 最省事的方法就先寫適合 chrome 的樣式，并在 chrome 進行調(diào)度。測試時可以使用多種瀏覽器。
原則二：
逐步疊加的方式，如果需要用這個樣式的模塊很多， 并且會存在些許的不同，千萬不要把樣式一步寫到位， 最好把框架性的先寫好， 細節(jié)性的留到第二個步驟，甚至第三個步驟，當然最好步驟不要超過三步，這樣很不利于維護。
由若干個二級定義對一級定義進行補充， 這樣的既可以減少代碼， 又可以減少繁多的 CLASS命名。
不要輕易修改共用的 CSS，否則可能會影響其它頁面。
在每個一級 CSS前添加注釋，說明哪些頁面使用了該 CSS。
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>21、
原則三：
從總到分。順序應(yīng)該是這樣：總體需要用到的 >>結(jié)構(gòu) >>模塊 >>二級模塊 >> 細節(jié)；并且這個文檔最不容易修改的處于最上端， 頻繁用于修改的在末端。 最忌諱即興發(fā)揮， 這樣寫出的東西經(jīng)不起推敲， 稍有變化就要忙得亂成一團。 結(jié)構(gòu)性的東西應(yīng)該慎重精細。
原則四：
盡量把能夠放在一組的小圖標或者圖片放在一個圖片文件里， 這樣的好處有很多。
1、 圖片文件的總量會變??；
2、利于下載，太多的小圖片下載效果是不理想的，常常會發(fā)現(xiàn)這個圖片出
來，那個沒出來， 這樣在寫樣式的時候只需要寫一個總體的， 對于具體的要顯</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>22、示
的只需要標一個位置，非常省時間，樣式也很精煉；
3、 顯而易見，這樣做非常便于管理，替換或新增的時候工作量很小。
原則五：
切圖的原則， 應(yīng)該切大的圖絕不切小， 應(yīng)該切小的絕不切大， 能夠用顏色代替的絕不切圖。 把一個大圖切成很多份并不一定能夠加快頁面的顯示速度， 相反會浪費很多不必要的帶寬。 不光要控制圖片文件的多少， 還要考慮到這樣切會不會造成頁面增加許多額外的代碼。
原則六：
圖片使用能名稱表達圖片意義的名詞命名，盡量不要使用編號命名。
原則七：
涉及多行多列的特別是列寬有不固定的，堅決用表格，千萬不要為</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>23、了 DIV
而 DIV。
多個圖片規(guī)則排列時，可以使用 <dl><dt></dt><dd></dd></dl> 。
原則八：
盡可能不把樣式直接寫到元素的標簽里（ 除非這個樣式出現(xiàn)的幾率特別小，有相當程度的偶然性 ）。
原則九：
盡量不要用 ID 來定義或索引樣式， ID 的唯一性比較高，且用 ID 索引樣式
效率非常低而且兼容性的問題也比較明顯。
6．文件命名原則
6.1 前臺文件組織
在前臺頁面文件中，每個大類功能</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>24、模塊（子系統(tǒng)）單獨創(chuàng)建一個文件夾，使
用與之相關(guān)的有意義的英文名詞命名。 例如有一個系統(tǒng)包括后臺管理 （admin）、
前臺商城（ shop）、會員中心（ member）和商家中心（ store ）等子系統(tǒng)，文件
夾組織：
每個子系統(tǒng)中應(yīng)該包含一個缺省的 html 文件，文件名統(tǒng)一用 index.html ，即當用戶缺省訪問該目錄時，自動加載該頁面。
公用頁面（如登錄 login.html 、頁頭 header.html 、頁腳 footer.html 、導
航 navigation.</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>25、html 、菜單 menu.html 、信息 / 錯誤提示 message.html 等），可以統(tǒng)一放在 common目錄中。
6.2 頁面命名規(guī)則
具有管理功能的頁面，如用名、角色、設(shè)備、日志、文章等的管理，可以歸
納為列表（ list.htm ）、新建（ add.html ）、編輯（ edit.html ）等幾類操作，
所以在頁面組織時， 每類模塊單獨創(chuàng)建一個文件夾， 使用能夠表達模塊意義的英
文名詞命名，并在其中分別創(chuàng)建 list.html 、add.html 、 edit.html 等文件，對
應(yīng)于內(nèi)容列表、添加、編輯等操作。</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>26、示例：
其它說明：
1. 在列表頁面里統(tǒng)一使用“四欄式”顯示風格，即列表頁面里必須包括模塊目錄 / 位置提示、工具欄（含添加、編輯、刪除、刷新、查詢等操作控件）、表格、分頁操作等部分。示例：
2. 表格用于顯示查詢內(nèi)容，在 list.html 打開時，必須默認加載一定的記錄；表格欄目僅</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>27、顯示用戶常用或關(guān)心的字段； 在顯示時必須對表格內(nèi)容進行必要的格式處理；對記錄常用的操作可以放置于操作欄內(nèi) （如上圖中的操作欄內(nèi)放置有編輯和刪除兩個操作按鈕）。
3. 表格可以統(tǒng)一使用 easyui datagrid 或 bootstap data tables 。
6.3. 資源文件的命名原則
資源文件包括 css 、js 、圖片等內(nèi)容。所有資源文件統(tǒng)一存儲在 web 根目錄
resource 文件夾中。示例：
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>28、
每個子系統(tǒng)（大類）文件夾命名規(guī)則同 6.1 規(guī)則。
每個子系統(tǒng)文件夾中分別包括 css 、 js 和 images，示例：
多個子系統(tǒng)公共使用的資源，統(tǒng)一存儲在 common文件夾中，如常用的 js 操作，可以命名為 generic.js ，放置在 common/js/generic.js 。
6.3 圖片命名規(guī)則
圖片分成兩部分， 一是網(wǎng)頁設(shè)計時使用的靜態(tài)資源， 通常不會因系統(tǒng)的運行而發(fā)生變化，另一類是程序生成、用戶上傳、終端上傳的圖片。
（</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>29、1）靜態(tài)圖片存儲在 大類目錄 \images 中，使用能表達圖片意
義的英文單詞命名， 不能使用圖片編號命名。 網(wǎng)面使用的小圖標， 可以放置在一個圖片文件中，使用 css 裁切和背景方式顯示在頁面中。
（2）動態(tài)圖片存儲在 resources\upload 目錄中，在其中創(chuàng)建分類圖片目錄。
例如，與系統(tǒng)相關(guān)的圖片存儲在 system 目錄中，設(shè)備監(jiān)控相關(guān)圖片存儲在
management 中等。為了避免同一文件夾中文件數(shù)量限制，在分類目錄中，按上
傳日期分成不同的次級目錄， 命名規(guī)則為上傳文件所在的 yyyyMM（年度月份），其中月份使用</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>30、兩位數(shù)字表示。例如：
上傳的圖片統(tǒng)一使用 GUID標識進行命名， 即在上傳時，由接收的 java 程序自動生成 guid 編號 +. 圖片擴展名進行命名。
注意：保存圖片時，文件擴展名必須保持不變。示例：
7. 常用 HTML標識符
HTML 標記一覽 :
標記
類型
譯名或意義
作 用
備注
文件標記
<HTML>
●
文件聲明
讓瀏覽器知道這是 HTML 文件
<HEAD>
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>31、●
開頭
提供文件整體資訊
<TITLE>
●
標題
定義文件標題，將顯示于瀏覽頂端
<BODY>
●
本文
設(shè)計文件格式及內(nèi)文所在
排版標記
<!-- 注解 -->
○
說明標記
為文件加上說明，但不被顯示
<P>
○
段落標記
為字、畫、表格等之間留一空白行
<BR>
○
換行標記
令字、畫、表格等顯示于下一行
<HR>
○
水平線
插入一條水平線
<CENTER>
●
居中
令字、畫、表格等顯示于中間
反對
<PRE>
●
預設(shè)格式
令文件按照原始碼的排列方式顯示
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>32、<DIV>
●
區(qū)隔標記
設(shè)定字、畫、表格等的擺放位置
<NOBR>
●
不折行
令文字不因太長而繞行
<WBR>
●
建議折行
預設(shè)折行部位
字體標記
<STRONG>
●
加重語氣
產(chǎn)生字體加粗 BOLD 的效果
<B>
●
粗體標記
產(chǎn)生字體加粗的效果
<EM>
●
強調(diào)標記
字體出現(xiàn)斜體效果
<I>
●
斜體標記
字體出現(xiàn)斜體效果
<TT>
●
打字字體
COURIER字體，字母寬度相同
<U>
●
加上底線
加上底線
反對
<H1>
●
一級標題標記
變</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>33、粗變大加寬，程度與級數(shù)反比
<H2>
●
二級標題標記
將字體變粗變大加寬
<H3>
●
三級標題標記
將字體變粗變大加寬
<H4>
●
四級標題標記
將字體變粗變大加寬
<H5>
●
五級標題標記
將字體變粗變大加寬
<H6>
●
六級標題標記
將字體變粗變大加寬
<FONT>
●
字形標記
設(shè)定字形、大小、顏色
反對
<base href="http://m.appdesigncorp.com/"/> ○
基準字形標記
設(shè)定所有字形、大小、顏色
反對
<BIG>
●
字體加大
令字體稍為加大
<SMALL>
●
字體縮細
令字體</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>34、稍為縮細
<STRIKE>
●
畫線刪除
為字體加一刪除線
反對
<CODE>
●
程式碼
字體稍為加寬如 <TT>
<KBD>
●
鍵盤字
字體稍為加寬，單一空白
<SAMP>
●
范例
字體稍為加寬如 <TT>
<VAR>
●
變數(shù)
斜體效果
<CITE>
●
傳記引述
斜體效果
<BLOCKQUOTE>●
引述文字區(qū)塊
縮排字體
<DFN>
●
述語定義
斜體效果
<ADDRESS>
●
地址標記
斜體效果
<SUB>
●
下標字
下標字
<SUP>
●
上標字
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>35、
指數(shù)（平方、立方等）
清單標記
<OL>
●
順序清單
清單項目將以數(shù)字、字母順序排列
<UL>
●
無序清單
清單項目將以圓點排列
<LI>
○
清單項目
每一標記標示一項清單項目
<MENU>
●
選單清單
清單項目將以圓點排列，如 <UL>
反對
<DIR>
●
目錄清單
清單項目將以圓點排列，如 <UL>
反對
<DL>
●
定義清單
清單分兩層出現(xiàn)
<DT>
○
定義條目
標示該項定義的標題
<DD>
○
定義內(nèi)容
標示定義內(nèi)容
表格標記
<TA</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>36、BLE>
●
表格標記
設(shè)定該表格的各項參數(shù)
<CAPTION>
●
表格標題
做成一打通列以填入表格標題
<TR>
●
表格列
設(shè)定該表格的列
<TD>
●
表格欄
設(shè)定該表格的欄
<TH>
●
表格標頭
相等于 <TD>，但其內(nèi)之字體會變粗
表單標記
<FORM>
●
表單標記
決定單一表單的運作模式
<TEXTAREA> ●
文字區(qū)塊
提供文字方盒以輸入較大量文字
<INPUT>
○
輸入標記
決定輸入形式
<SELECT>
●
選擇標記
建立 POP-UP 卷動清單
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>37、
<OPTION>
○
選項
每一標記標示一個選項
圖形標記
<IMG>
○
圖形標記
用以插入圖形及設(shè)定圖形屬性
連結(jié)標記
<A>
●
連結(jié)標記
加入連結(jié)
<BASE>
○
基準標記
可將相對 URL 轉(zhuǎn)絕對及指定連結(jié)目標
框架標記
<FRAMESET> ●
框架設(shè)定
設(shè)定框架
<FRAME>
○
框窗設(shè)定
設(shè)定框窗
<IFRAME>
○
頁內(nèi)框架
于網(wǎng)頁中間插入框架
IE
<NOFRAMES> ●
不支援框架
設(shè)定當瀏覽器不支援</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>38、框架時的提示
影像地圖
<MAP>
●
影像地圖名稱 設(shè)定影像地圖名稱
<AREA>
○
連結(jié)區(qū)域
設(shè)定各連結(jié)區(qū)域
多媒體
<BGSOUND>
○
背景聲音
于背景播放聲音或音樂
IE
<EMBED>
○
多媒體
加入聲音、音樂或影像
其他標記
<MARQUEE>
●
走動文字
令文字左右走動
IE
<BLINK>
●
閃爍文字
閃爍文字
NC
<ISINDEX>
○
頁內(nèi)尋找器
可輸入關(guān)鍵字尋找于該一頁
反對
<META>
○
開頭定義
讓瀏覽器知道這</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>39、是 HTML 文件
<LINK>
○
關(guān)系定義
定義該文件與其他 URL 的關(guān)系
STYLESHEET
<STYLE>
●
樣式表
控制網(wǎng)頁版面
<SPAN>
●
自訂標記
獨立使用或與樣式表同用
注：
? ● 表示該標記屬圍堵標記，即需要關(guān)閉標記如 </ 標記 >。
? ○ 表示該標記屬空標記，即不需要關(guān)閉標記。
? IE 表示該標記只適用于 INTERNET EXPLORER。
? NC 表示該標記只適用于 NETSCAPE COMMUNICATOR。
? 反對 表示該標記不為 </p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>40、W3C 所贊同，通常這標記是 IE 或 NC 自訂，且己為眾所支 持，只是 HTML 標準中有其它同功能或更好的選擇。
棄用 表示該標記己為 W3C 所棄用，是過時的標記，但 HTML 具向下兼容的特 性，
不用擔心新瀏覽器不支援舊標記。
第二部分 CSS編碼規(guī)范
1. 基本書寫規(guī)范
1.1 所有的 CSS的盡量采用外部調(diào)用
<LINK href="/style/style.css" rel="stylesheet" type="text/css">
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>41、
書寫時重定義的最先，偽類其次，自定義最后（其中
a:hover a:actived 要按照順序?qū)懀┍阌谧约汉退碎喿x。
a:link a:visited
為了保證不同瀏覽器上字號保持一致，字號建議用點數(shù)
pt
和像素
px
來定
義，pt 一般使用中文宋體的 9pt 和 11pt ，px 一般使用中文宋體 12px 和 14.7px
這是經(jīng)過優(yōu)化的字號，黑體字或者宋體字加粗時，一般選用
11px 和 14.7px
的
字號比較合適。
字</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>42、體選擇： 優(yōu)先使用微軟雅黑，其次為宋體，可以統(tǒng)一在自定義樣式中，不需要重復定義字體。如：
body 中定義 ，而
1.2 CSS 推薦模板
body
{
font-size
: 9pt
; font-family
: Arial, Helvetica, sans-serif
; color
: #333333
; text
-align
: center
;
margin
: 0px ;}
ul {</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>43、 margin
: auto
; }
img
{
border
: 0px
;
}
a { font-size
: 9pt ; text-decoration
: none
; color
: #FFFFFF
;
}
a:hover
{
font-size
: 9pt ; text-decoration
: underline
; color
: #990000
; }
a.1 { font-size
: </p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>44、9pt
; color
: #3366cc
; text-decoration
: none }
a.1:hover
{
font-size
: 9pt
;
color
: #FF9900
;
text-decoration
: none
}
.colorblue,colorblue:hover
{ color
: #003366
;} .blue
{
font-family
: " 宋體 " ;
font-si
ze : 9pt ; line-height
: 20px
;
color
: #0099FF
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>45、;
letter-spacing
: 5em }
.colorRed,a.colorRed:hover
{ color
: #FF0000
; } .colorLime,a.colorLime:hover
{ co
lor : #00FF00
; } .colorGreen,a.colorGreen:hover
{ color
: #008000
; } .colorBlue,a.c
olorBlue:hover
{ </p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>46、 color
: #0000FF
; } .colorOrange,a.colorOrange:hover
{ color
: #FF
A500 ; }
為了保證瀏覽器的兼容性，必須設(shè)置頁面背景
<body bgcolor="#FFFFFF">
1.3 CSS 注釋寫法
在定義的 CSS文件頂部添加文件說明、作者、時間等說明，如例：
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>47、
一級 CSS上面必須加上注釋，說明樣式的用處。必要時可以添加作者、創(chuàng)建時間、修改人、修改時間。示例：
2.CSS命名參考
CSS文件名統(tǒng)一使用小寫英文單詞命名。
樣式定義變量統(tǒng)一使用 class 命名方式，不建議使用 id 命名方式 。如下圖中，使用“ . ”定義的樣式為 class 命名方式，使用“ #”引導的樣式為 id 命名方式。 Id 命名方式僅針對于 html 中使用 id 定義的元素，通常復用性較差。
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>48、
2.1 常用的 CSS命名規(guī)則：
頭： header
內(nèi)容： content/container
尾： footer
導航： nav
側(cè)欄： sidebar
容 器： container/box
主 導 航： mainNav
子 導 航： subNav
頂 導 航： topNav
網(wǎng)站標志： logo
大 廣 告： banner
頁面中部： mainBody
菜 單： menu
菜單內(nèi)容： menuContent
子 菜 單： subMenu
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>49、
子菜單內(nèi)容： subMenuContent
搜 索： search
搜索關(guān)鍵字： keyword
搜索范圍： range
標簽文字： tagTitle
標簽內(nèi)容： tagContent
當前標簽： tagCurrent/currentTag
標 題： title
列 表： list
當前位置： currentPath
圖 標： icon
注 釋： note
登 錄： login
注 冊： register
欄目： column
列 定 義： column_1of3 ( 三列中的第一列 </p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>50、)
column_2of3 ( 三列中的第二列 )
column_3of3 ( 三列中的第三列 )
2.2 直觀命名
當在設(shè)計 Web頁面以及需要對一個 div 進行標識的時候，最自然的想法就是使用可以描述元素所在頁面位置的詞匯來對其命名。如：
自上而下分組： top-panel
橫向?qū)Ш剑?horizontal-nav
左面邊欄： left-side
中心 - 欄目： center-column
右面： right-col
2.3 CSS 復用
不需要重復定義可繼承的值，子元素自</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>51、動繼承父元素的屬性值，象顏色、
字體等，已經(jīng)在父元素中定義過的， 在子元素中可以直接繼承， 不需要重復定義，除非是為了更變當前元素樣式不使用父元素的屬性值， 但是要注意， 瀏覽器可能用一些默認值覆蓋你的定義。
2.4. 多重 CSS樣式定義
CSS屬性追加重復最后優(yōu)先原則， 即一個標簽可以同時定義多個 class ，也可以是同一個 class 中重復定義屬性。例如：
先定義兩個樣式
.one{width:200px;background:url() no-repeat left top;}
.two{border:</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>52、10px solid #000; background:url() no-repeat left top;}
在頁面代碼中，我們可以這樣調(diào)用 :
<div id="pb7v7xr" class=one two></div>
當應(yīng)用兩個或多個樣式時，瀏覽器所應(yīng)用的樣式根據(jù)是屬性追加重復最后優(yōu)先原則。即兩個或多個或重復的樣式名定義， 瀏覽器所應(yīng)用的樣式是按先后順序的，如果定義了重復的屬性值， 以最后定義的為準， 如果應(yīng)用了兩個或多個樣式名，里面不重復定義的屬性值就追加上去， 重復的屬性值就以最后一個為準。這里要注意的是， 樣式的先后不是根據(jù)頁面上應(yīng)用的名字順序， 而是樣式表里的樣式順序。
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>53、
2.5.CSS 作用域
CSS的作用域是通過書寫方式來實現(xiàn)的更準確的說法應(yīng)該叫做選擇器如
果你深入了解后， 同樣能達到編程思想中的 “命名空間” 、“全局”、“私有”、“繼承”等“編程特性”更能體現(xiàn)他特點的也就是他名字中的“層疊樣式”。
如下面的 p 的作用域：
/* 作用域：全局 */ p{text-indent:2em;}
/* 作用域： .demo 這個類中 */
.demo p{color:#000000;}
3. CSS 樣式書寫順序
3.1 顯示</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>54、屬性
* display * list -style * position * float * clear
3.2 自身屬性
* width * height * margin * padding * border * background
3.3 文本屬性
* color * font * text-decoration * text-align
* vertical-align * white-space * other text * content
4. 其它規(guī)范
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>55、
4.1 圖片樣式
禁止用 <img width=? height=?>
代碼中的 <img> 標簽中不要帶上 width
圖片往往需要反復的修改。
來人為干預圖片顯示的尺寸，即在 HTML
和 height 兩個屬性，因為制作過程中，
但是使用 CSS控制圖片大小時， 當網(wǎng)頁還未加載圖片時， 不會留出圖片的占位大小，可能會造成網(wǎng)頁在加載過程中抖動 （如果圖片是插在一個固定大小的表格里的，不會有這個現(xiàn)象），尤其是當圖片的尺寸較大時，這種現(xiàn)象會很明顯。
所以當預料到這種會明顯導致網(wǎng)頁抖動的情況會發(fā)生時，務(wù)必給 <im</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>56、g> 附上
width 和 height 屬性。
4.2 換行
為了最大程度的發(fā)揮瀏覽器自動排版的功能， 在一段完整的文字中請盡量不要使用 <br> 來人工干預分段。
4.3 字體
所有的字號都應(yīng)該用樣式表來實現(xiàn)，禁止在頁面中出現(xiàn) <font size=?> 標
記。
請不要在網(wǎng)頁中連續(xù)出現(xiàn)多于一個的也盡量少使用全角空格 （英文字符集下，
全角空格會變成亂碼），空白應(yīng)該盡量使用 text-indent, padding, margin, hspace, vspace 以及透明的 gif 圖片來實現(xiàn)。</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>57、
中英文混排時，我們盡可能的將英文和數(shù)字定義為 verdana 和 arial 兩種字體。
行 距 建 議 用 百 分 比 來 定 義 ， 常 用 的 兩 個 行 距 的 值 是 line-height:120%/150%.
第三部分 JavaScript 規(guī)范
1. 命名規(guī)范
1.1 基本原則
規(guī)范的命名能使程序更易閱讀， 從而更易于理解。 它們也可以提供一些標識功能方面的信息，有助于更好的理解代碼和應(yīng)用。
? 使用可以準確說明變量 / 函數(shù) / 原型 (pro</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>58、totype) 的完整英文描述符。
例如， firstName ，listAllUsers 或 CorporateCustomer 等，避免
使用漢語拼音、不相關(guān)單詞及漢字進行命名。
? 采用大小寫混合，提高名字的可讀性。一般應(yīng)該采用小寫字母，但是原型 (prototype) 命名時任意單詞的首字母大寫。
? 盡量少用縮寫 ，但如果一定要使用，當使用公共縮寫和習慣縮寫等，
如實現(xiàn)（ implement ）可縮寫成 impl ，經(jīng)理（ manager）可縮寫成 mgr
等，嚴禁濫用縮寫。
? 避免使用長名字（最好不超過 25 個字母）。
</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>59、
? 避免使用相似或者僅在大小寫上有區(qū)別的名字。
? 避免使用數(shù)字，但可用 2 代替 to ，用 4 代替 for 等，如：go2Jsp。此外，若元素 id 包含數(shù)字則除外
1.2 Prototype/Method 命名規(guī)范
1.2.1 原型 Prototype
所有單詞首字母大寫。使用能確切反應(yīng)該原型含義、功能等的詞。一般采用名詞。
1.2.2 方法 Method/ 函數(shù) Function
方法的命名應(yīng)采用完整的、能夠清楚表達該方法功能的英文描述符，首字母小寫，其他單詞的首字母大寫。 方法名稱的第一個單詞常常</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>60、采用一個有強烈動
作色彩的 。
取 使用 get 前 ， 使用 set 前 ，判斷 使用 is(has) 前 。如
下例所示：
getName()
setSarry()
isLogon()
方法參數(shù)建 序： ( 被操作者，操作內(nèi)容，操作 志，其他?? ) 。如下
例所示：
function replace (sourceStr, // 源字串
oldStr, // 被替換字串
newStr){ // 替換為字串
}
1.3 字段命名規(guī)范
1.</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>61、3.1 常量
采用完整的英文大寫 ， 在 與 之 用下劃 接， 如：DEFAULT_VALUE
1.3.2 量
除第一個 外其余 首字母大寫。
私有 例 量可使用 _前 ，但在其存取方法中 將其前 去掉。
1.3.3 集合
一個集合，例如數(shù) 或 xml 點集合， 采用復數(shù)命名來表示 量中存放的是一 象。 命名 采用完整的英文描述符， 名字中所有非首 的第一個字母 大寫，適當使用集合 寫前 。如下例所示：
集合 量命名示例
var rowNodes = xmlDom.sel</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>62、ectNodes(
“/*/data/row
”);
var aryUsers = []; //
用戶列表
1.3.4 特殊值
我們在程序里經(jīng)常會用到一些量，它是有特定的含義的。例如，現(xiàn)在我們
寫一個薪金統(tǒng)計程序， 公司員工有 50 人，我們在程序里就會用 50 這個數(shù)去進行各種各樣的運算。在這里， 50 就是“特殊值”。當別的程序員在程序里看到 50 這個數(shù)，將很難知道它的含義，造成理解上的困難。
在程序里出現(xiàn)“特殊值”會降低程序的可讀性、可維護性和可擴展性，故
規(guī)定不得出現(xiàn)此類“特殊值</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>63、” 。避免的方法是把“特殊值”定義為一個常量 。注意這個常量的命名應(yīng)該能表達該數(shù)的意義， 并且應(yīng)該全部大寫， 且單詞之間使用下劃線。例如上面 50 這個數(shù)，我們可以定義一個名為 NUM_OF_EMPLOYEES的常量。這樣，別的程序員在讀程序的時候就可以很容易的理解了。
1.4 異常
必要時，在 javascript 代碼段中加入異常捕獲代碼。 通常情況下不需要自
定義異常原型，僅使用內(nèi)建 error 對象。
異 常 原 型 由 表 示 該 異 常 類 型 的 單 詞 和 Exception 組 成 ， 如
ResponseExceptio</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>64、n 。
異常實例一般使用 e、ex 等，在多個異常時使用該異常名或簡寫加 E，Ex
等組成，例如： SQLEx、ActionEx 。
1.5 文件命名規(guī)范
外部 js 文件一律小寫命名。
1.6 命名約定表
操作項
命名約定
示例
參數(shù)
使用傳遞值 /對象的完整的英文描述符。
userID
字段 /屬性
字段采用完整的英文描述，第一個字母
firstName
小寫，任何中間單詞的首字母大寫。
布爾型的獲取成
所有的布爾型獲取函數(shù)必須用單詞
is isSt</p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>65、ring()
員函數(shù)
（ has）做前綴。
hasMoney()
采用完整的英文描述符，所有單詞的第
原型
一個字母大寫。
由表示該異常類型等的單詞和 Exception
異常原型名
組成
通常采用字母 e 、ex表示異常。
異常實例名 多個異常時使用異常名或其簡寫加 E、 Ex 等構(gòu)成
靜 態(tài) 常 量 字 段 全部采用大寫字母，單詞之間用下劃線
（常量） 分隔。采用靜態(tài)常量獲取成員函數(shù)。
采用完整的英文描述符，第一個字母小
寫，但不要隱藏已有字段。例如，如果
局部變量
有一個字段叫 firstName </p>
<p style='height:0px;padding:0;margin:0;overflow:hidden'>66、，不要讓一個局部變量叫 firstName 。
通常采用字母 i ， j ， k 或者 counter，
循環(huán)計數(shù)器
index
采用完整的英文描述說明成員函數(shù)功
能，第一個單詞盡可能采用一個生動的
成員函數(shù)
動詞，除第一個單詞外，每個單詞第一
個字母小寫。
獲取成員函數(shù) 被訪問字段名的前面加上前綴 get。
設(shè)置成員函數(shù) 被訪問字段名的前面加上前綴 set。
Customer
SQLException
ActionException
e
SQLEx
DEFAULT_NAME
,totalMoney
i,j,k,count,index
openFile()
addUser()
getUserName()
setUserName ()
2. 代碼組織與風格
代碼組織和風格的基本原則是：利于個人開發(fā)</p>
</div>
<div id="fv5h5dj" class="readmore" onclick="showmore()" style="background-color: transparent; height: auto; margin: 0px 0px; padding: 20px 0px 0px 0px;"><span id="nhbdljp" class="btn-readmore" style="background-color: transparent;"><em style="font-style: normal">展開</em>閱讀全文<i></i></span></div>
<script type="text/javascript">
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 type="text/javascript">
var defaultShowPage = parseInt("3");
var id = "25508059";
var total_page = "47";
var mfull = false;
var mshow = false;
function DownLoad() {
window.location.href='http://m.appdesigncorp.com/d-25508059.html';
}
function relate() {
$("html,body").animate({ scrollTop: 0 }, 500);
$('#relate').toggle();
if (!mshow) {
var relateScroll = new iScroll("relatelist", { zoom: true, hScrollbar: false, vScrollbar: true, bounce: true, momentum: false });
}
}
</script>
<script> var pre = "https://file7.zhuangpeitu.com/fileroot7/2021-7/18/9f18480f-97c8-4086-bd72-040d5e3c5714/9f18480f-97c8-4086-bd72-040d5e3c5714";
var freepage = parseInt('20');
var total_c = parseInt('47');
var start = parseInt('3');
var adcount = 0;
var adindex = 0;
var adType_list = ";1;2;5;6;7;";
var end = start;
$("#spanpage").text(total_c-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前端編碼規(guī)范_第" + (i + 1) + "頁\" width='100%'/>";
$("#page").append("<div id="z5dlbtz" class='page'>" + html + "</div>");
$("#page").append("<div id="3flz7xj" 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 id="rtvr5vl" class='pagead' id='addiv"+(i + 1)+"'></div>");
document.getElementById("addiv"+(i + 1)+"").innerHTML =document.getElementById("adpre" + adindex).outerHTML;
adindex += 1;
}
}
start = end;
$("#spanpage").text(total_c-start);
if (start > (freepage - 1)) {
if(start < total_c)
$("#ftip").html("親，很抱歉，此頁已超出免費預覽范圍啦！<br/>如果喜歡就下載吧，價低環(huán)保！");
else
$("#ftip").html("最后一頁預覽完了！喜歡就下載吧，查找使用更方便");
if($("#nftip"))$("#nftip").html("此文檔不允許下載，在線閱讀到最后一頁了。");
$("#ntip2").hide();
$("#ntip").hide();
}
}
//$(document).ready(function () {
// ShowSvg();
//});
</script>
<div style="margin:10px 0px; text-align:center;">
<div style="margin: auto; height:300px; overflow:hidden; text-align: center;"><dl class="works-intro gray2 " style="text-align:left;border:solid 1px #ddd;">
<dd style="font-size:14px; padding-left:20px; width:96%; line-height:22px;"><b>溫馨提示: </b><br />
1: 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。<br>
2: 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。<br>
3.本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。<br>
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。<br>
5. 裝配圖網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。<br>
6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。<br>
7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。<br>
</dd>
</dl></div> </div>
<div id="5j3htb3" class="widget-box pt0" style="border: none;">
<h2 class="h4 widget-box__title">最新文檔</h2>
<ul class="taglist--inline multi">
<li><a class="tag book" href="http://m.appdesigncorp.com/article/252475811.html" target="_blank">中考語文語言知識積累及運用課件</a></li>
<li><a class="tag book" href="http://m.appdesigncorp.com/article/252475810.html" target="_blank">6.康復醫(yī)學的工作方法和流程</a></li>
<li><a class="tag book" href="http://m.appdesigncorp.com/article/252475809.html" target="_blank">部編本人教版小學一年級語文下冊11-彩虹課件</a></li>
<li><a class="tag book" href="http://m.appdesigncorp.com/article/252475808.html" target="_blank">活動四單股銅芯導線的T型連接絕緣層的恢復單股銅芯導線的T型連接課件</a></li>
<li><a class="tag book" href="http://m.appdesigncorp.com/article/252475807.html" target="_blank">機場運營與管理 課程講義</a></li>
<li><a class="tag book" href="http://m.appdesigncorp.com/article/252475806.html" target="_blank">不得作為商標的標志的審查解讀</a></li>
<li><a class="tag book" href="http://m.appdesigncorp.com/article/252475805.html" target="_blank">MRSA共識解讀2012-1-17(1)</a></li>
<li><a class="tag book" href="http://m.appdesigncorp.com/article/252475804.html" target="_blank">高中語文必修一《優(yōu)美的漢字》課件</a></li>
<li><a class="tag book" href="http://m.appdesigncorp.com/article/252475803.html" target="_blank">安全生產(chǎn)管理培訓課件</a></li>
<li><a class="tag book" href="http://m.appdesigncorp.com/article/252475802.html" target="_blank">衛(wèi)生系統(tǒng)法律知識講座-法律責任與法律救濟</a></li>
<li><a class="tag book" href="http://m.appdesigncorp.com/article/252475801.html" target="_blank">骨關(guān)節(jié)脫位課件</a></li>
<li><a class="tag book" href="http://m.appdesigncorp.com/article/252475800.html" target="_blank">護士行為與護理安全 課件</a></li>
<li><a class="tag book" href="http://m.appdesigncorp.com/article/252475799.html" target="_blank">公路工程技術(shù)標準宣貫-隧道部分課件</a></li>
<li><a class="tag book" href="http://m.appdesigncorp.com/article/252475798.html" target="_blank">預防冬季傳染病主題班會</a></li>
<li><a class="tag book" href="http://m.appdesigncorp.com/article/252475797.html" target="_blank">疾病預防與食品安全教育.ppt</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="hrxnfdt" class="u-width265 u-floatRight js-sidebar" style="width:265px">
<div class="3zd3rtp" id="homeTab2" style="width:265px;margin-top:-12px;">
<div>
<a href="http://m.appdesigncorp.com/d-25508059.html" class="download" style="background-position-x:50px; text-indent:10px;">點擊下載此資源</a>
</div>
<div id="v7pxrb5" class="box hot-keywords mt20" style="overflow: hidden; width: 100%; border: solid 1px #dedede;"
id="relatebox">
<div id="vhj5bz3" class="boxHd" style="padding-bottom: 0px;">
<h2 class="fl font-normal font16 font-yahei" style="font-size: 16px; font-weight: 100; margin-left: 0px; margin-top: 3px; position: relative; text-indent: 34px; font-family: 微軟雅黑">
<svg t="1586227845664" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="https://www.w3.org/2000/svg" p-id="6477" width="20" height="20"
style="position: absolute; left: 10px; top: -1px;">
<path d="M768.1 273.6c-52.9-98.8-155.5-162.1-264.6-162.1-129.8 0-245.2 83.6-285.2 204.9C96.9 350.6 6.9 472.7 6.9 606.4c0 162.9 131.8 300.5 287.8 300.5 12.7 0 23-10.3 23-23s-10.3-23-23-23C163.7 860.9 53 744.3 53 606.4 53 488.9 134 382.1 241.5 358l13.4-3 3.7-13.2c30.3-108.4 131-184.2 244.8-184.2 95.5 0 185.2 57.6 228.7 146.8l5.3 10.8 11.9 1.9C876.8 337 973 451.7 973 583.8c0 150.2-121.5 277.1-265.4 277.1-12.7 0-23 10.3-23 23s10.3 23 23 23c168.8 0 311.4-148 311.4-323.2C1019 433.3 911.9 302.1 768.1 273.6z" p-id="6478" fill="#bfbfbf"></path><path d="M325.9 683.8l172 198.6c4.8 5.6 11.8 8.7 19.1 8.7 7.3 0 14.3-3.2 19.1-8.7l172-198.6-38.3-33.2L540 800.7 540 465l-51 0 0 330.2L364 650.6 325.9 683.8z" p-id="6479" fill="#bfbfbf"></path>
</svg>
相關(guān)資源</h2><a style="display:block; position:absolute;right:10px; top:2px; color:#888;font-size:13px;" target="_blank"
rel="nofollow" href="http://m.appdesigncorp.com/search.html?q=WEB%e5%89%8d%e7%ab%af%e7%bc%96%e7%a0%81%e8%a7%84%e8%8c%83" >更多</a>
</div>
<div class="br3fdhr" id="author-works-list" class="author-works-list bgF">
<div class="xd1vrfj" id="xgwendang" style=" line-height:30px; text-align:center;height:460px;border-radius:3px;" >
<div style="padding-top:140px; ">
<div>正為您匹配相似的精品文檔</div>
<div><img src="/images/jdt.gif" style=" width:220px; margin: 10px 0px" /></div>
</div>
<script type="text/javascript">
function xg() {
var myiframe = '<iframe scrolling="no" src="https://smart.zhuangpeitu.com/ajax.aspx?type=pc&q=WEB%e5%89%8d%e7%ab%af%e7%bc%96%e7%a0%81%e8%a7%84%e8%8c%83&id=25508059&sign=e942f5db5591aba83e1ace8fbad343b5" style="width:100%; height:460px;;" frameborder="0" enableviewstate="false" ></iframe>';
document.getElementById("xgwendang").innerHTML = myiframe;
}
setTimeout('xg()', 500)
</script>
</div>
</div>
</div>
</div><div id="hvhbrvn" class="box hot-keywords mt10" id="box3" style="overflow: hidden;width: 100%; border:solid 1px #dedede;">
<div id="ffp5rzr" class="boxHd" style="border: none;padding-bottom: 0px;">
<h2 class="fl font-normal font16 font-yahei" style="font-size: 16px; font-weight: 100;position:relative; text-indent:34px;
margin-left: 0px; margin-top: 3px; font-family: 微軟雅黑">
<svg t="1586228055974" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="https://www.w3.org/2000/svg" p-id="7665"
width="20" height="20" style="position:absolute;left:10px; top:0px;"><path d="M870 154c-13.1-13.1-30.4-21.8-49.8-24L527.8 97.5c-25.2-2.8-50.3 6-68.3 24l-326 326c-48.7 48.7-48.7 128.5 0 177.2l265.8 265.8c48.7 48.7 128.5 48.7 177.2 0l326-326c17.9-17.9 26.8-43.1 24-68.3L894 203.8c-2.2-19.4-10.9-36.8-24-49.8z m3.2 381.1l-326 326c-15.7 15.7-36.8 24.4-59.3 24.4s-43.5-8.7-59.3-24.4L162.9 595.3c-15.7-15.7-24.4-36.8-24.4-59.3s8.7-43.5 24.4-59.2l326-326c7.9-7.9 18.5-12.3 29.7-12.3 1.5 0 3.1 0.1 4.6 0.3l292.4 32.5c9.6 1.1 18.2 5.2 25 12 6.8 6.8 11 15.5 12.1 25.1l32.5 292.3c1.5 12.8-2.9 25.3-12 34.4z" p-id="7666" fill="#bfbfbf"></path><path d="M723.3 217.7c-45.8 0-83 37.2-83 83s37.2 83 83 83 83-37.2 83-83c0-45.9-37.1-83-83-83z m0 124.5c-22.9 0-41.5-18.6-41.5-41.5s18.6-41.5 41.5-41.5 41.5 18.6 41.5 41.5-18.6 41.5-41.5 41.5z" p-id="7667" fill="#bfbfbf"></path></svg>
相關(guān)搜索</h2>
</div>
<input name="ctl00$Content$hiddenCategoryID" type="hidden" id="Content_hiddenCategoryID" />
<div id="vpjjhnb" class="hot-keywords-list" style="padding:10px 20px;">
<a target="_blank" rel="nofollow" href="http://m.appdesigncorp.com/search.html?q=WEB"
class="tag-item ico" title="WEB" hidefocus="true"><span id="prrznjt" class="ico"><em>
WEB</em></span></a>
<a target="_blank" rel="nofollow" href="http://m.appdesigncorp.com/search.html?q=%e5%89%8d%e7%ab%af"
class="tag-item ico" title="前端" hidefocus="true"><span id="fvzrhh3" class="ico"><em>
前端</em></span></a>
<a target="_blank" rel="nofollow" href="http://m.appdesigncorp.com/search.html?q=%e7%bc%96%e7%a0%81"
class="tag-item ico" title="編碼" hidefocus="true"><span id="tvjz5tb" class="ico"><em>
編碼</em></span></a>
<a target="_blank" rel="nofollow" href="http://m.appdesigncorp.com/search.html?q=%e8%a7%84%e8%8c%83"
class="tag-item ico" title="規(guī)范" hidefocus="true"><span id="lrxfxd3" class="ico"><em>
規(guī)范</em></span></a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://m.appdesigncorp.com/js/artDialog-5.0.3/artDialog.min.js"></script>
<script>
var uid = "0";
var obj = null;
function popFolder() {
var html = '<iframe src="/FlexPaper/BookFolderSelect.aspx?id=25508059" scrolling="no" frameborder="0" style="width: 550px; height: 300px"></iframe>';
if (uid == "0") { window.location.href="http://m.appdesigncorp.com/login.aspx?returl=http%3a%2f%2fm.appdesigncorp.com%2fView_renren.aspx%3fid%3d25508059"; return; }
obj = art.dialog({ title: '收藏資源', content: html, cancelValue: '取消',
width: '540', height: '380', skin: 'blue', lock: true,
background: '#666', opacity: .6, duration: 300, fixed: true, left: '50%',
top: '38.2%', zIndex: 1987, resize: true, drag: true
});
}
function CloseMe() {
obj.close();
}
var tp2 = $('#homeTab2').offset().top;
$(window).bind("scroll", function (event) {
var Y = $(this).scrollTop();
if (Y > tp2 && $('#homeTab2').css("position") != "fixed") {
$('#homeTab2').css({
position: "fixed",
width: "265px",
top: "15px",
zIndex: "999"
});
} else if (Y <= tp2 && $('#homeTab2').css("position") == "fixed") {
$('#homeTab2').css({
position: "static",
zIndex: "1"
});
}
});
</script>
</div>
<div id="pnj57rn" class="cssnone">
<iframe src="http://m.appdesigncorp.com/BookRead.aspx?id=dTvTrwwyNpjv0EWxTC0wPQ%3d%3d&to=A7iMrMZZiDLX36fgPzlv8UDW6rTYStjvpV7kvrzxezFvBZrC%2bojxG0OfB7Plsp%2bLYKY0G96U3w8xmOAzqLnowlWX7jxEydzhP8dREX%2fhMh3eAtTZvtc5FApwXY1sv4avxL2fhgUtm8tP8BahTq7nkQ8pFyAw5f%2fergmLu4xYZfTLRn9N%2fU1P7TXakWlVOfxXjPJGPff2Z8pqkLCP1rWK6A%3d%3d" frameborder="0" style="width: 0px; height: 0px">
</iframe>
</div>
<!-- JiaThis Button END -->
<span id="LabelScript"></span>
</div>
</div>
<script>function popLogin() {
window.location.href = '/login.aspx?returl=http%3a%2f%2fm.appdesigncorp.com%2fView_renren.aspx%3fid%3d25508059'; return;
}</script>
<script type="text/javascript">
var objjubao = null;
function jubao() {
var html = '<iframe src="http://m.appdesigncorp.com/UserManage/ReportBack.aspx?id=25508059&url=vZ7Tt5whIvr/dRdNgGIKyPKNDzA93OKs oH1UA29j7gQz3uKhWEeAHHbezUmCzOpfr4eV4Ghp8M=" scrolling="no" frameborder="0" style="width: 600px; height: 420px"></iframe>';
objjubao = art.dialog({
title: '非法內(nèi)容有獎舉報', content: html,
close: Closejubao, width: '700', height: '470', skin: 'blue', lock: true,
background: '#666', opacity: .6, duration: 300, fixed: true, left: '50%',
top: '38.2%', zIndex: 1987, resize: true, drag: true
});
}
function Closejubao() {
objjubao.close();
}
</script>
<!--foot-->
<div id="vdtxjnr" class="bg_100 foot_nav_bg" style=" min-width:1200px;">
<div id="b3td3nt" class="foot_nav">
<a href="http://m.appdesigncorp.com/h-33.html" target="_blank" >關(guān)于我們</a> - <a href="http://m.appdesigncorp.com/h-34.html"
target="_blank" >網(wǎng)站聲明</a> - <a href="http://m.appdesigncorp.com/h-35.html" target="_blank" >
網(wǎng)站地圖</a> - <a href="http://m.appdesigncorp.com/sitemap.html" target="_blank" >
資源地圖</a>
- <a href="http://m.appdesigncorp.com/friend.aspx" target="_blank" >友情鏈接</a> -
<a rel="nofollow" target="_blank" >網(wǎng)站客服</a>
- <a rel="nofollow" href="http://m.appdesigncorp.com/h-38.html" target="_blank" >聯(lián)系我們</a>
</div>
</div>
<div id="fjdjflx" class="bg_100 siteInner_bg" style=" min-width:1200px;">
<div id="xhxtzrl" class="siteInner">
<p>copyright@ 2023-2025 zhuangpeitu.com 裝配圖網(wǎng)版權(quán)所有 聯(lián)系電話：18123376007</p><p><a target="_blank"><span><span>備案號:</span></span><span>蜀</span><span>ICP</span><span>備</span><span>2024067431</span><span>號</span><span>-1</span></a> <span>川公網(wǎng)安備51140202000466號</span></p><p><span><span><br /></span></span></p><p><span><span>本站為文檔C2C交易模式，即用戶上傳的文檔直接被用戶下載，本站只是中間服務(wù)平臺，本站所有文檔下載所得的收益歸上傳人(含作者)所有。裝配圖網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對上載內(nèi)容本身不做任何修改或編輯。若文檔所含內(nèi)容侵犯了您的版權(quán)或隱私，請立即通知<span>裝配圖</span>網(wǎng)，我們立即給予刪除！</span></span></p>
</div>
</div>
<!--foot end-->
<script type="text/javascript" src="http://m.appdesigncorp.com/JS/jquery.lazyload.js"></script>
<script type="text/javascript" charset="utf-8">
$("img.lazys").lazyload({
threshold: 200,
effect: "fadeIn"
});
</script>
<script type="text/javascript" src="http://m.appdesigncorp.com/umeditor/xss.js"></script>
<script>(function() {var _53code = document.createElement("script");_53code.src = "https://tb.53kf.com/code/code/f0b69d13c371916b96c564bba41b9dae8/1";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(_53code, s);})();</script><script>var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://#/hm.js?f6f8927201e0ce73292b83a428843c78";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();</script>
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://m.appdesigncorp.com/" title="91香蕉app下载网址进入下载">91香蕉app下载网址进入下载</a>
<div class="friend-links">
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="jrhph" class="pl_css_ganrao" style="display: none;"><thead id="jrhph"><track id="jrhph"></track></thead><form id="jrhph"></form><nobr id="jrhph"><i id="jrhph"></i></nobr><menuitem id="jrhph"></menuitem><pre id="jrhph"><ruby id="jrhph"><form id="jrhph"><label id="jrhph"></label></form></ruby></pre><div id="jrhph"><small id="jrhph"><label id="jrhph"><strike id="jrhph"></strike></label></small></div><pre id="jrhph"><div id="jrhph"></div></pre><thead id="jrhph"></thead><div id="jrhph"></div><dl id="jrhph"><progress id="jrhph"></progress></dl><legend id="jrhph"><acronym id="jrhph"><mark id="jrhph"><b id="jrhph"></b></mark></acronym></legend><small id="jrhph"><label id="jrhph"></label></small><span id="jrhph"><ins id="jrhph"></ins></span><p id="jrhph"><font id="jrhph"><video id="jrhph"><p id="jrhph"></p></video></font></p><form id="jrhph"></form><mark id="jrhph"><pre id="jrhph"><label id="jrhph"><mark id="jrhph"></mark></label></pre></mark><track id="jrhph"><style id="jrhph"><span id="jrhph"><output id="jrhph"></output></span></style></track><dfn id="jrhph"><div id="jrhph"></div></dfn><var id="jrhph"></var><span id="jrhph"><ins id="jrhph"></ins></span><strong id="jrhph"></strong><output id="jrhph"></output><u id="jrhph"><ol id="jrhph"></ol></u><strong id="jrhph"></strong><listing id="jrhph"><style id="jrhph"></style></listing><th id="jrhph"><legend id="jrhph"><pre id="jrhph"><ruby id="jrhph"></ruby></pre></legend></th><th id="jrhph"><optgroup id="jrhph"></optgroup></th><form id="jrhph"><video id="jrhph"></video></form><sup id="jrhph"></sup><i id="jrhph"><acronym id="jrhph"><mark id="jrhph"><small id="jrhph"></small></mark></acronym></i><tt id="jrhph"></tt><progress id="jrhph"><dfn id="jrhph"></dfn></progress><style id="jrhph"><ol id="jrhph"></ol></style><tt id="jrhph"><var id="jrhph"><i id="jrhph"><sub id="jrhph"></sub></i></var></tt><i id="jrhph"></i><strong id="jrhph"><ol id="jrhph"></ol></strong><video id="jrhph"><strong id="jrhph"><dl id="jrhph"><meter id="jrhph"></meter></dl></strong></video><sup id="jrhph"></sup><ol id="jrhph"></ol><optgroup id="jrhph"></optgroup><pre id="jrhph"></pre><rp id="jrhph"><form id="jrhph"><acronym id="jrhph"><big id="jrhph"></big></acronym></form></rp><mark id="jrhph"><optgroup id="jrhph"><acronym id="jrhph"><big id="jrhph"></big></acronym></optgroup></mark><label id="jrhph"><menuitem id="jrhph"><form id="jrhph"><dfn id="jrhph"></dfn></form></menuitem></label><small id="jrhph"><label id="jrhph"></label></small><i id="jrhph"><pre id="jrhph"></pre></i><em id="jrhph"><nobr id="jrhph"></nobr></em><thead id="jrhph"><acronym id="jrhph"><rp id="jrhph"><optgroup id="jrhph"></optgroup></rp></acronym></thead><label id="jrhph"><strong id="jrhph"></strong></label><sub id="jrhph"><rp id="jrhph"><pre id="jrhph"><pre id="jrhph"></pre></pre></rp></sub><form id="jrhph"><label id="jrhph"></label></form><em id="jrhph"></em><output id="jrhph"><label id="jrhph"></label></output><strong id="jrhph"></strong><output id="jrhph"><label id="jrhph"></label></output><pre id="jrhph"><pre id="jrhph"><rp id="jrhph"><optgroup id="jrhph"></optgroup></rp></pre></pre><label id="jrhph"><span id="jrhph"></span></label><acronym id="jrhph"><big id="jrhph"></big></acronym><u id="jrhph"></u><legend id="jrhph"><address id="jrhph"></address></legend><ol id="jrhph"><ins id="jrhph"></ins></ol><form id="jrhph"><output id="jrhph"></output></form><strong id="jrhph"><legend id="jrhph"></legend></strong><ol id="jrhph"><legend id="jrhph"></legend></ol><dfn id="jrhph"><div id="jrhph"></div></dfn><label id="jrhph"><p id="jrhph"></p></label><label id="jrhph"><span id="jrhph"></span></label><pre id="jrhph"></pre><nobr id="jrhph"><legend id="jrhph"></legend></nobr><progress id="jrhph"><dfn id="jrhph"><nobr id="jrhph"><legend id="jrhph"></legend></nobr></dfn></progress><form id="jrhph"></form><mark id="jrhph"><optgroup id="jrhph"></optgroup></mark><strong id="jrhph"><dl id="jrhph"></dl></strong><dl id="jrhph"><output id="jrhph"></output></dl><div id="jrhph"><font id="jrhph"></font></div><small id="jrhph"><listing id="jrhph"><div id="jrhph"><font id="jrhph"></font></div></listing></small><b id="jrhph"><label id="jrhph"><p id="jrhph"><thead id="jrhph"></thead></p></label></b><strong id="jrhph"><span id="jrhph"><output id="jrhph"><dfn id="jrhph"></dfn></output></span></strong><thead id="jrhph"><sub id="jrhph"><mark id="jrhph"><optgroup id="jrhph"></optgroup></mark></sub></thead><style id="jrhph"></style><dfn id="jrhph"></dfn><div id="jrhph"><b id="jrhph"><dfn id="jrhph"><p id="jrhph"></p></dfn></b></div><form id="jrhph"><listing id="jrhph"></listing></form><pre id="jrhph"><menuitem id="jrhph"></menuitem></pre><th id="jrhph"><i id="jrhph"></i></th><address id="jrhph"><menuitem id="jrhph"><form id="jrhph"><dfn id="jrhph"></dfn></form></menuitem></address><strike id="jrhph"></strike><th id="jrhph"><thead id="jrhph"><em id="jrhph"><rp id="jrhph"></rp></em></thead></th><video id="jrhph"></video><ruby id="jrhph"></ruby><thead id="jrhph"><output id="jrhph"></output></thead><pre id="jrhph"><label id="jrhph"><big id="jrhph"><font id="jrhph"></font></big></label></pre><legend id="jrhph"><pre id="jrhph"></pre></legend><track id="jrhph"><label id="jrhph"><span id="jrhph"><ins id="jrhph"></ins></span></label></track><pre id="jrhph"></pre><ruby id="jrhph"></ruby><sup id="jrhph"><menuitem id="jrhph"><font id="jrhph"><track id="jrhph"></track></font></menuitem></sup><acronym id="jrhph"><div id="jrhph"></div></acronym><tt id="jrhph"></tt><strong id="jrhph"><legend id="jrhph"><address id="jrhph"><rp id="jrhph"></rp></address></legend></strong><big id="jrhph"><small id="jrhph"></small></big><tt id="jrhph"><th id="jrhph"><i id="jrhph"><address id="jrhph"></address></i></th></tt><address id="jrhph"><rp id="jrhph"></rp></address><small id="jrhph"></small><tt id="jrhph"></tt><strong id="jrhph"></strong><ins id="jrhph"></ins><ol id="jrhph"><legend id="jrhph"><u id="jrhph"><var id="jrhph"></var></u></legend></ol><rp id="jrhph"></rp><ins id="jrhph"><dfn id="jrhph"></dfn></ins><sub id="jrhph"></sub><listing id="jrhph"><style id="jrhph"></style></listing><mark id="jrhph"><pre id="jrhph"><address id="jrhph"><menuitem id="jrhph"></menuitem></address></pre></mark><strong id="jrhph"></strong><form id="jrhph"><sup id="jrhph"><big id="jrhph"><b id="jrhph"></b></big></sup></form><form id="jrhph"><acronym id="jrhph"><div id="jrhph"><b id="jrhph"></b></div></acronym></form><form id="jrhph"><dfn id="jrhph"><big id="jrhph"><form id="jrhph"></form></big></dfn></form><ins id="jrhph"><u id="jrhph"></u></ins><label id="jrhph"><big id="jrhph"></big></label><sup id="jrhph"><menuitem id="jrhph"></menuitem></sup><span id="jrhph"></span><legend id="jrhph"><pre id="jrhph"></pre></legend><legend id="jrhph"></legend><address id="jrhph"><th id="jrhph"></th></address><nobr id="jrhph"><thead id="jrhph"></thead></nobr><strong id="jrhph"><form id="jrhph"></form></strong><em id="jrhph"><th id="jrhph"></th></em><video id="jrhph"><strong id="jrhph"></strong></video><sup id="jrhph"><menuitem id="jrhph"></menuitem></sup><meter id="jrhph"><tt id="jrhph"><strong id="jrhph"><progress id="jrhph"></progress></strong></tt></meter><i id="jrhph"><acronym id="jrhph"></acronym></i><thead id="jrhph"><track id="jrhph"></track></thead><tt id="jrhph"><var id="jrhph"></var></tt><tt id="jrhph"><nobr id="jrhph"></nobr></tt><small id="jrhph"><listing id="jrhph"></listing></small><tt id="jrhph"></tt><optgroup id="jrhph"></optgroup><menuitem id="jrhph"><optgroup id="jrhph"></optgroup></menuitem><dl id="jrhph"></dl><p id="jrhph"></p><optgroup id="jrhph"><acronym id="jrhph"></acronym></optgroup><strike id="jrhph"><font id="jrhph"><dfn id="jrhph"><style id="jrhph"></style></dfn></font></strike><strike id="jrhph"></strike><acronym id="jrhph"></acronym><ruby id="jrhph"><optgroup id="jrhph"><label id="jrhph"><menuitem id="jrhph"></menuitem></label></optgroup></ruby><span id="jrhph"></span><pre id="jrhph"><ruby id="jrhph"><i id="jrhph"><acronym id="jrhph"></acronym></i></ruby></pre><acronym id="jrhph"></acronym><u id="jrhph"><ol id="jrhph"><ins id="jrhph"><tt id="jrhph"></tt></ins></ol></u><optgroup id="jrhph"></optgroup></div>
</html>
《WEB前端編碼規(guī)范》由會員分享，可在線閱讀，更多相關(guān)《WEB前端編碼規(guī)范（47頁珍藏版）》請在裝配圖網(wǎng)上搜索。
1、 XXXX有限公司 XXXXXXXX管理平臺 Web 前端代碼編寫規(guī)范 文件狀態(tài)： 文件標識： [ √ ] 草稿 當前版本： 1.0 [ ] 正式發(fā)布 作 者： 李光強 [ ] 正在修改 完成日期： 2016.1.30 XXXXXX 2016 年 1
2、 月 修改歷史 修訂后 修訂人 修訂 編號 修訂內(nèi)容簡述 版本號 日期 11.0 李光強 起草 2016.1.30 第一部分 HTML 規(guī)范 HTML并不是一種編程語言，而是一種標記語言，它沒有任何真正的編程語 言中的循環(huán)或是流程控制語句。然而， HTML代碼的格式和風格是非常重要的，因為要經(jīng)常對 HTML代碼進行維護和修改， 因此 HTML代碼必須有很清晰的邏輯結(jié)構(gòu)和布局，而使其易懂和易于維護。 HTML語言是不區(qū)分大小寫的，但為改善
3、可讀性，規(guī)定小寫所有字母（除最 上一行引用外） 。與 HTML不一樣， XHTML對大小寫是敏感的，