英语小课堂：

hyper 超级

target 目标对象

reference 引用

frame 边框框架

error 错误

blank 空白

parent 父母

self 自己

load 加载

canvas 画布

介绍一个yarn下安装的工具 http-server

安装 yarn global add http-server 轻量级的本地服务器，适合前端调试

安装好后在终端下输入http-server -c-1 （-c-1意思是不加缓存） 或者简写 hs -c-1

a标签

作用 a标签可以跳转外部链接、内部锚点、邮箱或者电话号码

href 超链接 hyper+reference 超级引用

取值：

href可以取带http协议的例如http：//google.com或者https：//google.com 但是最好不要加http，运用//就可以避免很多问题，由浏览器自动选择协议

href可以取路径 例如/a/b/c或者a/b/c、index.html或者./index.com

href可以取伪协议mailto:邮箱地址

href可以取伪协议tel:手机号码

href可以取伪协议javascript:;表示什么都不做，当然也可以在里面写一点js内容

href内也可以写id href=#xxx 表示内部锚点

target 控制打开的目标对象

target:_blank 新建一个空白目标页并打开a链接

target:_top 文档载入最高级别的窗口，配合iframe使用，在iframe中设置这个，会影响当前页面。

target:_parent 文档载入父窗口，配合iframe使用，会影响iframe的父窗口

target:_self 默认取值，在本页面打开。

target:程序员自己取的值xxx 可以新建一个程序员自己的页面，页面名就是xxx。

target:iframe的name值，点击后会在iframe上打开

download 了解就好 下载页面

rel = noopner 使用target="_blank"时设置这个属性可以防止一些钓鱼行为

iframe标签

内嵌窗口，目前已经很少使用，了解一下，如果有需要再查文档

table标签

table标签是表格标签，它有三个子标签，分别是thead、tbody、tfoot。

如果不写上面三个，浏览器会自动设置一个tbody。写上三个子标签即使顺序不对也会按照顺序排列。

table的孙标签

tr 是table row的缩写，意思是表格行

th 是table head的简写，意思是表头,其实就是td的加粗和居中显示

td 是table data的简写，意思是表格数据列

相关样式

table-layout 设置表格布局，一般我们设置auto（按内容调整宽高）或fixed（相对等宽）

border-collapse 把附近相邻的单元格给并起来

border-spacing 控制单元格之间的空白距离，一般来说是0

我们往往会设置表格的默认样式

table{
    border-collapse:collapse;
    border-spacing:0;
}

img标签

image的简写，图片标签

作用：发出get请求，展示图片

img的属性

alt 当图片不显示时展示

height、width 高跟宽只需要设置一个就能自适应

src 是super refrence的简写 超级引用 填写图片地址

图片相关的事件

onload 图片加载成功事件

onerror 图片加载失败事件

与手机端的响应式需要加上 max-width:100%

form标签

发get或者post请求，刷新页面

属性

action 控制往哪个页面发送请求

autocomplete 自动补充，有两个属性on或者off，on了之后浏览器会自动填充用户的信息（账号或者密码或者搜索内容等）需要配合input标签写name属性，例如input标签写name=email，浏览器会根据这个设置来补充用户的邮箱地址

method 控制请求的方式get或者是post

target 把哪个页面给刷新掉 跟a标签的target差不多

input标签的type值

button跟<input type="submit">的区别：

button内可以有多个标签，submit不行。

button默认type是submit,<input type="submit">不写value会根据本地化语言变成“提交”两个字。

<input type="checkbox">多选 对input设置同一个name可让浏览器知道这些多选是一组的

<input type="radio"> 单选框，对input设置同一个name可实现x选一

<input type="email"> 提交邮箱

<input type="text"> 文本框

<input type="password"> 密码框

<input type="file"> 上传文件框 需要加multiple实现多个上传

<input type="color"> 颜色

<input type="hidden"> 隐藏的input，给机器输入用的

textarea多行文本 设置style="resize:none"可以设置无法拖动 可设置宽高

<input type="number"> 数字文本框

select和option 选择框

事件： onchange input改变的时候

onfocus 鼠标集中到input身上的时候

onblur 鼠标从input出来的时候

验证器：例如input身上填写required 可以让用户填写后才能提交

注意事项：

input一般不需要click事件

form里面的input必须都有name

form里必须放一个type=submit才能触发提交事件