a标签
<a href='link'></a>
主要作用：
- 跳转外部页面
- 内部锚点
- 打电话，发邮件
a标签属性-href
hyper-reference（超级索引）
href取值
1.网址
-
//baidu.com(无协议网址)
无协议网址请求过程：
继承当前网址的协议，如http/https；例如：baidu.com/
加上www；www.baidu.com/
非https可转换成https则进行转换；www.baidu.com/
2.路径
绝对路径
如：/a/b/c 如果在html所在目录开启服务，则所在目录为根目录 如果双击文件直接打开html，则根目录为文件所在盘符，如Ｄ盘
相对路径
如：a/b/c 打开当前目录文件
index.html
./index.html
都一样的
3.伪协议
js
<a href='javascript:alert(1);'>js伪协议</a>
点击执行代码，弹出窗口。
主要用于点击后什么都不做，其他功能基本不用
<a href='javascript:;'>查看</a><!--点击后什么都不做-->
<a href=''>查看</a><!--点击查看后页面会刷新，文本框输入的文字会被刷掉-->
<a href='#'>查看</a><!--点击不会刷新，但会回到页面最上方-->
mailto
弹出发送邮件窗口
<a href='mailto:xxx@mail.com'>发邮件</a>
tel
直接打电话，手机上好用
<a href='tel:132.....'>打电话给我</a>
4.id
内部锚点，跳转到xxx位置
<a href='#xxx'>查看xxx</a>
a标签属性-target
指定窗口打开位置
内置名字
_blank
<a href="//baidu.com" target = '_blank'>链接</a>
_top
<a href="//baidu.com" target = '_top'>链接</a>
e.g:当一个页面被iframe引入另一主页面，该页面加_top正常顶层打开 不加在iframe区域打开
_parent
<a href="//baidu.com" target = '_blank'>链接</a>
top和parent区别
三层iframe嵌套，主>2>3 2是3的parent，1是3的top
_self
<a href="//baidu.com" target = '_self'>链接</a>
程序员命名
window的name
<a href="//baidu.com" target = 'xxx'>链接</a>
优酷之前就在同一窗口打开，没办法同时打开多个页面看广告
iframe的name
<iframe src='' name='xxx'></iframe>
<a href="//baidu.com" target = 'xxx'>链接</a>
可以把iframe设置为100%，通过点击不同搜索引擎，进行搜索引擎切换 谷歌拒绝iframe
a标签属性-download
下载，很多浏览器不支持，看看就行，没用
a标签属性-rel=noopener
防止bug，js相关，待补充
iframe
内嵌网页，目前很少用，不好用
table
table相关标签
table嵌套thead,tbody,tfoot
头部，身体，尾部分块
<table>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
tr（table-row)
分块后分行 table里边不能写tr（table-row），错误示范
<table>
<tr></tr>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
th,td
th表头，th默认加粗 td普通单元格 例子：
<table>
<thead>
<tr>
<th>英语</th>
<th>翻译</th>
</tr>
</thead>
<tbody>
<tr>
<td>hyper</td>
<td>超级</td>
</tr>
<tr>
<td>hyper2</td>
<td>超级2</td>
</tr>
<tr>
<td>hyper3</td>
<td>超级3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>空</td>
<td>空</td>
</tr>
</tfoot>
</table>
| 英语 | 翻译 |
|---|---|
| hyper | 超级 |
| hyper2 | 超级2 |
| hyper3 | 超级3 |
| 空 | 空 |
横竖都有表头
<table>
<thead>
<tr>
<th></th>
<th>小红</th>
<th>小说</th>
<th>小分</th>
</tr>
</thead>
<tbody>
<tr>
<th>数学</th>
<td>31</td>
<td>78</td>
<td>68</td>
</tr>
<tr>
<th>语文</th>
<td>31</td>
<td>78</td>
<td>68</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>总分</th>
<td>31</td>
<td>78</td>
<td>68</td>
</tr>
</tfoot>
</table>
| 小红 | 小说 | 小分 | |
|---|---|---|---|
| 数学 | 31 | 78 | 68 |
| 语文 | 31 | 78 | 68 |
| 总分 | 31 | 78 | 68 |
td,th的属性，允许单元格跨越多行和列
colspan="3"跨行3 rowspan跨列
table样式
table-layout
table-layout属性-auto
宽度取决于包含的内容
table-layout属性-fixed
宽度取决于表格整体宽度，和内容无关
border-collapse
默认单元格间有间隙
table {
border-collapse: collapse;
}
border-spacing
设置border-spacing为0，单元格之间变粗，边缘不变
table {
border-spacing: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
border-collapse: collapse;加了后，border-spacing不生效。
img
图像，发出get请求，展示图片
<img src="link" alt="">
属性
src
source 地址或路径
alt
图片加载失败，出现的代替文字
height，width
宽度高度，同时写宽高，图片变形
js事件
onload/onerror
xxx.onload = function(){
console.log('图片加载成功');
}
xxx.onerror = function(){
console.log('图片加载失败');
}
图片加载失败挽救
xxx.onerror = function(){
console.log('图片加载失败');
xxx.src = '/404.png'
}
响应式
响应式-适应不同设备
img{
max-width:100%;
}
不需要拖动来看图片
可替换元素
它们外观的渲染，是独立于 CSS 的。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。
待补充。
form标签
表单
发送get或post请求，刷新页面
form里的input要有name
属性
action
<form action='/xxx' >
<input type='text'/>
<input type='submit'/>
</form>
get 请求action里的xxx
method
<form action='/xxx' method='post'>
<input type='text'/>
<input type='submit'/>
</form>
加了method可以选择post请求
autocomplete
自动建议
<form action='/xxx' method='post' autocomplete='on'>
<input name='username' type='text'/>
<input type='submit'/>
</form>
自动建议用户名
target
提交到哪个页面
<form action='/xxx' method='post' autocomplete='on' target='_blank'>
<input name='username' type='text'/>
<input type='submit'/>
</form>
事件onsubmit
form里要放type=submit才能触发submit事件
<input type='submit' value='搞起'/>
<button type='submit'>搞起</button>
input标签
input和button 区别
-
自动补全：input的value会自动补全----提交；button不会自动补全value
-
value内容：input value只能是纯文本；
button里边可以放标签，图片，如强调
<button type='submit'><em>搞起</em></button>
button的type属性在form表单内默认submit
主动设置type='button'不会提交
属性
type
text
color
password
radio单选!
二选一，
同一个name，单选一个
<input name='grnder' type='radio'/>男
<input name='grnder' type='radio'/>女
checkbox多选
同一个name代表一组，可多选
<input type='checkbox'/>唱
<input type='checkbox'/>跳
<input type='checkbox'/>rap
file
选择多个文件
<input type='file' multiple/>
hidden
不是给人类的，给js自动填一些id之类的
事件
onchange输入改变
onfocus集中鼠标
onblur鼠标出来触发
一般不监听input的click事件，而是监听focus
验证器
<input type='text' required/>
必须填，不然点不了提交
其他输入标签
textarea
多行文本，右下角可拖动
<textarea></textarea>
设置为不可拖动
<textarea style='resize:none;'></textarea>
select+option
<select >
<option value=' '>- 请选择 -</option>
<option value='1'>星期一</option>
<option value='2'>星期二</option>
</select>
label
略
vscode快捷键技巧+网页技巧
群加标签
ctrl+shift+p
emmet wrap
个别行
ul>li*
alt多选
群删除
正则表达式删除 编辑-替换 第三个按钮启动正则 [23]====>[\d+]
HTML做导航
nav；加id #做目录
最下面放个div
<div style="height:50px"></div>
留一定空间
图片加载
300k以上图片很慢
<a href="images\JUSF.jpg" target="_blank"><img src="images\JUSF.jpg" alt="形象图"></a>
加上点击弹出图片窗口功能，方便使用
感想
本章略过内容：a标签属性-rel=noopener；可替换元素；label。
提了一句但依然不是太清楚的注意事项：
一般不监听input的click事件，监听focus；click事件没意义吗
form里的input要有name；autocomplete需要name属性但是autocomplete不是必要的；可能是为了方便非人类操作？
form 一定要写type=submit才能触发submit事件；
input确实需要，然默认是文本框；可button在表单内默认type=submit不需要额外写吧
