1. 程式人生 > >前端學習11.14

前端學習11.14

mbed out tac asc 蘋果公司 局限 com menu etime

轉載自:http://www.cnblogs.com/best/p/6096476.html#_lab2_2_0

1、新增加其它元素

1.1、meter

表示特定範圍內的數值,可用於工資、數量、百分比等 max表示最大值,min表示最小值,value代表當前值。

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

技術分享

可以試試用js控制讓它從0變化到100。

1.2、time

time。表示時間值,屬性datetime強調時間
大會時間:<time>2015-10-6</time>

<time>2015-10-6</time>
我們在每天早上 <time>8:30</time> 開始上課。 我在<time datetime="2017-02-14">情人節</time>有個約會。

  

運行效果:

技術分享

因為該標簽是一個語義標簽,在瀏覽器上查看時沒有特別的效果,基本與沒有設置標簽的效果相同。

1.3、progress

用來表示進度條

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

max:最大值,完成時的值

value:當前值

firefox運行結果:

技術分享

chrome運行結果:

技術分享

1.4、datalist

該標簽定義可選數據的列表。與 input 元素配合使用,就可以制作出輸入值的下拉列表。

當與input組合時既可以完成選擇有可以輸入。

<input type="text" list="countries" />
        <datalist id="countries">
            <option value="中國"></option>
            <option value="美國"></option>
            <option value="日本"></option>
        </datalist>

技術分享

1.5、mark元素
主要用來在視覺上向用戶呈現哪些需要突出顯示或高亮顯示的文字。典型應用搜索結果中高亮顯示搜素關鍵字。
HTML5<mark></mark>;HTML4 <span></span>。

1.6、ruby元素
定義 ruby 註釋(中文註音或字符)。
與 <ruby> 以及 <rt> 標簽一同使用。ruby 元素由一個或多個字符(需要一個解釋/發音)和一個提供該信息的 rt 元素組成,還包括可選的 rp 元素,定義當瀏覽器不支持 "ruby" 元素時顯示的內容。
<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

1.7、rt元素
定義字符(中文註音或字符)的解釋或發音。

1.8、rp元素
在 ruby 註釋中使用,以定義不支持 ruby 元素的瀏覽器所顯示的內容。

1.9、wbr元素
表示軟換行。與br元素的區別:br元素表示此處必須換行;wbr表示瀏覽器窗口或父級元素足弓寬時(沒必要換行時),不換行,而寬度不夠時主動在此處換行。

1.10、canvas元素
定義圖形,比如圖表和其他圖像。<canvas> 元素只是圖形容器(畫布),必須使用腳本來繪制圖形。
<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>

1.11、command元素
表示命令按鈕,比如單選按鈕、復選框或按鈕。
只有當 command 元素位於 menu 元素內時,該元素才是可見的。否則不會顯示這個元素,但是可以用它規定鍵盤快捷鍵。。
<menu>
<command onclick="alert(‘Hello World‘)">
Click Me!</command>
</menu>

1.12、details標簽
用於描述文檔或文檔某個部分的細節 。
可與 summary 標簽配合使用,summary可以為 details 定義標題。標題是可見的,用戶點擊標題時,會顯示出 details。summary應該是details的第一個子元素。

1.14、datalist標簽
定義選項列表。請與 input 元素配合使用該元素,來定義 input 可能的值。datalist 及其選項不會被顯示出來,它僅僅是合法的輸入值列表。使用 input 元素的 list 屬性來綁定 datalist。

1.15、output標簽
定義不同類型的輸出,比如腳本的輸出。
<form action="form_action.asp" method="get" name="sumform">
<output name="sum"></output>
</form>

1.16、menu標簽
定義菜單列表。當希望列出表單控件時使用該標簽。註意與nav的區別,menu專門用於表單控件。

2、多媒體標簽

如果需要在頁面中播放音頻與視頻我們經常會用使用的方法有:

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)、使用flash播放器

如一些三方插件,flowplayer602

html5多媒體組件指的是video(視頻)組件和audio(音頻)組件。HTML5多媒體組件可以在不借助諸如Flash Player等第三方插件的情況下,直接在你的網頁上嵌入多媒體組件。瀏覽器提供原生支持視頻的新能力使得網頁開發人員更易於在不依賴於外置插件有效性的情況下,在他們的網站上添加視頻組件。由於蘋果公司現階段在iPhone和iPad上使用的Flash技術的局限性,HTML5多媒體組件的能力就顯得尤為重要了。

2.1、video視頻標簽

用於在播放視頻,電影