Summary of today’s new H5 tags and attributes

Streams, ICONS, responsive images, audio and video, lists, H5 hyperlinks

Define the flow:

Streams represent stand-alone content like charts, photos, graphics, illustrations, code snippets, and so on. Prior to H5, there were no specific elements for this purpose. H5 introduces a stream with a figure and a figcaption, where a figcaption is a stream title. A stream title is not required, but if it is included, it must be the first or last element of the figure.

Figure — Stream container — shows the stream from the new start by default. You can change the style with CSS. Figure shows the indent left and right (margin size 40px) and the upper and lower 16px. It needs to be placed in the last or the first position of the figure label, and is not allowed to appear in any other position. It serves as the simplest description of the content and is applied to the explanation at the top of the table

Define icon:

The default icon size is 16 x 16px with a transparent background. Create a 16 x 16px icon file and save it as Favicon.ico. The.ico file can contain multiple different size files of the same name. Save the file to the root directory of your workspace and pass

<link rel = "ico" src ="" type = "image/x-ico >
Copy the code

The introduction of; If the icon cannot be loaded and displayed on the page, the loading of the icon may be slow. Alternatively, you can visit http://localhost/favicon.ico before accessing the web page.

Responsive image

Response view size:

HTML5 added picture tag and IMG tag srcset, sizes attribute

The picture tag, as a container, can contain one or more source tags, where source loads multimedia sources, containing the following properties :(IE9+ supports source tags)

Srcset = “image/ 01.png, image/02.png 2px”, srcset = “image/02.png 2px”

Media: set media query, madia = “(min-width: 320px)”;

sizes: Set the width, as sizes = “100vw”, or via media query, as sizes = “(min-width: 320px) 100vw, (min-width: “640px) 50vw”, sizes media queries only apply to the W descriptor, that is, if srcset is an X descriptor, or if srcset is not set for sizes at all.

Type: Sets the MIME attribute

Here’s what I learned about media queries after I went online

Media queries are queries made to the browser and changes made to the browser to achieve a known style or effect. The media query consists of several expressions. The CSS style is implemented only when the expression is correct. If the expression is false, the CSS style is ignored automatically. The understanding here is from this article, please refer toFront-end media query

Audio and video

H5 has added the audio audio tag and video video tag, through these two tags, we can achieve audio and video placed on the web page operation

Audio tags

The Audio tag can be wrapped around multiple source tags to import different audio files, and the browser will automatically select a playable file to play

Some browsers do not support a certain format of audio, you can use the source tag to add several different formats of audio, if the first does not support the second can be converted, if none of the above prompt text or link information;)

Properties:

Video element

(Like audio, it can contain multiple source tags for a similar purpose)

Properties:

summary

The source tag defines multimedia resources for the Audio and video tags. They must be wrapped in the Audio or video tag. The source tag contains the following attributes: Media, SRC, and Type. Media Defines the type of media resources, for example, if the above is not supported. SRC defines the address of the resource file. If the value after type does not match the value in media, the value is ignored.

The list of

Describes (custom) lists

Dl, dt, DD, dl can only contain DT and DD labels, dt and DD labels can contain any other labels, application example — the data representation of the rise and fall of the stock

Menu list

Menu tag, a list or menu that defines commands, which can contain both the command tag and the MenuItem tag. The command tag can contain many attributes (type – defines the type of the command, there are three types of command, checkbox, radio, the default value is command. Checked – Defines if checked is selected, only for checked and radio types. Disable – Defines whether command is available. Icon – Defines the URL of the image to display as command. Label – Defines the label visible to command. Radiogroup – Defines the group name to which command belongs, used only if type is radio.) Where the MENuItem tag has been removed from the MDN in the Web standard

H5 hyperlinks

H5 allows arbitrary objects such as paragraphs, lists, entire articles, and blocks within links, but does not allow audio, video, form elements, iframes, and other interactive content

On the anchor

In H5, the a tag is only a placeholder for the link, not an anchor, if the href is not set. In H4, the tag can be used as an anchor

Create used to link the anchor point of the general method – any element defines the ID value can be used as the anchor tag, name tag ID anchor when do not contain Spaces, don’t in absolutely positioned elements at the same time, as a tag set the href attribute, the attribute value is set to “# + anchor name”, such as “# p4”, if links to different pages, Settings such as “demo.html#p4” can use relative or absolute paths, but the anchor names are case sensitive

Download link:

There is a comparison between Download and not

<a href = “01.jpg” download>

<a href = “01.jpg” >

Currently, only Chrome and Firefox support the Download attribute

Image hot

The ID or name attribute in the map must be set to the same value, because the USEMAP in the IMG tag can refer to the ID or name attribute in the map.

Area must be nested within the tag, where Alt is the property that must be set within the area














Framework to link

<iframe SRC = “URL”> where the default width and height of the frame is 220 × 120px, which can be styled using CSS

Relative to opposite me bosses, to learn is too little, some knowledge if not through this blog feel forgotten, but it doesn’t matter, later will slowly do small projects, so you can remember, H5 have a day can be learned, you then can also update, want to preschool with the small white, welcome to step on!