Home Web Front-end H5 Tutorial html5 basic tags (html5 video tag html5 new tag usage)_html5 tutorial skills

html5 basic tags (html5 video tag html5 new tag usage)_html5 tutorial skills

May 16, 2016 pm 03:48 PM
html5 basics

1. Changes in declaration

2. Specify the change of character encoding, it is recommended to use utf-8

in html5

3. Html5 allows

without a terminator, which is not an error

4. End tags are not allowed to be written: area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

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

6. Elements that can omit all tags are: html, head, body, colgroup, tbody

7. Previously, the attribute value text had to have double quotes, but now it can be omitted

8. See html5 markup example

9. New structural element section: container element. Chapters, headers, and footers can be used in combination with h1, h2... to indicate the document structure. Can also be used to encapsulate title content, but no title is inappropriate. When a container element needs to be directly styled or scripted to define behavior, it is recommended to use div instead of section. Function: Divide page content into chunks. Not to be confused with the article element, which has its own complete, independent content. Summary: ① Do not use the section element as a page container for setting styles, that is the job 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 the section element for content blocks without titles.

10. New structural element article: block-level element. Represents a piece of independent content on the page that is not contextually relevant. Emphasize independence, section emphasizes segmentation or chunking, and article emphasizes independence.

11. New structural element aside: block-level element. Represents the content position of the article element and auxiliary content related to the content of the article element.

12. New structural element Header: block-level element. The title of the entire page. There must be at least one heading (h1-h6) or hgroup element or nav element in the Header.

13. New structural element hgroup: block-level element. Used to combine titles for an entire page or a content block within a page. If there is only one main title, hgroup is not needed.

14. New structural element footer: block-level element. Footer for the content block.

15. New structural element address: inline element. Present document contact information, including: author, email, etc.

16. New structural element nav: block-level element. Navigation links. Traditional navigation, sidebar navigation, in-page navigation, and page-turning navigation. Don't use menu instead of nav in H5. The menu element is a series of menus that issue commands. It is an interactive element. More precisely, it is used in web applications.

17. New structural element figure: block-level element. An independent piece of stream content generally represents an independent unit of the document subject stream content. Use the figcaption element to add a caption to a group of figure elements.

18. New element video: defines video.


Copy code
The code is as follows:


19. New element audio: defines audio.


Copy code
The code is as follows:


20. New element embed: Insert various media, the format can be midi, wav, aiff, au, mp3, etc.

21

Copy code
The code is as follows:

http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0, 40,0"> name="src" value=""borse.wav"/" />

22. New element mark: highlighted or highlighted text. Quite similar to span

23. New element progress: represents the running process and displays the time-consuming function process in JavaScript.


Copy code
The code is as follows:


24. New element Time: represents date and time.


Copy code
The code is as follows:


Span
is used in H4. 25. New element ruby: represents ruby ​​comments. Han han, which is not available in h4

26. New element rt: represents the interpretation or pronunciation of characters

27. New element rp: used in ruby ​​to define the content displayed by browsers that do not support ruby ​​elements.

28. New element wbr: represents soft line break. The difference with br is that br means that a line break must be performed here; while wbr means that when the width of the browser or the parent element is wide enough, no line wrapping will be performed. If the width is not enough, the line will be automatically wrapped here. Wbr is very useful for character-based languages, but it doesn't seem to have much effect on Chinese. Not available in H4.

29. New element Canvas: represents graphics. Such as: charts, images. But: the element itself has no behavior. Only a canvas is provided, and the drawing API is displayed to the client JavaScript, so that the script can draw the drawing onto this canvas.


Copy code
The code is as follows:


30. New element command: represents command button. Such as: radio buttons, check boxes, buttons.

Copy code
The code is as follows:


There is no

in html4

31. New element details: Indicates the detailed information that Details users require and can obtain. Can be used in conjunction with summary. Summary provides a title or legend.


Copy code
The code is as follows:

html5< ;/summary>this ji a ddddd,you kdkdkdk about html5




32. New element datagrid: represents a list of data. Display in tree list

33. New element keygen: indicates generating key

34. New element output: represents different types of output. Such as script

35. New element source: media element. Define media assets. Use param

in H4

36. New element menu: represents the menu list.

Copy code
The code is as follows:

  • < ;/li>

  • The use of menu in h4 is not recommended.

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

    38. New input element type url: indicates that the url address must be entered

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

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

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


    Copy code
    The code is as follows:

    Date-------- ------Select day, month, year
    Month-----------Select month, year
    Week------------Select week and Year
    Time-------------Select time (hours and minutes)
    Datetime-------Select time, day, month, year (utc time)
    Datetime-local—Select time, day, month, year (local time)

    44.
    1) Abolish elements: Elements that only some browsers support: applet, bgsound (only supported by IE), blink, marquee and other elements. bgsound (only supported by ie), marquee (only supported by ie), so they 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) Tag Manual Definition: Used to combine elements. Usage Guide: Mostly used for combination of pictures and picture descriptions:

    Copy the code
    The code is as follows:


    figure label
    Here is the description of the image Information



    3) Label manual explanation: Define menu list. Use this label when you want to list form controls. Usage Guide: Used in menu blocks to define menu lists or menu options:

    Copy code
    The code is as follows :



  • HTML 5

  • CSS

  • JavaScript



  • Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

    Hot AI Tools

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Clothoff.io

    Clothoff.io

    AI clothes remover

    Video Face Swap

    Video Face Swap

    Swap faces in any video effortlessly with our completely free AI face swap tool!

    Hot Tools

    Notepad++7.3.1

    Notepad++7.3.1

    Easy-to-use and free code editor

    SublimeText3 Chinese version

    SublimeText3 Chinese version

    Chinese version, very easy to use

    Zend Studio 13.0.1

    Zend Studio 13.0.1

    Powerful PHP integrated development environment

    Dreamweaver CS6

    Dreamweaver CS6

    Visual web development tools

    SublimeText3 Mac version

    SublimeText3 Mac version

    God-level code editing software (SublimeText3)

    Hot Topics

    Java Tutorial
    1658
    14
    PHP Tutorial
    1257
    29
    C# Tutorial
    1231
    24
    What exactly does H5 page production mean? What exactly does H5 page production mean? Apr 06, 2025 am 07:18 AM

    H5 page production refers to the creation of cross-platform compatible web pages using technologies such as HTML5, CSS3 and JavaScript. Its core lies in the browser's parsing code, rendering structure, style and interactive functions. Common technologies include animation effects, responsive design, and data interaction. To avoid errors, developers should be debugged; performance optimization and best practices include image format optimization, request reduction and code specifications, etc. to improve loading speed and code quality.

    How to run the h5 project How to run the h5 project Apr 06, 2025 pm 12:21 PM

    Running the H5 project requires the following steps: installing necessary tools such as web server, Node.js, development tools, etc. Build a development environment, create project folders, initialize projects, and write code. Start the development server and run the command using the command line. Preview the project in your browser and enter the development server URL. Publish projects, optimize code, deploy projects, and set up web server configuration.

    How to make h5 click icon How to make h5 click icon Apr 06, 2025 pm 12:15 PM

    The steps to create an H5 click icon include: preparing a square source image in the image editing software. Add interactivity in the H5 editor and set the click event. Create a hotspot that covers the entire icon. Set the action of click events, such as jumping to the page or triggering animation. Export H5 documents as HTML, CSS, and JavaScript files. Deploy the exported files to a website or other platform.

    How to make pop-up windows with h5 How to make pop-up windows with h5 Apr 06, 2025 pm 12:12 PM

    H5 pop-up window creation steps: 1. Determine the triggering method (click, time, exit, scroll); 2. Design content (title, text, action button); 3. Set style (size, color, font, background); 4. Implement code (HTML, CSS, JavaScript); 5. Test and deployment.

    Is h5 same as HTML5? Is h5 same as HTML5? Apr 08, 2025 am 12:16 AM

    "h5" and "HTML5" are the same in most cases, but they may have different meanings in certain specific scenarios. 1. "HTML5" is a W3C-defined standard that contains new tags and APIs. 2. "h5" is usually the abbreviation of HTML5, but in mobile development, it may refer to a framework based on HTML5. Understanding these differences helps to use these terms accurately in your project.

    H5 Code: Accessibility and Semantic HTML H5 Code: Accessibility and Semantic HTML Apr 09, 2025 am 12:05 AM

    H5 improves web page accessibility and SEO effects through semantic elements and ARIA attributes. 1. Use, etc. to organize the content structure and improve SEO. 2. ARIA attributes such as aria-label enhance accessibility, and assistive technology users can use web pages smoothly.

    What Does H5 Refer To? Exploring the Context What Does H5 Refer To? Exploring the Context Apr 12, 2025 am 12:03 AM

    H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

    How to solve the h5 compatibility problem How to solve the h5 compatibility problem Apr 06, 2025 pm 12:36 PM

    Solutions to H5 compatibility issues include: using responsive design that allows web pages to adjust layouts according to screen size. Use cross-browser testing tools to test compatibility before release. Use Polyfill to provide support for new APIs for older browsers. Follow web standards and use effective code and best practices. Use CSS preprocessors to simplify CSS code and improve readability. Optimize images, reduce web page size and speed up loading. Enable HTTPS to ensure the security of the website.

    See all articles