英语小课堂
1.hyper 超级 2.reference 引用 3.frame 边框，框架 4.canvas 画布
<a>标签
属性
1.href
缩写=hyper+reference 超级引用→超链接（后接指向的URL网址）
<a href="http://google.com">超链接</a>
- 关于href属性的作用
- 跳转外部页面
- 跳转内部锚点
- 跳转到邮箱或电话等
- 关于href属性的取值
(1) 网址
- www.google.com
- www.google.com
- //www.google.com 推荐使用这一种写法。最高级。会自动选择适用http还是https。（具体原因学http协议就知道了）
(2) 路径
- /a/b/c以及a/b/c ☝a前面的/不是文件的根目录（绝对路径），而是开了http-server服务的HTML demo文件下的根目录（相对路径），所以写不写/都一样。
☹不要右键资源管理器双击打开html文件，会识别成文件所在硬盘的根目录去访问，显示出错找不到。
☑vscode-终端-指令：http-server-点击其提供的链接-添加/路径（想要打开的html文件名）-访问成功
- index.html以及./index.html 在当前目录找html文件
(3) 伪协议
- javascript:代码 ☀ 需要写冒号和分号
早期用来直接执行js代码<a href="javascript:alert(1);">JavaScript伪协议</a>
现在应用场景是：希望点击a标签之后页面不刷新也不返回到顶部，什么也不做
<a href="javascript:;">什么也不做</a>
✔ 拓展指令
<a href=""></a> 会让页面刷新；
<a href="#"></a> 会让页面跳转到顶部；
- mailto:邮箱
<a href="xxx@gmail.com"></a>会跳转到邮箱，给指定邮箱发邮件 - tel:手机号
<a href="tel:123456789"></a>会进入拨号界面，自动填入指定号码
(4) ID
<a href=#xxx"></a> 会让页面跳转到指定的标签
如<p id="xxxx"></p>, <a href="#xxx"></a>就可以定位到这个p标签
2.target
- 关于target属性的作用
指定窗口打开href超链接。
- 关于target属性的取值
(1) _blank
新页面打开<a href="http://google.com" target="_blank">超链接</a>
(2) _self
默认项，当前页面打开<a href="http://google.com" target="_self">超链接</a>
(3) _top
在顶级页面打开<a href="http://google.com" target="_top">超链接</a>
(4) _parent
在当前链接所在的iframe上一层打开<a href="http://google.com" target="_parent">超链接</a>
☀(3)和(4)适用于有<iframe> 内嵌窗口的情况。
<iframe> 标签用来在网页中内嵌其他网页。可以通过 width 和 height 属性来控制 <iframe> 的宽和高。不过此标签现在前端已经很少使用，有其他的解决方案。
(5) xxx
会在 xxx 窗口打开链接；若 xxx 窗口不存在，浏览器就新建一个名字为 xxx 窗口，在该窗口打开链接。利用同一个窗口打开不同页面
<a href="http://google.com" target="xxx">超链接</a>
3.download
很多浏览器不支持该属性，仅了解。理论上是下载该网页。
4.特殊 rel=noopener
为了防止一个bug，但目前理解不了，等学了js后再回头说。
<table>标签
包含 <thead>、<tbody> 和<tfoot> 三个元素
<thead>
<tr> table row 一行
<th> table head 表头
<tbody>
<tr> table row 一行
<td> table data 数据
<tfoot>
一个表头的表格实现
<table>
<thead>
<tr>
<th>英语</th>
<th>翻译</th>
</tr>
</thead>
<tbody>
<tr>
<td>hyper</td>
<td>超级</td>
</tr>
<tr>
<td>target</td>
<td>目标</td>
</tr>
<tr>
<td>reference</td>
<td>引用</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>空</td>
<td>空</td>
</tr>
</tfoot>
</table>
效果
两个表头的表格实现
如图所示，这里有两个表头，分别是小红小明小颖这一行和数学语文英语这一列
表头都用<th></th>
数据都用<td></td>
<table>
<thead>
<tr>
<th></th>
<th>小红</th>
<th>小明</th>
<th>小强</th>
</tr>
</thead>
<tbody>
<tr>
<th>数学</th>
<td>61</td>
<td>91</td>
<td>85</td>
</tr>
<tr>
<th>语文</th>
<td>79</td>
<td>82</td>
<td>92</td>
</tr>
<tr>
<th>英语</th>
<td>100</td>
<td>91</td>
<td>86</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>总分</th>
<td>200</td>
<td>200</td>
<td>200</td>
</tr>
</tfoot>
</table>
<table>的样式
<table-layout：auto;>：浏览器会根据表格内容长度自适应调节宽度。
<table-layout：fixed;>：表格的每一列会是等宽，宽度由该列第一行的单元格决定。
<border-collapse>：用来决定表格的边框是分开的还是合并的。
<border-spacing>：指定了相邻单元格边框之间的距离
一般会设置 <table> 的默认样式为
table {
table-layout: auto;
border-collapse: collapse;
border-spacing: 0;
}
设置前：
设置后：
如果table-layout是fixed, 每一栏会是等宽，而如果是auto, 内容多的那一列会更宽一些：
<img> 标签
作用：
发出GET请求，展示图片
关于get请求：访问image.html,image.html又发出请求访问图片
属性
src: source （去掉原因）缩写-图片地址/相对路径/绝对路径alt: alternative 如果图裂了无法加载，会显示这个alt属性的文字作为备用width和height：用来指定图片的宽和高，指定其中一项，另一个会自适应<img width=像素数值 src="图片地址" alt="图片备注">
✔☀一个合格的前端不能让图变形！所以就只写宽度或者高度！
事件
onload 加载成功
onerror 加载失败
响应式
网页无论在电脑端、手机上、平板上都可以进行良好的显示，叫做响应式设计。
✔☀关键就是加max-width: 100%;让图片自适应不同尺寸的屏幕
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
}
可替换元素
考试考的概率很大（没讲待补充）
<form>标签
作用：
发get或者post请求，刷新页面
属性
action
服务器接收请求的 URL
method
控制用Get还是POST请求
autocomplete
自动填充，值可以取"off"或者"on"
<autocomplete="off">：在每一个用到的输入域里，用户必须显式的输入一个值，或者document 以它自己的方式提供自动补全；浏览器不会自动补全输入。
<autocomplete="on">：浏览器能够根据用户之前在表单里输入的值自动补全, 会给出填这个表单的提示
target
告诉浏览器应该提交到哪个页面，哪个页面应该刷新
事件
onsubmit 当用户点提交的时候触发的事件
Input的submit和button的submit有什么区别？
Input标签里不能再有其他的标签
button标签里可以有任何东西，包括图片
<form action="/xxx" method="GET" autocomplete="on">
<input type="text" name="username" />
<input type="submit" value="<strong>搞起</strong>" />
<button type="submit">
<strong>搞起</strong>
<img width="100" src="dog.png" alt="" />
</button>
</form>
效果
☀一个<form>表单必须有一个<type="submit">，否则无法提交
<Input>标签
作用：
让用户输入内容
属性：
类型type:
包括button/checkbox/email/file/hidden/number/password/radio/search/submit/tel/text...
-
<input type="text">：默认项。输入纯文本。 -
<input type="password">：密码输入框，输入会被遮挡，输入字符会显示为 * 或者 ·。 -
<input type="color">选择颜色 -
<input type="radio">单选 ☀怎么样实现两个radio类型的Input二选一？
让这两个Input有相同的name即可。
比如，我们想实现男女性别二选一
<input type="radio" name="gender"> 男
<input type="radio" name="gender"> 女
<input type="checkbox">多选 ☀如果页面上有多个checkbox，怎么知道这几个是一组的？
同样的，也需要给同类型的多选框写上相同的Name
<input type="checkbox" name="hobby" id="">唱
<input type="checkbox" name="hobby" id="">跳
<input type="checkbox" name="hobby" id="">rap
<input type="checkbox" name="hobby" id="">篮球
<input type="file">上传单个文件
<input type="file">上传多个文件
- ✔拓展
<input type="hidden">隐藏输入 用于给js自动填入id，字符串之类等东西
其他
包括name/autofocus/checked/disable/maxlength/pattern/value/placeholder...
JS事件
- onchange
onchange 事件会在域的内容改变时发生
onchange 事件也可用于单选框与复选框改变后触发的事件
- onfocus
onfocus 事件在对象获得焦点时发生
Onfocus 通常用于 <input>, <select>, 和<a>
- onblur onblur 事件会在对象失去焦点时发生
Onblur 经常用于Javascript验证代码，一般用于表单输入框
验证器
- HTML5新增功能：自带验证器
如<input type="text" required>用户就必须填，否则无法提交
<textarea> 标签
用来输入多行文本
默认可以随意拖动，可以加style="resize:none" 来使其固定,并通过width 和 height 来指定宽高
<textarea style="resize:none; width:50%; height:300px;"></textarea>
<select>标签
<select name="week" id="">
<option value="">- 请选择 -</option>
<option value="1">星期一</option>
<option value="2">星期二</option>
<option value="3">星期三</option>
</select>
效果
注意事项
- 一般不监听
<Input>的click事件 <form>里的<Input>要有Name<form>里必须有一个<type=submit>的<input>或者<button>才会触发submit事件
