本文介绍一些前端常用且重要的标签

首先给出索引

table
form
a
img
video
audio
canvas
svg

table

table，表格标签，用于制表，包含以下子标签

标签	含义
thead	表头
tbody	表体
tfoot	表脚
tr	行
th	表头子项
td	表体子项

表格示例代码如下：

<table>
    <thead>
        <tr>
            <th>时间</th>
            <th>事件</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>7点</td><td>起床</td></tr>
        <tr><td>8点</td><td>早饭</td></tr>
        <tr><td>12点</td><td>午饭</td></tr>
        <tr><td>13点</td><td>午休起床</td></tr>
        <tr><td>17点</td><td>晚饭</td></tr>
        <tr><td>23点</td><td>休息</td></tr>
    </tbody>
    <tfoot>
        <tr>
            <td>总共24小时</td>
            <td>总共6件事情</td>
        </tr>
    </tfoot>
</table>

但是，此时你会发现表格十分之难看，间距很大，对齐也不正常

我们可以用三个常用的表格属性来调整

属性	含义	默认值	建议值
table-layout	表格布局	auto（自动分配	fixed（如果有指定宽度则等分
border-collapse	边框隔离	separated（分隔	collapsed（合并
border-spacing	边框间距	0	0

form

form，表单标签，常用于提交请求

主要功能全部体现在其属性上，故此处先讲属性

属性	含义
action	提交表单的地址，可以是相对路径或绝对路径，留空则为当前页面。提交后当前页面会刷新
method	可选 GET 或 POST，默认 GET，详见 HTTP 动词
target	常用 _blank，表示在新标签页打开，默认值为 _self，表示在当前页面打开。若有 iframe 嵌套，则还可以使用 _parent 或 _top 来控制打开位置
autocompete	可选 on 或 false，当值为 on 时会依据用户历史提供下拉填充选项，默认值取决于浏览器

当表单提交时，触发其 onsubmit 事件，并将所有数据组织为 [name]=[value] 形式的 formdata，发送到 action 指定的地址

可以通过 js 拦截该 onsubmit 事件，提供一些诸如先验的操作

可用以下子标签作为 form 的子元素

标签	含义
input[type=”text”]	单行文本框
input[type=”password”]	单行文本框，但不可直接看见
textarea	多行文本框
input[type=”submit”]	提交按钮，触发所在表单的 submit 事件
button	按钮，触发所在表单的 submit 事件
input[type=”radio”]	单选框
input[type=”checkbox”]	复选框
input[type=”file”]	用于选择文件
input[type=”email”]	用于输入邮箱
input[type=”tel”]	用于输入电话
input[type=”hidden”]	一个隐藏的输入框，用于为 js 脚本保存数据
select	下拉选框
option	下拉选框子项
label	为输入框添加描述

专有属性

此处专有属性并非指字段名专有，而是指意义专有

标签	属性	是否取值	含义
[all]	required	否	任意允许用户输入的标签，都可以使用该属性来强制要求用户输入，否则无法提交表单
[all]	autofocus	否	自动聚焦到该元素
[all]	disabled	否	令用户不能编辑该元素
input[type=”text”]、textarea	placeholder	是	指定当文本框为空时，显示的提示文本
input[type=”text”]、textarea	maxlength	是	指定文本框可以接受的最大文本长度
textarea	style>resize	是	默认情况下可以拖动改变文本框大小，当该属性指定为 none 时不可改变大小
input[type=”radio”]	name	是	指定若干个 input 为同一组
input[type=”radio”]	checked	否	指定同一组 input 中的默认选择
input[type=”checkbox”]	name	是	指定若干个 input 为同一组
input[type=”checkbox”]	checked	否	指定同一组 input 中的默认选择
input[type=”file”]	multiple	否	令该文件输入框可以选择多个文件
button	type	是	在表单中若不指定，则为 submit，指定为其它值则不会触发提交
option	value	是	选项的实际值，该值区别于用户能看到的值，由 js 处理

显然，input 元素的表现非常复杂，且主要负责输入，那么有以下 3 个主要事件来控制 input 的输入

事件	适合元素	触发时机
onchange	input[type=”text”]、textarea	文本改变
onfocus	input[type=”text”]、textarea	获得焦点
onblur	input[type=”text”]、textarea	失去焦点

在项目中一般不使用 form 直接提交数据，而使用 js 拦截提交事件，然后用 ajax 提交，故现在 form 标签更多仅作为一个表示而已

a

a，超链接标签，常用于跳转页面，没有专属的子标签

重要属性如下

属性	是否取值	含义
href	是	指定超链接的地址，一般是 1. 网络上的路径，使用 http 或 https 协议，或不指定协议 2. 本站相对路径 3. 伪协议路径，一般是 javascript、mailto、tel 三种伪协议之一 4. 页内锚点，通过 #[id] 指定
target	是	常用 _blank，表示在新标签页打开，默认值为 _self，表示在当前页面打开。若有 iframe 嵌套，则还可以使用 _parent 或 _top 来控制打开位置，或直接指定为 iframe 的 name
download	否	此时 a 标签的动作不再是打开新页面，而是下载新页面
rel	是	当使用 target=”_blank” 时，要加上 rel=”noopener” 以防止钓鱼攻击

也可以设置一个用于触发 JavaScript 方法，其余什么也不做的 a 标签

此处使用 javascript 伪协议，代码如下

<a href="javascript:;">点击我什么也没发生</a>

img

img，图片标签，用于通过 GET 请求来引入图片，没有专属的子标签

重要属性如下

属性	含义
src	指定图片来源，可以是网络地址或相对路径，可以通过 js 改变指向
alt	指定当图片无法加载时的提示内容
width	指定图片的宽度，此时高度会根据比例调整
height	指定图片的高度，此时宽度会根据比例调整
style>max-width	指定图片的最大宽度，当设为 100% 时，最大不会超过视口大小

重要事件如下

事件	触发时机	用法
onload	图片加载成功	统计图片访问量
onerror	图片加载失败	补救失败图片

使用 img 标签，要遵循以下规则

img 的大小应该不超过 300 kb，否则严重影响加载速度
永远不要在不合比例的情况下同时指定 height 和 width，否则图片将严重变形
最好只使用 width 来修改图片尺寸

video

video，视频标签，用于引入视频

有以下重要属性

属性	是否取值	含义
src	是	指定视频来源
controls	否	提供一些用户操作
preload	是	指示视频是否应该被缓存

其余部分请查看 mdn

audio

audio，音频标签，用于引入音频

重要属性与 video 相同

canvas

canvas，为用户提供一张画布

具体的比较难以说明，建议查看以下画图板范例，或 mdn

https://github.com/Ringoer/Toy/blob/main/22/canvas.html

svg

svg，矢量图形，一般要用的时候直接去网上找一个 svg 库，然后引用他们的 svg 即可

常用 svg 库如下

Iconfont-阿里巴巴矢量图标库