HTML重要标签

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

首先给出索引

  1. table
  2. form
  3. a
  4. img
  5. video
  6. audio
  7. canvas
  8. svg

table

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

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

表格示例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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 标签,要遵循以下规则

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

video

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

待更新

audio

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

待更新

canvas

canvas

待更新

svg

svg

待更新

--It's the end.Thanks for your read.--