Web前端開發(fā)手冊(cè)_第1頁
Web前端開發(fā)手冊(cè)_第2頁
Web前端開發(fā)手冊(cè)_第3頁
Web前端開發(fā)手冊(cè)_第4頁
Web前端開發(fā)手冊(cè)_第5頁
已閱讀5頁，還剩32頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

WEB前端開發(fā)參考手冊(cè)一．概況1.1WEB標(biāo)準(zhǔn)二．實(shí)現(xiàn)WEB標(biāo)準(zhǔn)2.1XHTML、CSS介紹2.2XHTML書寫規(guī)范2.2.1XHTML結(jié)構(gòu)2.2.2標(biāo)簽規(guī)范2.3XHTML慣用標(biāo)簽介紹2.4CSS書寫規(guī)范2.4.1表命名參考2.4.2類/ID命名規(guī)范2.4.3樣式調(diào)用2.4.4樣式簡(jiǎn)寫2.5CSS慣用屬性介紹2.6圖片規(guī)范2.7注釋規(guī)范2.8瀏覽器兼容一．概況1.1WEB標(biāo)準(zhǔn)WEB標(biāo)準(zhǔn)不是一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)集合。網(wǎng)頁主要由三部分組成：結(jié)構(gòu)、表現(xiàn)和行為。對(duì)應(yīng)標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包含XHTML和XML，表現(xiàn)標(biāo)準(zhǔn)語言主要包含CSS，行為標(biāo)準(zhǔn)主要包含對(duì)象模型（如W3CDOM）、ECMAScript等。這些標(biāo)準(zhǔn)大部分由W3C起草和公布，也有一些是其余標(biāo)準(zhǔn)組織制訂標(biāo)準(zhǔn)，比如ECMA（EuropeanComputerManufacturersAssociation）ECMAScript標(biāo)準(zhǔn)。二、實(shí)現(xiàn)WEB標(biāo)準(zhǔn)2.1XHTML、CSS介紹可擴(kuò)展超文本置口號(hào)言（eXtensibleHyperTextMarkupLanguage，XHTML），是一個(gè)置口號(hào)言，表現(xiàn)方式與超文本置口號(hào)言（HTML）類似，不過語法上愈加嚴(yán)格。從繼承關(guān)系上講，HTML是一個(gè)基于標(biāo)準(zhǔn)通用置口號(hào)言（SGML）應(yīng)用，是一個(gè)非常靈活置口號(hào)言，而XHTML則基于可擴(kuò)展置口號(hào)言（XML），XML是SGML一個(gè)子集。XHTML1.0在1月26日成為W3C推薦標(biāo)準(zhǔn)。級(jí)聯(lián)樣式表（CascadingStyleSheet）簡(jiǎn)稱“CSS”，通常又稱為“格調(diào)樣式表（StyleSheet）”，它是用來進(jìn)行網(wǎng)頁格調(diào)設(shè)計(jì)。比如，假如想讓鏈接字未點(diǎn)擊時(shí)是藍(lán)色，當(dāng)鼠標(biāo)移上去后字變成紅色且有下劃線，這就是一個(gè)格調(diào)。經(jīng)過設(shè)置樣式表，能夠統(tǒng)一地控制HTML中各標(biāo)志顯示屬性。級(jí)聯(lián)樣式表能夠使人更能有效地控制網(wǎng)頁外觀。使用級(jí)聯(lián)樣式表，能夠擴(kuò)充精準(zhǔn)指定網(wǎng)頁元素位置，外觀以及創(chuàng)建特殊效果能力。2.2XHTML書寫規(guī)范2.2.1XHTML結(jié)構(gòu)文檔分為head和body兩個(gè)部分。html文檔中在head關(guān)標(biāo)簽后面一定會(huì)跟著body開標(biāo)簽。html開標(biāo)簽下面一定跟著head開標(biāo)簽，body關(guān)標(biāo)簽下面一定是html關(guān)標(biāo)簽，這中間都是不能插入任何東西。head和body在一個(gè)html中有且僅有一個(gè)。在head里面放置內(nèi)容是不會(huì)再頁面里顯示。在頁面中顯示內(nèi)容放在body里。以下：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""><htmlxmlns=""><head>樣式地址、JS地址、樣式等</head><body>瀏覽器能看到內(nèi)容部分</body></html>2.2.2標(biāo)簽規(guī)范標(biāo)簽?zāi)軌蚍譃槌蓪?duì)標(biāo)簽，或者是單標(biāo)簽。成對(duì)標(biāo)簽比如divspanolulliselectoptiontabletrthtddldtddemvarspan等等，而單標(biāo)簽就比較少了比如inputimgbriframe等。完整成對(duì)標(biāo)簽以下：<div>這是一個(gè)快標(biāo)簽</div>或者<ol><li>列表項(xiàng)一</li><li>列表項(xiàng)二</li><li>列表項(xiàng)三</li></ol>；能夠看到每一個(gè)標(biāo)簽都有開標(biāo)前和關(guān)標(biāo)簽組成，內(nèi)容放在開和關(guān)標(biāo)簽之間。而單標(biāo)簽標(biāo)簽應(yīng)該這么寫：<br/><imgsrc="images/1.gif"alt="圖片描述"/><inputtype="button"value="按鈕"/>;像這么單標(biāo)簽，是不可能再嵌套任何內(nèi)容。而我們把斜線(/）放在標(biāo)簽后尖括號(hào)前面，表示標(biāo)簽結(jié)束。這點(diǎn)跟成對(duì)標(biāo)簽有很大區(qū)分。全部標(biāo)簽必須合理嵌套正確嵌套<div><span><var>1111</var></span></div>就像一個(gè)一個(gè)大盒子套了一個(gè)小盒子又套了一個(gè)小盒子，當(dāng)然還能夠繼續(xù)嵌套，看起來十分對(duì)稱。不正確嵌套<div><span><var>1111</var></div></span>這里標(biāo)簽是不對(duì)稱。你沒法一層一層拆開盒子，這就是錯(cuò)誤。2.3XHTML慣用標(biāo)簽介紹1、div標(biāo)簽：塊元素。能夠?qū)⑽臋n分為不一樣部分。能夠使用class和id屬性深入控制頁面表現(xiàn)。div是css布局中使用最多元素。2、p標(biāo)簽：塊元素，表示一個(gè)文本段落，通慣用于換行。3、標(biāo)題標(biāo)簽：塊元素，用來定義文本中各種標(biāo)題。從h1至h6有著嚴(yán)格層級(jí)關(guān)系。而且每個(gè)XHTML上h1元素有且只能使用一次。其中包含一系列元素：h1，h2，h3，h4，h5，h6,其中每個(gè)元素都對(duì)應(yīng)有默認(rèn)字體樣式其代碼以下：<h1>text</h1><h2>text</h2><h3>text</h3><h4>text</h4><h5>text</h5><h6>text</h6>4、ul和li標(biāo)簽：塊元素，無序列表，詳見：5、ol和li標(biāo)簽：塊元素，有序列表，詳見：6、dl、dt、dd標(biāo)簽：塊元素，慣用于生成類表格別表，dt、dd位于dl內(nèi)部。詳見：7、strong標(biāo)簽：內(nèi)聯(lián)元素，使文本以粗體顯示。8、a標(biāo)簽：內(nèi)聯(lián)元素，用于超鏈接(herf屬性)和設(shè)置內(nèi)部文檔書簽(ID或Name屬性)。9、em標(biāo)簽：內(nèi)聯(lián)元素，顯示效果為文本斜體。10、span標(biāo)簽：內(nèi)聯(lián)元素，用來區(qū)分文本中一個(gè)部分。11、br標(biāo)簽：使文本換行。12、img標(biāo)簽：內(nèi)聯(lián)元素，用來插入圖像文件，當(dāng)使用img元素時(shí)候，其alt屬性必須加上，屬性內(nèi)容將在圖片不能加載時(shí)候顯示。13、label標(biāo)簽：觸發(fā)鼠標(biāo)事件，當(dāng)鼠標(biāo)事件作用于該元素時(shí)，也作用于相對(duì)應(yīng)input標(biāo)簽。14、input標(biāo)簽：依照不一樣type屬性值，能夠是文本字段、復(fù)選框、掩碼后文本控件、單項(xiàng)選擇按鈕、按鈕等等。用于獲取提交數(shù)據(jù)。當(dāng)input標(biāo)簽為單項(xiàng)選擇按鈕和復(fù)選框時(shí)，瀏覽器兼容性比較差，需要細(xì)心調(diào)整。15、select和option標(biāo)簽：下拉列表，option位于select內(nèi)部。16、textarea標(biāo)簽：文本區(qū)域，用于輸入多行文本文字。17、table，tr，th，td標(biāo)簽：表格，不推薦使用。2.4CSS書寫規(guī)范2.4.1表命名參考駝峰命名法例：myName全局樣式：global.css框架布局：layout.css字體樣式：font.css鏈接樣式：link.css打印樣式：print.css2.4.2類/ID命名規(guī)范Containerdiv#container容器Layout#layout布局Headerorbannerdiv#head,#header頁頭部分Footerdiv#foot,#footer頁腳部分Navigationlist#nav主導(dǎo)航Sub-navigationlist#subNav二級(jí)導(dǎo)航Menu#menu菜單SubMenu#submenu子菜單Leftorrightsidecolumns#sidebar_a,#sidebar_b左邊欄或右邊欄Maindiv#main頁面主體Tag#tag標(biāo)簽Message#msg#message提醒信息Tips#tips小技巧Vote#vote投票FriendLink#friendlink友情連接Title#title標(biāo)題Summary#summary摘要Searchinput#searchInput搜索輸入框Searchoutput#search_output搜索輸出和搜索結(jié)果相同Search#search搜索Searchbar#searchBar搜索條Searchresults#search_results搜索結(jié)果Copyrightinformation#copyright版權(quán)信息brand#branding商標(biāo)branding-logo#logoLOGOSiteinformation#siteinfo網(wǎng)站信息Copyrightinformationetc.#siteinfoLegal法律申明Designerorothercredits#siteinfoCredits信譽(yù)Joinus#joinus加入我們Partnershipopportunities#partner合作搭檔Services#service服務(wù)Regsiter#regsiter注冊(cè)Arrowarr/arrow箭頭Little#little標(biāo)題Websitemap#sitemap網(wǎng)站地圖List#list列表Homepage#homepage首頁Subpagesubpage二級(jí)頁面子頁面Toolbar#tool,#toolbar工具條Nextpulls#drop下拉Nextpullsmenu#dorpmenu下拉菜單Status#status狀態(tài)慣用類命名應(yīng)盡可能以常見英文單詞為準(zhǔn)，做到通俗易懂，并在適當(dāng)?shù)胤郊右宰⑨?。?duì)于二級(jí)類/ID命名，則采取組合書寫模式，后一個(gè)單詞首字母應(yīng)大寫：諸如“搜索框”則應(yīng)命名為“searchInput”、“搜索圖標(biāo)”命名這“searchIcon”、“搜索按鈕”命名為“searchBtn”2.4.3樣式調(diào)用頁面內(nèi)嵌法：就是將樣式表直接寫在頁面代碼head區(qū)。<styletype=”text/css”>body{background:white;color:black;}</style>外部樣式表調(diào)用：將樣式表寫在一個(gè)獨(dú)立.css文件中，然后在頁面head區(qū)用類似以下代碼調(diào)用。<linkrel="stylesheet"type="text/css"href="css/style.css"/>在符合web標(biāo)準(zhǔn)設(shè)計(jì)中，推薦使用外部調(diào)使用方法，能夠不修改頁面只修改.css文件而改變頁面樣式。假如全部頁面都調(diào)用同一個(gè)樣式表文件，那么改一個(gè)樣式表文件，能夠改變?nèi)课募邮健?.4.4樣式簡(jiǎn)寫公共樣式縮寫：當(dāng)兩個(gè)或多個(gè)類有想通屬性值時(shí)，能夠?qū)傩灾颠M(jìn)行縮寫。如：.search{padding-left:30px;height:35px;color:#fff;}.foot{padding-left:30px;height:15px;color:#fff;}縮寫為：.search,.foot{padding-left:30px;color:fff;}.search{height:35px;}.foot{height:15px;}同一屬性依照它屬性值也能夠進(jìn)行簡(jiǎn)寫，如：.search{background-color:#333;background-image:url(../images/icon.gif);background-repeat:no-repeat;background-position:left;}縮寫為：.search{background:#333url(../images/icon.gif)no-repeatleft}顏色值縮寫：當(dāng)RGB三個(gè)顏色值數(shù)值相同時(shí)，可縮寫顏色值代碼。如：.menu{color:#ff3333;}可縮寫為:.menu{color:#f33;}在CSS中關(guān)于內(nèi)外側(cè)邊框距離是按照上、右、下、左次序來排列，當(dāng)這四個(gè)屬性值不一樣時(shí)也可直接縮寫，如：.btn{margin-top:10px;margin-right:8px;margin-bottom:12px;margin-left:5px;padding-top:10px;padding-right:8px;padding-bottom:12px;padding-left:8px;}則可縮寫為：.btn{Margin:10px8px12px5px;Padding:10px8px12px5px;}而假如當(dāng)上邊與下邊、左邊與右邊邊框?qū)傩灾迪嗤瑫r(shí)，則屬性值能夠直接縮寫為兩個(gè)，如：.btn{margin-top:10px;margin-right:5px;margin-bottom:10px;margin-left:5px;}縮寫為：.btn{margin:10px5px;}而當(dāng)上下左右四個(gè)邊框?qū)傩灾刀枷嗤瑫r(shí)，則能夠直接縮寫成一個(gè)，如：.btn{margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px;}縮寫為：.btn{margin:10px;}一段完整Css屬性編寫次序?yàn)椋焊?dòng)、寬度、高度（行高）、內(nèi)邊距、外邊距、字體、背景色、背景圖、其余屬性。如：.head{float:left;width:136px;height:16px;padding:10px;margin:10px;font:normal18px/24px"微軟雅黑";background:#333url(../images/icon.gif)no-repeatleftdisplay:block;}2.5CSS慣用屬性介紹字體屬性：(font)大小font-size:只要用數(shù)值就能夠，單位：PX樣式font-style:normal;(正常)行高line-height:單位：PX粗細(xì)font-weight:bold;(粗體)normal;(正常)大小寫text-transform:capitalize;(首字母大寫)uppercase;(大寫)none;(無)修飾text-decoration:underline;(下劃線)none;(無)慣用字體：(font-family)通慣用Tahoma(英文和數(shù)字愈加好看)、宋體、微軟雅黑背景屬性：(background)色彩background-color:#FFFFFF;圖片background-image:url(圖片地址);重復(fù)background-repeat:no-repeat;滾動(dòng)background-attachment:fixed;(固定)scroll;(滾動(dòng))極少用位置background-position:left(水平)top(垂直);簡(jiǎn)寫方法background:#000url(..)repeatfixedlefttop;區(qū)塊屬性：(Block)字間距l(xiāng)etter-spacing:normal;數(shù)值對(duì)齊text-align:left;(左對(duì)齊)right;(右對(duì)齊)center;(居中)縮進(jìn)text-indent:數(shù)值em;通常一段話前面縮進(jìn)為2em,表現(xiàn)形式為縮進(jìn)兩個(gè)漢字垂直對(duì)齊vertical-align:baseline;(基線)sub;(下標(biāo))super;(下標(biāo))top;text-top;middle;bottom;text-bottom;顯示display:block;(塊)inline;(內(nèi)嵌)當(dāng)兩個(gè)屬性同時(shí)用著時(shí)候能夠用display:inline-block處理。方框?qū)傩裕?Box)浮動(dòng)float：left左浮right右浮none去除浮動(dòng)寬度width:數(shù)值高度height:數(shù)值內(nèi)邊距:padding上右下左外邊據(jù)：margin上右下左邊框?qū)傩裕?Border)border-style:dotted;(點(diǎn)線)dashed;(虛線)solid(實(shí)線);border-width:;邊框?qū)挾萣order-color:#;簡(jiǎn)寫方法border：widthstylecolor;列表屬性：(List-style)類型list-style用值none格式化li定位屬性：(Position)Position:absolute;relative;overflow用其hidden屬性與height:數(shù)值能夠預(yù)防溢出；用其hidden屬性與height:auto、zoom:1(兼容IE6必須要用這個(gè)屬性)設(shè)置自適應(yīng)高度2.6圖片規(guī)范圖片命名規(guī)范：名稱分為頭尾兩兩部分，用下劃線隔開。頭部分表示此圖片大類性質(zhì)。比如：放置在頁面頂部廣告、裝飾圖案等長(zhǎng)方形圖片我們?nèi)∶篵anner；標(biāo)志性圖片我們?nèi)∶麨椋簂ogo；在頁面上位置不固定而且?guī)в墟溄有D片我們?nèi)∶麨閎utton；在頁面上某一個(gè)位置連續(xù)出現(xiàn)，性質(zhì)相同鏈接欄目標(biāo)圖片我們?nèi)∶簃enu；裝飾用照片我們?nèi)∶簆ic；不帶鏈接表示標(biāo)題圖片我們?nèi)∶簍itle依照此標(biāo)準(zhǔn)類推。尾部分用來表示圖片詳細(xì)含義，用英文字母表示。比如：banner_sohu.gif有onmouse或hover效果圖片，兩張分別在原有文件名后加"_on"和"_off"命名。如：banner_sohu_on.gif圖片質(zhì)量：圖片質(zhì)量與圖片格式有很大關(guān)系，盡可能用gif圖，而且在制作效果圖時(shí)就應(yīng)少用陰影、半透明效果圖，這么能夠降低圖片數(shù)量。PNG圖片盡可能不要用，IE6下對(duì)PNG支持非常不好，兼容性調(diào)整時(shí)候又要分背景PNG和插入圖片PNG，很麻煩。圖片尺寸：不一樣頁面，相同欄目標(biāo)圖片尺寸應(yīng)按相同百分比設(shè)計(jì)，尺寸不一樣，百分比相同同一張圖片在瀏覽器里不會(huì)變形和失真太嚴(yán)重。插入圖片：插入圖片在XHTML表現(xiàn)為：<imgsrc="images/12090.gif"width="120"height="90"alt=”人物頭像”/>寬度、高度和alt屬性必須給出。當(dāng)插入圖片有超級(jí)鏈接時(shí)，會(huì)默認(rèn)有藍(lán)色邊框，所以我們?cè)陧撁孀铋_始就應(yīng)該格式化圖片img{border:0;}這么就不會(huì)有藍(lán)色邊框了。圖片背景：背景圖片在CSS表現(xiàn)為：background:url(../images/dot.gif)leftcenterno-repeat;2.7注釋規(guī)范XHTML注釋：在實(shí)際工作中，有時(shí)會(huì)出現(xiàn)分不清注釋應(yīng)該在標(biāo)簽之上還是標(biāo)簽之下，為了防止這種情況，注釋信息統(tǒng)一寫在區(qū)域標(biāo)簽開始之前和結(jié)束之后，并以“S”或“E”開始，表示區(qū)域注釋開始或結(jié)束。例：<!--=注釋內(nèi)容start--><div>...</div><!--=注釋內(nèi)容end-->在模塊制作中，可能會(huì)出現(xiàn)區(qū)域中還有區(qū)域情況，為了愈加好區(qū)分區(qū)域之間層級(jí)，引入了注釋層級(jí)概念。區(qū)域注釋前面等號(hào)表示了當(dāng)前注釋層級(jí)例：<!--=注釋內(nèi)容start-->...<!--==注釋內(nèi)容start-->...<!--===注釋內(nèi)容start-->...<!--===注釋內(nèi)容end-->...<!--==注釋內(nèi)容end-->...<!--=注釋內(nèi)容end-->提醒：不提議XHTML里寫注釋，兩個(gè)浮動(dòng)標(biāo)簽之間添加注釋時(shí)候，可能會(huì)引發(fā)IE6字符復(fù)制掉行BUG，極難處理，只有二者間刪除注釋。假如不添加注釋，頁面標(biāo)簽排列必須層次清楚，排列對(duì)稱。再輔助火狐插件FireBug使用，就能清楚明了查看網(wǎng)頁布局和層次結(jié)構(gòu)，完全能夠不添加注釋。CSS注釋：在實(shí)際工作中，有時(shí)會(huì)出現(xiàn)分不清注釋應(yīng)該在標(biāo)簽之上還是標(biāo)簽之下，為了防止這種情況，注釋信息統(tǒng)一寫在區(qū)域標(biāo)簽開始之前和結(jié)束之后，并以“S”或“E”開始，表示區(qū)域注釋開始或結(jié)束。例：/*=注釋內(nèi)容start*/.class{...}.class{...}/*=注釋內(nèi)容end*/在模塊制

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論