marquee 跑馬燈
<marquee behavior=alternate>內容</marquee>左 右 移動
<marquee hspace="70">左、右空白70xp</marquee>
<marquee loop="0">執行無限次</marquee>
<marquee loop="3">執行3次 </marquee>
<marquee scrolldelay="100">間隔時間</marquee>
><marquee scrolldelay="500">間隔時間</marquee>
<marquee scrollamount="50">移動50xp</marquee>
<marquee scrollamount="1">移動1xp</marquee>
<marquee behavior="slide">內容</marquee>
<marquee direction="right">內容</marquee>
<marquee direction="up">內容</marquee>
<marquee direction="down">內容</marquee>
<marquee onmouseover="this.stop(); " onmouseout="this.start();">滑鼠到此</marquee>
<marquee scrollamount="40" style="width:40px" ><b>內容</b></marquee>
<marquee vspace="30">上下空白30xp</marquee>
<marquee direction="down" width="100%" height="200" behavior="alternate" >
<marquee behavior="alternate">
This text will bounce
</marquee>
</marquee>
<marquee style="vertical-align:middle;" scrollamount="5" width="40"><<<</marquee>
ABCDE
<marquee style="vertical-align:middle;" direction="right" scrollamount="5" width="40">>>></marquee>ABCDE
#html marquee
#html scrollamount
#html onmouseout
#html direction
#html onmouseover
#html 跑馬燈
#html scrolldelay
#html marquee
#html audio
#html MP3
#html 音頻
#html 音頻播放器
HTML fieldset 標簽
#html <fieldset>
#html <legend>
#html 圍繪邊框
#html <frameset >
#html <svg>
#html 伸縮矢量圖形
HTML Table 表格
bgcolor="#00FF00
cellspacing="20" 欄位間的距離
cellpadding ="20" 欄位內距距離
colspan="2" 橫 二合併為一
rowspan="2" 直 二合併為一
ABCDE
<marquee style="vertical-align:middle;" direction="right" scrollamount="5" width="40">>>></marquee>
標簽 audio @ 音频
HTML5 Audio(音頻)
- 1)
- <audio controls="controls"
id="myVideo ">
<source src="" type="audio/ogg"></source>
<source src="https://api.zanmeishi.com/song/p/6607.mp3" type="audio/mpeg">
</source>
Your browser does not support the audio element.
</audio>
00
| 屬性 | 描述 |
| audioTracks | 返回表示可用音頻軌道的 AudioTrackList 對像。 |
| autoplay | 設置或返回是否在就緒（加載完成）後隨即播放音頻。 |
| buffered | 返回表示音頻已緩衝部分的 TimeRanges 對像。 |
| controller | 返回表示音頻當前媒體控制器的 MediaController 對像。 |
| controls | 設置或返回音頻是否應該顯示控件（比如播放/暫停等）。 |
| crossOrigin | 設置或返回音頻的 CORS 設置。 |
| currentSrc | 返回當前音頻的 URL。 |
| currentTime | 設置或返回音頻中的當前播放位置（以秒計）。 |
| defaultMuted | 設置或返回音頻默認是否靜音。 |
| defaultPlaybackRate | 設置或返回音頻的默認播放速度。 |
| duration | 返回音頻的長度（以秒計）。 |
| ended | 返回音頻的播放是否已結束。 |
| error | 返回表示音頻錯誤狀態的 MediaError 對像。 |
| loop | 設置或返回音頻是否應在結束時再次播放。 |
| mediaGroup | 設置或返回音頻所屬媒介組合的名稱。 |
| muted | 設置或返回是否關閉聲音。 |
| networkState | 返回音頻的當前網絡狀態。 |
| paused | 設置或返回音頻是否暫停。 |
| playbackRate | 設置或返回音頻播放的速度。 |
| played | 返回表示音頻已播放部分的 TimeRanges 對像。 |
| preload | 設置或返回音頻的 preload 屬性的值。 |
| readyState | 返回音頻當前的就緒狀態。 |
| seekable | 返回表示音頻可尋址部分的 TimeRanges 對像。 |
| seeking | 返回用戶當前是否正在音頻中進行查找。 |
| src | 設置或返回音頻的 src 屬性的值。 |
| textTracks | 返回表示可用文本軌道的 TextTrackList 對像。 |
| volume | 設置或返回音頻的音量。 |
00
| 實例 |
<audio id="myVideo" controls="controls" 屬性="值" > <source src="xxx.ogg" type="audio/ogg" /> <source src="xxx.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> |
| 方法 | 描述 |
| addTextTrack() | 向音頻添加新的文本軌道。 |
| canPlayType() | 檢查瀏覽器是否能夠播放指定的音頻類型。 |
| fastSeek() | 在音頻播放器中指定播放時間。 |
| getStartDate() | 返回新的 Date 對像，表示當前時間線偏移量。 |
| load() | 重新加載音頻元素。 |
| play() | 開始播放音頻。 |
| pause() | 暫停當前播放的音頻。 |
標簽 fieldset @ 邊框,
HTML fieldset 標簽
<fieldset> 標簽會在相關表單元素周圍繪制邊框
<fieldset>
<legend>黃金 ＥＴＦ</legend><pre>
02840.HK SPDR 金 83168.HK 恆生人幣金ETF
03081.HK 價值黃金 09081.HK 價值黃金－U
83081.HK 價值黃金－R
</pre></fieldset>
<fieldset>
<legend style="text-align: center;color:red" >黃金 ＥＴＦ</legend><pre>
02840.HK SPDR 金 83168.HK 恆生人幣金ETF
03081.HK 價值黃金 09081.HK 價值黃金－U
83081.HK 價值黃金－R
</pre></fieldset>
HTML <frameset > <frame > 標簽
HTML <frameset > <frame > 標簽
| 屬性 | 值 | 描述 |
|---|---|---|
| frameborder | 0 / 1 | 規定是否顯示框架周圍的邊框。 |
| longdesc | URL | 規定一個包含有關框架內容的長描述的頁面。 |
| marginheight | pixels | 定義框架的上方和下方的邊距。 |
| marginwidth | pixels | 定義框架的左側和右側的邊距。 |
| name | name | 規定框架的名稱。 |
| noresize | noresize | 規定無法調整框架的大小。 |
| scrolling | yes / no / auto | 規定是否在框架中顯示滾動條。 |
| src | URL | 規定在框架中顯示的文檔的 URL。 |
| cols | pixels / % / * | 設定框架集中列的數目和尺寸。 |
| rows | pixels / % / * | 設定框架集中行的數目和尺寸。 |
00
svg
標簽 svg @ 矢量圖形
circle=圓形 cx=X座標 cy=Y座標 r=圓形半徑 fill=物件颜色 stroke=邊框颜色 stroke-width=邊框寬度
<svg width="130%" height="100px">
<circle cx="60" cy="50" r="30" fill="blue" />
</svg>
<circle cx="60" cy="50" r="30" fill="blue" />
</svg>
<svg width="100px" height="100px">
<circle cx="60" cy="50" r="30" stroke="black" stroke-width="5" fill="red"/>
</svg>>
<circle cx="60" cy="50" r="30" stroke="black" stroke-width="5" fill="red"/>
</svg>>
<svg width="100px" height="120px">
<circle cx="60" cy="50" r="30" stroke="red" stroke-width="7" fill="none"/>
</svg>
<circle cx="60" cy="50" r="30" stroke="red" stroke-width="7" fill="none"/>
</svg>
<svg width="130px" height="120px">
<ellipse cx="60"cy="50" rx="50" ry="20" fill="yellow" />
</svg>
<ellipse cx="60"cy="50" rx="50" ry="20" fill="yellow" />
</svg>
rect=矩形 x=X座標 y=Y座標 rx=X圓角 ry=Y圓角 width=矩形寬度 height=矩形高度 fill=物件颜色 stroke=邊框颜色 stroke-width=邊框寬度
<svg width="100%" height="100%">
<rect x="20" y="35" width="50" height="50" stroke="black"
fill="yellow" />
</svg>
<rect x="20" y="35" width="50" height="50" stroke="black"
fill="yellow" />
</svg>
<svg width="100%" height="100%">
<rect x="20" y="35" width="50" height="50" stroke="red"
fill="blue" />
</svg>
<rect x="20" y="35" width="50" height="50" stroke="red"
fill="blue" />
</svg>
<svg width="100%" height="100%">
<rect x="20" y="35" width="80" height="50" stroke="red"
stroke-width="3" />
</svg>
<rect x="20" y="35" width="80" height="50" stroke="red"
stroke-width="3" />
</svg>
<svg width="100%" height="100%">
<rect x="20" y="35" rx="15" ry="15" width="100"
height="50"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
<rect x="20" y="35" rx="15" ry="15" width="100"
height="50"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
<svg width="100%" height="100%">
<rect x="20" y="35" rx="50" ry="50" width="100"
height="50"
style="fill:none;stroke:black;stroke-width:5;" />
</svg>
<rect x="20" y="35" rx="50" ry="50" width="100"
height="50"
style="fill:none;stroke:black;stroke-width:5;" />
</svg>
polyline=連接的直線 fill=物件颜色 stroke=邊框颜色 stroke-width=邊框寬度
points="x1 y1,x2,y2,x3 y3,....
points="x1 y1,x2,y2,x3 y3,....
<svg width="150px" height="150px">
<polyline fill="yellow" stroke="red" stroke-width="3"
points="5 30, 30 60,60 5,90 60,120 30,120 100,
5 100,5 30" />
</svg>
<polyline fill="yellow" stroke="red" stroke-width="3"
points="5 30, 30 60,60 5,90 60,120 30,120 100,
5 100,5 30" />
</svg>
<svg style="font-size: 20px ;">
<text x="5" y="50" fill="red" transform="rotate(30 20,40)">html.ug5g.com</text>
</svg>
<text x="5" y="50" fill="red" transform="rotate(30 20,40)">html.ug5g.com</text>
</svg>
<svg style="font-size: 20px ;">
<defs><path id="path1" d="M5,8 a1,1 0 0,0 100,0" /></defs>
<text x="10" y="100" style="fill:red;">
<textPath xlink:href="#path1">ug5g.com</textPath>
</text>
</svg>
<defs><path id="path1" d="M5,8 a1,1 0 0,0 100,0" /></defs>
<text x="10" y="100" style="fill:red;">
<textPath xlink:href="#path1">ug5g.com</textPath>
</text>
</svg>
<svg style="font-size: 20px ;">
<text x="10" y="20" style="fill:red;">https:
<tspan x="10" y="45">html.ug5g</tspan>
<tspan x="10" y="70">.com</tspan>
</text>
</svg>
<text x="10" y="20" style="fill:red;">https:
<tspan x="10" y="45">html.ug5g</tspan>
<tspan x="10" y="70">.com</tspan>
</text>
</svg>
00
HTML Table 表格
HTML Table 表格
﹤table﹥ 建立一表格。
﹤caption﹥**標題**﹤/caption﹥
﹤tbody﹥ 表格內容開始。
﹤th﹥﹤th/﹥表示表頭單元格
﹤tr﹥﹤/tr﹥ 代表的是一行。
﹤td﹥﹤/td﹥ 代表一列。
﹤/tbody﹥ 表格內容完結。
﹤/table﹥ 建立完成。
﹤table border="1"﹥邊框
﹤table rules="rows"﹥ 欄位內距距離
rules=none 沒有線條。
rules=groups 位於行組和列組之間的線條。
rules=rows 位於行之間的線條。
rules=cols 位於列之間的線條。
rules=all 位於行和列之間的線條。
<table border="1">
<caption>**標題**</caption>
<tbody>
<tr><td>第一行 欄位 1</td><td>第一行 欄位 2
</td></tr>
<tr bgcolor="#00FF00"><td>第二行 欄位 1</td><td>第二行 欄位 2
</td></tr>
</tbody>
</table>
<table border="10" cellspacing="20" width="80%" > <caption>**標題**</caption> <tbody> <tr><td>第一行 欄位 1</td><td>第一行 欄位 2</td></tr> <tr><td>第二行 欄位 1</td><td>第二行 欄位 2</td></tr> </tbody></table>
<table border="10" cellspacing="20" width="80%" > <caption>**標題**</caption> <tbody> <tr><td>第一行 欄位 1</td><td>第一行 欄位 2</td></tr> <tr><td>第二行 欄位 1</td><td>第二行 欄位 2</td></tr> </tbody></table>
<table border="2" style="width: 80%;">
<caption>colspan="2" 橫 二合併為一</caption>
<tbody>
<tr><td colspan="2" align="center" valign="middle">
橫 二合併為一</td></tr>
<tr><td>第二行 欄位 1</td><td>第二行 欄位 2</td></tr>
</tbody></table>
<table border="2" style="width: 80%;"> <caption>rowspan="2" 直 二合併為一</caption> <tbody> <tr><td rowspan="2">直 二合併為一 </td><td>第一行 欄位 1</td></tr> <tr><td> 第二行 欄位 1</td></tr> </tbody></table>text-align vertical-align
text-align:left
vertical-align:toptext-align:center
vertical-align:toptext-align:right
vertical-align:toptext-align:left
vertical-align:middletext-align: center
vertical-align:middletext-align:right
vertical-align:middletext-align:left
vertical-align:bottomtext-align: center
vertical-align:bottomtext-align:right
vertical-align:bottom
<table rules="rows"> 欄位 1 欄位 2 欄位 3 欄位 1 欄位 2 欄位 3 欄位 1 欄位 2 欄位 4
<table rules="cols"> 欄位 1 欄位 2 欄位 3 欄位 1 欄位 2 欄位 3 欄位 1 欄位 2 欄位 4
<table rules="all"> 欄位 1 欄位 2 欄位 3 欄位 1 欄位 2 欄位 3 欄位 1 欄位 2 欄位 4
<table rules="none"> 欄位 1 欄位 2 欄位 3 欄位 1 欄位 2 欄位 3 欄位 1 欄位 2 欄位 4 0000000000#html table 表格 訂閱： 文章 (Atom)