A discarded label
The following HTML 4.01 elements have been deleted in HTML5, although the browser for compatibility will also support these tags, but it is recommended to use new alternative label, paradoxically old browser support for the new label was not well, depending on the project depending on the target audience.
1, can be used instead of CSS elements
These elements contain basefont, big, center, font, s, strike, tt, u. These elements are used purely for display page, the content of the performance should be completed by the CSS.
2, frame frame
These elements include frameset, frame, noframes. HTML5 does not support frame framework only supports iframe framework, in line or in the form of a plurality of pages of pages of the server side to create, delete more than three labels.
3, only some browsers support elements
These elements contain applet, bgsound, blink, marquee other labels.
4, other elements were abolished
Abolish rb, the ruby alternative abolish acronym used abbr alternative abolish dir Use ul alternative abolish embodiment isindex using form and input the combination of alternative abolish listing using pre alternative abolish xmp using code Alternatively abolish nextid use guids repealing plaintex using the "text / plian" ( unformatted text) the MIME type of alternative
Second, the new label
1, the new structure tags
In HTML4.01 in div layouts are widely used in a variety of environments, there is no clear definition, HTML5 for semantic SEO to div, and the newly added structure tags as follows:
a), section elements showing another part of a page content block, such as chapters, headers, footers or page. Can h1, h2 ...... and other elements used in combination, represent document structure. Example: HTML5 the <section> ...... </ section> ; HTML4 in <div> ...... </ div> .
b), article element represents a separate page of content not associated with a context. For example, an article.
c), aside element , said element associated with the article contents of auxiliary information other than the article element content.
d), header element represents the title of the page in a content block or really a page.
e), hgroup elements represent the contents of a header block really a page or in combination.
f), footer element represents the entire page or footnote in a content block. In general, he will include the creator's name, creation date, and contact information creators.
g), nav element represents a part of the page navigation links.
h), figure elements represents a separate piece of streaming content, generally designated streaming content in the document body a separate unit. Use figcaption elements add a caption to figure element groups. E.g:
<figure>
<figcaption>PRC</figcaption>
<p>The People's Republic of China was born in 1949</p>
</figure>HTML4 often writing
<dl>
<h1>prc</h1>
<p>The People's Republic of China was born in 1949</p>
</dl>To help make learning easy, efficient and free for everyone to share a large number of resources to help you become the front-end engineers, and even the way through the clutter full stack engineers. We are here to recommend a full-stack Learning Exchange front-end circle: 784783012 Welcome to flow into ××× discussion, learning exchanges and common progress.
When the real beginning of learning will inevitably do not know where to start, leading to inefficiencies affect confidence to continue learning.
But the most important thing is I do not know what needs to master key technologies, frequently stepped pit learning, end up wasting a lot of time, it is effective or necessary resources.
2, the new add other elements
2.1、meter
A value within a specific range, can be used to pay, quantities, percentages, and so represents the maximum value max, min represents the minimum value, value represents the current value.
<meter max="100" min="0" value="60" style="width: 300px;"></meter>Js it can be controlled from 0 to 100.
2.2、time
time. Represents a time value, attribute datetime time the General Assembly stressed time: <time> 2015-10-6 </ time>
Since the label is a semantic label, when viewed in the browser does not have special effects, substantially the same effect as the label is not provided.
2.3、progress
Used to indicate the progress bar
<h3>progress</h3>
<progress value="75" max="100"></progress>max: maximum value at the completion of
value: The current value
2.4、datalist
The tag defines an optional list of data. Used in conjunction with the input element, you can create a drop-down list of input values. When combined with the input can be done either choose enter.
<input type="text" list="countries" />
<datalist id="countries">
<option value="中国"></option>
<option value="美国"></option>
<option value="日本"></option>
</datalist>2.5, mark the elements
Which is mainly used to want to highlight or highlight the text presented to the user visually. Typical applications in the search results highlighted keyword search elements. HTML5 <mark> </ mark>; HTML4 <span> </ span>.
2.6, ruby element
Definition of ruby annotation (Chinese phonetic or characters). And <ruby> and <rt> tag used together. What is displayed when the ruby element consists of one or more characters (requires an explanation / pronunciation) and a rt providing the information elements, also includes optional rp elements defined when the browser does not support the "ruby" element.
2.7, rt element
Defined characters (Chinese phonetic or characters) interpretation or pronunciation.
2.8, rp element
In ruby annotations to define browser does not support the ruby element of the displayed content.
2.9, wbr element
It represents soft wrap. Br distinguished elements: an element represented here must br wrap; WBR represents a browser window or parent element arch width (newline is not necessary), does not wrap, width and less active here wrap.
2.10, canvas elements
Custom graphics, such as charts and other images. <Canvas> element only graphics container (canvas), the script must be used 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>2.11, command element
It indicates a command button, such as radio buttons, check boxes or buttons. Only when the command elements located within the menu element, which is visible. Otherwise, this element is not displayed, but you can use it defined keyboard shortcuts.
<menu>
<command onclick="alert('Hello World')"> Click Me!</command>
</menu>2.12, details label
Used to describe the details of a document or document section. Can be used in conjunction with a summary tag, summary details can be defined as a title. The title is visible when the user clicks on the title, will show the details. summary details should be the first child.
2.14, datalist tag
Defined list of options. Please input element used in conjunction with the elements, to define the possible values input. datalist and its options will not be displayed, it is only legitimate input a list of values. Use the list attribute input element to bind datalist.
2.15, output label
Define different types of output, such as the output of the script.
<form action="form_action.asp" method="get" name="sumform">
<output name="sum"></output>
</form>2.16, menu 标签
Custom menu list. Use the label when you want to list form controls. Note the difference between the nav, menu dedicated to the form control.
3, multimedia labels
If you need to play audio and video methods we use are often used in the page 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), using flash player
For example, some three-way plug, flowplayer602
It refers to a multimedia components html5 video (video) components and audio (audio) components. HTML5 multimedia components can be made without the aid of the case, such as Flash Player and other third-party plug-ins, multimedia components embedded directly on your web page. Browser provides native support for the new video capability allows Web developers more easily, without depend on the effectiveness of external plug-ins, add a video component on their website. Due to the limitations of Flash technology Apple used at this stage on the iPhone and iPad, HTML5 capabilities of multimedia components it is particularly important.
3.1, video video tag
For playing video, movies, label basic format 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&file=myvideo.swf" />
</object>
当前浏览器不支持 video直接播放，点击这里下载视频： <a href="a.mp4">下载视频</a>
</video>source is a video source, you can have a variety, when a failure to select the next, there are the following three:
MPEG 4 files with file Ogg = Ogg Vorbis Theora video coding and audio coding MPEG4 = with H.264 video coding and audio coding AAC = WebM with VP8 video coding and audio coding Vorbis file WebM
note:
<video src="img/a.mp4" controls="controls" poster="img/1.jpg">
您的浏览器太老了，请升级，视频下载<a href="#">地址</a>
</video>innerHTML contents of most of the HTML5 tag is what is displayed when the browser does not support the tag.
Events tied to monitor the difference between:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件绑定与监听的区别</title>
</head>
<body>
<button id="btnA">按钮A</button>
<button id="btnB">按钮B</button>
<script type="text/javascript">
var btnA = document.getElementById("btnA");
var btnB = document.getElementById("btnB");
btnA.onclick = function() {
alert("你点了一下");
}
btnA.onclick = function() {
alert("你又点了一下");
}
btnB.addEventListener("click",function(event){
alert("你点了一下");
},false);
btnB.addEventListener("click",function(event){
alert("你又点了一下");
},false);
</script>
</body>
</html>After using the form on the event name binding event binding will cover the event in front of the binding, which is the last event bound to take effect;
Use addEventListener binding event is not covered, which can bind multiple events on the same element.
Property and event example video API's:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video 标签</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&file=myvideo.swf" />
</object> 当前浏览器不支持 video直接播放，点击这里下载视频：
<a href="content/a.mp4">下载视频</a>
</video>
<h2>
<button onclick="play()">播放</button>
<button onclick="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>3.2, audio audio tag
audio can be achieved playing sound, music features.
<audio src=http://baidu/demo/test.mp3 controls >您的浏览器不支持audio元素</autio>
<audio src="content/a.mp3" controls="controls" autoplay="autoplay"></audio>Properties audio tag, many properties are the same video:
autoplay: true | false, if it is true, the audio playback immediately after the ready. controls: true | false If true, then displayed to the user controls, such as play button. end: numeric value defined player in the audio stream where playback is stopped. By default, the sound will play to the end. loopend: numeric value is defined in the audio stream playback stopped position loop, a default value of end attribute. loopstart: numeric value defined start position in the audio stream of the loop. The default value is the start property. playcount: numeric value defined audio clips played many times. The default is 1. src: url The url of the audio playback. start: numeric value is defined in the audio stream player starts playing position. By default, the sound at the beginning of the play.
source sub-tab
Source element using the multimedia elements as sub-tab Example:
<audio>
<source src='test.mp3’ type='audio/mpeg'/>
<source src='test.ogg’ type='audio/ogg'/>
<source src='test.spx’ type='audio/ogg'/>
</audio>Use source element, the browser in order to find the list until it finds a file format which can be played, after found, then play the file and ignore the other elements.
The audio and video essentially the same API, following is an example of a custom adjust the volume:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>audio标签</title>
</head>
<body>
<h2>audio标签</h2>
<audio src="content/fcml.mp3" controls="controls" autoplay="autoplay" id="mp3">
<marquee><h2>换个浏览器吧，太老了</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>Volume only between 0-1.
3.3, embed elements
For embedded content (including media). Format can be Midi, Wav, AIFF, AU, MP3, flash and so on.
例：<embed src="flash.swf" /> HTML4中代码示例<object data="flash.swf" type="application/x-shockwave-flash"><object>