词条 | Span and div |
释义 |
In HTML, span represents an inline portion of a document, for example words within a sentence. div represents a block-level portion of a document such as a few paragraphs, or an image with its caption. Neither element has any meaning in itself, but they allow semantic attributes (e.g. lang="en-US" ), CSS styling (e.g., color and typography), or client-side scripting (e.g., animation, hiding, and augmentation) to be applied.[1][2]HistoryThe In 1995, div defines a 'division' of the document, a block-level item that is more distinct from elements above and below it than a span of inline material.[4]Differences and default behaviorThere are multiple differences between Practical usage
There are three main reasons to use Styling with CSS{{See also|Cascading Style Sheets|Separation of presentation and content }}It is common for {{tag|span|open}} and {{tag|div|open}} elements to carry For these reasons, and in support of a more semantic web, attributes attached to elements within HTML should describe their semantic purpose, rather than merely their intended display properties in one particular medium. For example, the HTML in {{tag|span|content=password too short|params=class="red-bold"}} is semantically weak, whereas {{tag|em|content=password too short|params=class="warning"}} uses an Semantic clarityThis kind of grouping and labeling of parts of the page content might be introduced purely to make the page more semantically meaningful in general terms. It is impossible to say how the World Wide Web will develop in years and decades to come. Web pages designed today may still be in use when information systems that we cannot yet imagine are trawling, processing, and classifying the web. Even today's search engines such as Google and others use proprietary information processing algorithms of considerable complexity. For some years, the World Wide Web Consortium (W3C) has been running a major Semantic Web project designed to make the whole web increasingly useful and meaningful to today's and the future's information systems. The microformats movement is an attempt to build an idea of semantic Access from codeOnce the HTML or XHTML markup is delivered to a page-visitor's client browser, there is a chance that client-side code will need to navigate the internal structure (or Document Object Model) of the web page. The most common reason for this is that the page is delivered with client-side JavaScript that will produce on-going dynamic behavior after the page is rendered. For example, if rolling the mouse over a 'Buy now' link is meant to make the price, elsewhere on the page, become emphasized, JavaScript code can do this, but JavaScript needs to identify the price element, wherever it is in the markup. The following markup would suffice: {{tag|div|params=id="price"|content=$45.99}}. Another example is the Ajax programming technique, where, for example, clicking a hypertext link may cause JavaScript code to retrieve the text for a new price quotation to display in place of the current one within the page, without re-loading the whole page. When the new text arrives back from the server, the JavaScript must identify the exact region on the page to replace with the new information. Automatic testing tools also may need to navigate web page markup using OveruseThe judicious use of Various list structures available in HTML may be preferable to a homemade mixture of For example, this: ... is usually preferable to this: Other examples of the semantic use of HTML rather than HTML5 introduced several new elements; a few examples include the header , footer , nav and figure elements. The use of semantically appropriate elements provides better structure to HTML documents than span or div .[8]See also
References1. ^1 {{cite web|title=HTML5: A vocabulary and associated APIs for HTML and XHTML|url=http://www.w3.org/TR/html5/grouping-content.html#the-div-element|publisher=W3C|accessdate=16 September 2014|location=4.4 Grouping content}} 2. ^1 {{cite web|title=HTML5: A vocabulary and associated APIs for HTML and XHTML|url=http://www.w3.org/TR/html5/text-level-semantics.html#the-span-element|publisher=W3C|accessdate=16 September 2014|location=4.5 Text-level semantics|deadurl=yes|archiveurl=https://web.archive.org/web/20150801133040/http://www.w3.org/TR/html5/text-level-semantics.html#the-span-element|archivedate=1 August 2015|df=}} 3. ^{{cite web|title=HTML/Elements/span - Web Education Community Group |url=http://www.w3.org/community/webed/wiki/HTML/Elements/span |date=2013-06-13 |accessdate=2013-11-14}} 4. ^{{cite web|title=HTML < 5. ^{{cite web|url=http://www.w3.org/TR/html51/semantics.html#semantics|title=HTML 5.1: 4. The elements of HTML|website=W3.org|accessdate=3 August 2017}} 6. ^{{cite book|last=Harold|first=Elliotte Rusty|title=Refactoring HTML|year=2008|publisher=Addison Wesley|isbn=0-321-50363-5|page=184|quote=There is no simple way to find all the unidentified lists in a site. [...] They can be marked up in dozens of different ways: as paragraphs, div s, tables, [etc]. Once you've found a list, marking up the individual items is easy. Just use ul , ol , or dl instead of the current wrapper element. [...] For example to remove the bullets add this rule to the page's CSS stylesheet: [...]}}7. ^{{cite web|last=Raggett|authorlink=Dave Raggett|first=Dave|title=Adding structure to forms: the FIELDSET and LEGEND elements|url=http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#h-17.10|work=HTML 4.01 Specification|publisher=W3C|year=1999|accessdate=12 July 2010|author2=Arnaud Le Hors |author3=Ian Jacobs |quote=The FIELDSET element allows authors to group thematically related controls and labels. Grouping controls makes it easier for users to understand their purpose while simultaneously facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents. The proper use of this element makes documents more accessible.}}8. ^{{cite web|last=van Kesteren|first=Anne|title=HTML5 differences from HTML4|url=http://www.w3.org/TR/html5-diff/#language|publisher=W3C|accessdate=30 June 2010|year=2010}} External links
2 : HTML tags|HTML |
随便看 |
|
开放百科全书收录14589846条英语、德语、日语等多语种百科知识,基本涵盖了大多数领域的百科知识,是一部内容自由、开放的电子版国际百科全书。