audio和video、progress和meter、details、mark、abbr、ruby (HTML5 三)

※audio、video

<audio controls autoplay muted loop preload=auto src=d:\01.ogg />
    
<audio controls autoplay muted loop preload=auto>
    <source src=d:\01.ogg type=audio/ogg />
    <source src=d:\20.mp3 type=audio/mp3 />
</audio>
    
<video width="320" height="240" controls poster=D:\images.jpg >
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
</video>

※
controls：是否要出現控制面版
autoplay：一進入頁面是否要自動播放
controls不設定，autoplay有設定，就是背景的功能

muted：是否要一開始是靜音
loop：播放完是否要重覆播放
preload：一進入頁面，加載檔案的方式，有三個合法值auto、metadata、none
．auto表示全部加載
．metadata表示加載一部分
．none表示都不加載
src：指定要播放的內容，如果不寫可以在audio新增子標籤source，如上的範例
source可以指定很多，並不是第一個播放完就播放第二個
它的功能是要給不同瀏覽器的相容問題使用的，因為每個瀏覽器支援的格式不同，在這裡指定多個，它會以第一個開始抓，可以播的就播了，以下就不管了

video標籤才有的屬性
除了width和height外，還有個poster，就是視頻格式都不支援時，顯示的圖片

※progress、meter

<progress></progress>
<progress max=1000></progress>
<progress value=60 max=100></progress>
<progress id=pro value=0 max=100></progress>
<br />
<meter></meter>
<meter min=0 max=1000></meter>
<meter value=60 max=100></meter>
<meter id=met value=0 min=-1000 max=1000 low=100 high=500 optimum=800></meter>
<script>
    var pro = document.getElementById('pro');
    var flag = true;
    setInterval(
        () => {
            if(pro.value >= 100) flag = false;
            if(pro.value <= 0) flag = true;
            
            if(flag && pro.value < 100){
                pro.value = pro.value + 20;
            }
    
            if(!flag && pro.value > 0){
                pro.value = pro.value - 20;
            }
        }
    , 100);
    
    var met = document.getElementById('met');
    var f = true;
    setInterval(
        () => {
            if(met.value >= met.max) f = false;
            if(met.value <= met.min) f = true;
    
            if(f && met.value < met.max){
                met.value = met.value + 20;
            }
    
            if(!f && met.value > met.min){
                met.value = met.value - 20;
            }
        }
    , 100);
</script>

※progress目前只有max和value兩個屬性

※meter除了max和value，還有min、low、high、optimum、form
其中low、high、optimum是跑的時候能顯示不同的顏色，有紅黃綠
optimum是指定最好的那一端

※details、mark、abbr

<details>
    I'm a <mark>mark</mark><br />
    You are a pig.
</details>
<br />
<details open>
    default <mark>open</mark>
</details>
<br />
<details open>
    <summary>Title</summary>
    I'm a <mark>mark</mark><br />
    <abbr title='World Wide Web Consortium'>W3C</abbr>
</details>

※

※mark會將字反黃

※details會多個倒三角形，可以點開，預設點開用open；標題用summary

※abbr專門為縮寫使用，可搭配title屬性讓滑鼠放上去時顯示，當然裡面不打縮寫也行，只是就失去了定義這個標籤的意義

※ruby

北京話：<br />
<ruby>
    柳 <rt> ㄌㄧㄡˇ </rt>
    邊 <rt> ㄅㄧㄢ </rt>
    求 <rt> ㄑㄧㄡˊ </rt>
    去 <rt> ㄑㄩˋ </rt>
    地 <rt> ㄉㄧˋ </rt>
</ruby>
<br />
<br />
閔南語：<br />
<ruby>
    柳 <rt> 丩二柳 </rt>
    邊 <rt> 堅一邊 </rt>
    求 <rt> 丩五求 </rt>
    去 <rt> 居三去 </rt>
    地 <rt> 雞七地 </rt>
</ruby>
<br />
<br />
Browser不支援時：
<ruby>
    柳 <rt><rp>(</rp>ㄌㄧㄡˇ<rp>)</rp></rt>
</ruby>

※亞洲用的，結果如下：

※不支援又想顯示要用rp標籤，且要用「(」「)」將想顯示的字包起來