HTML learning knowledge Summary

Structured tags: specify the content structure, location, and importance.

<H1>...

<P> split a paragraph;

<I>, <B> <I> italic, <B> bold, distinguish between different content and the importance of the text. The element can only contain text;

<Sup>, <sub> <sup> superscript, <sub> subscript, content format;

<Br/>,

The blank browser parses the linefeed into a space and resolves consecutive spaces into a space. When a bunch of spaces are connected with the linefeed, the browser parses them into a space, which is calledWhite space folding;

 

Semantic tags: tags that indicate specific semantics are recognized by machines to improve page accessibility.

<Strong>, <em> <strong> emphasize tone, <em> slightly emphasize;

<Blackquote>, <q> <blackquote> refers to the entire section, which is indented, but should not be used for indentation. <q> quote a paragraph, enclose it with quotation marks, both references have the cite attribute, indicating the source of the reference;

<Cite> indicates the reference source, which can represent items, names, and so on;

<Dfn> defines nouns. The general format is not changed;

<Address> address and contact information;

<Ins>, <del>, <s> <ins> indicates the inserted content, which is generally underlined, <del> indicates the deleted content, and a straight line is added, <s> indicates the content that is irrelevant to the subject but is retained;

 

Box Model:

In the hybrid mode, the actual width of the box is = width + margin, and the width of padding and border is calculated to the width;

In standard mode, the actual width is equal to width + padding + border + margin; the height is also the same;

 

Table:

Common labels are <table>, <tr>, <th>, and <td>;

<Caption> define the table title, <thead>, <tbody>, and <tfoot> define the table structure;

The scope attribute of the td element has two values: row and col, which respectively indicate that the content of the cell is the row title/column title;

Rowspan and colspan (value> 1) are used to merge cells;

You can specify the width and height of the element in the first line of tr and the content alignment. Then, the column where the element is located will follow this method;

Apply to tr: hover to add effect to current row;

Empty-cells controls the display or hiding of cells, show/hide;

Border-spacing controls the spacing between cells. When the border-collapse value is collapse, it indicates that the cells are in a tight arrangement and there are no gaps between them. border-spacing is invalid;

 

List:

List-style-type, list-style-image, list-style-position

There are three types of list-style-type in ul: disc (solid circle), circle (hollow circle), square (square );

In ol, list-style-types include decimal (1), decimal-leading-zero (01), lower-alpha (a), upper-alpha (), lower-roman (I), upper-roman (I );

List-style-image: You can use a custom image as a project symbol. You can only use a single icon file;

List-style-position: indicates the relative position of the text and the project symbol. inside indicates that the project symbol is in the text, and the next line of the text is not indented. outside indicates that the symbol is located outside the text, indent the next line of this section;

 

Form:

Fieldset: a functional area composed of form components;

Legend: a title of the form field;

Select: The size attribute controls the number of realistic options. The multiple attribute enables the multi-choice function;

Input: type = "image". You can use the image as a form submission button to add an image using the src attribute;

 

Font: The font is divided into the client font-family, the server font @ font-face, the service-based server font @ font-face, and the font of SIFR embedded in flash. CUFON is similar to sifr.

 

Meta tag: <meta name = "" content = ""/>,<Meta http-equiv = "" content = ""/>

Common name values: description, descriptive text, keywords,

Http-equiv: content-type defines the webpage text format and encoding format. pragma = no-cache prevents the browser from caching the webpage. expires specifies the webpage validity period;

 

Flash, video, audio

Use the SWF script to add flash:

Swfobject. embedSWF ("URL", "ID", "400", "300", "8.0.0 ");
 

Replaces the specified id with the flash element;

The vedio and audio labels of html5 are used to add video and audio. The flash method is used as an alternative to HTML 5 browsers:

1. Use js to create video and audio tags and check whether the browser supports html5;

2. <video> attribute: preload, src Source file, poster default image, controls default control, automatic playback after autoplay is loaded, loop playback

Use the <source> label to add multiple source files, which are compatible with the file types supported by each browser.

 

Media Type | Media Query provides corresponding support for different types of devices

Media type is used to specify the device type and apply the corresponding style to different devices. It belongs to the property of css2. the default value is all;

Media query is used to determine the parameters of a device and apply appropriate styles. It is a css3 attribute;

For details, visit the media type and media query Link (from the front-end observation );