英语小课堂
a标签
a标签的作用：
跳转到外部页面
跳转到内部锚点
跳转到邮箱或电话
a标签的属性（面试）
href (超链接）
打开网页别双击打开，用http-server . -c-1打开 简写： hs -c-1
a链接的地址
取值:
1. 网址：
a. www.baidu.com
b. www.baidu.com
c. //www.baidu.com 推荐使用这一种写法。放进浏览器会自动补全
2. 路径:
a. 绝对路径：/a/b/c,
b. 相对路径：index.html和./index.html
3. 伪协议:
a. javascript:代码; 【需要写冒号和分号】
（1） 应用场景：希望点击a标签之后页面不刷新也不返回到顶部，什么也不做：
（2） <a href="javascript:;"></a>
（3） 这就相当于执行一段没有意义的js代码
b. mailto:邮箱
<a href="mailto:474269917@qq.com"></a>
c. tel:手机号
<a href="tel:123456789"></a>
- id: href=#id名，可以跳转到id名为Id的标签
a. 如
<p id="xxxx"></p>,<a href="#xxx"></a>就可以定位到这个p标签
target
a. 作用：决定是在本页面还是新开一个页面打开链接
b. 取值：
内置名字
（1） a_blank 打开新页面
（2） a_self 在当前页面打开
（3） a_top 顶部页面打开
（4） a_parent 在父级页面打开， 3和4适用于有Iframe内嵌窗口的情况
程序员命名
iframe标签： 内嵌窗口，已经很少用
table标签（展示表格）
相关标签：
table、thead、tbody、tfoot、tr、td、th
完整table标签包含的元素：
thead
• tr (table row) 一行
• th (table head) 表头
tbody
• tr (table row)
• td (table data) 数据
tfoot
• tr (table row)
• td/th
举个例子：
<table>
<thead>
<tr>
<th>英语</th>
<th>翻译</th>
</tr>
</thead>
<tbody>
<tr>
<td>hyper</td>
<td>超级</td>
</tr>
<tr>
<td>taget</td>
<td>目标</td>
</tr>
</tbody>
<tfoot>
<td>空</td>
<td>空</td>
</tfoot>
</table>
效果如下：
延伸例子：
如图所示，这里有两个表头，分别是小红小明小颖这一行和 数学语文英语这一列 表头都用 数据都用
<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-layout、border-collapse 和 border-spacing
table-layout:
• table-layout: auto; auto表示根据内容来计算宽度
• table-layout: fixed; fixed表示定宽，尽可能地让宽度平均
border-collapse 和 border-spacing：
• 用来调整表格Border的间隔
一般会设置为：
table {
table-layout: auto;
border-collapse: collapse;
border-spacing: 0;
}
设置前：
设置后：
img 标签
作用：发出GET请求，展示图片
属性 :
- src(source来源): 图片地址
- alt: 如果图裂了，无法加载，会显示这个alt属性的文字作为备用
- width 如果只写宽度，高度会自适应
- height 如果只写高度，宽度会自适应 一个合格的前端不能让图变形！所以就只写宽度或者高度！
事件:
onload 加载成功
onerror 加载失败
<body>
<img id="xxx" width="400" height="400" src="狗子.png" alt="一只狗子">
<script>
xxx.onload = function() {
console.log("图片加载成功")；
}；
xxx.onerror = function() {
console.log("图片加载失败")；
xxx.src = "/404.png"
}
</script>
</body>
响应式：
关键就是“max-width: 100%;”，这样手机也能100%显示，随意拖动
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
}
form标签
作用：
发get或者post请求，刷新页面
属性：
action: 往哪里发请求
method: Get 或者 POST 控制用哪种方式请求
autocomplete 自动填充，值可以取"off"或者"on"
• off：在每一个用到的输入域里，用户必须显式的输入一个值，或者document 以它自己的方式提供自动补全；浏览器不会自动补全输入。
• on：浏览器能够根据用户之前在表单里输入的值自动补全, 会给出填这个表单的提示
target: 在当前页面提交，还是新开一个页面提交
Input submit和button submit有什么区别
<body>
<form action="/yyy" method="POST"
autocomplete="on" target="_blank">
<input name="username" type="text">
<input type="submit" value="input搞起">
<button type="submit">
<strong>button搞起</strong>
</button>
</form>
</body>
效果如下：
input标签
作用：让用户输入内容
JS事件：
onchange（输入改变时）,
onblur （鼠标集中到它身上时）,
onfocus（鼠标从这出来时）
属性：
type类型:
• color 输入颜色
• text 输入文本
• password 输入密码
• radio 单选
怎么样实现两个radio类型的Input二选一，让这两个Input有相同的name即可，比如，我们想实现男女性别二选一
<input type="radio" name="gender"> 男
<input type="radio" name="gender"> 女
• 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="">篮球
效果如下：
• file 上传文件
• 上传一个文件：<input type="file">
• 上传多个文件：<input type="file" multiple>
• textarea 文本框
如何让文本框不能自由拖动，固定大小
<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事件
