Web前端開闢範例手冊

2023年11月21日 106次阅读来源: luozz

類型目的

為進步團隊合作效力, 便於背景職員增添功用及前端後期優化保護, 輸出高質量的文檔, 特制訂此文檔。

文件類型

文件定名劃定規矩

文件稱號一致用小寫的英筆墨母、数字和下劃線的組合，个中不得包含漢字、空格和特別字符；定名準繩的指導思想一是使得你本身和工作組的每一個成員能夠輕易的邃曉每一個文件的意義，二是當我們在文件夾中應用“按稱號排例”的敕令時，統一種大類的文件能夠分列在一同，以便我們查找、修正、替代、盤算負載量等等操縱。

HTML的定名準繩

主頁一致應用index.htm、index.html或index.asp文件名（小寫）
各子頁定名的準繩首先應當以欄目名的英語翻譯取單一單詞為稱號。比方：

關於我們 --> aboutus 
信息反饋 --> feedback 
產物 --> product

假如欄目稱號多而龐雜並不好以英文單詞定名，則一致應用該欄目稱號拼音或拼音的首字母示意；
每一個目次中應當包含一個缺省的html 文件，文件名一致用index.htm、index.html或index.asp；

圖片的定名準繩

圖片的稱號分為頭尾兩部份，用下劃線離隔，頭部份示意此圖片的大類性子
比方：廣告、標誌、菜單、按鈕等等。
安排在頁面頂部的廣告、裝潢圖案等長方形的圖片取名： banner
標誌性的圖片取名為： logo
在頁面上位置不牢固而且帶有鏈接的小圖片我們取名為 button
在頁面上某一個位置一連湧現，性子雷同的鏈接欄目的圖片我們取名： menu
裝潢用的照片我們取名： pic
不帶鏈接示意題目的圖片我們取名： title
類型：banner_sohu.png、banner_sina.png、menu_aboutus.png、menu_job.png、title_news.png、logo_police.png、 logo_national.png、pic_people.png
鼠標感到結果圖片定名類型為"圖片名+_+on/off"。
比方：menu1_on.png、menu1_off.png

javascript的定名準繩

比方：廣告條的javascript文件名為 ad.js 彈出窗口的javascript文件名為 pop.js

動態言語文件定名準繩

以性子_形貌，形貌能夠有多個單詞，用“_”離隔，性子平常是該頁面得提要。
類型：register_form.asp、register_post.asp、topic_lock.asp

文件寄存位置類型

    //項目目次(都不是必需存在的目次)
    cn    寄存中文HTML文件
    en    寄存英文HTML文件
    flash    寄存Flash文件
    images    寄存圖片文件
    imagestudio    寄存PSD源文件
    flashstudio    寄存flash源文件
    inc    寄存include文件
    library    寄存庫文件
    media    寄存多媒體文件
    project    寄存工程項目材料
    temp    寄存客戶原始材料
    js    寄存JavaScript劇本
    css    寄存CSS文件

CSS謄寫類型

基礎準繩：

CSS款式可細分為3類：自定義款式、從新定義HTML款式、鏈接狀況款式。

自定義款式為設想師自定義的新CSS款式，影響被應用本款式的地區，用於完成網頁中部分的款式設定。款式名為“.”+“響應款式結果形貌的單詞或縮寫”，例： .shadow，筆墨款式款式名為“.word”+“字號”+“行距”+“色彩縮寫”，例：.word12、.word12-24、.word12-24-red
從新定義HTML款式為設想師從新定義已有的HTML標籤款式，影響悉數的被設定標籤款式，用於一致網頁中某一標籤的款式定義。款式名為HTML標籤，例：hr { border: 1px dotted #333333 }
鏈接狀況款式為設想師對鏈接差別狀況設定特別款式，影響被應用本款式地區中的鏈接，該款式寫法有2種：a.nav:link、nav.a:link，第一種只能潤飾<a>標籤中；第二種能夠潤飾一切包含有<a>標籤的其他標籤。

頁面內的款式加載必需用鏈接體式格局
<link rel="stylesheet" type="text/css" href="xxx/xxx.css">

注意細則：

合作開闢及分工: Me(前端負責人，主開闢職員，以下簡稱Me)會依據各個模塊, 同時依據頁面類似遞次, 事前寫好大致框架文件, 分配給前端職員完成內部構造、表現、行動; 共用css文件base.css由Me謄寫, 合作開闢過程當中, 每一個頁面請務必都要引入, 此文件包含reset及頭部底部款式, 此文件不可隨便修正;
class與id的應用: id是唯一的並是父級的, class是能夠反覆的並是子級的, 所以id僅應用在大的模塊上, class可用在反覆應用率高及子級中; id準繩上都是由Me分發框架文件時定名的, 為JavaScript預留鈎子的除外;
為JavaScript預留鈎子的定名, 請以js_肇端, 比方:js_hide、js_show;
class與id定名: 大的框架定名比方header/footer/wrapper/left/right之類的在 2 中由Me一致定名.其他款式稱號由 小寫英文、数字、_來組合定名(不能以数字開首), 如i_comment, fontred, width200; 防備應用中文拼音, 只管應用淺易的單詞組合; 總之, 定名要語義化, 簡明化.
躲避class與id定名(此條重要, 請實時與Me溝通):
a、經由過程隸屬寫法躲避, 示例見d;
b、取父級元素id/class定名部份定名, 示例見d;
c、反覆應用率高的定名, 請以本身代號加下劃線肇端, 比方Me_clear;
d、 a,b兩條, 適用於在 2 中已建好框架的頁面, 如, 要在 2 中已建好框架的頁面代碼<div id="mainnav"></div>中到場新的div元素:
```
//按a定名軌則
<div id="mainnav"><div class="firstnav">...</div></div>
//款式寫法
#mainnav  .firstnav{.......}
//按b定名軌則
<div id="mainnav"><div class="main_firstnav">...</div></div> 
//款式寫法
.main_firstnav{.......}
```
css屬性謄寫遞次, 發起遵照規劃定位屬性–>本身屬性–>文本屬性–>其他屬性. 此條可依據本身習氣謄寫, 但只管保證同類屬性寫在一同. 屬性枚舉: 規劃定位屬性重要包含: margin、padding、float（包含clear）、position（響應的 top,right,bottom,left）、display、visibility、overflow等；本身屬性重要包含: width、height、background、border; 文本屬性重要包含：font、color、text-align、text-decoration、text-indent等；其他屬性包含: list-style(列表款式)、vertical-align、cursor、z-index(層疊遞次) 、zoom等，所列出的這些屬性只是最經常使用到的, 並不代表悉數;
謄寫代碼前, 斟酌並進步款式反覆應用率;
充分應用html本身屬性及款式繼續道理削減代碼量, 比方:<ul class="list"><li>這兒是題目列表<span>2010-09-15</span></ul>，定義ul.list li{position:relative} ul.list li span{position:absolute; right:0}，即可完成日期居右顯現。
款式表中中筆墨體名, 請務必轉碼成unicode碼, 以防備編碼錯誤時亂碼;
背景圖片請只管應用sprite手藝, 減小http請求, 斟酌到多人合作開闢, sprite按模塊製造;
應用table標籤時(只管防備應用table標籤), 請不要用width/height/cellspacing/cellpadding等table屬性直接定義表現, 應只管的應用table本身私有屬性星散構造與表現, 如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css掌握要領: table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;}, 平常base.css文件中Me會初始化表格款式)
用png圖片做圖片時, 請求圖片花樣為png-8花樣,若png-8着實影響圖片質量或个中有半通明結果, 請為ie6零丁定義背景:background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);
防備兼容性屬性的應用, 比方text-shadow、css3的相干屬性;
削減應用影響機能的屬性, 比方position:absolute、float;
必需為大區塊款式增添詮釋, 小區塊適當詮釋;
代碼縮進與花樣: 發起單行謄寫, 可依據本身習氣, 後期優化Me會一致處置懲罰;

定名劃定規矩:

頭：header
內容：content/container
尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍掌握團體規劃寬度：wrapper
擺布中：left right center
登錄條：loginbar
標誌：logo
廣告：banner
頁面主體：main
熱門：hot
消息：news
下載：download
子導航：subnav
菜單：menu
子菜單：submenu
搜刮：search
友情鏈接：friendlink
頁腳：footer
版權：copyright
轉動：scroll
內容：content
標籤頁：tab
文章列表：list
提醒信息：msg
小技能：tips
欄目題目：title
到場：joinus
指南：guild
效勞：service
註冊：regsiter
狀況：status
投票：vote
合作夥伴：partner

詮釋的寫法:

  /* Footer */
  內容區
  /* End Footer */

id的定名:

頁面構造
容器: container
頁頭：header
內容：content container
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍掌握團體規劃寬度：wrapper
擺布中：left right center
導航
導航：nav
主導航：mainbav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
菜單：menu
子菜單：submenu
題目: title
擇要: summary
功用
標誌：logo
廣告：banner
上岸：login
登錄條：loginbar
註冊：regsiter
搜刮：search
功用區：shop
題目：title
到場：joinus
狀況：status
按鈕：btn
轉動：scroll
標籤頁：tab
文章列表：list
提醒信息：msg
當前的: current
小技能：tips
圖標: icon
詮釋：note
指南：guild
效勞：service
熱門：hot
消息：news
下載：download
投票：vote
合作夥伴：partner
友情鏈接：link
版權：copyright

基礎款式：

/* CSS Document */
body {margin:0; padding:0; font:12px "\5B8B\4F53",san-serif;background:#fff;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}   
table,td,tr,th{font-size:12px;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
ol,ul {list-style:none;}
h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}
address,cite,code,em,th {font-weight:normal; font-style:normal;}
.fB{font-weight:bold;}
.f12px{font-size:12px;}
.f14px{font-size:14px;}
.left{float:left;}
.right{float:right;}
a {color:#2b2b2b; text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {color:#ba2636;text-decoration:underline;}
a:active {color:#ba2636;}

//重定義的最早，偽類其次，自定義末了，便於本身和別人閱讀！

中英文混排時，我們只管的將英文和数字定義為
verdana 和
arial 兩種字體。

HTML謄寫類型

網頁製造細節

head區代碼類型

head區是指HTML代碼的<head>和</head>之間的內容。

必需到場的標籤:

公司版權詮釋

網頁顯現字符集

簡體中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
繁體中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
英 語：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

網頁製造者信息 <META name="author" content="luozz@cmgos.com">
網站簡介 <META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">
搜刮關鍵字 <META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">
網頁的css類型 <LINK href="xxx/xxx.css" rel="stylesheet" type="text/css">
網頁題目 <title>xxxxxxxxxxxxxxxxxx</title>

能夠挑選到場的標籤:

設定網頁的到期時候。一旦網頁逾期，必需到效勞器上從新調閱。 <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08：21：57 GMT">
制止閱讀器從本地機的緩存中調閱頁面內容。 <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
用來防備別人在框架里挪用你的頁面。<META HTTP-EQUIV="Window-target" CONTENT="_top">
自動跳轉。<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.keyup.top">5指時候停止5秒
網頁搜刮機器人導遊。用來通知搜刮機器人哪些頁面須要索引，哪些頁面不須要索引。<META NAME="robots" CONTENT="none"> CONTENT的參數有all,none,index,noindex,follow,nofollow。默許是all。
收藏夾圖標 <link rel = "Shortcut Icon" href="favicon.ico">
一切的javascript的挪用只管採納外部挪用. <SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js"></SCRIPT>
附<body>標籤： <body>標籤不屬於head區，這裏強調一下，為了保證閱讀器的兼容性，必需設置頁面背景<body bgcolor="#FFFFFF">

字體

在設定字體款式時關於筆墨字號款式和行間距應必需應用CSS款式表。制止在頁面中湧現 <font size=?> 標記。
在網頁中中文應首選應用宋體。英文和数字首選應用verdana 和arial 兩種字體。平常應用中文宋體的9pt 和11pt 或12px 和14.7px 這是經由優化的字號，黑體字也許宋體字加粗時，平常選用11pt 和14.7px 的字號比較適宜。
為了最大水平的發揮閱讀器自動排版的功用，在一段完全的筆墨中請只管不要應用<br>來人工干預分段。
差別語種的筆墨之間應當有一個半角空格，但避頭的標記之前和避尾的標記以後除外，漢字之間的標點要用全角標點，英筆墨母和数字四周的括號應當應用半角括號。
請不要在網頁中一連湧現多於一個的空格，也只管少應用全角空格（英筆墨符集下，全角空格會變成亂碼），空缺應當只管應用text-indent, padding, margin, hspace, vspace 以及通明的gif圖片來完成。
行距發起用百分比來定義，經常使用的兩個行距的值是line-height:120% line-height:150%。
排版中我們經常會碰到須要舉行首行縮進的處置懲罰，不要應用空格也許全角空格來到達結果，類型的做法是在款式表中定義 p { text-indent: 2em; } 然後給每一段加上 <p> 標記，注意，平常情況下，請不要省略 </p> 完畢標記。

鏈接

網站中的鏈接途徑悉數採納相對途徑，平常鏈接到某一目次下的缺省文件的鏈接途徑沒必要寫全名，如我們沒必要如許：<a href=”aboutus/index.htm”> 而應當如許：<a href=”aboutus/”>，一切內頁指向首頁的鏈接寫成<a href=”/”>
在閱讀器里，當我們點擊空鏈接時，它會自動將當前頁面重置到首端，從而影響用戶一般的閱讀內容，我們用代碼javascript:void(null)替代本來的“#”標記

表格

1px表格style="border-collapse: collapse"
實比方下：

<table border="1" cellspacing="0" width="32" height="32" style="border-collapse: collapse"
bordercolor="#000000" cellpadding="0"> 
<tr> 
<td></td>
</tr>
</table>

設置亮、暗邊框色彩
表格有亮邊框（bordercolorlight）和暗邊框（bordercolordark）兩個屬機能夠對錶格款式設置。

<table border="1" width="500" bordercolorlight="#000000" bordercolordark="#FFFFFF">

在寫 <table> 相互嵌套時，嚴厲根據的類型，關於零丁的一個<table>來講，<table><tr>對齊，<td> 縮進兩個半角空格，<td> 中假如另有嵌套的表格，<table>也縮進兩個半角空格，假如<td>中沒有任何嵌套的表格，</td> 完畢標記應當與 <td> 處於統一行，不要換行，
如我們注意在源代碼中不該有如許的代碼：

<td><img src=”../images/sample.gif”>
</td>

而應當是如許的：

<td><img src=”../images/sample.gif”></td>

這是由於閱讀器以為換行相當於一個半角空格，以上不類型的寫法相當於無意中增添一個半角空格，假如確切有必要增添一個半角空格，也應當如許寫：

<td><img src=”../images/sample.gif”> </td>

一個網頁要只管防備用全部一張大表格，一切的內容都嵌套在這個大表格以內，由於閱讀器在詮釋頁面的元素時，是以表格為單元一一顯現，假如一張網頁是嵌套在一個大表格以內，那末極能夠形成的效果就是，當閱讀者敲入網址，他要先面臨一片空缺很長時候，然後一切的網頁內容同時湧現。假如必需如許做，請應用 <tbody>標記，以便能夠使這個大表格分塊顯現

下載速率

首頁Flash 網頁大小應限定在
200K以下，只管的應用矢量圖形和Action來減小動畫大小。非首頁靜態頁面含圖片大小應限定在70K擺布，只管的應用背景色彩替代大塊同色圖片。

include

asp規範寫法 
jsp規範寫法 <%@ include file="../inc/index_top.jsp" %>

Alt和Title

都是提醒性言語標籤，請注意它們之間的區分。
在我們閱讀網頁時，當鼠標停止在圖片對象或筆墨鏈接上時，在鼠標的右下角有時會湧現一個提醒信息框。對目的舉行肯定的詮釋申明。在一些場所，它的作用是很重要的。
alt用來給圖片來提醒的。title用來給鏈接筆墨或一般筆墨提醒的。
用法以下：

<p Title="給鏈接筆墨提醒">筆墨</p> 
<a href="#" Title="給鏈接筆墨提醒">筆墨</a> 
<img src="圖片.gif" alt="給圖片提醒">

緩存

HTM網頁

<META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> 
<META HTTP-EQUIV="expires" CONTENT="0">

ASP網頁

Response.Expires = -1 
Response.ExpiresAbsolute = Now() - 1 
Response.cachecontrol = "no-cache"

閱讀器兼容性

建立站點時，應當邃曉訪問者能夠應用種種 Web 閱讀器。在已知的其他設想限定下，只管將站點設想為具有最大的閱讀器兼容性。
現在應用的 Web 閱讀器有二十多種，大多數已發行了多個版本。縱然您只針對應用 Netscape Navigator 和 Microsoft Internet Explorer 的大多數 Web 用戶，但您應明白並不是每一個人都在應用這兩種閱讀器的最新版本。
您的站點越龐雜（在規劃、動畫、多媒體內容和交互方面），跨閱讀器兼容的能夠性就越小。比方，並不是一切的閱讀器都能夠運轉JavaScript。不應用特別字符的純文本頁面也許能夠在任何閱讀器中準確顯現，但比起有效地應用圖形、規劃和交互的頁面，如許的頁面在美感上能夠要差得多。所以，應只管在最好結果設想和最大閱讀器兼容性設想之間獲得均衡。
一切的HTML 標籤的屬性都要用單引號也許雙引號括起，即我們應當寫
<a href=”url”> 而不是
<a href=url>.

banner

全尺寸banner為468X60px，半尺寸banner為234X60px，小banner為88X31px。
別的120X90，120X60也是小圖標的規範尺寸。全尺寸banner不凌駕14K。
廣泛的banner尺寸760X100，750X120，468X60，468X95，728X90，585X140
次級頁的pip尺寸360X300，336X280
游標:100X100或120X120

LOGO的國際規範類型

為了便於INTERNET上信息的流傳，一個一致的國際規範是須要的。實際上已經有了如許的一整套規範。个中關於網站的LOGO，現在有三種規格：
88*31 這是互聯網上最廣泛的LOGO規格。
120*60 這類規格用於平常大小的LOGO。
120*90 這類規格用於大型LOGO。

頁面潤飾圖片處置懲罰

圖片經由優化以加速下載的速率,有較佳的視覺空間結果，用圖要與頁面作風、頁面內容符合；製造優美，細節處置懲罰妥當。

JavaScript謄寫類型

謄寫過程當中, 每行代碼完畢必需有分號; 準繩上一切功用均依據XXX項目需求原生開闢, 以防備網上down下來的代碼形成的代碼污染(沉冗代碼 || 與現有代碼爭執 || …);
庫引入: 準繩上僅引入jQuery庫, 若需引入第三方庫, 須與團隊其他職員討論決定;
變量定名: 駝峰式定名. 原生JavaScript變量請求是純英筆墨母, 首字母須小寫, 如iTaoLun; jQuery變量請求首字符為_, 其他與原生JavaScript 劃定規矩雷同, 如: _iTaoLun; 另, 請求變量集合聲明, 防備全局變量.
類定名: 首字母大寫, 駝峰式定名. 如 ITaoLun;
函數定名: 首字母小寫駝峰式定名. 如iTaoLun();
定名語義化, 只管應用英文單詞或其縮寫;
只管防備應用存在兼容性及斲喪資本的要領或屬性, 比方eval() & innerText;
後期優化中, JavaScript非詮釋類中筆墨符須轉換成unicode編碼應用, 以防備編碼錯誤時亂碼顯現;
代碼構造清楚明了, 加適當詮釋. 進步函數重用率;
注意與html星散, 減小reflow, 注意機能.

圖片類型

一切頁面元素類圖片均放入img文件夾, 測試用圖片放於img/demoimg文件夾;
圖片花樣僅限於gif || png || jpg;
定名悉數用小寫英筆墨母 || 数字 || _ 的組合，个中不得包含漢字 || 空格 || 特別字符；只管用易懂的辭彙, 便於團隊其他成員邃曉; 另, 定名分頭尾兩部份, 用下劃線離隔, 比方ad_left01.gif || btn_submit.gif;
在保證視覺結果的情況下挑選最小的圖片花樣與圖片質量, 以削減加載時候;
只管防備應用半通明的png圖片(若應用, 請參考css類型相干申明);
應用css sprite手藝集合小的背景圖或圖標, 減小頁面http請求, 但注意, 請務必在對應的sprite psd源圖中划參考線, 並保留至img目次下.

詮釋類型

html詮釋: 詮釋花樣 , ‘–‘只能在詮釋的委曲位置,不可置入詮釋筆墨地區;
css詮釋: 詮釋花樣 /*這兒是詮釋*/;
JavaScript詮釋, 單行詮釋應用//這兒是單行詮釋 ,多行詮釋應用 /* 這兒有多行詮釋 */;

閱讀器兼容性 CSS hack

一、標識區分：
區分IE6,IE7,IE8,FF。

IE都能辨認*; 規範閱讀器(如FF)不能辨認*；
IE6能辨認*，但不能辨認!important; IE6在款式前面加_
IE7能辨認*，也能辨認!important;
IE8能辨認\9，比方：background:red \9;
firefox不能辨認*，但能辨認!important;

1．IE6和firefox的區分：
background:orange;*background:blue;
意義就是火狐閱讀器的背景色彩是橙色,而IE閱讀器的背景色是藍色.

2.IE6和IE7的區分：
background:green !important;background:blue;
意義指的是:IE7的背景色彩是綠色,IE6的背景色彩是藍色
3.IE7和FF的區分：
background:orange; *background:green;
意義指的是:火狐閱讀器的背景色彩是橙色,而IE7的背景色彩是綠色
4.FF，IE7，IE6的區分：
background:orange;*background:green !important;*background:blue;
意義是火狐閱讀器的的背景橙色,IE7閱讀器的背景色彩是綠色,而IE6閱讀器的色彩是藍色.

個人主頁: https://www.keyup.top

    原文作者：luozz
    原文地址: https://segmentfault.com/a/1190000014317104
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。