太原理工大学Web程序设计基础-第二章HTML

1HTML田玉玲2HTML3HTMLIntroduction4SmallExample——HTMLfilehtmlheadtitleTitleofPage/title/headbodyThisismyfirsthomepage.bThistextisbold/b/body/html提示浏览器该怎么处理后面的数据Example.html浏览器中显示，但受到标记的约束5SmallExample6SmallExample7ExplanationhtmlheadtitleTitleofPage/title/headbodyThisismyfirsthomepage.bThistextisbold/b/body/htmlhtmltagtellsyourbrowserthatthisisthestartofanHTMLdocument./htmltagtellsyourbrowserthatthisistheendofanHTMLdocument.8ExplanationhtmlheadtitleTitleofPage/title/headbodyThisismyfirsthomepage.bThistextisbold/b/body/htmlThetextbetweentheheadtagandthe/headtagisheaderinformation.Headerinformationisnotdisplayedinthebrowserwindows.9ExplanationhtmlheadtitleTitleofPage/title/headbodyThisismyfirsthomepage.bThistextisbold/b/body/htmlThetextbetweenthetitletagsisthetitleofyourdocument.Thetitleisnotdisplayedinthebrowser’scaption.10ExplanationhtmlheadtitleTitleofPage/title/headbodyThisismyfirsthomepage.bThistextisbold/b/body/htmlThetextbetweenthebodytagsisthetextthatwillbedisplayedinthebrowser.Thetextbetweentheband/btagswillbedisplayedinaboldfont.11HTML语言的结构htmlheadtitle浏览器标题栏中的内容/title/headbody网页中的内容——Visibletext/body/html文件头文件体12HTML文件组成13HTMLElementsTheHTMLelementsstartswithastarttagThecontentoftheHTMLelementTheHTMLelementendswithanendtagbThistextisbold/bElementcontentendtagstarttag14TagAttributes15SmallExample1htmlheadtitleTitleofPage/title/headbodybgcolor=”red”Thisismyfirsthomepage.bThistextisbold/b/body/htmlExample1.html16HTMLBackgrounds17htmlheadtitleTitleofPage/title/headbodybgcolor=”red”text=”yellow”Thisisaparagraph.Thisisaparagraph.Thisisaparagraph.Thisisaparagraph.Thisisaparagraph./body/htmlExample2.html18htmlheadtitleTitleofPage/title/headbodybackground=Vase_with_Irises_Against_a_Yellow_Background.jpgh3ImageBackground/h3BothgifandjpgfilescanbeusedasHTMLbackgrounds.Iftheimageissmallerthanthepage,theimagewillrepeatitself./body/htmlExample3.html19HeaderHeadingsaredefinedwiththeh1toh6tags.h1definesthelargestheading.h6definesthesmallestheading.HTMLautomaticallyaddsanextrablanklinebeforeandafteraheading.20ExampleforHeaderElementhtmlheadtitleTitleofPage/title/headbodybackground=girl.jpgh1Thisisaheading./h1h2Thisisaheading./h2h3Thisisaheading./h3h4Thisisaheading./h4h5Thisisaheading./h5h6Thisisaheading./h6/body/htmlExample4.html21HeaderElement对齐属性属性名align属性值left,center或rightleft----标题居左center----标题居中right----标题居右22ExampleforHeaderElementhtmlheadtitleTitleofPage/title/headbodyh1align=centerThisisaheading./h1h2Thisisaheading./h2h3Thisisaheading./h3h4Thisisaheading./h4h5Thisisaheading./h5h6Thisisaheading./h6/body/htmlExample5.html23CommentsinHTMLThecommenttagisusedtoinsertacommentintheHTMLsourcecode.Acommentwillbeignoredbythebrowser.Youcanusecommentstoexplainyou’rethesourcecodehelpyouwhenyoueditthesourcecodeatalaterdate.!—Thisisacomment--24ExampleforCommentshtmlheadtitleTitleofPage/title/headbody!--Thiscommentwillnotbedisplayed--Thisisaheading./body/htmlExample6.html25Spaces,Tabs,andNewLineBrowsersthatdisplayHTMLdocumentsignoreextraspaces,tabs,blanklines,andnewlinesintheHTMLdocument,Ifyouneedtospecifythese,youmustuseanappropriate(element)HTMLtagtoaccomplishwhatyouwanttodo.26SmallExample2htmlheadtitleTitleofPage/title/headbodyThisisaheading.Thisismyfirsthomepage.bThistextisbold/bThisisanotherparagraph./body/htmlExample7.html27ParagraphsParagraphsaredefinedwiththeptag.HTMLautomaticallyaddsanextrablanklinebeforeandafteraparagraph.28ExampleforParagraphshtmlheadtitleTitleofPage/title/headbodyThisisaheading.Thisismyfirsthomepage.bThistextisbold/bpThisisanotherparagraph./pend/body/htmlExample8.html29Paragraphs属性•对其属性•属性名align•属性值left,center或right•left----段落居左•center----段落居中•right----段落居右30ExampleforParagraphshtmlheadtitleTitleofPage/title/headbodyThisisaheading.Thisismyfirsthomepage.bThistextisbold/bpalign=centerThisisanotherparagraph./pend/body/htmlExample9.html31LineBreaks—换行Thebrtagisusedwhenyouwanttoendaline,butdon’twanttostartanewparagraph.Thebrtagforcesalinebreakwhereveryouplaceit.Thebrtagisanemptytag.Ithasnoclosingtag.32ExampleforLineBreakshtmlheadtitleTitleofPage/title/headbodyTobreakbrlinesbrinabrparagraph,brusethebrtag./body/htmlExample10.html33DifferencehtmlheadtitleTitleofPage/title/headbodyTobreakplinespinapparagraph,pusethebrtag./body/htmlExample11.html34Horizontalrule——横线•hr一般用于分隔同一文本的不同部分。•Horizontalrule的属性•属性名size•属性值n－－表示线宽，单位是像素•属性名width•属性值n－－表示长宽，单位是像素•属性名align•属性值left,right或center35Horizontalrule——横线hrhrsize=10hrwidth=50hrwidth=50%36Horizontalrule——横线hrwidth=50%align=lefthrwidth=50%align=righthrnoshadehrcolor=“blue”37ExampleforHorizontalrulehtm