"????? ?? ???? ????. ????? ??? ?? ??? ?? ? ? ????." -Tim Berners-Lee
? ??? ???? ???? ?????. ??? ???? ?? ??? ??? ?? ???? ?? ??? ???? ????. WebVTT? ?? ???? ?? ? API? ?? ???? ?? ???? ??? ???? ?????.
? ??? ??? ?? ?? ? ????. ?? WebVTT? ?? ???? ??? ????? ?? ?? ???? ??? ? ???? ??? (? ?? ??? ??)? ????? ?? ??? ? ? ????.
WebVTT ?? ??
?? : WebVTT? ??? "webvtt"? ?? ?????? ?? ?? ?? ? ?? ?????. ?? ??? ????.
<code>WEBVTT 00:00:00.000 --> 00:00:03.000 - [鳥(niǎo)鳴聲] - 真美好的一天！ 00:00:04.000 --> 00:00:07.000 - [溪流潺潺] - 的確如此！ 00:00:08.000 --> 00:00:10.000 - 你好！</code>
?? ????? ?? ????? ?????, ? ?? ?? "webvtt"??, ? ?? ?? ?? ?? (? ?? 0 ~ 3 ?)???. ?? ??? ?????. ??? ??? WebVTT ??? ??? ???? ??? ??? ????? ?? ??? ???? ????. ?????, ?? ?? ??? ? ?? ?? ?? ?? ?? ? ??? ?????.
?? ?? ??? ?? ??? ???? ? ????. ???? ?? ??? ???? ? ??? ? ???, ??? ???? ??? ??? ?????.
?? ??? ? ?? ?? ? ?? ? ? ????. HH : MM : SS.TT ?? MM : SS.TT. ? ??? ?? ??? ????.
- ?? (HH) : ??? ? ??
- ? (mm) : 00? 59 ?? (??)
- ? : 00? 59 ?? (??)
- ?? ? (TT) : 000?? 999 ?? (??)
??? ??? ? ??? ???. ? ?? ?? ???? ???? ??? ??? ??? ?? ? ?? ????. ????? ????? ????? ??? ????. ?? ?? YouTube? ?? ??? ???? ??? ??? ???? ?? ? ? ??? VTT ??? ??? ???? ? ? ????! ??? ?? ??? ????. WebVTT? VTT ??? YouTube ???? ????? YouTube??? ??? ?? ????.
? ??? ???? HTML5 ??? ??? ???? ? ????.
<code><video autoplay="autoplay" controls="controls" height="150" width="300"><track default="" kind="captions" label="English" src="your_caption_file.vtt" srclang="en"></track></video></code>
??? ???? ?? "???"?? ????? ?????. ??? ??? ???? ?? ??? ??? ? ????. ?? ??? ??? ???? ????? ??? ?????.
?? ???, ?? ??? ?? ?????.
- Srclang? ??? ??? ?????.
- ??? ??? ??? ???? 5 ?? ??? ????.
- ??? ????? ???? ?? ??? ?? ?? ? ?????.
- ?? ????? ???? ????? ?? ?? ???? ??? ???? ? ??????.
- ??? ?? ????? ?????? ??? ??? ?????.
- ?? ???? ?????? ???? ???? ???? ? ? ????.
- ??? ??? ???? ???? ? ??????.
- ???? ?? ??? ???? ??? ??? ?????.
- SRC? ??? ?? ?????. ??? ?? ?? ???? ??? ??? ?? ??? ?? ? ????.
WebVTT? ??? ??? ?????? ??? ??? ???? ??? ??? ?? ? ? ????.<video></video> ???? ?? ??? ??????.
WebVTT ??? ??? ?? ??????
MDN? ??? ??? ???? ?? 6 ?? ?? ??? ???? WebVTT ??? ?? ??? ???? ?????. ??? MDN? ?????.
- ??? ??? ?? ?? (BOM)
- ??? "webvtt"
- webvtt? ???? ?? ??? ??? ??.
- WebVTT? ? ?? ??? ??? ??? ??????.
- ??? ??? ???? ? ??? ? ????.
- ??? ???? Newline ?? String ??? ?? ?? ??? ? ????.
- ? ?? ? ?? ?? Newline ??? ????.
- ?? ?? ? ??? ???? ?? ??.
- 0 ?? ? ?.
?? : BOM? ??? ??? ?? ?? ???? ???? ?? ?? ?????.
???? ?????? ??? ??? ???? - ? ?? ?!
WebVTT ???? ??? HTML ??? ??? ??? ? ????! ???? ?? ???? ????? . ??? ??? HTML??? ?? ?? ???? ??? ?????.
<code>WEBVTT 00:00:00.000 --> 00:00:03.000 align:start這是<b>粗體文本</b>00:00:03.000 --> 00:00:06.000 align:middle這是<i>斜體文本</i>00:00:06.000 --> 00:00:09.000 vertical:rl align:middle這是<u>下劃線(xiàn)文本</u></code>
???? ??
???? ??? ?? ??? ???? ??? ???? ??? ??????. ???? ??? ?? ? ??? ?? ?? CSS? ???? ??? ?????.
?? ??, ??? ???? ??? ???? ????, ??? ?? ?? ???? ????? ??? ???? ??? ??? ???? ???? ????? ?? ? ? ????.
??? ??? ??? ?????.
?? 1 : ?
??? Y ??? ?? ??? ?????. ??? ???? (??? ?? ? ??), ?? ?? x ?? ??? ???? ??? ?????.
?? ? ???? ? ?? ??? ? ??? ?? ??? ?????. ??? ???? ?? ? ?? ??? ? ?? ?? ??? ???? (?? ????). ?? ??, ??? ? ?? ?? ??? 50px? ?? ??? ? ?? 2?? ??? ??? ????? ?????. ?? ??? ???? 100px (50px ?? 2)? ???? ??? ??? ??? ?????. ?? ??? ???? ?? ???? ?? ???? ?? ????? (?? ?? : LR? ???? ????? ???? ???? ? ??? ???????). ??? ???? ?? ???? ???? ?? ?????? ???? ???? ??????????. ??? ??? ??? ????!
???? ?? ?? 0-100% (??) ?? ????? (?????. ???? 200%? ?? ??? ????). ?? : LR : RL : RL? ???? ?? ? ? ?? ?? ??? ??? ??? ?????.? ?? ??? ?? ?? x ??? ?????.
?? ???? ?? ??? ??? ?? ??? ?????. ?? ???? ?? (?? ? ??) ??? ?? ?????.
?? ??? ??? ????? ?????. ??? ??? ???? ?????.
<code>00:00:00.000 --> 00:00:03.000 line:50%此字幕應(yīng)水平放置在屏幕的大致中心。</code>
<code>00:00:03.000 --> 00:00:06.000 vertical:lr line:50%此字幕應(yīng)垂直放置在屏幕的大致中心。</code>
<code>00:00:06.000 --> 00:00:09.000 vertical:rl line:-1此字幕應(yīng)垂直放置在視頻的左側(cè)。</code>
<code>00:00:09.000 --> 00:00:12.000 line:0字幕應(yīng)水平放置在屏幕頂部。</code>
?? 2 : ??
??? ??? ???? ???? ? ??? ?? ??? ???? ?? ?? ?????. ?? ??? ???? ????? ???? ??? ??? ??? ???????.
<code> 00:00:00.000 --> 00:00:03.000 vertical:rl此字幕應(yīng)垂直顯示。</code>
<code>00:00:00.000 --> 00:00:03.000 vertical:lr此字幕應(yīng)垂直顯示。</code>
?? 3 : ??
?? ?? ??? x ?? ???? ??? ?????. ??? ???? ??? ?? y ?? ??? ???? ??? ?????. 0%? 100% (??) ??? ?? ?????.
<code>00:00:00.000 --> 00:00:03.000 vertical:rl position:100%此字幕將垂直顯示并在底部。 00:00:03.000 --> 00:00:06.000 vertical:rl position:0%此字幕將垂直顯示并在頂部。</code>
? ???? ??? ??? CSS Flexbox ?? ?? ? ???? ????? ??? ??? ??? ?? ????? ?? ? ? ????. WebVTT ??? ???? ? ?? ??? ?? ??? ???? ?? ? ??? ???? ??? ??? ???? ?? ? ??? ????? ????. ??? ??? ??? ???? ?? ??? ?? ?? ?? ???? ??? ?? ?? ?? ?????.
?? 4 : ??
??? ??? ??? ?????. ??? ???? ?? ?? ??? ?????. ?? ??? ?????, ??? 0%?? 100% ??? ?? ????? (??).
<code>00:00:00.000 --> 00:00:03.000 vertical:rl size:50%此字幕將垂直填充屏幕的一半。</code>
<code>00:00:03.000 --> 00:00:06.000 position:0%此字幕將水平填充整個(gè)屏幕。</code>
?? 5 : ??
?? ???? ?? ???? ??? ??? ?????. ??? ???? ?? ?? ??? ?????.
??? ?? ??? : ??, ??, ?, ?? ? ??????. ??? ???? ??? ??? ??? ??? ????. ??? ???? ??? ??, ?? (??) ? ??????. ??? ??? ?? ?? ? ??? ???? ?? ?? ?? ??? CSS ??? ???? ?? ??? ?? ?? ? ????? ??? ?????.
??? ?? : LR ?? ?? : RL? ????? ????.
<code>WEBVTT 00:00:00.000 --> 00:00:03.000 align:start此字幕將出現(xiàn)在屏幕左側(cè)。 00:00:03.000 --> 00:00:06.000 align:middle此字幕將水平位于屏幕中央。 00:00:06.000 --> 00:00:09.000 vertical:rl align:middle此字幕將垂直位于屏幕中央。 00:00:09.000 --> 00:00:12.000 vertical:rl align:end此字幕將垂直位于屏幕的右下角，而不管vertical:lr 或vertical:rl 的方向如何。 00:00:12.000 --> 00:00:15.000 vertical:lr align:end此字幕將垂直位于屏幕底部，而不管vertical:lr 或vertical:rl 的方向如何。 00:00:12.000 --> 00:00:15.000 align:left此字幕將出現(xiàn)在屏幕左側(cè)。 00:00:12.000 --> 00:00:15.000 align:right此字幕將出現(xiàn)在屏幕右側(cè)。</code>
webvtt ??
WebVTT ??? HTML, CSS, JavaScript ? ?? ???? ??? ???? ??? ????? ?? ?? ???? ?? ?? ? ??? ??? ??????. ???? ?? ????? ??? ? ??? ? ? (????? 2 ?? ??)? ???? ???? .
<code>WEBVTT 00:00:00.000 --> 00:00:03.000 - [鳥(niǎo)鳴聲] - 真美好的一天！ NOTE 這是一個(gè)注釋。觀(guān)看字幕的任何人都不會(huì)看到它。 00:00:04.000 --> 00:00:07.000 - [溪流潺潺] - 的確如此！ 00:00:08.000 --> 00:00:10.000 - 你好！</code>
?? ??? ?? ???? ????? ?? ?? ??? ?? ??? ?? ??? ?????. ??? ?? ?? ? ?? ????.
????? ? ?? ?? ??? ??/???? ??? ??? ??? ? ????. ???? ?? ??? ??? ? ????.
?? ???? WebVTT ??
??? ??? ???? ???? ??? ?? ??? ??? ??? ??? ????. ??? ??? ?? ?? ???? ??? ???? ??? ???? ??? ?????.
?, ??? ??? ???? ? ? ????!
??? WebVTT ??? ???? ??? ? ????. ?? ??, ??? ??? ????? ????? :: Cue Pseudo Element? ?? ??? ??????.
<code>video::cue { background: red; }</code>
WebVTT ???? ??? HTML ??? ??? ? ????? ??, ??? ??? ??? ? ????. ?? ??, ???? ( ) ??? ??????.
<code>video::cue(i) { color: yellow; }</code>
WebVTT ??? HTML ??? ?? ??? ??? ??? ?????.
<code>WEBVTT STYLE ::cue { color: blue; font-family: "Source Sans Pro", sans-serif; }</code>
???? ???? ?? ??? ??? ? ?? ????. ???? ???? HTML? ??? ?? ????? ?????.
<code>WEBVTT STYLE ::cue(#middle\ cue\ identifier) { text-decoration: underline; } ::cue(#cue\ identifier\ \33) { font-weight: bold; color: red; } first cue identifier 00:00:00.000 --> 00:00:02.000你好，世界！ middle cue identifier 00:00:02.000 --> 00:00:04.000此提示標(biāo)識(shí)符將帶有下劃線(xiàn)！ cue identifier 3 00:00:04.000 --> 00:00:06.000這個(gè)不會(huì)受到影響，就像第一個(gè)一樣！</code>
?? ??? ??
?? ??? ???? ??? ?? ? ? ????. ??? ????. ? ??? ??? ?? ?? ?? ???? ??? ? ????. ??? ??? ??? ? ?? ??? ?????.
??? ??
??? ??? ???? WebVTT ???? ???? ?? ? ? ??? CSS? ???? ??? ???? ??? ? ????. ???? ????? ??? ???. ?? ??? ??? ??? ? ????. ??, ?? ?? ? ???? ?? ??? ???? ?? ???? ?? ? ? ????.
<code>/* 我們的CSS 文件*/ .yellowish { color: yellow; } .redcolor { color: red; }</code>
<code>WEBVTT 00:00:00.000 --> 00:00:03.000此文本應(yīng)為黃色。此文本將為默認(rèn)顏色。 00:00:03.000 --> 00:00:06.000此文本應(yīng)為紅色。此文本將為默認(rèn)顏色。</code>
?? ??? ??
?? ??? ??? ????? ?? ??? ??? ???????. ???? ??? ??? ?? ?? ??? ????. ??? ??? ??? ??? ?? ?? ?? ????? ? ?? ??? ??? ??? ???? ??????.
<code>WEBVTT 00:00:00.000 --> 00:00:07.000此文本將顯示超過(guò)6 秒。</code>
?? ??
?? ??? ??? ??? ???? ? ????? ??? ?????.
<code>WEBVTT 00:00:00.000 --> 00:00:03.000鮑勃，你今天過(guò)得怎么樣？ 00:00:03.000 --> 00:00:06.000很好，你呢？</code>
?? ??
?? ??? ?? ?? ?? ?? ??? ???? ?????.
<code>WEBVTT 00:00:00.000 --> 00:00:05.000</code> ? ???? ? ?? ???? ?????<rt> ? ???? ?? ?? ?????.</rt>
?????
??? WebVTT? ?? ?? ????! ??? ?? ???? ???? ?? ? ???? ???? ?? ???? ??? ?? ??? ?????. ? ?? ????? ???? ??? ?? ??????!
? ??? WebVTT? ??? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!
? AI ??
Undress AI Tool
??? ???? ??
Undresser.AI Undress
???? ?? ??? ??? ?? AI ?? ?
AI Clothes Remover
???? ?? ???? ??? AI ?????.
Clothoff.io
AI ? ???
Video Face Swap
??? ??? AI ?? ?? ??? ???? ?? ???? ??? ?? ????!
?? ??
??? ??
???++7.3.1
???? ?? ?? ?? ???
SublimeText3 ??? ??
??? ??, ???? ?? ????.
???? 13.0.1 ???
??? PHP ?? ?? ??
???? CS6
??? ? ?? ??
SublimeText3 Mac ??
? ??? ?? ?? ?????(SublimeText3)
?? ??? ? ????? ????? CSS ????
Jul 07, 2025 am 12:07 AM
CSS?? ????? ??? ? ?? ??? ????. 1. HTML ? CSS? ?? ??? ?????? ???? ?? ???? ?? ???? ??????. 2. ?? ??? ??? ?? ???? ???? ?? ?? ??? ?? ?? ??? ??????. 3. ??? ????? ???? JavaScript? ?? ???? ?????? ??? ?????. ? ?? ??? ??? ??? ????? ?? ??, ??, ??? ? ?? ???? ?? ?? ?? ??? ???? ?????.
CSS ???? ??? ?? ? ??? ??
Jul 07, 2025 am 01:44 AM
CSS ???? ??? ? ??? ??? ????? ???? ??? ???? ???? ?? ?? ???? ????? ???????. 1. Flexbox ? ??? ??? ?? ???? ??? ??, ?? : ??? ?? ? ????? ??? ????. 2. Caniuse ?? ?? ?? ??? ??????. 3. -webkit-, -moz-, -ms-, -o- ? ?? ???? ???? ???? ?????. 4. AutoPrefixer? ???? ???? ???? ???? ?? ????. 5. ?? ????? ????? PostCSS? ???? BrowsersList? ??????. 6. ?? ? ???? ???? ?????. 7. Modernizr ?? ??? ??? ????? ??? ? ????. 8. ?? ????? ???? ?? ? ??? ????.
CSS ?? ??? ??? ?? ??? ????
Jul 09, 2025 am 01:29 AM
CSS? ?? ?? ??? ??? ??? ???? ???? SVG? ???? ?? ???, ?? ????, ??? ?? ?? ??? ?? ???? ??????. ??? ??? ????. 1. ?, ??, ??? ?? ?? ??? ?? ??? ?????. 2. ?? ?? ? ??? ???? ??? ? ????. 3. ?????? ?? ?? ?? ?? ????? ???? ?? ??? ?? ? ? ????. 4. ???? ???? ??? ??? ??? ????? ?? ? ??? ????. ???? ???? ?? ?? ?? : ? (50pxatcenter) ? ??? ?? ?? : ??? (50%0%, 100 0%, 0%)? ?? ????. ????
?????? ???? ????? : ???, ????? : ?? ? ????? : ??? ???
Jul 11, 2025 am 03:25 AM
themaindifferencesbetweendisplay : ???, ??, andinline-blockinhtml/cssarelayoutbehavior, spaceusage ? stylingcontrol.1.inlineElementsFlowWithText, do n'tStartonnewlines, ingorewidth/height, andonlyapplyhorizontalpadding/margins —IdealforIneTeTexting
????? CSS? ??? ??? ??????
Jul 11, 2025 am 03:26 AM
??? ?? ???? ???? ??? ??, ?? ??? ??? ? ? ????? ??? ??? ???? ???? ? ? ?? ? ? ????. 1. CSS ?? : ?? ??? ???? ???? ?? ??; 2. ????? ?? ?? ?? ???? ?? ?? ??? ??? ? ????. 3. ?? ??? ??? ??? ??? ?? ?? ???? ????????. 4. ??? ????? ??? ???? ?? ? ??? ??? ?? ??? ?? ?? ??? ????? ???? ?? ????.
CSS? ???? ?? ? ???? ??? ???
Jul 15, 2025 am 01:10 AM
CSS? ???? ?? ? ???? ???? ??? ?? ??? ?? ?? ?? ? ? ????. 1. Max width : 100% ? ?? : Auto? ???? ???? ??? ????? ???? ??? ??? ? ??????. 2. HTML? SRCSET ? ?? ??? ???? ?? ??? ??? ??? ??? ???????????. 3. ?? ?? ? ?? ??? ???? ??? ??? ? ?? ?????? ??????. ? ??? ?? ???? ?? ???? ???? ???? ????????.
Demystifying CSS ?? : PX, EM, REM, VW, VH ??
Jul 08, 2025 am 02:16 AM
CSS ??? ??? ?? ?? ?? ? ?? ? ?? ??? ?? ????. 1.px? ?? ??? ????? ?? ??? ??? ?? ??? ?????. 2.EM? ?? ????, ?? ?? ??? ??? ?? ?? ???? ??, REM? ?? ??? ???? ? ????? ??? ????? ?????. 3.VW/VH? ?? ? ???? ??? ??? ??? ??????? ?? ???? ?????? ???????. 4. ??? ?? ?? ? ??, ?? ?? ?? ? ??? ???? ???? ???????. ???? ??? ???? ??? ? ?? ??? ???? ? ????.
???? CSS ???? ???? ??????
Jul 26, 2025 am 07:04 AM
?? ????? CSS ?? ??? ????? ?? ?? ??? ??, ?? ?? ?? ??, Flexbox ? ??? ???? ?? ?? ? ?? CSS ??? ????? ??? ???? ???? ?? ????? ??? ?????. 1. ?? ??? ??? ???? ????. ???? CSSRESET ?? NALLER.CSS? ???? ?? ???? ???? ????. 2. IE? ?? ??? ?? ?? ?? ??? ????. ?? ?? : ?? ? ???? ??? ??? ???? ?? ????. 3. Flexbox ? Grid? Edge Case ?? Old ???? ??? ?????. ? ?? ??? ? AutopRefixer ??; 4. ?? CSS ?? ??? ???? ????. Caniuse? ???? ?? ?????????.
