doc: add <template> <textarea> tag document.

Author: jaywcjlove

docs/tags/style.md

@@ -80,7 +80,7 @@ HTML \<style> Tag
 
 ## 相关页面
 
-HTML tutorial: [HTML CSS](../tutorial/css.md)
+HTML 教程: [HTML CSS](../tutorial/css.md)
 
 ## 默认 CSS 设置
 

docs/tags/td.md

@@ -137,7 +137,7 @@ HTML 表格有两种单元格：
 ```
 <!--rehype:style=height: 110px;-->
 
-How to vertical align content inside \<td> (with CSS):
+如何垂直对齐 \<td> 中的内容（使用 CSS）：
 
 ```html idoc:preview:iframe
 <style>
@@ -156,7 +156,7 @@ How to vertical align content inside \<td> (with CSS):
 ```
 <!--rehype:style=height: 150px;-->
 
-How to set the width of a table cell (with CSS):
+如何设置表格单元格的宽度（使用 CSS）：
 
 ```html idoc:preview:iframe
 <style>
@@ -175,7 +175,7 @@ How to set the width of a table cell (with CSS):
 ```
 <!--rehype:style=height: 110px;-->
 
-How to create table headers:
+如何创建表头：
 
 ```html idoc:preview:iframe
 <style>
@@ -196,7 +196,7 @@ How to create table headers:
 ```
 <!--rehype:style=height: 160px;-->
 
-How to create a table with a caption:
+如何创建带有标题的表格：
 
 ```html idoc:preview:iframe
 <style>

docs/tags/template.md

@@ -1,4 +1,82 @@
-template.md
+HTML \<template> Tag
 ===
 
-欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tags/template.md">docs/tags/template.md</a> 文件，共建 HTML Tutorial 文档。
+## 示例
+
+使用 \<template> 保存一些在页面加载时将被隐藏的内容。 使用 JavaScript 显示它：
+
+```html idoc:preview:iframe
+<button onclick="showContent()">Show hidden content</button>
+<template>
+  <h2>Flower</h2>
+  <img src="../assets/example.png" width="214">
+</template>
+<script>
+  function showContent() {
+    var temp = document.getElementsByTagName("template")[0];
+    var clon = temp.content.cloneNode(true);
+    document.body.appendChild(clon);
+  }
+</script>
+```
+
+## 定义和用法
+
+`<template>` 标签用作一个容器，用于在页面加载时保存一些对用户隐藏的 HTML 内容。
+
+`<template>` 中的内容可以稍后使用 JavaScript 渲染。
+
+如果您有一些 HTML 代码要反复使用，则可以使用 `<template>` 标记，但在您要求之前不要使用。 要做到这一点*没有* `<template>` 标记，您必须使用 JavaScript 创建 HTML 代码，以防止浏览器呈现代码。
+
+## 浏览器支持
+
+| Element | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
+| ------- | --- | --- | --- | --- | --- |
+| \<template> | 26.0 | 13.0 | 22.0 | 8.0 | 15.0 |
+
+## 全局属性
+
+`<template>` 标签支持 HTML 中的[全局属性](../reference/standardattributes.md)。
+
+## 更多示例
+
+用一个新的 div 元素为数组中的每个项目填充网页。 每个 div 元素的 HTML 代码都在模板元素内：
+
+```html idoc:preview:iframe
+<button onclick="showContent()">Show hidden content</button>
+<template>
+  <div class="myClass">I like: </div>
+</template>
+<script>
+  var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];
+  function showContent() {
+    var temp, item, a, i;
+    temp = document.getElementsByTagName("template")[0];
+    item = temp.content.querySelector("div");
+    for (i = 0; i < myArr.length; i++) {
+      a = document.importNode(item, true);
+      a.textContent += myArr[i];
+      document.body.appendChild(a);
+    }
+  }
+</script>
+```
+<!--rehype:style=height: 130px;-->
+
+检查浏览器对 \<template> 的支持：
+
+```html idoc:preview:iframe
+<script>
+if (document.createElement("template").content) {
+  document.write("Your browser supports template!");
+} else {
+  document.write("Your browser does not supports template!");
+}
+</script>
+```
+
+[1]: ../assets/chrome.svg
+[2]: ../assets/edge.svg
+[3]: ../assets/firefox.svg
+[4]: ../assets/safari.svg
+[5]: ../assets/opera.svg

docs/tags/textarea.md

@@ -1,4 +1,84 @@
-textarea.md
+HTML \<textarea> Tag
 ===
 
-欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tags/textarea.md">docs/tags/textarea.md</a> 文件，共建 HTML Tutorial 文档。
+## 示例
+
+多行文本输入控件（文本区域）：
+
+```html idoc:preview:iframe
+<label for="review">评论：</label>
+<br>
+<textarea id="review" name="review" rows="4" cols="50">
+在 HTML Tutorial，您将学习如何制作网站。 他们提供所有 Web 开发技术的免费教程。
+</textarea>
+```
+
+## 定义和用法
+
+`<textarea>` 标签定义了一个多行文本输入控件。
+
+`<textarea>` 元素通常在表单中使用，以收集用户输入，如评论或评论。
+
+一个文本区域可以容纳无限数量的字符，并且文本以固定宽度的字体（通常是 Courier）呈现。
+
+文本区域的大小由 `<cols>` 和 `<rows>` 属性（或使用 CSS）指定。
+
+表单提交后需要name属性引用表单数据（如果省略name属性，则不会提交文本区域的数据）。
+
+需要 `id` 属性将文本区域与标签相关联。
+
+**提示：** 始终添加 [\<label>](./label.md) 标签以获得最佳可访问性实践！
+
+## 浏览器支持
+
+| Element | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
+| ------- | --- | --- | --- | --- | --- |
+| \<textarea> | Yes | Yes | Yes | Yes | Yes |
+
+## 属性 Attributes
+
+| 属性 | 值 | 描述 |
+| ---- | ---- | ---- |
+| [autofocus](./textarea_autofocus.md)     | autofocus          | 指定在页面加载时文本区域应自动获得焦点 |
+| [cols](./textarea_cols.md)               | *number*           | 指定文本区域的可见宽度 |
+| [dirname](./textarea_dirname.md)         | *textareaname*.dir | 指定将提交textarea的文本方向 |
+| [disabled](./textarea_disabled.md)       | disabled           | 指定应禁用文本区域 |
+| [form](./textarea_form.md)               | *form\_id*         | 指定文本区域属于哪个表单 |
+| [maxlength](./textarea_maxlength.md)     | *number*           | 指定文本区域中允许的最大字符数 |
+| [name](./textarea_name.md)               | *text*             | 指定文本区域的名称 |
+| [placeholder](./textarea_placeholder.md) | *text*             | 指定描述文本区域预期值的简短提示 |
+| [readonly](./textarea_readonly.md)       | readonly           | 指定文本区域应该是只读的 |
+| [required](./textarea_required.md)       | required           | 指定需要/必须填写文本区域 |
+| [rows](./textarea_rows.md)               | *number*           | 指定文本区域中可见的行数 |
+| [wrap](./textarea_wrap.md)               | hard soft          | 指定在表单中提交时如何包装文本区域中的文本 |
+
+## 全局属性
+
+`<textarea>` 标签支持 HTML 中的[全局属性](../reference/standardattributes.md)。
+
+## 事件属性
+
+`<textarea>` 标签支持 HTML 中的[事件属性](../reference/eventattributes.md)。
+
+## 更多示例
+
+
+禁用默认调整大小选项：
+
+```html idoc:preview:iframe
+<style>
+  textarea { resize: none; }
+</style>
+<label for="review">评论：</label>
+<br>
+<textarea id="review" name="review" rows="4" cols="50">
+在 HTML Tutorial，您将学习如何制作网站。 他们提供所有 Web 开发技术的免费教程。
+</textarea>
+```
+
+
+[1]: ../assets/chrome.svg
+[2]: ../assets/edge.svg
+[3]: ../assets/firefox.svg
+[4]: ../assets/safari.svg
+[5]: ../assets/opera.svg