畢業(yè)設(shè)計外文文獻(xiàn)-HTML

張騰金：基于VUE的移動端音樂APP的設(shè)計與實現(xiàn)華東交通大學(xué)畢業(yè)設(shè)計PAGE48PAGE47附錄A外文翻譯—原文部分JonathanStark.BuildingiPhoneAppswithHTML,CSS,andJavaScript.American：O'ReillyMedia，2010.Whenyou’rebrowsingtheWeb,thepagesthatyouareviewingarejusttextdocumentssittingonsomeoneelse’scomputer.ThetextinatypicalwebpageiswrappedinHTMLtags,whichtellyourbrowseraboutthestructureofthedocument.Withthisinformation,thebrowsercandecidehowtodisplaytheinformationinawaythatmakessense.ConsiderthewebpagesnippetshowninExample1-1.Onthefirstline,thestringHithere!iswrappedinapairofh1tags.(Noticethattheopentagandtheclosetagareslightlydifferent:theclosetaghasaslashasthesecondcharacter,whiletheopentagdoesnot.)Wrappingsometextinh1tagstellsthebrowserthatthewordsenclosedareaheading,whichwillcauseittobedisplayedinlargeboldtextonitsownline.Therearealsoh2,h3,h4,h5,andh6headingtags.Thelowerthenumber,themoreimportanttheheader,sotextwrappedinanh6tagwillbesmaller(i.e.,lessimportant-looking)thantextwrappedinanh3tag.Aftertheh1taginExample1-1aretwolineswrappedinptags.Thesearecalledparagraphtags.Browserswilldisplayeachparagraphonitsownline.Iftheparagraphislongenoughtoexceedthewidthofthebrowserwindow,thetextwillbumpdownandcontinueonthenextline.Ineithercase,ablanklinewillbeinsertedaftertheparagraphtoseparateitfromthenextitemonthepage.ThetagsI’vecoveredsofarareallblocktags.Thedefiningcharacteristicofablocktagisthatitisdisplayedonalineofitsown,withnoelementstoitsleftorright.Thatiswhyheadings,paragraphs,andlistitemsprogressdownthepageinsteadofacrossit.Theoppositeofablocktagisaninlinetag,which,asthenameimplies,canappearinaline.Theemphasistag(em)isanexampleofaninlinetag,anditlookslikethis:<p>I<em>really</em>hopeyoulikeit.</p>Thegranddaddyoftheinlinetags—andarguablythecoolestfeatureofHTML—istheatag.Theastandsforanchor,butI’llalsorefertothetagasalinkorhyperlink.Textwrappedinananchortagbecomesclickable,suchthatclickingonitcausesyourbrowsertoloadanewHTMLpage.Inordertotellthebrowserwhatnewpagetoload,wehavetoaddwhat’scalledanattributetothetag.Attributesarenamedvaluesthatareinsertedintoanopentag.Inananchortag,youusethehrefattributetospecifythelocationofthetargetpage.Here’salinktoGoogle’shomepage:<ahref="/">Google</a>ThatmightlooklikeabitofajumbleifyouarenotusedtoreadingHTML,butyoushouldbeabletopickouttheURLfortheGooglehomepage.You’llbeseeingalotofatagsandhrefsthroughoutthebook,sotakeaminutetogetyourheadaroundthisifitdoesn’tmakesenseatfirstglance.TheHTMLsnippetthatwe’vebeenlookingatwouldnormallyresideinthebodysectionofacompleteHTMLdocument.AnHTMLdocumentismadeupoftwosections:theheadandthebody.Thebodyiswhereyouputallthecontentthatyouwantuserstosee.Theheadcontainsinformationaboutthepage,mostofwhichisinvisibletotheuser.Thebodyandheadarealwayswrappedinanhtmlelement.Fornowtheheadsectioncontainsatitleelement,whichtellsthebrowserwhattexttodisplayinthetitlebarofthewindow.Normally,whenyouareusingyourwebbrowseryouareviewingpagesthatarehostedontheInternet.However,browsersareperfectlygoodatdisplayingHTMLdocumentsthatareonyourlocalmachineaswell.Whenyouaredone,saveittoyourdesktopastest.htmlandthenopenitwithSafaribyeitherdraggingthefileontotheSafariapplicationiconoropeningSafariandselectingFile→OpenFile.Double-clickingtest.htmlmightworkaswell,butitcouldopeninyourtexteditororanotherbrowserdependingonyoursettings.Asyou’veseen,browsersrendercertainHTMLelementswithdistinctstyles(headingsarelargeandbold,paragraphsarefollowedbyablankline,etc.).Thesestylesareverybasicandareprimarilyintendedtohelpthereaderunderstandthestructureandmeaningofthedocument.Togobeyondthissimplestructure-basedrendering,youcanuseCascadingStyleSheets(CSS).CSSisastylesheetlanguagethatisusedtodefinethevisualpresentationofanHTMLdocument.YoucanuseCSStodefinesimplethingslikethetextcolor,size,andstyle(bold,italic,etc.),orcomplexthingslikepagelayout,gradients,opacity,andmuchmore.Example1-4showsaCSSrulethatinstructsthebrowsertodisplayanytextinthebodyelementusingthecolorred.Inthisexample,bodyistheselector(whatisaffectedbytherule)andthecurlybracesenclosethedeclaration(theruleitself).Thedeclarationincludesasetofpropertiesandtheirvalues.Inthisexample,coloristheproperty,andredisthevalueoftheproperty.AtthispointyoushouldknowhowtostructureadocumentwithHTMLandhowtomodifyitsvisualpresentationwithCSS.Nowwe’lladdsomeJavaScripttomakeitdostuff.JavaScriptisascriptinglanguagethatcanbeaddedtoanHTMLpagetomakeitmoreinteractiveandconvenientfortheuser.Forexample,youcanwritesomeJavaScriptthatwillinspectthevaluestypedinaformtomakesuretheyarevalid.OryoucanhaveJavaScriptshoworhideelementsofapagedependingonwheretheuserclicks.JavaScriptcanevencontactthewebservertoexecutedatabasechangeswithoutrefreshingthecurrentwebpage.Likeanymodernscriptinglanguage,JavaScripthasvariables,arrays,objects,andallthetypicalcontrolstructures(if,while,for,andsoon).PropertynamesarepredefinedintheCSSspecification,whichmeansthatyoucan’tjustmakethemup.Eachpropertyexpectsanappropriatevalue,andtherecanbelotsofappropriatevaluesandvalueformatsforagivenproperty.Forexample,youcanspecifycolorswithpredefinedkeywordslikered,orbyusingHTMLcolorcodenotation.Thisusesahexadecimalnotation:threepairsofhexadecimaldigits(0–F)representing(fromlefttoright)Red,Green,andBluevalues.Propertiesthatexpectmeasurementscanacceptvalueslike10px,75%,and1em.Example1-5showssomecommondeclarations.(Thecolorcodeshownforbackground-colorcorrespondstotheCSS“gray”.)Therearedifferencesbetweenclassandid.classattributesshouldbeusedwhenyouhavemorethanoneitemonthepagewiththesameclassvalue.Conversely,idvalueshavetobeuniquetoapage.WhenIfirstlearnedthis,IfiguredI’djustalwaysuseclassattributessoIwouldn’thavetoworryaboutwhetherIwasdupinganidvalue.However,selectingelementsbyidismuchfasterthanselectingthembyclass,soyoucanhurtyourperformancebyoverusingclassselectors.Backinthebadolddaysofwebdevelopment,differentbrowsershaddifferentsupportforJavaScript.ThismeantthatyourcodemightruninSafari2butnotinInternetExplorer6.Youhadtotakegreatpainstotesteachbrowser(andevendifferentversionsofthesamebrowser)inordertomakesureyourcodewouldworkforeveryone.Asthenumberofbrowsersandbrowserversionsgrew,itbecameimpossibletotestandmaintainyourJavaScriptcodeforeveryenvironment.Atthattime,webprogrammingwithJavaScriptwashell.EnterjQuery.jQueryisarelativelysmallJavaScriptlibrarythatallowsyoutowriteyourJavaScriptcodeinawaythatwillworkthesameinawidevarietyofbrowsers.What’smore,itgreatlysimplifiesanumberofcommonwebdevelopmenttasks.Forthesereasons,IusejQueryinmostofmywebdevelopmentwork,andI’llbeusingitfortheJavaScriptexamplesinthisbook.

附錄B外文翻譯—譯文部分當(dāng)你瀏覽網(wǎng)頁時，你看到的頁面只是別人電腦上的文本文件。典型web頁面中的文本被包裝在HTML標(biāo)記中，HTML標(biāo)記告訴瀏覽器文檔的結(jié)構(gòu)。有了這些信息，瀏覽器可以決定如何以合理的方式顯示信息?？紤]示例1-1中所示的web頁面片段。在第一行，字符串Hi!被包裝在一對h1標(biāo)簽中。(注意，打開標(biāo)簽和關(guān)閉標(biāo)簽略有不同:關(guān)閉標(biāo)簽的第二個字符是斜杠，而打開標(biāo)簽沒有。)在h1標(biāo)簽中包裝一些文本告訴瀏覽器所包含的單詞是一個標(biāo)題，這將導(dǎo)致它在自己的行中以粗體顯示。還有h2、h3、h4、h5和h6標(biāo)題標(biāo)簽。數(shù)字越低，標(biāo)題就越重要，所以用h6標(biāo)記包裝的文本就會越小(即，不太重要的外觀)比文本包裝在一個h3標(biāo)簽。這些被稱為段落標(biāo)記。瀏覽器將在它自己的行上顯示每個段落。如果段落太長，超過了瀏覽器窗口的寬度，文本就會向下移動，并繼續(xù)到下一行。在這兩種情況下，都將在段落后面插入空行，以便與頁面上的下一項分開。到目前為止，我所討論的標(biāo)簽都是塊標(biāo)簽。塊標(biāo)記的定義特征是，它顯示在自己的一行上，左側(cè)或右側(cè)沒有元素。這就是為什么標(biāo)題、段落和列表項沿頁面向下而不是穿過頁面的原因。塊標(biāo)記的對面是一個內(nèi)聯(lián)標(biāo)記，顧名思義，它可以出現(xiàn)在一行中。emphasistag（em）是內(nèi)聯(lián)標(biāo)記的一個例子，它看起來像這樣：<p>i<em>really<em>hopeyoulikeit.<p>thegranddaddyoftheinlinetagsandaglysiblethecoolestfeatureofhtmlistheatag.A代表錨，但我也將標(biāo)簽稱為鏈接或超鏈接。包裝在定位標(biāo)記中的文本將變?yōu)榭蓡螕舻模虼藛螕羲鼤?dǎo)致瀏覽器加載新的HTML頁。為了告訴瀏覽器要加載什么新頁面，我們必須將所謂的屬性添加到標(biāo)記中。屬性是插入到打開標(biāo)記中的命名值。在定位標(biāo)記中，使用href屬性指定目標(biāo)頁面的位置。這里有一個指向谷歌主頁的鏈接：<ahref=“/”>google<a>如果你不習(xí)慣閱讀HTML，這可能看起來有點混亂，但是你應(yīng)該能夠為谷歌主頁選擇URL。你會在整本書中看到很多標(biāo)簽和HREF，所以如果第一眼就看不懂的話，花點時間想想。我們看到的HTML片段通常位于完整HTML文檔的正文部分。HTML文檔由兩部分組成：頭部和正文。正文是放置您希望用戶看到的所有內(nèi)容的地方。頭部包含關(guān)于頁面的信息，其中大部分對用戶是不可見的。身體和頭部總是包裹在HTML元素中?，F(xiàn)在，head部分包含一個title元素，它告訴瀏覽器要在窗口的標(biāo)題欄中顯示什么文本。通常，當(dāng)您使用Web瀏覽器時，您正在查看托管在Internet上的頁面。但是，瀏覽器非常擅長顯示本地計算機(jī)上的HTML文檔。完成后，將其保存到桌面test.html，然后通過將文件拖到Safari應(yīng)用程序圖標(biāo)上或打開Safari并選擇“文件”→打開文件，使用Safari將其打開。雙擊test.html也可以，但它可以在文本編輯器或其他瀏覽器中打開，具體取決于您的設(shè)置。如您所見，瀏覽器以不同的樣式呈現(xiàn)特定的HTML元素（標(biāo)題大而粗體，段落后接空行等）。這些樣式非常基本，主要是為了幫助讀者理解文檔的結(jié)構(gòu)和含義。要超越這種基于結(jié)構(gòu)的簡單呈現(xiàn)，您可以使用層疊樣式表（CSS）。CSS是一種樣式表語言，用于定義HTML文檔的可視表示?？梢允褂肅SS定義簡單的內(nèi)容，如文本顏色、大小和樣式（粗體、斜體等），或復(fù)雜的內(nèi)容，如頁面布局、漸變、不透明度等。示例1-4顯示了一個CSS規(guī)則，該規(guī)則指示瀏覽器使用紅色顯示body元素中的任何文本。在本例中，body是選擇器（受