


html5 basic tags (html5 video tag html5 new tag usage)_html5 tutorial skills
May 16, 2016 pm 03:48 PM1. Changes in declaration
2. Specify the change of character encoding, it is recommended to use utf-8
in html53. 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.
19. New element audio: defines audio.
20. New element embed: Insert various media, the format can be midi, wav, aiff, au, mp3, etc.
21
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.
24. New element Time: represents date and time.
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.
30. New element command: represents command button. Such as: radio buttons, check boxes, buttons.
There is no
in html431. 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.
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 H436. New element menu: represents the menu list.
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.
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:

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:

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

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

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

HTML5isbetterforcontrolandcustomization,whileYouTubeisbetterforeaseandperformance.1)HTML5allowsfortailoreduserexperiencesbutrequiresmanagingcodecsandcompatibility.2)YouTubeofferssimpleembeddingwithoptimizedperformancebutlimitscontroloverappearanceand

The way to add drag and drop functionality to a web page is to use HTML5's DragandDrop API, which is natively supported without additional libraries. The specific steps are as follows: 1. Set the element draggable="true" to enable drag; 2. Listen to dragstart, dragover, drop and dragend events; 3. Set data in dragstart, block default behavior in dragover, and handle logic in drop. In addition, element movement can be achieved through appendChild and file upload can be achieved through e.dataTransfer.files. Note: preventDefault must be called

inputtype="range" is used to create a slider control, allowing the user to select a value from a predefined range. 1. It is mainly suitable for scenes where values ??need to be selected intuitively, such as adjusting volume, brightness or scoring systems; 2. The basic structure includes min, max and step attributes, which set the minimum value, maximum value and step size respectively; 3. This value can be obtained and used in real time through JavaScript to improve the interactive experience; 4. It is recommended to display the current value and pay attention to accessibility and browser compatibility issues when using it.

AnimatingSVGwithCSSispossibleusingkeyframesforbasicanimationsandtransitionsforinteractiveeffects.1.Use@keyframestodefineanimationstagesforpropertieslikescale,opacity,andcolor.2.ApplytheanimationtoSVGelementssuchas,,orviaCSSclasses.3.Forhoverorstate-b

Audio and video elements in HTML can improve the dynamics and user experience of web pages. 1. Embed audio files using elements and realize automatic and loop playback of background music through autoplay and loop properties. 2. Use elements to embed video files, set width and height and controls properties, and provide multiple formats to ensure browser compatibility.

WebRTC is a free, open source technology that supports real-time communication between browsers and devices. It realizes audio and video capture, encoding and point-to-point transmission through built-in API, without plug-ins. Its working principle includes: 1. The browser captures audio and video input; 2. The data is encoded and transmitted directly to another browser through a security protocol; 3. The signaling server assists in the initial connection but does not participate in media transmission; 4. The connection is established to achieve low-latency direct communication. The main application scenarios are: 1. Video conferencing (such as GoogleMeet, Jitsi); 2. Customer service voice/video chat; 3. Online games and collaborative applications; 4. IoT and real-time monitoring. Its advantages are cross-platform compatibility, no download required, default encryption and low latency, suitable for point-to-point communication

The key to using requestAnimationFrame() to achieve smooth animation on HTMLCanvas is to understand its operating mechanism and cooperate with Canvas' drawing process. 1. requestAnimationFrame() is an API designed for animation by the browser. It can be synchronized with the screen refresh rate, avoid lag or tear, and is more efficient than setTimeout or setInterval; 2. The animation infrastructure includes preparing canvas elements, obtaining context, and defining the main loop function animate(), where the canvas is cleared and the next frame is requested for continuous redrawing; 3. To achieve dynamic effects, state variables, such as the coordinates of small balls, are updated in each frame, thereby forming

To confirm whether the browser can play a specific video format, you can follow the following steps: 1. Check the browser's official documents or CanIuse website to understand the supported formats, such as Chrome supports MP4, WebM, etc., Safari mainly supports MP4; 2. Use HTML5 tag local test to load the video file to see if it can play normally; 3. Upload files with online tools such as VideoJSTechInsights or BrowserStackLive for cross-platform detection. When testing, you need to pay attention to the impact of the encoded version, and you cannot rely solely on the file suffix name to judge compatibility.
