A brief discussion on new and abandoned tags in HTML5

The following HTML 4.01 elements have been deleted in HTML5. Although browsers still support these tags for compatibility reasons, it is recommended to use new alternative tags. Paradoxically, old browsers do not support new tags enough. Depending on the project Depends on the audience.

These elements include basefont, big, center, font, s, strike, tt, u. These elements are purely for page display, and the displayed content should be completed by CSS.

These elements include frameset, frame, and noframes. HTML5 does not support frame frames, but only supports iframe frames, or use a server-side format composed of multiple pages that conforms to the page, and delete the above three tags.

These elements include applet, bgsound, blink, marquee and other tags.

Abolish rb, use ruby ​​to replace acronym Use abbr to replace abolition dir Use ul to replace isindex Use a combination of form and input to replace listing Use pre to replace xmp Use code to replace abolition nextid Use guids to abolish plaintex Use text/plian (unformatted body) MIME type substitution

In HTML4.01, divs are widely used in various layout environments without a clear definition. HTML5 semanticizes divs for SEO, and newly added structural tags are as follows:

a), the section element represents a content block in the page, such as a chapter, header, footer or other part of the page. It can be used in combination with h1, h2... and other elements to represent the document structure. Example: <section>……</section> in HTML5; <div>……</div> in HTML4.

b). The article element represents a piece of independent content on the page that is not related to the context. For example, an article.

c), the aside element represents auxiliary information related to the content of the article element other than the content of the article element.

d). The header element represents a content block in the page or the title of the entire page.

e). The hgroup element represents a combination of the titles of the entire page or a content block in the page.

f), the footer element represents the footnote of the entire page or a content block in the page. Typically, it will include the creator's name, the date it was created, and the creator's contact information.

g). The nav element represents the navigation link part of the page.

h). The figure element represents an independent piece of flow content, generally representing an independent unit in the main flow content of the document. Use the figcaption element to add a caption to a group of figure elements. For example:

 <figure> ​<figcaption>PRC</figcaption> ​<p>The People's Republic of China was born in 1949</p></figure>

Common writing in HTML4

 <dl> ​<h1>prc</h1> ​<p>The People's Republic of China was born in 1949</p> ​</dl>

Running results:

2.1. meter

Represents a value within a specific range, which can be used for wages, quantities, percentages, etc. max represents the maximum value, min represents the minimum value, and value represents the current value.

 <meter max=100 min=0 value=60 style=width: 300px;></meter>

You can use js to control it from 0 to 100.

time. Represents a time value. The attribute datetime emphasizes the time. Conference time: <time>2015-10-6</time>

 <time>2015-10-6</time>

We start class every morning at <time>8:30</time>. I have a date on <time datetime=2017-02-14>Valentine's Day</time>.

Because this tag is a semantic tag, it has no special effect when viewed on a browser. It is basically the same effect as if the tag is not set.

Used to represent a progress bar

 <h3>progress</h3><progress value=75 max=100></progress>

max: maximum value, value at completion

value: current value

This tag defines a list of optional data. Used in conjunction with the input element, you can create a drop-down list of input values.

When combined with input, both selection and input can be completed.

 <input type=text list=countries /><datalist id=countries> <option value=China></option> <option value=United States></option> <option value=Japan></option></datalist>

It is mainly used to visually present to the user the text that needs to be highlighted or highlighted. Search keywords are highlighted in typical application search results. HTML5<mark></mark>;HTML4 <span></span>.

Define ruby ​​comments (Chinese pinyin or characters). Used with the <ruby> and <rt> tags. The ruby ​​element consists of one or more characters (requiring an explanation/pronunciation), an rt element that provides that information, and an optional rp element that defines content to be displayed when the browser does not support the ruby ​​element.

Defines the interpretation or pronunciation of a character (Chinese phonetic phonetic or character).

Used in ruby ​​comments to define what is displayed by browsers that do not support ruby ​​elements.

Represents a soft line break. The difference with the br element: the br element indicates that a line break must be made here; wbr indicates that when the browser window or the parent element is wide (when there is no need for a line break), the line will not be broken, but when the width is not enough, the line will be automatically wrapped here.

Define graphics, such as charts and other images. The <canvas> element is just a graphics container (canvas), and you must use scripts to draw graphics.

 <canvas id=myCanvas></canvas><script type=text/javascript> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = '#FF0000' ; ctx.fillRect(0, 0, 80, 100);</script>

Represents a command button, such as a radio button, check box, or button. The command element is visible only if it is inside a menu element. Otherwise this element will not be displayed, but it can be used to specify keyboard shortcuts.

 <menu> ​<command onclick=alert('Hello World')> ​Click Me!</command> ​</menu>

Used to describe details of a document or part of a document. Can be used in conjunction with the summary tag, which can define titles for details. The title is visible, and when the user clicks on the title, the details are displayed. summary should be the first child element of details.

Define a list of options. Use this element in conjunction with the input element to define the possible values ​​of the input. The datalist and its options are not displayed, it is just a list of valid input values. Use the list attribute of the input element to bind the datalist.

Define different types of output, such as script output.

 <form action=form_action.asp method=get name=sumform> ​<output name=sum></output> ​</form>

Define menu list. Use this label when you want to list form controls. Note the difference from nav. Menu is specifically used for form controls.

If you need to play audio and video on the page, the methods we often use are:

a)、embed

 <embed src='http://player.youku.com/player.php/sid/XODIxNTY0NTQw/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align=' middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>​<embed src=img/iceage4.mp4></embed>

b). Use flash player

Such as some third-party plug-ins, flowplayer602

HTML5 multimedia components refer to video (video) components and audio (audio) components. HTML5 multimedia components can embed multimedia components directly on your web pages without the help of third-party plug-ins such as Flash Player. The new ability of browsers to offer native support for video makes it easier for web developers to add video components to their websites without relying on the availability of external plug-ins. Due to the limitations of the Flash technology currently used by Apple on the iPhone and iPad, the capabilities of HTML5 multimedia components are particularly important.

Used for playing videos, movies

The basic formula of the label is as follows:

 <video width=800 height=600 controls=controls poster=content/1.jpg> <source src=content/iceage4.mp4 type=video/mp4></source> <source src=content/iceage4.webm type=video /webm></source> <object width= height= type=application/x-shockwave-flash data=myvideo.swf> <param name=movie value=myvideo.swf /> <param name=flashvars value=autostart=true&amp;file=myvideo.swf /> </object> The current browser does not support direct video playback. Click here to download the video: <a href=a.mp4>Download video</ a></video>

Source is the video source, which can be of multiple types. When one fails, the next one will be selected. There are three main types:

Ogg = Ogg file with Theora video encoding and Vorbis audio encoding MPEG4 = MPEG 4 file with H.264 video encoding and AAC audio encoding WebM = WebM file with VP8 video encoding and Vorbis audio encoding

Notice:

 <video src=img/a.mp4 controls=controls poster=img/1.jpg>Your browser is too old, please upgrade, video download <a href=#>Address</a></video>

The innerHTML content of most HTML5 tags is the content displayed when the browser does not support the tag.

The difference between event binding and listening:

 <!DOCTYPE html><html>​ <head> <meta charset=UTF-8> <title>The difference between event binding and monitoring</title> </head>​ <body> <button id=btnA>Button A </button> <button id=btnB>Button B</button> <script type=text/javascript> var btnA = document.getElementById(btnA); var btnB = document.getElementById(btnB); btnA.onclick = function() { alert(you clicked); } btnA.onclick = function() { alert(you clicked again); } btnB.addEventListener(click, function(event){ alert(you clicked); },false); btnB.addEventListener(click,function(event){ alert(you clicked again); },false); </script> </body>​</html>

After binding an event using the on event name, the binding will overwrite the previously bound event, that is, the last bound event will take effect;

Using addEventListener to bind events will not overwrite, and multiple identical events can be bound to one element at the same time.

 <!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>Video tag</title> </head> <body> <video id=videoIce width=800 height=600 controls=controls poster =content/1.jpg> <source src=content/iceage4.mp4 type=video/mp4></source> <source src=content/iceage4.webm type=video/webm></source> <object width= height= type=application/x-shockwave-flash data=myvideo.swf> <param name=movie value=myvideo.swf /> <param name=flashvars value= autostart=true&amp;file=myvideo.swf /> </object> The current browser does not support direct video playback. Click here to download the video: <a href=content/a.mp4>Download video</a> </video> <h2> <button onclick=play()>Play</button> <button onclick=pause()>Pause</button> <span id=msg></span> </h2> <script type =text/javascript> var videoIce=document.getElementById(videoIce); function play() { videoIce.play(); }​ function pause() { videoIce.pause(); } videoIce.ontimeupdate = function() { document.getElementById(msg).innerHTML=videoIce.currentTime; } </script> </body>​</html>

Audio can realize the function of playing sound and music.

 <audio src=http://baidu/demo/test.mp3 controls >Your browser does not support the audio element</autio><audio src=content/a.mp3 controls=controls autoplay=autoplay></audio>

Many of the attributes of the audio tag are the same as those of video:

autoplay: true|false, if true, the audio will be played as soon as it is ready. controls: true|false If true, displays controls, such as a play button, to the user. end: numeric value defines where in the audio stream the player stops playing. By default, the sound will play to the end. loopend: numeric value defines the position where loop playback stops in the audio stream. The default is the value of the end attribute. loopstart: numeric value defines the starting position of loop playback in the audio stream. The default is the value of the start attribute. playcount: numeric value defines how many times the audio clip is played. The default is 1. src: url The url of the audio being played. start : numeric value defines the position in the audio stream where the player starts playing. By default, the sound plays at the beginning.

Example of using the source element as a sub-tag of a multimedia element:

 <audio>​<source src='test.mp3 ' type='audio/mpeg'/>​<source src='test.ogg ' type='audio/ogg'/>​<source src='test.spx ' type='audio/ogg'/>​</audio>

Using the source element, the browser searches sequentially in the list until it finds a file format that it can play. Once found, it plays the file and ignores other elements that follow.

The API of audio is basically the same as that of video. Here is an example of customizing the volume:

 <!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>audio tag</title> </head> <body> <h2>audio tag</h2> <audio src=content/ fcml.mp3 controls=controls autoplay=autoplay id=mp3> <marquee><h2>Change the browser, it’s too old</h2></marquee> </audio> <input type=range min=0 max=100 onchange=setVolume(this) /> <script type=text/javascript> function setVolume(obj){ document.getElementById(mp3).volume=obj.value*0.01; } < /script> </body></html>

The volume is only between 0-1.

Used to embed content (including various media). The format can be Midi, Wav, AIFF, AU, MP3, flash, etc.

Example: <embed src=flash.swf /> Code example in HTML4 <object data=flash.swf type=application/x-shockwave-flash><object>

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.