HTML常用标签a标签 <a>的href取值网址文件路径伪协议 JavaScipt代码 💡在工作中，我们想把a标

a标签

a标签的作用：

跳转到外部页面🌐

跳转内部锚点⚓︎

跳转到邮箱或者电话📩📲

a标签的常用属性：href(超链接）和target

<a>的href取值

网址

<a href="https://google.com">HTTP</a>

<!-- 无协议网址// 自动选择适用http还是https -->
<a href="//google.com">Google</a>

文件路径

<!-- 绝对路径/相对路径 -->
<a href="/a/b/c.html">文件绝对路径</a>
<a href="a/b/c.html">文件相对路径</a>

<!-- 在当前文件目录下 -->
<a href="index.html">index页面链接</a>
<a href="./index.html">index页面链接</a>

伪协议

JavaScipt代码

<!-- 常用方法 -->
<a href="javascript:js_method();">文本</a>
<a href="javascript: alert(1)">点我试试</a>

💡在工作中，我们想把a标签中的跳转链接设置为空链接，但直接写href为空是不可行的，因为这样的做法的效果是刷新当前页面，

<a href="">本质是刷新</a>

而href="#",其做法效果是跳转当前页面顶部

<a href="#">本质是刷新</a>

正确的做法应该是

<a href="Javascript:void(0)">啥都不做没有任何效果1</a>
<a href="Javascript:;">啥都不做没有任何效果2</a>

以及

mailto:邮箱
tel:手机号举个栗子：

<p>You can reach 某某某 at:</p>

<ul>
  <li><a href="https://xxx.com">Website</a></li>
  <li><a href="mailto:xxx@xxx.com">Email</a></li>
  <li><a href="tel:+xxxxxx">Phone</a></li>
</ul>

页面内部的id

<!-- 跳转到指定标签 -->
<a href="#xxx">克id是xxx</a>

<a>的target取值

_blank 在新开的页面中打开
_self 默认值，在当前页面打开
_top 在顶级窗口打开
_parent 在父级窗口打开
target还支持程序员自己命名

table标签

table里绝对不能忘记三个标签<thead>, <tbody>, <tfoot>; 这三个标签可以不按照顺序来写，因为显示与顺序无关，显示顺序永远都是<thead> -> <tbody> -> <tfoot>。

<thead>, <tbody>, <tfoot> 里可以有 <tr>, <th>,<td> 举个栗子：

其网页显示为：

姓名	年龄
珍妮	25
哈利	18
🈳️	🈳️

另一个栗子：

💡如果想显示有两个表头的表格，如

	小红	小明	小丽
数学	30	30	30
语文	40	40	40
英语	30	30	30
总分	100	100	100

❗️如果你的<table> 里直接写<tr>,<td> 的话，HTML有自动纠错功能，自动出现<tbody>

table相关的样式
- table-layout：auto
- table-layout：fixed
- border-collapse & borderspacing border的默认显示样式非常奇葩，一般来说，为了使其变成正常表格，使单元格从不合并到合并在一起，需要同时设置border-collapse: collapse; 以及border-spacing: 0;.
一般css reset时，以上两句样式设置border-collapse: collapse;和border-spacing: 0;必须加

img标签

img标签的作用：发出GET请求，请求到了后，展示一张图片🌅

a标签的属性有：alt, height, width, src

a标签的属性

alt 是alternative的缩写：如果请求的图片加载失败了，网页上就显示alt文本
```
<img src="beauty.png" alt="美美美" />
```
width: 如果只设定了width，height会自适应
height: 如果只设定了height，width会自适应

❗️如果同时设定height和width，图片极大可能会变形，永远永远不要让图片变形，so不要同时设定height和width

src 是来写明图片的地址

事件

onload/onerror: JS来坚听图片是否加载成功了，如果加载成功，将触发onload；如果没有加载成功，将触发onerror
可替换元素：通过这两个事件，我们可以在图片加载失败的时候，用一个新图片去挽救
```
xxx.onerror = function() {
    console.log("图片加载失败");
    xxx.src = "/404.png";
}
```

其他感想

多练多练多练，重要的事情说三遍