毕业设计外文文献-HTML

张腾金：基于VUE的移动端音乐APP的设计与实现华东交通大学毕业设计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外文翻译—译文部分当你浏览网页时，你看到的页面只是别人电脑上的文本文件。典型web页面中的文本被包装在HTML标记中，HTML标记告诉浏览器文档的结构。有了这些信息，浏览器可以决定如何以合理的方式显示信息。考虑示例1-1中所示的web页面片段。在第一行，字符串Hi!被包装在一对h1标签中。(注意，打开标签和关闭标签略有不同:关闭标签的第二个字符是斜杠，而打开标签没有。)在h1标签中包装一些文本告诉浏览器所包含的单词是一个标题，这将导致它在自己的行中以粗体显示。还有h2、h3、h4、h5和h6标题标签。数字越低，标题就越重要，所以用h6标记包装的文本就会越小(即，不太重要的外观)比文本包装在一个h3标签。这些被称为段落标记。浏览器将在它自己的行上显示每个段落。如果段落太长，超过了浏览器窗口的宽度，文本就会向下移动，并继续到下一行。在这两种情况下，都将在段落后面插入空行，以便与页面上的下一项分开。到目前为止，我所讨论的标签都是块标签。块标记的定义特征是，它显示在自己的一行上，左侧或右侧没有元素。这就是为什么标题、段落和列表项沿页面向下而不是穿过页面的原因。块标记的对面是一个内联标记，顾名思义，它可以出现在一行中。emphasistag（em）是内联标记的一个例子，它看起来像这样：<p>i<em>really<em>hopeyoulikeit.<p>thegranddaddyoftheinlinetagsandaglysiblethecoolestfeatureofhtmlistheatag.A代表锚，但我也将标签称为链接或超链接。包装在定位标记中的文本将变为可单击的，因此单击它会导致浏览器加载新的HTML页。为了告诉浏览器要加载什么新页面，我们必须将所谓的属性添加到标记中。属性是插入到打开标记中的命名值。在定位标记中，使用href属性指定目标页面的位置。这里有一个指向谷歌主页的链接：<ahref=“/”>google<a>如果你不习惯阅读HTML，这可能看起来有点混乱，但是你应该能够为谷歌主页选择URL。你会在整本书中看到很多标签和HREF，所以如果第一眼就看不懂的话，花点时间想想。我们看到的HTML片段通常位于完整HTML文档的正文部分。HTML文档由两部分组成：头部和正文。正文是放置您希望用户看到的所有内容的地方。头部包含关于页面的信息，其中大部分对用户是不可见的。身体和头部总是包裹在HTML元素中。现在，head部分包含一个title元素，它告诉浏览器要在窗口的标题栏中显示什么文本。通常，当您使用Web浏览器时，您正在查看托管在Internet上的页面。但是，浏览器非常擅长显示本地计算机上的HTML文档。完成后，将其保存到桌面test.html，然后通过将文件拖到Safari应用程序图标上或打开Safari并选择“文件”→打开文件，使用Safari将其打开。双击test.html也可以，但它可以在文本编辑器或其他浏览器中打开，具体取决于您的设置。如您所见，浏览器以不同的样式呈现特定的HTML元素（标题大而粗体，段落后接空行等）。这些样式非常基本，主要是为了帮助读者理解文档的结构和含义。要超越这种基于结构的简单呈现，您可以使用层叠样式表（CSS）。CSS是一种样式表语言，用于定义HTML文档的可视表示。可以使用CSS定义简单的内容，如文本颜色、大小和样式（粗体、斜体等），或复杂的内容，如页面布局、渐变、不透明度等。示例1-4显示了一个CSS规则，该规则指示浏览器使用红色显示body元素中的任何文本。在本例中，body是选择器（受