html div class用法innerHTML vs innerTextCss two class togetherJs add multiple classes

Divs, Spans, Ids, and Classes - Comm 244

文章推薦指數： 80 %
投票人數：10人

The div tag is a block level HTML element. It is used to divide or section of other HTML tags in to meaningful groups. A perfect example of the use of a div tag ... BacktoClassThreepage» Divs,Spans,Id's,andClasses TheHTMLtagsdivandspanholdnopresentationalvaluebythemselves.ThismeansthatifyouputtheninyourHTML,theywillnotactuallydisplayanything. Thesetagsareprimarilyusedas"hooks"foryourCSS.YouusethemtodivideorlabelyourHTML(whenanother,moresemantictagwillnotwork)anduseCSSselectorstotargetthem. ClassandId'sareHTMLAttributes.TheyarealsousedasCSShooks. BlockversusInlineHTMLElements FromStylin'WithCSSbyCharlesWyke-Smith: ...mostXHTMLtagsfallintotwobroadcategoriesinrespecttothewaytheydisplayonthepage:blockandinline.Blocklevelelementssuchasheadings

throughandparagraphs

willobliginglystackdownthepagewithnolinebreaksrequired.Theyevenhavepresetmarginstocreatespacebetweenthem.Inlineelementshavenosuchmargins,andsitsidebysideacrossthepage,onlywrappingtothenextlineifthereisnotenoughroomforthemtositnexttoeachother.(p.18) DivTag ThedivtagisablocklevelHTMLelement.ItisusedtodivideorsectionofotherHTMLtagsintomeaningfulgroups. Aperfectexampleoftheuseofadivtagistodesignateanavigationlist:

  • Home
  • About
  • Contact
SpanTag ThespantagisaninlineHTMLelementthatisusedtogroupasetofinlineelements.Generallyspeaking,youusespantohooktextoragroupoftagsthatyouwanttostyledifferently.Oftenthough,youcandothismoresemanticallybyusingotherelementslikeemorstrong. Agoodexampleofanappropriateuseofspanisinaheaderthatyouwanttostyleintwoparts.

Comm244:DesignfortheWWW

IdAttribute TheidattributeisusedtolabelsectionsorpartsofyourHTMLdocument. Youmayonlyusethesameidonceperpage,sosaveitforimportantmajorsectionsofyourpage.Additionally,theidselectorinCSShasahighspecificitylevelandthereforeoverrulesotherthings(liketheclassselector).
  • Home
  • About
  • Contact
ClassAttribute Ifapagehadmultiplesidebarchunks,wemightwanttomakeoneclasssothatwecoulduseCSStostyleeachchunkwithonerule.

SidebarTitle

sidebartextLoremipsumdolorsitamet,consecteturadipisicingelit.

AdditionalReading Herearesomearticleswithmoreinformationaboutdivs,spans,idsandclasses. TheSemanticDiv,Id,Class,andSpan Groupingelements:theDIVandSPANelements BacktoClassThreepage»

請為這篇文章評分？

延伸文章資訊