Html5 basic tags (html5 video tags: html5 new tag usage)

Source: Internet
Author: User

Comments: Html5 basics, including html5 video tags and html5 new tags.

1. Declaration changes <! DOCTYPE html>

2. Change of specified character encoding <meta charset = "UTF-8">. UTF-8 is recommended in html5.

3. Html5 allows <p> no Terminator. This is not an error.

4. The write end mark is not allowed: area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

5. elements that can omit the end tag include li, dt, dd, p, rt, rp, optgroup, option, colgroup, thead, tbody, tfoot, tr, td, and th.

6. The following elements can be omitted: html, head, body, colgroup, and tbody.

7. Before <input type = text>, the attribute value text must have double quotation marks, and can be omitted now.

8. See the html5 tag example.

9. New Structure Element section: Container element. Chapter, header, and footer, which can be associated with h1, h2... Used Together to mark the document structure. It can also be used to encapsulate the title + content, but it is inappropriate to have no title. When a container element needs to be directly defined as a style live script to define behavior, we recommend that you use div instead of section. Purpose: divide the page content. Do not confuse the article element with its own complete and independent content. Conclusion: ① do not use the section element as the page container for setting the style. It is the work of the div element. ② If the article element, aside element, or nav element is more suitable for use, do not use the section element. ③ Do not use section elements for content blocks without titles.

10. Newly Added structure element article: block-level element. It indicates that the content on the page is not as independent as the context. Independence is emphasized, sections are segmented or segmented, and articles emphasize independence.

11. added structure element aside: block-level element. It indicates the content position of the article element and the auxiliary content related to the content of the article element.

12. Newly Added structure element Header: block-level element. The title of the entire page. At least one heading (h1-h6) or hgroup element or nav element must exist in the Header.

13. New structural element hgroup: block-level element. Used to combine the titles of a content block on the entire page or page. If there is only one primary title, hgroup is not required.

14. New Structure Element footer: block-level element. Content block footer.

15. The new structure element address is a row element. Displays the contact information of the document, including the author and email.

16. New Structure Element nav: block-level element. Navigation link. Traditional navigation, sidebar navigation, on-page navigation, and flip navigation. In H5, do not use menu instead of nav. The menu element is an interactive element on a series of menus that issue commands. More specifically, it is used in web applications.

17. New Structure Element figure: block-level element. An independent stream content, which generally represents an independent unit of the topic stream content of a document. Use the figcaption element to add titles to the figure element group.

18. Add the video element: Define the video.


The Code is as follows:
<Video width = "320" height = "240" src = "”movie.ogg" "controls =" controls "> video element </video>

19. New Element audio: Specifies the audio.


The Code is as follows:
<Audio width = "300" height = "32" src = "”someaudio.wav"> audio elements </audio>

20. Add an embed element: insert various media in the format of midi, wav, aiff, au, and mp3.

21

The Code is as follows:
<Object width = "320" height = "240" classid = "clsid: d27cdb6e-ae6d-11cf-96b8-444553540000 "codebase =" <a href = "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param "> http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param </a> name = "src" value = "eclipborse.wav"/"/> <embed width = "320" height = "240" type = "application/x-shockwave-flash" src = "eclipborse.wav"/"/> </object>

22. Add an element mark: highlighted or highlighted text. Equivalent to span

23. Add the element progress: indicates the running process and shows the time-consuming functional process in javascript.


The Code is as follows:
<Meter> </meter>

24. New Element Time: indicates the date and Time.


The Code is as follows:
<Time> </time>

Span in H4
25. Add the ruby element to indicate ruby annotations. Han and h4 do not have

26. added the rt element to indicate the interpretation or pronunciation of characters.

27. Add element rp: Used in ruby to define the content displayed by browsers that do not support ruby elements.

28. added element wbr: soft line feed. The difference with br is that br indicates that a new line must be wrapped. If wbr is a browser or a parent element with a wide width, the new line is not wrapped. If the width is not enough, the new line is automatically wrapped here. Wbr has a great effect on simplified languages, but does not seem to have much effect on Chinese. Not in H4.

29. added the Canvas Element to indicate the image. Such as charts and images. However, this element has no behavior. Only one canvas is provided, and the rendering api is displayed to the client javascript, so that the script can draw the drawing on the canvas.


The Code is as follows:
<Canvas id = "" rrr "" width = "" 200 "" height = "" 220 "> </canvas>

30. Add the command element, indicating the command button. Such as single-choice buttons, check boxes, and buttons.

The Code is as follows:
<Command onclick = "cut ()" label = "cut"> </command>

Not in html4

31. added the element "details": Details required by the details user and available. It can be used with summary. Summary provides the title or legend.


The Code is as follows:
<Details> <summary> html5 </summary> this ji a ddddd, you kdkdkdk about html5

</Details>

 
32. New Element datagrid: indicates the data list. Display in a tree list

33. Add the keygen element to generate the key.

34. Add an output element to indicate different types of output. Such as script

35. Add source: Media element. Define media resources. Use param in H4

36. Add menu: A menu list.

The Code is as follows:
<Menu> <li> </li </menu>

Menus in h4 are not recommended.

37. New input element type email: indicates that the text input box of e-mail must be entered.

38. Add an input element type url, which indicates that the url address must be entered.

39. New input element type number: indicates that a value must be input.

40. New input element type range: indicates that a certain range of numeric values must be entered.

41. New input element type date pickers: there are multiple new input text boxes in h5 that can select date and time.


The Code is as follows:
Date -------------- select day, month, and year
Month ----------- select Month and year
Week ------------ select Week and year
Time ------------- select the Time (hours and minutes)
Datetime ------- select time, day, month, and year (utc time)
Datetime-local-Select time, day, month, and year (local time)

44,
1) Abolition element: only some browsers support elements such as applet, bgsound (only supported by ie), blink, and marquee. Bgsound (only supported by ie) and marquee (only supported by ie) are abolished in h5. Applet-can be replaced by embed or object. Bgsound-can be replaced by audio. Marquee can be replaced by js programming.
2) label manual Description: Used to combine elements. Guide: mostly used for combination of images and image descriptions:

The Code is as follows:
<Figure>

<Figcaption> here is the description of the image. </figcaption>
</Figure>

3) label manual definition: defines the menu list. This label is used when you want to list form controls. Usage Guide: Used in menu blocks to define menu lists or menu options:

The Code is as follows:
</Pre>
<Menu>
<Li> HTML 5 </li>
<Li> CSS </li>
<Li> JavaScript </li>
</Menu>
<Pre>


Related Article

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.