"????? ?? ???? ????. ????? ??? ?? ??? ?? ? ? ????." -Tim Berners-Lee
? ??? ???? ???? ?????. ??? ???? ?? ??? ??? ?? ???? ?? ??? ???? ????. WebVTT? ?? ???? ?? ? API? ?? ???? ?? ???? ??? ???? ?????.
? ??? ??? ?? ?? ? ????. ?? WebVTT? ?? ???? ??? ????? ?? ?? ???? ??? ? ???? ??? (? ?? ??? ??)? ????? ?? ??? ? ? ????.
WebVTT ?? ??
?? : WebVTT? ??? "webvtt"? ?? ?????? ?? ?? ?? ? ?? ?????. ?? ??? ????.
<code>WEBVTT 00:00:00.000 --> 00:00:03.000 - [鳥鳴聲] - 真美好的一天！ 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>下劃線文本</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%此字幕將水平填充整個屏幕。</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 - [鳥鳴聲] - 真美好的一天！ NOTE 這是一個注釋。觀看字幕的任何人都不會看到它。 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此提示標識符將帶有下劃線！ cue identifier 3 00:00:04.000 --> 00:00:06.000這個不會受到影響，就像第一個一樣！</code>
?? ??? ??
?? ??? ???? ??? ?? ? ? ????. ??? ????. ? ??? ??? ?? ?? ?? ???? ??? ? ????. ??? ??? ??? ? ?? ??? ?????.
??? ??
??? ??? ???? WebVTT ???? ???? ?? ? ? ??? CSS? ???? ??? ???? ??? ? ????. ???? ????? ??? ???. ?? ??? ??? ??? ? ????. ??, ?? ?? ? ???? ?? ??? ???? ?? ???? ?? ? ? ????.
<code>/* 我們的CSS 文件*/ .yellowish { color: yellow; } .redcolor { color: red; }</code>
<code>WEBVTT 00:00:00.000 --> 00:00:03.000此文本應(yīng)為黃色。此文本將為默認顏色。 00:00:03.000 --> 00:00:06.000此文本應(yīng)為紅色。此文本將為默認顏色。</code>
?? ??? ??
?? ??? ??? ????? ?? ??? ??? ???????. ???? ??? ??? ?? ?? ??? ????. ??? ??? ??? ??? ?? ?? ?? ????? ? ?? ??? ??? ??? ???? ??????.
<code>WEBVTT 00:00:00.000 --> 00:00:07.000此文本將顯示超過6 秒。</code>
?? ??
?? ??? ??? ??? ???? ? ????? ??? ?????.
<code>WEBVTT 00:00:00.000 --> 00:00:03.000鮑勃，你今天過得怎么樣？ 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)
??? ??
8646
17
1787
16
1730
56
1582
29
1451
31
'?? ??? CSS'? ??????
Jun 24, 2025 am 12:42 AM
CSS? ??? ??? ????? ????? ??? ? ?? CSS? ????? ?? ??????, ?? ?? ? ??? ??, ??? ?? ?? ??? CSS ? ????? ?? ??? ?? ???? ???? ??? ??? ???. 1. ?? CSS? ???? HTML? ?? ?????. 2. JavaScript? ?? ??? CSS ??; 3. ??? ??? ???? ?? ???? ????? ??????. 4. CSS? ???? ???? ??? ????. ?? CSS? ???? ?? ??? ???? Rel = "Preload"?????? ????, ??? ?? ??? ????? ???? ??? ?? ? ??? ???? ??? ?????.
autopRefixer ? ???? ??? ??????
Jul 02, 2025 am 01:15 AM
AutoPrefixer? ?? ???? ??? ???? ?? ?? ???? CSS ??? ???? ???? ?????. 1. ????? ???? ???? ???? ??? ?????. 2. PostCSS ???? ??, CSS? ?? ???? ???? ?? ???? ??? ???? ??? ?? ??? ?????. 3. ?? ???? ???? ??, ??????? ?? ? ?? ???????? ????? ?? ?????. 4. ???? ???? ???? ???? ?? ?? ????, ???? ?? ??? ?? ???? ???? ????? ?? ???? ?? ????.
Conic-Gradient () ??? ??????
Jul 01, 2025 am 01:16 AM
theconic-gradient () functionincsscreatescurcular gradientsthattroTecolorstopsaroundacentral point
?? ??? ?? ?? ?? ?? ??? CSS ????
Jul 02, 2025 am 01:04 AM
ToTeCreatesTickyHeaders andfooterswithcss, ?? ?? : stickyforheaderswithTopvalueAndz-index
CSS ??? ?? ??? ??? ??????
Jun 25, 2025 am 12:16 AM
CSS ??? ?? ??? ??? ??? ????? ?? ???, ??? ??? ????? ??? ?? ????, ?? ??? ?? ??? ? ???? ??? ?? ?? ??? ?? ?????. ?? ?? .card ???? ?? ? ??? ???? ??? ???? ??? ???? ??? ? ????. ?? ??? ??? ????. 1. ?? : ?? ??? ?? ??? ??? ?????? ??; 2. ?? ?? ??? ?? ??? ???? ???? ?????. 3. ??? ??? ????? ???? ????. 4. ??? ????? ?? ??? ??? ?? ?? ?????????. ?? CSS ??? ??? ???? ??? ??? ?? ???? ?? ???????. ??? ???? ???? ??? ???? ?? ? ?? ??? ??? ?????. ???? ???? ?? ???? ?? ? ? ????
CSS ???? FR ??? ??????
Jun 22, 2025 am 12:46 AM
thefrunitincssgriddistributesaveailablespaceproproproproproproprically.1.itworksbydividingspacebasedonthesumoffrvalues, ?? ??, 1fr2frgives-thirdandtwo-thirds.2.itenablesflexiblelayouts, propehmanualcalculations, andsupportsronspons responsevestessinconsponsponsevestesnevestesnevesteStonsponsevesteSponsevesteSponsevesteStronsponsevesteStonsprongesteSports responsevesteStonSpronsponseves.
??? ?? ???? ??? ? CSS ????
Jul 02, 2025 am 12:52 AM
Mobile-FirstcsSdesignRequiresTtingTheviewPortMetatag, RelativeUnits, StylingFromsMallScreensup, ??? ???? andtouchtargets.first, addtocontrolscaling.second, ??%, em, orreminsteadofpixelsforflexelayouts.third
CSS ??? ?? ??? Flexbox ????? ?? ? ? ?????
Jun 22, 2025 am 12:40 AM
?, CSSGRID ???? FlexBox? ??? ? ????. ???? ???? ?? ???? ??? ??? ??? ?? ???? ??? ????? ??? ?? ?????? ??? ?? ? ??? ???? ????. ?? ??, ?????? ?? div? ?? : HTML? Flex ???; ?? ???? ???? ?? ? ????, ?? ?? ? ??? ??? ??? ?? ?? ??? ?????. ????? ??? ?? ?? ???? ??? ??? ??? ??? ??? ?? ????? ??? ??? ?????.
