doc: add <wbr> <video> <var> tag document.

Author: jaywcjlove

docs/tags/audio.md

@@ -65,6 +65,9 @@ HTML 支持三种音频格式：MP3、WAV 和 OGG。
 
 `<audio>` 标签支持 HTML 中的[事件属性](../reference/eventattributes.md)。
 
+## 相关页面
+
+HTML Audio/Video DOM 参考: [HTML Audio/Video DOM Reference](../reference/av_dom.md)
 
 [1]: ../assets/chrome.svg
 [2]: ../assets/edge.svg

docs/tags/var.md

@@ -1,4 +1,59 @@
-var.md
+HTML \<var> Tag
 ===
 
-欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tags/var.md">docs/tags/var.md</a> 文件，共建 HTML Tutorial 文档。
+## 示例
+
+将一些文本定义为文档中的变量：
+
+```html idoc:preview:iframe
+<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>
+```
+
+## 定义和用法
+
+`<var>` 标签用于在编程或数学表达式中定义变量。 里面的内容通常以*斜体*显示。
+
+**提示：** 此标签未被弃用。 但是，使用 CSS 可以实现更丰富的效果。
+
+还请看：
+
+| 标签 Tag | 描述 Description |
+| ---- | ---- |
+| [\<code>](./code.md) | 定义一段计算机代码 |
+| [\<samp>](./samp.md) | 定义计算机程序的样本输出 |
+| [\<kbd>](./kbd.md)   | 定义键盘输入 |
+| [\<pre>](./pre.md)   | 定义预格式化文本 |
+
+## 浏览器支持
+
+| Element | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
+| ------- | --- | --- | --- | --- | --- |
+| \<var>  | Yes | Yes | Yes | Yes | Yes |
+
+## 全局属性
+
+`<var>` 标签支持 HTML 中的[全局属性](../reference/standardattributes.md)。
+
+## 事件属性
+
+`<var>` 标签支持 HTML 中的[事件属性](../reference/eventattributes.md)。
+
+## 相关页面
+
+HTML 教程: [HTML Text Formatting](../tutorial/formatting.md)
+
+## 默认 CSS 设置
+
+大多数浏览器将显示具有以下默认值的 `<var>` 元素：
+
+```css
+var {
+  font-style: italic;
+}
+```
+
+[1]: ../assets/chrome.svg
+[2]: ../assets/edge.svg
+[3]: ../assets/firefox.svg
+[4]: ../assets/safari.svg
+[5]: ../assets/opera.svg

docs/tags/video.md

@@ -1,4 +1,82 @@
-video.md
+HTML \<video> Tag
 ===
 
-欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tags/video.md">docs/tags/video.md</a> 文件，共建 HTML Tutorial 文档。
+## 示例
+
+播放视频：
+
+```html idoc:preview:iframe
+<video width="320" controls>
+  <source
+    type="video/mp4"
+    src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">
+  <source
+    type="video/webm"
+    src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm">
+  Your browser does not support the video tag.
+</video>
+```
+
+## 定义和用法
+
+`<video>` 标签用于在文档中嵌入视频内容，例如电影剪辑或其他视频流。
+
+`<video>` 标签包含一个或多个具有不同视频源的 [`<source>`](./source.md) 标签。 浏览器将选择它支持的第一个来源。
+
+`<video>` 和 `</video>` 标签之间的文本只会在不支持 \<video> 元素的浏览器中显示。
+
+HTML 支持三种视频格式：MP4、WebM 和 OGG。
+
+| 浏览器 | MP4 | WebM | Ogg |
+| ------- | --- | ---- | --- |
+| ![edge][2]    | YES | YES  | YES |
+| ![chrome][1]  | YES | YES  | YES |
+| ![firefox][3] | YES | YES  | YES |
+| ![safari][4]  | YES | YES  | ❌  |
+| ![opera][5]   | YES | YES  | YES |
+
+## 提示和注意事项
+
+**提示：** 对于音频文件，请查看 [`<audio>`](./audio.md) 标签。
+
+## Browser Support
+
+表中的数字指定了完全支持该元素的第一个浏览器版本。
+
+| Element | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
+| ------- | --- | --- | --- | --- | --- |
+| \<video> | 4.0 | 9.0 | 3.5 | 3.1 | 11.5 |
+
+## 可选属性
+
+| 属性 Attribute | 值 Value | 描述 Description |
+| -------- | -------- | -------- |
+| [autoplay](./video_autoplay.md) | autoplay           | 指定视频一准备好就开始播放 |
+| [controls](./video_controls.md) | controls           | 指定应显示视频控件（例如播放/暂停按钮等） |
+| [height](./video_height.md)     | *pixels*           | 设置视频播放器的高度 |
+| [loop](./video_loop.md)         | loop               | 指定视频将在每次结束时重新开始 |
+| [muted](./video_muted.md)       | muted              | 指定视频的音频输出应静音 |
+| [poster](./video_poster.md)     | *URL*              | 指定在视频下载时或用户点击播放按钮之前显示的图像 |
+| [preload](./video_preload.md)   | auto<br>metadata<br>none | 指定当页面加载时作者是否以及如何认为应该加载视频 |
+| [src](./video_src.md)           | *URL*              | 指定视频文件的 URL |
+| [width](./video_width.md)       | *pixels*           | 设置视频播放器的宽度 |
+
+## 全局属性
+
+`<video>` 标签支持 HTML 中的[全局属性](../reference/standardattributes.md)。
+
+## 事件属性
+
+`<video>` 标签支持 HTML 中的[事件属性](../reference/eventattributes.md)。
+
+
+## 相关页面
+
+HTML Audio/Video DOM 参考: [HTML Audio/Video DOM Reference](../reference/av_dom.md)
+
+
+[1]: ../assets/chrome.svg
+[2]: ../assets/edge.svg
+[3]: ../assets/firefox.svg
+[4]: ../assets/safari.svg
+[5]: ../assets/opera.svg

docs/tags/wbr.md

@@ -1,4 +1,38 @@
-wbr.md
+HTML \<wbr> Tag
 ===
 
-欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tags/wbr.md">docs/tags/wbr.md</a> 文件，共建 HTML Tutorial 文档。
+## 示例
+
+有断词机会的文本：
+
+```html idoc:preview:iframe
+<p>To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.​</p>
+```
+
+## 定义和用法
+
+`<wbr>`（分词机会）标签指定在文本中可以添加换行符的位置。
+
+**提示：** 当一个词太长时，浏览器可能会在错误的地方打断它。 您可以使用 `<wbr>` 元素添加分词机会。
+
+## Browser Support
+
+表中的数字指定了完全支持该元素的第一个浏览器版本。
+
+| Element | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
+| ------- | --- | --- | --- | --- | --- |
+| \<wbr>  | 1.0 | 12.0 | 3.0 | 4.0 | 11.7 |
+
+## 全局属性
+
+`<wbr>` 标签支持 HTML 中的[全局属性](../reference/standardattributes.md)。
+
+## 事件属性
+
+`<wbr>` 标签支持 HTML 中的[事件属性](../reference/eventattributes.md)。
+
+[1]: ../assets/chrome.svg
+[2]: ../assets/edge.svg
+[3]: ../assets/firefox.svg
+[4]: ../assets/safari.svg
+[5]: ../assets/opera.svg