"HTML5 and CSS3 Basic Course" 4–5 Chapter

Fourth Chapter text

1. <p></p>

2, the <small></small> expression of the terms of the next note, usually including disclaimers, precautions, legal restrictions, copyright information and so on.

3, <strong></strong> Indicates the importance of the content, shown in bold, a strong can be nested in another strong Span style= "font-family: the song Body;" <EM></EM> em can be nested in another em <B></B> used as a keyword in a document digest , comments in the product name, text-based interactive software indicating the operation of the text, the article lead, etc. <I></I>

4. <figure><figcaption></figcaption></figure> charts can be charts, photos, graphics, illustrations, code snippets, and other similar independent content. The element figcaption is not required, but if it is included, it must be the first or last element embedded in the figure element and only once.

5. <cite></cite> for titles of plays, scripts or books, names of songs, films, photographs or sculptures, concerts or concerts, specifications, newspapers or legal documents, etc., property Lang Indicates the language of the text. the cite element is used only as a reference source, and the quoted text is blockquote or q elements.

6, <blockquote></blockquote> for quoting block-level text, can be long and short; <q></q> lang Indicates the language of the text. Property cite provide the location of the quoted text, properties lang Indicates the language of the text.

7, <time></time> datetime yyyy-mm-ddthh:mm:ss time element nested another time datetime Span style= "font-family: the song Body;" The time

8, <abbr></abbr> mark abbreviation, attribute firefox and opera etc Browser will have title abbr text uses dashed underlines, which can be set in the style sheet abbr[title]{border-bottom:1px dotted  #000;}

9, <dfn></dfn> definition terms (English is usually italic, Chinese is usually black or italic), attribute cite provides the location of the quoted text. If a paragraph, description list, or chunk is the closest ancestor to a DFN element, the paragraph, description list, or chunk must contain the definition of the term.

10,  superscript includes trademark symbol, index and footnote number, etc. subscript includes chemical symbol. Fixed The problem of line spacing when using sub and sup , set sub,sup{font-size:75%; line-height:0; position:relative;  Vertical-align:baseline;} sup{top:-0.5em;} sub{bottom:-0.25em}.

11, <address></address> provides author contact information that may have an author's e-mail address, a link to the contact page, or the author's mailing address. appear as italic. address can't contain h1~h6 article , address , aside footer , header , hgroup nav section

12, <ins></ins> mark the added content, underline the inserted text; <DEL></DEL> <S></S> s element plus strikethrough. ins and del cite and datetime cite Span style= "font-family:arial;" >datetime

13, <code></code> tag code example or file name, code needs to be displayed < > < and > <KBD></KBD> Mark user input indication, default to display in equal width font; <SAMP></SAMP> example output of a markup program or system, displayed by default in a width-equal font; <VAR></VAR> represents the value of a variable or placeholder, which is displayed by default in italics.

14. <pre></pre> pre-formatted text can keep text intrinsic indentation, line breaks, and spaces, by default displayed in equal-width font. Set the Auto-wrap pre{white-space:pre-wrap to the pre ;} .

15. <mark></mark> highlight text with a yellow background by default.

16, <br/> for poetry, street address and so on should appear next to the short line.

17. <span></span> is used to surround word or phrase content.

18. <u></u> is used to underline text.

19, <wbr/> can be changed,Chrome and Firefox effective;<br/> Force line wrapping.

20, <ruby><rp> (</rp><rt><rt><rp>) </rp></ruby> side note marking.

21, <bdo></bdo> set logical order for bidirectional text, properties dir set to rtl ltr <BDI></BDI> without setting properties dir

22, <meter></meter> represents the value of a fraction and the measured result of a known range, properties value Display value must contain, attribute min and max default to 0 and 1.0 title IE9 and safari

23. <progress></progress> Indicates the completion progress of the task, the property Max Specifies that the total work must be greater than 0, the property Value Specifies the amount that the task has completed, andIE9 does not support the element.

Fifth Chapter Image

1, the format of the image

1) JPEG: lossy format, the file saved in this format is relatively small, the download speed will be faster;

2) PNG and gif: Lossless format, for png and gif, PNG should be preferred .

Format	Usage	Color	Indexed color Transparency	Alpha Transparent
Jpeg	Suitable for most photos, as well as other images that are more color and accept some loss of quality	>1600 million	—	—
PNG-8	Suitable for identification, repeating patterns, and other less-colored images or images with continuous colors	256	Support	Support
PNG-24	similar to PNG-8, but supports images with more colors. Suitable for color-rich images with high quality requirements	>1600 million	Support	—
PNG-32	similar to PNG-24, but supports images with Alpha Transparency	>1600 million	—	Support
Gif	Usage is similar to PNG-8 and should be used in most cases PNG-8	256	Support	—

2. Transparency

1) Index color transparency: one pixel is either transparent or opaque;

2) Alpha Transparent: Can control the degree of transparency of one pixel,Photoshop does not support Alpha transparent PNG-8, But it supports Alpha -transparent PNG-32.

For transparent images, you should use PNG-8 or PNG-32

3, Propertiessrcindicates the location of the image file on the server. Propertiesaltfor an alternative description of the image,IE10The alternate text appears next to a small square with a fork and is surrounded by a box;Firefoxand theOperain other browsers, alternate text appears separately;Chromeand theSafaridoes not displayalttext, but the icon for the actual missing image. Propertieswidthand theHeightsets the image size, in pixels.

4. Icons:Faviconthe size should be at least16*16(units in pixels),IPhoneand theIPod Touchof theFaviconsize is57*57or114*114,IPadof theFaviconsize is72*72or144*144.

"HTML5 and CSS3 Basic Course" 4–5 Chapter