Replace and non-replaceable elements, block-level elements, and inline elements

Source: Internet
Author: User

Replace elements and non-replaceable elements

1> replacing elements

The replacement element is that the browser determines the specific display of the element based on the tag and attributes of the element, creating a box in its display.
, <input>, <textarea>, <select>, <object> in HTML are all replacement elements. These elements often have no actual content, that is, an empty element .
Example:
#1
The browser reads the picture information and displays it based on the value of the SRC attribute of the tag, and if you look at the HTML code, you don't see the actual contents of the picture.
#2 <input type= "Submit" name= "Submit" value= "Submission"/>
Depending on the type property of the <input> tag, the browser determines whether the input box or button is displayed.

2> Non-replaceable elements

Most elements of HTML are non-replaceable elements, i.e. their content is directly represented in the browser.
Example:
<p> content of the paragraph </p>
Content of <label>label </label>

Block-level elements and inline elements

1> block-level elements

The default is to fill the content area of its parent element horizontally, and there are no other elements on either side of it, that is, the block-level element is exclusively one row by default.

The elements that set the float and set the display property to "block" or "List-item" through CSS are block-level elements.

Typical block-level elements are:<div>, <p>,

2> in-line elements

The inline element does not form a new content block, which can have other elements around it.

Elements with the display property equal to "inline" are all inline elements. Almost all of the replaceable elements are inline elements, such as , <input>, and so on.

Typical inline-level elements are:<a>, <span>, <strong>, and so on .

Note: the type of the element is also not fixed, by setting the display property of the CSS, you can make the inline element into a block-level element, or you can make the block-level element into an inline element.

block and inline classification details for HTML tags:
block Element
Address-Addresses
blockquote-Block reference
Center-in the aligning
DIR-List of directories
Div-Common block-level easy, is also the main tag of CSS layout
DL-Definition list
Fieldset-form control Group
Form -Interactive form
H1-Big title
H2-Subtitle
h3-3 level headings
h4-4 level headings
h5-5 level headings
h6-6 level headings
HR-Horizontal divider line
isindex-input Prompt
menu-List of menus
noframes-frames Optional content (this chunk content is displayed for browsers that do not support frame
noscript-Optional script content (this content is displayed for browsers that do not support script)
ol-Sort the form
P-paragraph
pre-formatted text
Table -Tables
ul-Non-sorted list

inline elements (inline Element)
A-anchor point abbr-abbreviation
acronym-the first word
B-Bold (not recommended)
Bdo-bidi Override
big-Large font
BR-line break
cite-citation
code-Computer codes (required when referencing source)
DFN-defining fields
em-Emphasize
font-typeface settings (not recommended)
I-Italic
img-Images
Input-Enter box
KBD-Define keyboard text
label-Table label
Q-Short reference
S-Medium dash (not recommended)
Samp-Define sample computer code
Select -Project selection
Small-Small font text
span-A common inline container that defines chunks within a text
strike-Medium Dash
Strong-Bold emphasis
Sub- subscript
sup-Superscript
textarea-Multi-line text input box
TT-Telex text
U-Underline
var-Defining variables

variable Element (variable element for determining the element as a block element or inline element, depending on contextual context)
Applet-java Applet
button-Buttons
del-delete text
Iframe-inline Frame
ins-Inserted text
Map-image block (map)
Object-object Object
Script-client-side scripting

Replace and non-replaceable elements, block-level elements, and inline elements

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.