1. HTML 重点标签
1.1 a 标签
A. 属性
(1) href = hyper reference 超链接
- 适用网址：http, https, 无协议（继承当前文件的协议）
跳转demo.png
- 适用路径，如跳转页面 绝对目录
/a/b/c.html或 相对目录a/b/c.html，index.html或./index.html
ps. 这里的/a 是指http服务的目录，不再是文件目录，所以双击打开再跳转链接会跳转到文件目录，失去意义 - JS伪协议
javascript:代码;，直接执行js代码，现在比较少用
什么都不做的a标签:<a href="javascript:;" />
<a href="" />点击后会刷新页面
<a href="#" />点击后不会刷新页面，但会回到页面顶部 - 适用元素id，如:
<a href="#xxx" />，页面将跳转至id为'xxx'的元素位置 - 发邮件
mailto: + email，跳转到发邮件页面，并把email地址输入到收件人框 - 打电话
tel: + 电话号码，手机上点击直接跳转到打电话界面，电话号码直接输入完毕
(2) target 在哪一个窗口打开超链接
- '_self' 表示在当前页面打开
- '_blank' 表示在空白页打开
- '_top' 表示在最上级页面打开
【补充知识】iframe 引用其他页面
<iframe src='a-target-iframe.html' frameborder="0"></iframe>
【重要】如果主页面包含iframe，在iframe中有一个a标签：
<a href="//google.com" target="_top"></a>-> 点击后将在主页面打开链接页面
<a href="//google.com" target="_self"></a>-> 点击后将在iframe页面打开链接页面 - '_parent' 表示在父级页面打开
如：有3个iframe嵌套，第三的iframe的链接如果设置父级页面打开将在第二个iframe打开，如果设置'_top'将在主页面打开 - '窗口名' 表示在名为指定名称的窗口（window.name）打开，如果没有则创建
- 'iframe名' 表示在名为指定名称的iframe打开
<iframe src='a-target-iframe.html' name="xxx"></iframe> - 【补充知识】打开页面的方式 -> 把本机作为服务器在端口部署网址:
手机同在一个wifi也可以访问
a. http-server
step1: cd 到网页文件路径
step2: 命令:http-server . -c-1缩写为hs . -c-1
step3: 浏览器打开URL后接文件名，如：192.168.56.1:8080/index.html
b. parcel
step1: cd 到网页文件路径
step2: 命令:parcel index.html
step3: 浏览器打开URL
(3) download 下载网页，但大部分情况不支持
(4) rel=noopener 用于防止特殊bug
1.2 iframe 标签
不需要深入学习，目前前端已使用其他方法实现
1.3 table
A. 属性
- tr: table row
- th: table header会加粗
- td: table data
(1) thead
常用 thread > tr > th：
<thead>
<tr>
<th> Type1 </th>
<th> Type2 </th>
</tr>
</thead>
(2) tbody
常用 tbody > tr > td：
<tbody>
<tr>
<td> data1 </td>
<td> data2 </td>
</tr>
<tr>
<td> data3 </td>
<td> data4 </td>
</tr>
</tbody>
(3) tfoot
常用 tfoot > tr > td：
B. 常用格式
(1) 横纵双表头
在tbody和tfoot中将横向表头位置改成<th>即可
<tbody>
<tr>
<th> Math </th>
<td> data1 </td>
<td> data2 </td>
</tr>
<tr>
<th> English </th>
<td> data3 </td>
<td> data4 </td>
</tr>
</tbody>
ps.
a. 如果在table中不写thead、tbody、tfoot，html将自动把<tr>等格式放入tbody中
b. thead、tbody、tfoot不一定要按照顺序写，html会自动调换位置
(2) 相关样式
- table-layout 布局
auto: 自动布局，按内容计算宽度
fixed: 等宽 - border-spacing 单元格间距
- border-collapse: collapse 合并单元格间隔
1.4 img
A. 作用
- 发出get请求，展示图片
B. 属性
(1) Alt - alternative 请求失败时用一段文字代替图片
(2) width 宽，height 高
ps. 如果只写宽度，高度会自适应；只写高度，宽度会自适应；两个一起写，图片会按照指定宽高展示，可能会变形！
永远不要让图片变形！
(3) src 图片地址（可以为绝对地址、相对地址、URL）
C. 事件
- 监听图片是否加载成功
(1) onload 图片加载成功触发
(2) onerror 图片加载失败触发
<img id="xxx" src="dog.png"></img>
<script>
xxx.onload = function() {
console.log("Succeed!");
};
xxx.onerror = function() {
console.log("Failed!");
<!-- 图片加载失败时进行挽救 -->
xxx.src = "/404.png";
};
</script>
D. 响应式
- 设置
max-width: 100%，实现图片永远填满屏幕且不会变形 - 手机上浏览: F12 左上角第二个按钮
手机预览按钮
1.5 form
- 一个form表单必须包含一个type="submit"的input或button，表单才能提交！
- form里面的input都要有name
A. 作用
- 发出get或post请求，然后刷新页面
B. 属性
(1) action
- 表单数据路径，即向何处发请求 返回form-data response
(2) 一般表单含输入框和提交按钮
<form action="/xxx">
<input type="text" />
<input type="submit" />
</form>
ps. <input type="submit" /> 系统会自动识别使用的语言替换submit按钮的文字，如果要改变可写成<input type="submit" value="submit" />
【重要】<input type="submit" /> 和 <button type="submit"></button> 区别
- input中不能带其他标签
- button中可以含其他标签，如:
<button type="submit">
<strong>
here!
</strong>
</button>
(3) method 指定请求方法
- 发送post请求
<form action="/xxx" method="POST"></form>
(4) autocomplete 自动推荐输入
将自动填充开启autocomplete="on"，并在指定输入框设定推荐输入name="username"，会在输入框推荐输入项
<form action="/xxx" autocomplete="on">
<input name="username" type="text" />
<input type="submit" />
</form>
(5) target 要提交到哪个页面，在哪个页面刷新
- 用法如a标签的target
C. 事件 - onsubmit
1.6 input
A. 作用
- 让用户输入内容
B. Type
- text 让用户输入文本的输入框
- color 颜色铺满输入框
- password 不显示输入的文字，用点表示
- radio 单选框（圆形）
注意名字要一致才能实现多选1
<input name="gender" type="radio" />male
<input name="gender" type="radio" />female
- checkbox 多选框（方形）
用法同radio一致，名字相同才会被认为是一组
<input name="habit" type="checkbox" />Video Game
<input name="habit" type="checkbox" />Cycling
<input name="habit" type="checkbox" />Chessing
- file 选择文件
ps. 选择多个文件，加上multiple:<input type="file" multiple /> - hidden 看不见的input，不是给人填的，给JS自动填入
C. 事件
一般不监听用户click事件
- onchange 当用户输入改变时触发
- onfocus 当用户把鼠标移动到元素上时触发
- onblur 当用户把鼠标离开元素时触发
D. 验证器
- 要求用户必须填写，加入required:
<input type="text" required />
E. 其他输入标签
(1) textarea 多行输入
锁死输入区域大小（不允许用户拖动）
<textarea style="resize:none; width:50%; height:300px;"></textarea>
(2) select 下拉选单
option中的value是真正选择的值，文本值是展示的值
<select>
<option value="">- 请选择 -</option>
<option value="1">星期一</option>
<option value="2">星期二</option>
</select>
2. HTML 实践 in VSCode
(1) 多行wrap in list
选中内容 -> ctrl + shift + p -> emmet wrap-> ul>li*
(2) 使用正则表达式删除
ctrl + H -> Use Regular Expression -> \[\d+\] 表示中括号中多个数字 -> 替换为空 -> 再点击Use Regular Expression 取消正则表达式回到原始replace界面
(3) 表格编辑按住alt选择多个位置同时编辑
编辑完成后如下:
表格编辑
（注意关闭自动格式化）再选中内容 ->
ctrl + shift + p -> emmet wrap-> tr*：
tr包裹后.png
最后
ctrl + shift + p -> emmet wrap使用缩写包围-> table
(4) 图片style设置max-width: 100%
- 图片最好不超过300kb，否则需要压缩
(5) TOC 目录，<a href="#"> 设置id跳转
(6) 单击图片新窗口打开-> 看高清图
<a href="image/1.jpg" target="_blank">
<img width="400" src="image/1.jpg" alt="图1">
</a>
3. 调试
(1) 响应式页面 Settings
- meta:vp 内容与设备宽度一致，初始缩放1倍，最大1倍，最小1倍，不允许用户缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
- img最大宽度100%
<style>
img{
max-width: 100%;
}
</style>
(2) 调试方法
- 手机调试:
a. 方法1：使手机和电脑同一wifi，打开hs，访问ip:端口/页面
b. 方法2：hs在chrome上打开，开发者工具左上第二个按钮
border调试法 - chrome远程调试（需要usb连接）
4. 部署到GitHub Pages
- (1) 新建github repo 并上传html
- (2) repo settings -> GitHub Pages -> 选择正确的分支 -> 生成URL -> 点击后别忘记在后面加
/index.html - (3) 在About里设置Description，把网站地址放入'Website'中
Description.png
