用户投稿HTML 标籤
表格 - table
<table> 顾名思义就是表格标籤，用来呈现二维资料的表资讯，不过 <table> 标籤只是作为表格的容器，里面还包含 <caption>、<thead>、<tbody>、<tfoot> 等不同的部分。
虽然我们先介绍了表格的结构，但在 HTML 中，这些结构并非必要的表格元素，而是在一些複杂的情境时让表格看起来更有架构、更好维护或进行样式设定。
那到底什么才是组成一个表格的重要标籤呢？
其实就只有 <table>、tr>、及<td>。
基本上只要有这三个元素，我们就能写出一个简单的表格，他们的嵌套关係为 table → tr → td。
<table></table>：指表格整体，可包裹多个 tr<tr></tr>：表格行，一行为一个 tr，可包裹多个 td<td></td>：表格单元格，里面存放那一单元格的内容，每一个 <tr> 中的 <td> 数量必须相同<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>这是页面标题</title> </head> <body> <table border="1"> <tr> <th>A</th> <th>B</th> <th>C</th> </tr> <tr> <td>234234</td> <td>1234gdsf</td> <td>3aaaaa</td> </tr> <tr> <td>4444</td> <td>555</td> <td>222</td> </tr> </table> </body></html>
上面就是一个只用 table、tr 及 td 组成的简单表格。
在这边补充上面的 border 其实是 table 的一个 边框属性，可以为表格添加框线。
属性，是指元素中的附加讯息，一般出现在开始标籤，以
属性名：属性值的方式呈现
table 常用属性：
例如：
<table border="1" width="300" height="200"></table>虽然我们已经写出了一个简单的表格，但在一些比较複杂的情境中可能会需要将表头栏位名称和表格中的内容区分开来，这时候就会需要用到我们一开始说的 head、body，及 foot 了。
<table border="1"> <thead> <tr> <th>科目</th><th>分数</th> </tr> </thead> <tbody> <tr> <td>英文</td><td>100</td> </tr> <tr> <td>数学</td><td>98</td> </tr> <tr> <td>化学</td><td>25</td> </tr> </tbody> <tfoot> <tr> <th>平均分数</th><td>57</td> </tr> </tfoot></table>
表格合併 - rowspan、colspan
rowspan — 垂直合併储存格，用法为<td rowspan="要将几格合併成一格">colspan — 水平合併储存格，用法为 <td colspan="要将几格合併成一格"><!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>这是页面标题</title> </head> <body> <table border="1"> <tr> <th>项目</th> <th>金额</th> </tr> <tr> <td>iPhone 11</td> <td>$24,900</td> </tr> <tr> <td>AirPods</td> <td rowspan="2">$6,490</td> </tr> <tr> <td>AirPods pro</td> <!-- 这边原本还有一个 td 但因为 rowspan 将此格与上面那格合併为一格，所以这边不用 td --> </tr> <tr> <td colspan="2">总金额: $31,390</td><!-- 这边原本还有一个 td 但因为 colspan 将此格与左边那格合併为一格，所以这边不用 td --> </tr> </table> </body></html>
表单 - form
HTML 表单 (form) 有点像是一个交互的区域，主要用来让使用者输入资料，例如表单内容填完后可以传回远端伺服器 (web server)，我们常见的注册、新增资料等功能都可能会用到表单。
<form>只是一个容器，里面的内容可依需求放输入框、单选等标籤
下面来说说 form 有哪些重要的属性 (attribute) 吧:
action：指定位址(通常为 URL)，在提交(submit) 表单后会告诉浏览器要将表格的内容送去哪里method：指定资料传输时用的 HTTP 协议，主要分为 get 和 post，若不写则预设为 gettarget：指定浏览器要在哪开启送出表单后的结果，预设为_self(在目前视窗显示)，常见的还有 _blank(开启新分页)novalidate：不对表单进行验证，通常用于开发中的测试Form 传送 input 框内容至 Google 搜寻小範例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <form action="https://www.google.com/search" target="_blank"> <input type="text" name="q"> </form></body></html>既然上面已经说完表单结构了，那就让我们来看表单内常出现的标籤吧。
文字 - label
<label></label>，通常用于绑定文字与表单控件之间的关係，例如将文字标题与单、多选选项绑定。是一个双标籤，文字内容写在起始标籤和结束标籤间。
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>这是页面标题</title> </head> <body><label>123</label> </body></html>输入 - input
input 基本上是表单内最重要的标籤，主要用来收集资料(让使用者输入资料)，会因为 type 属性不同而建立不同的表单控制元件，例如文字框、密码框、单/多选输入等。
不过在讲解各个 type 的功能之前，我们先来简单看看标籤常见的属性整理吧！
value：设定初始值(default value)name：顾名思义就是指定这个输入框的资料该叫什么名称，方便后续取出资料，例如上面 form 範例中我们将 input 框的 name 设为q，则送出到 Google 搜寻页面时参数就会变成 q="输入内容"。maxlength：设定输入内容最大长度placeholder：提示文字，会直接显示在输入框中，有输入值时消失readonly：将元素设为唯读disabled：将元素设为禁用required：必填栏位autofocus：会于载入时自动让该元素获得焦点 (focus 状态)autocomplete：输入自动完成功能，可设置为 on 或 off，例如 autocomplete = "on"，只作用于文字输入类的元素type=”text”单纯的文字输入框，输入单行文字type=”password”密码框，用于输入密码，预设不显示输入的文字type=”radio”单选框type=”checkbox”多选框type=”file”档案选择，可用于档案上传功能type=”submit”送出(提交)按钮，按下后会重新整理当前页面type=”reset”重新设定(清除)按钮type=”button”一般按钮，无预设功能，需另外透过 JavaScript 设定Text、Password
text 是单纯的文字输入框，password 则是密码框，差别只在于密码框预设会隐藏输入的文字。
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>这是页面标题</title> </head> <body><input type="text" name=""> <!-- 这是一般文字框，输入时文字正常显示 --> <br> <input type="password" name="" placeholder="请输入密码"> <!-- 这是密码框，输入时文字会隐藏 --> </body></html>Radio、Checkbox
radio(单选功能)通常用于一个单选群组中，包含按钮以及文字，一个组中只能选择一个选项。通常应用在只能选择男或女、是或否的情境。checkbox 为多选功能，写法上与单选框除了 type 之外基本大致相同。
每一组单/多选框中 input 的 name 值必须相同，注意一定要有 name 浏览器才会知道哪几个 input 选项属于同一组id 属性可用于大部分的 html 标籤中，主要用来赋予某标籤一个唯一值 ( 有点像某标籤的身分证字号 )value 属性为这个 input 元素的值，特别的是这边 value 设定后不会像普通文字输入框一样显示出来checked 预设该选该选项 ( 预设打勾 )label 中的 for 属性是为了将 label 中的文字绑定 input 选项的 id 属性，让使用者点选文字 “男生” 也可以有勾选的效果<!DOCTYPE html> <head> <meta charset="utf-8"> <title>这是页面标题</title> </head> <body><label>性别</label> <!-- 这是单选框 --> <input type="radio" id="boy" name="drone" value="boy" checked> <label for="boy">男生</label> <input type="radio" id="girl" name="drone" value="girl"> <label for="girl">女生</label><br><label>喜欢的动物：</label> <!-- 这是多选框 --> <input type="checkbox" id="dog" name="animal" value="dog"> <label for="dog">狗狗</label> <input type="checkbox" id="cat" name="animal" value="cat"> <label for="cat">猫猫</label> <input type="checkbox" id="rabbit" name="animal" value="rabbit"> <label for="rabbit">兔兔</label> </body></html>File
input file 应用于需要上传档案的情境，让使用者可以从本机选择档案并进行上传。
multiple 属性可控制单选 or 多选accept 中为可接受的档案类型，以",”区隔<!DOCTYPE html> <head> <meta charset="utf-8"> <title>这是页面标题</title> </head> <body><input type="file" multiple accept=".doc,.docx"/> </body></html>Submit、Reset、Button
这三个 type 中，input 框都会以按钮的形式显示在页面上，submit为提交(送出)，当使用者点了 submit button 后就会将表单资料传送给在 action 设定的位置；reset则可以让使用者重设表单内容回到初始状态。
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>这是页面标题</title> </head> <body><form> <input type="text"> <input type="submit"></button> <input type="reset"></button> <input type="button"></button> <input type="submit" value="送出"></button> <input type="reset" value="重整"></button> <input type="button" value="按钮"></button> </form> </body></html>输入 - input (补充)
在新版的 HTML 中，新增了一些进阶的 input 种类，例如日期、时间，以及更多的文字输入 type 等等，这些种类通常较少用到，若有兴趣深入了解详细的用法和规範的话可以参考 MDN。
type=”email”一般输入框，在表单提交前会验证是否为合理的电子信箱格式type=”url”一般输入框，在表单提交前会验证是否为合理的 url 格式type=”number”只能输入数字，且输入框右边有箭头可点击调整输入数字type=”search”一般输入框，有输入值时右边会出现小叉叉清除按钮type=”tel”一般输入框，在移动端中会展开数字输入键盘type=”range”会呈现出长条状的 bar (类似音量调整滑动 bar)type=”color”可视化颜色选择器type=”date”、type=”month”、type=”time”分别为日期、月份、时间选择器若想了解更多资讯可以参考：https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/table
上一篇：[快速入门前端 3] 什么是 HTML 标籤 (1)
下一篇：[快速入门前端 5] 什么是 HTML 标籤 (3)
系列文章列表：[快速入门前端] 系列文章索引列表
微信扫一扫打赏
支付宝扫一扫打赏
