First, pictures and multimedia
Picture: img elements
src attribute: the image path / alt attribute: use alternate text when images can not be displayed / title text displayed when the mouse hovers: Property
Video: Video elements
src attribute: Video Path / controls attribute: [] after the specified Boolean property, will display the playback controls / autoplay : [after] a Boolean attribute specifies the video on the page will immediately enter the play state display
Audio: Audio elements
src attribute: audio path / controls attribute: [] after the specified Boolean property, will display the playback controls / autoplay : [after] a Boolean attribute specifies the audio on the page will immediately enter the play state display
With figure and figcaption represented pictures and a multimedia unit
Alternatively elements and non-replaceable element
Alternatively: Element display content, determined by its properties, such as IMG , Video , Audio / non-replaceable elements: display the contents of the element, the element is determined by the contents of most of the elements are non-replaceable element
Second, the embedded elements
Embed page
Use iframe elements can be embedded in the page to other pages
Embedded flash program
Using object or embed elements, external resource may be embedded in the page,
It is typically embedded flash procedure
Fourth, the line box
Line box Overview
display property to inline (the default value) elements
What are the common line box
Most text elements: span , abbr , EM , i , strong , b
Images and multimedia: img , Video , Audio
Understand the meaning of the line box
The specific content of the page (text, images, multimedia) will generate a line box
Text: the line must be placed to the box, otherwise it will generate an anonymous line boxes / Images and Multimedia: The default will generate line box, usually do not make changes to their box type
Page contains content region, the block cassette comprises cassette row
Placing box blocks cassette row / line box is placed not block boxes
Salient features of cassette rows
Cassette row may be broken, because the content may be broken Wrap : by word-break is provided to truncate properties
Comprising the same block, a plurality of consecutive horizontal rows are sequentially arranged cassettes
Blank folding rules are applied only between the row lines inside the cartridge and the cartridge
The distance between the cartridge and the row lines can be used cartridge in the horizontal direction margin and padding set
The size of rows box
Line box - replaceable elements: Photo and Multimedia
Exactly the same as block boxes / image and video, is provided only when a wide high school, another scale will automatically adapt / image and video, while if the width and height is provided, by object-fit set mode adaptation properties
OK box - Non alternative elements: Text earth element
width and height invalid / vertical direction margin , border , padding does not occupy the space layout
Using line-height setting text line height
Position of the line box
Buter cassette rows must be the normal flow : floating and absolute positioning of the cartridge case automatically become block
The row block containing the cartridge, and to avoid the floating box regular stream
Block rows cassette comprising cassette, using text-align adjusting cartridge alignment line inside it
Cartridge alignment between rows, may be used vertical-align adjust] [Learn
Fifth, the cassette row block
display attribute value inline-block element box generated
Like row block row cassette cartridge performance in certain aspects, certain aspects of the performance of the image block boxes
The difference between the line box
Internal row block cassettes may place a cartridge, the cartridge not OK / all line block size cassette box model are effective, rather than the cassette row
Row in the vertical direction of the cassette margin , border , padding size does not occupy the space / line width and height of the cartridge can not be set
Row block for automatic cassette generally horizontal width center