doc: add controls,coords attribute document.

jaywcjlove · jaywcjlove · commit a9c5a24fc554 · 2022-05-04T00:34:37.000+08:00
diff --git a/docs/attribute/content.md b/docs/attribute/content.md
@@ -21,8 +21,8 @@ HTML content 属性
 
 ```html
 <head>
-<meta name="description" content="Free Web tutorials">
-<meta name="keywords" content="HTML,CSS,XML,JavaScript">
+  <meta name="description" content="Free Web tutorials">
+  <meta name="keywords" content="HTML,CSS,XML,JavaScript">
 </head>
 ```
 
diff --git a/docs/attribute/controls.md b/docs/attribute/controls.md
@@ -1,4 +1,72 @@
-controls.md
+HTML controls 属性
 ===
 
-欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/attribute/controls.md">docs/attribute/controls.md</a> 文件，共建 HTML Tutorial 文档。
+## 定义和用法
+
+`controls` 属性是一个布尔属性。
+
+如果存在，它指定应显示音频/视频控件。
+
+控制应包括：
+
+* 播放 Play
+* 暂停 Pause
+* Seeking
+* 音量 Volume
+* 全屏切换（仅适用于 video 视频）
+* 字幕/字幕 (仅适用于 video 视频，如果可用)
+* 轨道 (仅适用于 video 视频，如果可用)
+
+## 适用于
+
+`controls` 属性可用于以下元素：
+
+| 元素 Element | 属性 Attribute |
+| ----- | ----- |
+| [\<audio>](../tags/audio.md) | [controls](../tags/audio_controls.md) |
+| [\<video>](../tags/video.md) | [controls](../tags/video_controls.md) |
+
+## 示例
+
+### Audio 示例
+
+带有浏览器默认控件的 [\<audio>](../tags/audio.md) 元素：
+
+```html idoc:preview:iframe
+<audio controls>
+  <source src="horse.ogg" type="audio/ogg">
+  <source src="horse.mp3" type="audio/mpeg">
+  您的浏览器不支持音频元素。
+</audio>
+```
+
+### Video 示例
+
+带有浏览器默认控件的 [\<video>](../tags/video.md) 元素：
+
+```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">
+  您的浏览器不支持 video 标签。
+</video>
+```
+
+## 浏览器支持
+
+`controls` 属性对每个元素都有以下浏览器支持：
+
+| 元素 Element | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
+| ------- | --- | --- | --- | --- | --- |
+| [audio](../tags/audio.md)   | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
+| [video](../tags/video.md)   | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
+
+[1]: ../assets/chrome.svg
+[2]: ../assets/edge.svg
+[3]: ../assets/firefox.svg
+[4]: ../assets/safari.svg
+[5]: ../assets/opera.svg
diff --git a/docs/attribute/coords.md b/docs/attribute/coords.md
@@ -1,4 +1,44 @@
-coords.md
+HTML coords 属性
 ===
 
-欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/attribute/coords.md">docs/attribute/coords.md</a> 文件，共建 HTML Tutorial 文档。
+## 定义和用法
+
+`coords` 属性指定图像地图中某个区域的坐标。
+
+`coords` 属性与 [`shape`](./shape.md) 属性一起使用来指定区域的大小、形状和位置。
+
+**提示：** 区域左上角的坐标为 `0,0`。
+
+## 适用于
+
+The `coords` attribute can be used on the following element:
+
+| 元素 Element | 属性 Attribute |
+| ----- | ----- |
+| [\<area>](../tags/area.md) | [coords](att_area_coords.asp) |
+
+## 示例
+
+带有可点击区域的图像地图：
+
+```html idoc:preview:iframe
+<img src="../assets/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
+<map name="workmap">
+  <area shape="rect" coords="34,44,270,350" alt="Computer" href="../tags/a.html">
+  <area shape="rect" coords="290,172,333,250" alt="Phone" href="../tags/abbr.html">
+  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="../tags/address.html">
+</map>
+```
+<!--rehype:style=height: 330px;-->
+
+## 浏览器支持
+
+| 属性 Attribute | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
+| ------- | --- | --- | --- | --- | --- |
+| coords    | Yes | Yes | Yes | Yes | Yes |
+
+[1]: ../assets/chrome.svg
+[2]: ../assets/edge.svg
+[3]: ../assets/firefox.svg
+[4]: ../assets/safari.svg
+[5]: ../assets/opera.svg
diff --git a/docs/tags/applet.md b/docs/tags/applet.md
@@ -35,7 +35,7 @@ HTML \<applet> 标签
 <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>
 ```
 
diff --git a/docs/tags/video.md b/docs/tags/video.md
@@ -13,7 +13,7 @@ HTML \<video> Tag
   <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>
 ```
 
