服務器軟件:Apache、IIS
瀏覽器是一個翻譯官,是一個解釋器。瀏覽器可以翻譯有HTML、CSS、JavaScript。
服務器端腳本程序:PHP、 .net、JSP、c#等
.php文件要由PHP腳本引擎來進行處理。
網站前臺(客戶端) 網站后臺(服務器端) 數據庫
HTML(結構) PHP MySQL
CSS JSP Oracle
JavaScript .net SqlServer
HTML結構:主要來說明,哪個地方是標題,哪個地方是段落,哪個地方是表格,哪個地方是表單。
CSS表現(格式):主要功能是,給相對應的HTML標記定義各種各樣的格式。
JavaScript行為:主要用于與計算機網頁進行交互(交流)。
塊元素和行內元素
塊元素:寬度單獨占一個通欄寬,塊元素的前臺的其它元素,都要另起一行來排。
比如:<p> <pre> <hr> <h1>……<h6> <ul> <ol> <li>
DIV和SPAN就是一個容器,容器中可以存放任何可以存放在<body>中的內容或標記。
行內元素:行內元素沒有寬度和高度的概念,也就是說通過CSS無法給行內元素增加寬和高。多個行內元素會放在同一行,不會另起一行來排版。
Direction:滾動的方向,取值:left、right、up、down
Behavior:滾動的方式,取值:scroll(滾動)、 alternate(彈動)、 slide(滾動一次)
Width:滾動的區域寬度,取值:px或%
Height;滾動的區域高度
bgColor:背景顏色,如:bgcolor=“#FF0000” bgcolor=“rgb(255,0,0)”
scrollAmount:滾動步長值,一步走多遠,值越大,走的越快
scrollDelay:兩次滾動的間隔時間,以毫秒為單位 1秒=1000毫秒
進制,就是一種進位方法。
10進制:有10個基本數,0、1、2、3、4、5、6、7、8、9,運算規則是:逢十進一
例如:9 10 19 20 29 30
2進制:有2個基本數,0、 1,運算規則是:逢二進一。比如:(10)2 11 100 101 110
8進制:有8個基本數,0、1、2、3、4、5、6、7,運算規則是:逢八進一。比如:(17)8 20 21 26 27 30
因為二進制太長,不方便記憶,因此小型機引入了八進制,八進制可以很好的反應二進制。
因此,一個八進制數,用3位二進制數來表示。
基R=2^3
16進制:有16個基本數,0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F,運算規則是:逢16進一
比如:EF F0 F1 F2 FE FF (100)16
16進制的一位對應4位二進制。基R=2^4
10進制 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
2進制 | 1 | 10 | 11 | 100 | 101 | 110 | 111 | 1000 | 1001 | 1010 | 1011 | 1100 | |||||||
8進制 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | |||
16進制 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F | 10 | 11 | 12 | 13 |
十進制轉成二進制
分為整數部分和小數部分,分別轉換。比如:將(10.125)10轉成二進制? 1010.001
(1)整數部分轉成二進制:除2取余法。每次將整數除以2,取余數,一直除下去,直到整數部分(商)為0。最后讀數時,從下往上讀取。
第N次 | 整數10 | 商 | 余數 | ||
第1次 | 10/2 | 5 | 0 | ||
第2次 | 5/2 | 2 | 1 | ||
第3次 | 2/2 | 1 | 0 | ||
第4次 | 1/2 | 0 | 1 | 最后結果為:1010 | |
(2)小數部分轉成二進制:乘2除整法。每次將小數部分乘以2,取整數,一直乘下去,直到小數部分為0。最后讀數時,從上往下讀取。
第N次 | 小數0.125 | 積 | 整數 | ||
第1次 | 0.125*2 | 0.25 | 0 | ||
第2次 | 0.25*2 | 0.5 | 0 | ||
第3次 | 0.5*2 | 1.0 | 1 | ||
最后結果為:001 | |||||
二進制轉成十進制
不分整數部分和小數部分,按權相加法。換句話說:二進制上的每一位,乘以所在位權(也就是2的幾次方),最后將各個位的乘相加,就能得到十進制。
1010.001 = 1*2^3 + 0*2^2 + 1*2^1 + 0*2^0 + 0*2^-1 + 0*2^-2 + 1*2^-3 = 8+2+ 1/8 = 10+0.125 = 10.125
計算機只能二進制,比如:a-z、A-Z、0-9、標點符號,計算機都不能直接識別。每個人都可以來約定一套字符編碼(比如:a用二進制100表示,b用二進制101表示,c用二進制的110表示等)
計算機是由美國人發明的,美國標準化局同樣制定了一套統一的編碼,叫ASCII碼。
ASCII碼
ASCII編碼用7位或8位(1個字節)二進制來表示,共可以表示128或256個字符。包括:大小寫字母、數字、標點符號、圖形符號等。
每個國家都想讓計算機能顯示或處理本國的語言,都對ASCII碼進行了擴展。
在中國(簡體字),ANSI編碼是指GB2312或GBK。
在臺灣(繁體字),ANSI編碼是指BIG5
在日本,ANSI編碼是指JIS。
……
注意:ANSI編碼是跟隨操作一齊安裝的,也就是,安裝了中文操作系統后,它的默認編碼就是GB2312。
GB2312是中國標準化局,在1980年制定的一套顯示簡體中文的編碼。
GB2312是用2個字節來顯示。共可以表示2^16=256*256=65536個字符。
GB2312共保存了6763個常用漢字,一級漢字3700個。
GBK編碼
對GB2312進行了擴充,可以顯示人名、古漢語中的一些罕見字等。
GBK也是用2個字節來表示。共存儲了2.3萬個左右的中文字符。
GBK的范圍,要比GB2312大的多。
BIG5編碼
BIG5用于臺灣、香港、澳門地區的繁體中文編碼。
Unicode編碼
用4個字節表示字符,共可以表示42個億個字符。
Unicode編碼可以顯示世界上所有國家的語言。
缺點:文件龐大,效率不高,不利于推廣。
UTF-8統一格式轉換
它會自動根據不同的字符,來選擇不同編碼長度。
<meta>標記是設置一些網頁文件頭方面的信息。主要包括:網頁編碼或字符集設置、網頁關鍵字、網頁描述、網頁刷新跳轉等。相當于一封信的信封,信封有地址、郵編等重要。
<head>標記中的內容在瀏覽器中,是不可見的。
主要用兩個常用的屬性:
http-equiv:主要設置一些控制信息,屬性值是固定的。比如:content-type
name:一般用于設置網頁描述信息,像關鍵字、網頁描述、網頁版權、作者等,屬性值是固定的。比如:keywords
content:是具體的參數或內容,與http-equiv和name屬性進行對應。
(1)設置網頁的字符集或編碼
<meta http-equiv=“content-type” content=“text/html;charset=GBK”>
(2)設置網頁刷新或跳轉
<meta http-equiv=“refresh” content=“5”> 表示每隔5秒鐘,刷新網頁
<meta http-equiv=“refresh” content=“5;url=http://www.baidu.com”> 表示5秒鐘后,跳轉到百度網
注意:刷新功能相當于瀏覽器中的刷新按鈕
(3)設置網頁關鍵字(SEO優化),給搜索引擎(搜索機器人)使用
<meta name=“keywords” content=“程序開發,平面設置,空間域名,網站維護”>
(4)設置網頁描述信息(SEO優化)
<meta name=“description” content=“廣州網站建設思優網絡公司,提供專業廣州網站制作及網站推廣相結合的建站方案,由專業廣州網站設計人員結合搜索引擎優化經驗為您設計網站;廣州網頁設計:020-87537332”>
XHTML是可擴展超文本標注語言,XHTML是更純凈的HTML,語法更嚴格。
XHTML的目的是為了取代HTML4.01。
XHTML是W3C的一個標準或規范。
編寫XHTML的規范,與HTML編寫有何不同?
1)所有的標記都必須被關閉。比如:<br>轉換<br /> <hr>轉換后 <hr />
2)XHTML要求所有的標記名稱必須小寫。比如:<meta><table><img><font>
3)XHTML要求所有的屬性名必須小寫,屬性值必須加引號。
4)XHTML要求所有的屬性必須有值。
<hr noshade=“noshade” />
<input type=“radio” checked=“checked” />
5)所有的標記要順序嵌套,不能交叉嵌套;
6)XHTML文件,必須要有DTD文檔類型定義;
DTD(Document Type Define)文檔類型定義
(1)嚴格型Strict
要求HTML代中,不能存在任何的表現,用CSS去代替。比如:<font>、bgcolor、background等
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(2)過渡型transitional
可以使用任何表現的標記或屬性。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(3)框架型Frameset
制作框架網頁時使用的一種類型,框架主要用于網站的后臺管理。
框架技術:是將一個瀏覽器窗口劃分成不同區域,每個區域(窗口)都可以顯示一個獨立的網頁。(HTML第四天單獨講框架,現在作個了解)
W3C是萬維網聯盟,是一個國際性的非盈利性組織,是WEB領域最具權威性的組織。已經制定多達200多項的標準。
比如:XHTML、CSS、ECMAScript(JavaScript)、DOM、 XML等。
超級鏈接的功能:就是點擊某個鏈接,可以跳轉到目標頁面或文件。
超級鏈接的分類:
(1)按內容分類:文本鏈接、圖片鏈接、多媒體等
(2)按URL分類:相對URL、絕對URL、錨點
URL,指網址或路徑
URL(Uniform Resource Locator,統一資源定位器),也就是指互聯網地址。
http://www.sina.com.cn/about/index.html
第一個部分:協議,指訪問什么類型的服務器,如:http://、FTP://、news://
第二個部分:主機名或主機的IP地址。如:www.sina.com.cn
第三個部分:文件夾名,如:about
第四個部分:文件名,如:index.html
格式:<a 屬性=“屬性值”>新浪網</a>
常用的屬性:
Href:指鏈接的目標文件或網址。比如:href=“http://www.toutiao.com”
Target:指目標文件的打開方式。
_blank:在新窗口中,來打開目標文件;
_self:在當前窗口中,來打開目標文件;
_top:在最頂層窗口中,來打開目標文件(在框架中講);
_parent:在父窗口中,來打開目標文件(在框架中講)
Name:設置錨點的名稱。錨點是指:鏈接到同一個頁面的不同部分
舉例:<a href=http://www.toutiao.com target=“_blank”>頭條號</a>
絕對URL:它總是以file:///協議開頭,去訪問目標文件。
如果將當前文件移動到其它地方,這個絕對URL路徑不需要修改。
絕對URL,只需要確定目標文件的路徑即可,與當前文件位置無關。
例如:<a href=“file:///E:/itcast/20140510/lesson/day2/4.html”>本地絕對路徑</a>
相對URL:要確定當前文件與目標文件的關系。
關系分為三種:
平級關系:直接寫目標文件的文件名即可。
下級關系:也就是目標文件所在的文件夾與當前文件是平級關系,當前文件與目標文件是上下級關系。
上級關系:目標文件位于上一層級。
../代表上一層文件夾
../../代表上二層文件夾
../../images/01.jpg
提示:在制作網站時,一般使用的都是相對路徑。
(3)下載鏈接:如果鏈接到的文件,網頁不能直接執行的話,都會出現下載提示。
瀏覽器可以直接執行的文件:.gif、.jpg、.png、html、.htm、.mp3、.swf等
(4)郵箱鏈接:mailto:beijing2000@126.com
第一步:定義一個錨點或標記 <a name=“top”></a>
第二步:鏈接到錨點或標記 <a href=“#top”>返回頂部</a>
<a href=“intro.html#bottom”>鏈接到intro.html的底部</a>
格式:<img 屬性=“屬性值” />
常用的屬性:
Src:指圖片的URL,可以是相對路徑,也可以是絕對路徑。
Width:指圖片的寬度,單位px或%
Height:指圖片的高度
Align:圖片的水平對齊方式,取值:left center right ,left或right可以實現圖文混排
Alt:如果圖片不存在時,顯示的提示信息
Hspace:圖片左右的距離
Vspace:圖片上下的距離
舉例:<img src=“images/01.gif” width=“400” height=“300” alt=“寶寶圖片” />
如果保證圖片在調整過程中不變形(等比例縮放):只需要設置width和height其中一個即可,另一個會自動縮放。
ue中WANGEDITOR完美解決Word文檔復制粘貼難題
在Vue項目中集成WANGEDITOR富文本編輯器時,我們經常會遇到一個問題:從Word文檔中復制的內容粘貼到編輯器后,格式混亂、圖片無法顯示。這不僅影響了用戶體驗,也降低了工作效率。然而,經過深入研究和開發,我們找到了一種高效、便捷的解決方案,讓Word文檔的復制粘貼在WANGEDITOR中變得輕松愉快。
我們的解決方案的核心在于對WANGEDITOR進行了深度定制和優化。現在,當你在Word中編輯好一篇文章,無論是文字樣式、字體大小、顏色,還是圖片和圖文混排,只需一鍵復制,然后在WANGEDITOR中粘貼,就能完美呈現原樣。這得益于我們對WANGEDITOR粘貼功能的精細調整和優化,使其能夠準確識別并保留Word文檔的原始格式和樣式。
更值得一提的是,我們還實現了圖片自動上傳功能。這是因為在傳統的編輯器中,粘貼Word文檔中的圖片通常需要手動上傳和處理,過程繁瑣且易出錯。而我們的解決方案則徹底改變了這一狀況。現在,當你從Word中復制帶有圖片的內容時,WANGEDITOR會自動檢測并將圖片上傳到服務器。你無需進行任何額外操作,只需稍等片刻,就能看到圖片在編輯器中自動顯示。
而且,在圖片上傳過程中,我們還提供了豐富的上傳信息展示。你可以看到每張圖片的上傳進度、已上傳的大小、剩余時間以及上傳速度。這不僅讓你對上傳過程有了更直觀的了解,也讓你能夠更好地掌控整個上傳流程。
當圖片上傳完成后,WANGEDITOR會自動將文字和圖片的HTML代碼添加到編輯器中。這意味著你無需再進行任何手動編輯或調整,就能直接看到粘貼后的效果。這不僅大大提高了工作效率,也確保了內容的完整性和準確性。
此外,我們的解決方案還具有良好的兼容性和擴展性。無論是使用Vue2還是Vue3,無論是后端采用PHP、JSP、ASP還是ASP.NET、SpringBoot等技術棧,都能輕松集成并享受這一功能帶來的便利。這使得我們的解決方案能夠適應各種復雜的項目需求和技術環境。
在實際應用中,這一解決方案已經得到了廣泛的驗證和認可。許多企業和個人開發者都表示,通過使用我們的解決方案,他們在發布新聞、文章等內容時變得更加高效和便捷。他們不再需要花費大量時間和精力去處理Word文檔的格式和圖片問題,而是可以專注于內容的創作和編輯。
同時,我們也提供了詳細的安裝配置指南和示例代碼,幫助你快速上手并集成到項目中。無論是復制插件文件、安裝jquery,還是導入組件并初始化WordPaster組件,我們都為你提供了清晰的步驟和說明。這使得整個集成過程變得簡單而高效。
此外,我們還提供了多種版本的選擇,以滿足不同用戶的需求和預算。無論是個人開發者還是大型企業,都能找到適合自己的版本。我們致力于為用戶提供最優質、最便捷的服務和支持。
綜上所述,通過深度定制和優化WANGEDITOR的粘貼功能,我們成功解決了Vue中使用WANGEDITOR時遇到的Word文檔復制粘貼問題。我們的解決方案不僅提高了用戶的工作效率,還提升了用戶體驗,使得在Vue中使用WANGEDITOR變得更加輕松和愉快。如果你也遇到了類似的問題,不妨試試我們的解決方案,相信它會給你帶來意想不到的驚喜和收獲。
、規范目的
1.1 概述
為提高團隊協作效率, 便于后臺人員添加功能及前端后期優化維護, 輸出高質量的文檔, 特制訂此文檔. 本規范文檔一經確認, 前端開發人員必須按本文檔規范進行前臺頁面開發
二、文件規范
2.1 文件命名規則
文件名稱統一用小寫的英文字母、數字和下劃線的組合,其中不得包含漢字、空格和特殊字符;
命名原則的指導思想
一:是使得你自己和工作組的每一個成員能夠方便的理解每一個文件的意義
二:是當我們在文件夾中使用“按名稱排例”的命令時,同一種大類的文件能夠排列在一起,以便我們查找、修改、替換、計算負載量等等操作。
a. HTML的命名原則
引文件統一使用index.htm index.html index.asp文件名(小寫)
各子頁命名的原則首先應該以欄目名的英語翻譯取單一單詞為名稱。例如:
關于我們 \ aboutus
信息反饋 \ feedback
產 品 \ product
b. 圖片的命名原則
圖片的名稱分為頭尾兩部分,用下劃線隔開,頭部分表示此圖片的大類性質放置在頁面頂部的廣告、裝飾圖案等長方形的圖片取名: banner標志性的圖片取名為: logo在頁面上位置不固定并且帶有鏈接的小圖片我們取名為 button
在頁面上某一個位置連續出現,性質相同的鏈接欄目的圖片我們取名: menu
裝飾用的照片我們取名: pic
不帶鏈接表示標題的圖片我們取名: title
范例:banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg
鼠標感應效果圖片命名規范為"圖片名+_+on/off"。
例如:menu1_on.gif menu1_off.gif
c. javascript的命名原則
例如:廣告條的javascript文件名為 ad.js 彈出窗口的javascript文件名為 pop.js
d. 動態語言文件命名原則
以性質_描述,描述可以有多個單詞,用“_”隔開,性質一般是該頁面得概要。
范例:register_form.asp register_post.asp topic_lock.asp
2.2 文件存放位置規范
_Root | ||
cn | 存放中文HTML文件 | |
en | 存放英文HTML文件 | |
flash | 存放Flash文件 | |
images | 存放圖片文件 | |
imagestudio | 存放PSD源文件 | |
flashstudio | 存放flash源文件 | |
inc | 存放include文件 | |
library | 存放DW庫文件 | |
media | 存放多媒體文件 | |
project | 存放工程項目資料 | |
temp | 存放客戶原始資料 | |
js | 存放JavaScript腳本 | |
css | 存放CSS文件 |
2.3 CSS 書寫規范
基本原則:
CSS樣式可細分為3類:自定義樣式、重新定義HTML樣式、鏈接狀態樣式。
1. 樣式為設計師自定義的新 CSS 樣式,影響被使用本樣式的區域,用于完成網頁中局部的樣式設定。樣式名 “.”+“相應樣式效果描述的單詞或縮寫”例:“ .shadow ”
文字樣式樣式名“.no”+“字號”+“行距”+“顏色縮寫”例:“ .no12 ” 、“ .no12-24 ”
2. 義HTML樣式為設計師重新定義已有的HTML標簽樣式,影響全部的被設定標簽樣式,用于統一網頁中某一標簽的樣式定義。樣式名“HTML標簽”例:hr { border: 1px dotted #333333 }
3. 態樣式為設計師對鏈接不同狀態設定特殊樣式,影響被使用本樣式區域中的鏈接。
該樣式寫法有2種: a.nav:link nav.a:link 第一種只能修飾<a>標簽中;第二種可以修飾所有包含有<a>標簽的其他標簽。
頁面內的樣式加載必須用鏈接方式<link rel="stylesheet" type="text/css" href="style/style.css">
注意細則:
1. 協作開發及分工: i會根據各個模塊, 同時根據頁面相似程序, 事先寫好大體框架文件, 分配給前端人員實現內部結構&表現&行為; 共用css文件base.css由i書寫, 協作開發過程中, 每個頁面請務必都要引入, 此文件包含reset及頭部底部樣式, 此文件不可隨意修改;
2. class與id的使用: id是唯一的并是父級的, class是可以重復的并是子級的, 所以id僅使用在大的模塊上, class可用在重復使用率高及子級中; id原則上都是由我分發框架文件時命名的, 為JavaScript預留鉤子的除外;
3. 為JavaScript預留鉤子的命名, 請以 js_ 起始, 比如: js_hide, js_show;
4. class與id命名: 大的框架命名比如header/footer/wrapper/left/right之類的在2中由i統一命名.其他樣式名稱由 小寫英文 & 數字 & _ 來組合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 盡量使用簡易的單詞組合; 總之, 命名要語義化, 簡明化.
5. 規避class與id命名(此條重要, 若有不明白請及時與i溝通):
a, 通過從屬寫法規避, 示例見d;
b, 取父級元素id/class命名部分命名, 示例見d;
c, 重復使用率高的命名, 請以自己代號加下劃線起始, 比如i_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{.......}
6. 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-vlign、cursor、z-index(層疊順序) 、zoom等.我所列出的這些屬性只是最常用到的, 并不代表全部;
7. 書寫代碼前, 考慮并提高樣式重復使用率;
8. 充分利用html自身屬性及樣式繼承原理減少代碼量, 比如:
<ul class="list"><li>這兒是標題列表<span>2010-09-15</span></ul>
定義ul.list li{position:relative} ul.list li span{position:absolute; right:0}
即可實現日期居右顯示
9. 樣式表中中文字體名, 請務必轉碼成unicode碼, 以避免編碼錯誤時亂碼;
10. 背景圖片請盡可能使用sprite技術, 減小http請求, 考慮到多人協作開發, sprite按模塊制作;
11. 使用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文件中我會初始化表格樣式)
12. 杜絕使用<meta http-equiv="X-UA-Compatible" content="IE=7" /> 兼容ie8;
13. 用png圖片做圖片時, 要求圖片格式為png-8格式,若png-8實在影響圖片質量或其中有半透明效果, 請為ie6單獨定義背景:
background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);
14. 避免兼容性屬性的使用, 比如text-shadow || css3的相關屬性;
15. 減少使用影響性能的屬性, 比如position:absolute || float ;
16. 必須為大區塊樣式添加注釋, 小區塊適量注釋;
17. 代碼縮進與格式: 建議單行書寫, 可根據自身習慣, 后期優化i會統一處理;
命名規則:
頭: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的命名:
(1)頁面結構
容器: container
頁頭:header
內容:content/container
頁面主體:main
頁尾:footer
導航:nav
側欄:sidebar
欄目:column
頁面外圍控制整體布局寬度:wrapper
左右中:left right center
(2)導航
導航:nav
主導航:mainbav
子導航:subnav
頂導航:topnav
邊導航:sidebar
左導航:leftsidebar
右導航:rightsidebar
菜單:menu
子菜單:submenu
標題: title
摘要: summary
(3)功能
標志: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 "B8BF53",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;}
重定義的最先,偽類其次,自定義最后,便于自己和他人閱讀!
不同瀏覽器上字號保持一致,字號建議用點數pt和像素px來定義,pt一般使用中文宋體的9pt 和11pt,px一般使用中文宋體12px 和14.7px 這是經過優化的字號,黑體字或者宋體字加粗時,一般選用11pt 和14.7px 的字號比較合適。中英文混排時,我們盡可能的將英文和數字定義為verdana 和arial 兩種字體。
2.4 html 書寫規范
1. 網頁制作細節 ---- head區代碼規范
head區是指HTML代碼的<head>和</head>之間的內容。
必須加入的標簽
a) 公司版權注釋 <!--- The site is designed by EHM,Inc 07/2005 --->
b) 網頁顯示字符集
簡體中文:<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">
c) 網頁制作者信息 <META name="author" content="webmaster@maketown.com">
d) 網站簡介 <META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">
e) 搜索關鍵字 <META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">
f) 網頁的css規范 <LINK href="../css/style.css" rel="stylesheet" type="text/css">
g) 網頁標題 <title>xxxxxxxxxxxxxxxxxx</title>
可以選擇加入的標簽
a) 設定網頁的到期時間。一旦網頁過期,必須到服務器上重新調閱。
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
b) 禁止瀏覽器從本地機的緩存中調閱頁面內容。
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
c) 用來防止別人在框架里調用你的頁面。
<META HTTP-EQUIV="Window-target" CONTENT="_top">
d) 自動跳轉。
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.yahoo.com"> 5指時間停留5秒
e) 網頁搜索機器人向導。用來告訴搜索機器人哪些頁面需要索引,哪些頁面不需要索引。
<META NAME="robots" CONTENT="none">
CONTENT的參數有all,none,index,noindex,follow,nofollow。默認是all。
f) 收藏夾圖標 <link rel = "Shortcut Icon" href="favicon.ico">
g) 所有的javascript的調用盡量采取外部調用.
<SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js"></SCRIPT>
h) 附<body>標簽:
<body>標簽不屬于head區,這里強調一下,為了保證瀏覽器的兼容性,必須設置頁面背景<body bgcolor="#FFFFFF">
2. 網頁制作細節 ---- 字體
1. 在設定字體樣式時對于文字字號樣式和行間距應必須使用CSS樣式表。禁止在頁面中出現 <font size=?> 標記。
2.在網頁中中文應首選使用宋體。英文和數字首選使用verdana 和arial 兩種字體。一般使用中文宋體的9pt 和11pt 或12px 和14.7px 這是經過優化的字號,黑體字或者宋體字加粗時,一般選用11pt 和14.7px 的字號比較合適。
3. 為了最大程度的發揮瀏覽器自動排版的功能,在一段完整的文字中請盡量不要使用<br> 來人工干預分段。
4.不同語種的文字之間應該有一個半角空格,但避頭的符號之前和避尾的符號之后除外,漢字之間的標點要用全角標點,英文字母和數字周圍的括號應該使用半角括號。
5. 請不要在網頁中連續出現多于一個的 也盡量少使用全角空格(英文字符集下,全角空格會變成亂碼),空白應該盡量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來實現。
6. 行距建議用百分比來定義,常用的兩個行距的值是line-height:120%/150%.
7. 排版中我們經常會遇到需要進行首行縮進的處理,不要使用 或者全角空格來達到效果,規范的做法是在樣式表中定義 p { text-indent: 2em; } 然后給每一段加上 <p> 標記,注意,一般情況下,請不要省略 </p> 結束標記 。
3. 網頁制作細節 ---- 鏈接
1. 網站中的鏈接路徑全部采用相對路徑,一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫全名,如我們不必這樣:<a href=”aboutus/index.htm”> 而應該這樣:<a href=”aboutus/”>,所有內頁指向首頁的鏈接寫成<a href=”/”>
2. 在瀏覽器里,當我們點擊空鏈接時,它會自動將當前頁面重置到首端,從而影響用戶正常的閱讀內容,我們用代碼“javascript:void(null)”代替原來的“#”標記
4. 網頁制作細節 ---- 表格
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>標記,以便能夠使這個大表格分塊顯示
5. 網頁制作細節 ---- 下載速度
首頁Flash 網頁大小應限定在 200K 以下,盡可能的使用矢量圖形和Action來減小動畫大小。非首頁靜態頁面含圖片大小應限定在 70K 左右,盡可能的使用背景顏色替換大塊同色圖片。
6. 網頁制作細節 ---- include
asp標準寫法 <!--#include file="inc/index_top.asp" -->
jsp 標準寫法 <%@ include file="../inc/index_top..jsp" %>
7. 網頁制作細節 ---- Alt和Title
都是提示性語言標簽,請注意它們之間的區別。
在我們瀏覽網頁時,當鼠標停留在圖片對象或文字鏈接上時,在鼠標的右下角有時會出現一個提示信息框。對目標進行一定的注釋說明。在一些場合,它的作用是很重要的。
alt 用來給圖片來提示的。Title用來給鏈接文字或普通文字提示的。
用法如下:
<p Title="給鏈接文字提示">文字</p>
<a href="#" Title="給鏈接文字提示">文字</a>
<img src="圖片.gif" alt="給圖片提示">
8. 網頁制作細節 ---- 緩存
網頁不會被緩存
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"
9. 網頁制作細節 ---- 瀏覽器兼容性
創建站點時,應該明白訪問者可能使用各種 Web 瀏覽器。在已知的其他設計限制下,盡可能將站點設計為具有最大的瀏覽器兼容性。
目前使用的 Web 瀏覽器有二十多種,大多數已發行了多個版本。即使您只針對使用 Netscape Navigator 和 Microsoft Internet Explorer 的大多數 Web 用戶,但您應明確并不是每個人都在使用這兩種瀏覽器的最新版本。
您的站點越復雜(在布局、動畫、多媒體內容和交互方面),跨瀏覽器兼容的可能性就越小。例如,并非所有的瀏覽器都可以運行JavaScript。不使用特殊字符的純文本頁面或許能夠在任何瀏覽器中正確顯示,但比起有效地使用圖形、布局和交互的頁面,這樣的頁面在美感上可能要差得多。所以,應盡量在最佳效果設計和最大瀏覽器兼容性設計之間取得平衡。
所有的HTML 標簽的屬性都要用單引號或者雙引號括起,即我們應該寫 <a href=”url”> 而不 是 <a href=url>.
10. 圖片處理細節 ---- banner
全尺寸banner為468X60px,半尺寸banner為234X60px,小banner為88X31px。
另外120X90,120X60也是小圖標的標準尺寸。全尺寸banner不超過14K。
普遍的banner尺寸760X100,750X120,468X60,468X95,728X90,585X140
次級頁的pip尺寸360X300,336X280
游標:100X100或120X120
11. 圖片處理細節 ---- LOGO的國際標準規范
為了便于INTERNET上信息的傳播,一個統一的國際標準是需要的。實際上已經有了這樣的一整套標準。其中關于網站的LOGO,目前有三種規格:
88*31 這是互聯網上最普遍的LOGO規格。
120*60 這種規格用于一般大小的LOGO。
120*90 這種規格用于大型LOGO。
12. 圖片處理細節 ---- 頁面修飾圖片處理
圖片經過優化以加快下載的速度,有較佳的視覺空間效果,用圖要與頁面風格、頁面內容相符;制作精美,細節處理得當。
2.5 JavaScript書寫規范
1. 書寫過程中, 每行代碼結束必須有分號; 原則上所有功能均根據XXX項目需求原生開發, 以避免網上down下來的代碼造成的代碼污染(沉冗代碼 || 與現有代碼沖突 || ...);
2. 庫引入: 原則上僅引入jQuery庫, 若需引入第三方庫, 須與團隊其他人員討論決定;
3. 變量命名: 駝峰式命名. 原生JavaScript變量要求是純英文字母, 首字母須小寫, 如iTaoLun; jQuery變量要求首字符為'_', 其他與原生JavaScript 規則相同, 如: _iTaoLun; 另, 要求變量集中聲明, 避免全局變量.
4. 類命名: 首字母大寫, 駝峰式命名. 如 ITaoLun;
5. 函數命名: 首字母小寫駝峰式命名. 如iTaoLun();
6. 命名語義化, 盡可能利用英文單詞或其縮寫;
7. 盡量避免使用存在兼容性及消耗資源的方法或屬性, 比如eval() & innerText;
8. 后期優化中, JavaScript非注釋類中文字符須轉換成unicode編碼使用, 以避免編碼錯誤時亂碼顯示;
9. 代碼結構明了, 加適量注釋. 提高函數重用率;
10. 注重與html分離, 減小reflow, 注重性能.
2.6 圖片規范
1. 所有頁面元素類圖片均放入img文件夾, 測試用圖片放于img/demoimg文件夾;
2. 圖片格式僅限于gif || png || jpg;
3. 命名全部用小寫英文字母 || 數字 || _ 的組合,其中不得包含漢字 || 空格 || 特殊字符;盡量用易懂的詞匯, 便于團隊其他成員理解; 另, 命名分頭尾兩部分, 用下劃線隔開, 比如ad_left01.gif || btn_submit.gif;
4. 在保證視覺效果的情況下選擇最小的圖片格式與圖片質量, 以減少加載時間;
5. 盡量避免使用半透明的png圖片(若使用, 請參考css規范相關說明);
6. 運用css sprite技術集中小的背景圖或圖標, 減小頁面http請求, 但注意, 請務必在對應的sprite psd源圖中劃參考線, 并保存至img目錄下.
2.7 注釋規范
1. html注釋: 注釋格式 <!--這兒是注釋-->, '--'只能在注釋的始末位置,不可置入注釋文字區域;
2. css注釋: 注釋格式 /*這兒是注釋*/;
3. JavaScript注釋, 單行注釋使用'//這兒是單行注釋' ,多行注釋使用 /* 這兒有多行注釋 */;
2.8 瀏覽器兼容性 CSS hack
一、標識區別:
區別IE6,IE7,IE8,FF。
1. IE都能識別* ; 標準瀏覽器(如FF)不能識別*;
2. IE6能識別*,但不能識別 !important; IE6在樣式前面加_
3. IE7能識別*,也能識別!important;
4. IE8能識別\ 9 例如:background:red ;
5. 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瀏覽器的顏色是藍色.
二、實踐建議
(1). 開發平臺的選擇
在 Firefox 上編寫CSS, 同時兼容其他瀏覽器的. 這樣做肯定會比在 IE 做好再到別的瀏覽器兼容來得容易, 因為 IE 對老標準支持還是很不錯的, 而 IE 的一些特有功能人家卻不支持. 所以推薦以 Firefox 結合 Firebug 擴展作為平臺。
(2). CSS Hack 的順序
使用 Firefox 作為平臺, 只要代碼寫得夠標準, 其實要 Hack 的地方不會很多的, IE 以外的瀏覽器幾乎都不會有問題, 所以可以暫時忽略,
順序如下:Firefox -> IE6 -> IE7 -> 其他
(3). Hack 的方法
說到方法有兩種, 一種是在不同文件中處理, 另一種則是在同一個文件中處理. 其實作用是相同的, 只是出發點不一樣而已.
1. 同一文件中處理.
如: id="bgcolor"的控件要在 IE6中顯示藍色, IE7中顯示綠色, Firefox等其他瀏覽器中顯示紅色。
IE6不認 !important,也不認 *+html.所以 IE6只能是 blue.
IE7認 !important,也認 *+html,優先度: (*+html + !important) > !important > +html. IE7可以是 red, blue和 green,但 green的優先度最高.
Firefox和其他瀏覽器都認 !important. !important優先, Firefox可以是 red和 blue,但 red優先度高.上述的優先符號均是 CSS3標準允許的,其他瀏覽器也還有其他的 Hack方法,但我迄今還沒遇到過 Firefox正常, IE以外的其他瀏覽器不正常的情況,所以無可分享.只要代碼規范,相信這種情況的發生應該是很罕見 (JavaScript除外).
2. 不同文件中處理.
為什么同一文件中可以處理還要寫在多個文件里面針對不同的瀏覽器?這是為了欺騙 W3C的驗證工具,其實只需要兩個文件,一個是針對所有瀏覽器的,一個只為 IE服務.將所有符合 W3C的代碼寫到一個里面去,而一些 IE中必須的,又不能通過 W3C驗證的代碼 (如: cursor:hand;)放到另一個文件中,再用下面的方法導入.
*請認真填寫需求信息,我們會在24小時內與您取得聯系。