a 标签
属性
href
<body>
<a href="https://google.com">超级链接</a>
</body>
target
- 指定哪个窗口打开超链接
- 不写 target 默认当前页面打开
-
_blank在新的空白页面打开
<body>
<a href="https://google.com" target="_blank">超级链接</a>
</body>
download
理论上控制下载的，但很多不支持，忽略
rel=noopener
防止一个 bug,暂时先不用了解
作用
- 跳到外部页面
- 跳转内部锚点
- 跳转到邮箱或电话等
a 的 href 的取值
网址
- https://google.com
- http://google.com
- //google.com
路径
- /a/b/c 以及 a/b/c
- index.html 以及 ./index.html
伪协议
javascript:代码;
<body>
<a href="javascript:alert(1);">JavaScript伪协议</a>
<a href="javascript:;">空的伪协议</a>
</body>
空的伪协议这个需求，是实现点击后什么也不做
如果有个需求是，点击查看链接，弹出一个对话框，
除了用空的伪协议写法外，都不能满足需求。
<body>
<input type="text"/>
<a href="">查看</a>
</body>
href 内什么都不写，点击 查看,页面还是会刷新
<body>
<P>1</P>
<P>2</P>
<P>3</P>
<P>4</P>
<P>5</P>
<P>6</P>
<P>7</P>
<P>8</P>
<P>9</P>
<P>10</P>
<P>11</P>
<P>12</P>
<P>13</P>
<P>14</P>
<P>15</P>
<P>16</P>
<P>17</P>
<P>18</P>
<P>19</P>
<P>20</P>
<P>21</P>
<P>22</P>
<P>23</P>
<P>24</P>
<P>25</P>
<P>26</P>
<P>27</P>
<P>28</P>
<P>29</P>
<P>30</P>
<a href="#">查看</a>
</body>
如果点击 查看 ，会滚到顶部
mailto:邮箱
<body>
<a href="mailto:zenyangcode@outlook.com">发邮件给 zenyang</a>
</body>
直接将收件人填到邮件里
tel:手机号
<body>
<a href="tel:138.....">发邮件给 zenyang</a>
</body>
如果是手机页面，直接将号码复制到电话上，
按拨打就可以打电话
id
href=#xxx
<body>
<P>1</P>
<P>2</P>
<P>3</P>
<P>4</P>
<P>5</P>
<P>6</P>
<P>7</P>
<P>8</P>
<P>9</P>
<P id="xxx">10</P>
<P>11</P>
<P>12</P>
<P>13</P>
<P>14</P>
<P>15</P>
<P>16</P>
<P>17</P>
<P>18</P>
<P>19</P>
<P>20</P>
<P>21</P>
<P>22</P>
<P>23</P>
<P>24</P>
<P>25</P>
<P>26</P>
<P>27</P>
<P>28</P>
<P>29</P>
<P>30</P>
<a href="#xxx">查看xxx</a>
</body>
点击 查看xxx ，网址会变成 IP + HTML名字 + #xxx
还跳到 id="xxx" 的位置
a 的 target 的取值
内置名字
_blank
<body>
<a href="https://google.com" target="_blank">google</a>
</body>
在新的空白页面打开
_self
<body>
<a href="https://google.com" target="_self">google</a>
</body>
在当前的页面打开
_top
<!-- a-target-iframe.html -->
<body style="background: red;">
我的 iframe
里面有一个 a 标签
<a href="//google.com" target="_top">top</a>
</body>
<!-- a-target.html -->
<body>
<a href="https://google.com" target="_top">google</a>
<div>
<iframe src="a-target-iframe.html" frameborder="0"></iframe>
</div>
</body>
这个时候，点击红色背景内的 top,会在外层白色背景的 a-target.html 的页面打开 google
如果将 a-target-iframe.html 的 target 改为 _self ，
这个时候，点击红色背景内的 top,会在红色背景这个 iframe 内打开 google，打开失败。
因为 google 拒绝在 iframe 内打开
_parent
<!-- a-target-iframe.html -->
<body style="background: red;">
我的 iframe
<iframe width="800" height="800" src="a-target-iframe-2.html"></iframe>
</body>
<!-- a-target-iframe-2.html -->
<body style="background: green;">
我的 iframe-2
<hr>
里面有一个 a 标签
<a href="//baidu.com" target="_parent">parent</a>
</body>
<!-- a-target.html -->
<body>
<a href="https://google.com" target="_top">google</a>
<div>
<iframe src="a-target-iframe.html" frameborder="0"></iframe>
</div>
</body>
现在是，白色背景的 a-target.html 内嵌套一个
红色背景的 a-target-iframe.html,
红色背景的 iframe 又嵌套一个绿色背景的
a-target-iframe-2.html
这时候点击绿色背景的 parent,会在红色背景的 iframe
中打开 baidu 页面
所以 parent 就是在当前链接的 iframe 的上一层打开
<!-- a-target.html -->
<body>
<a href="https://google.com" target="xxx">google</a>
</body>
点击 google 链接，也是在新窗口打开，但两个链接时后如下：
<!-- a-target.html -->
<body>
<a href="https://google.com" target="xxx">google</a>
<a href="https://baidu.com" target="xxx">baidu</a>
</body>
先点击 google 链接，打开一个 ==窗口名为"xxx"== 的窗口，里面打开了 google
再点击 baidu 链接，刚才的 xxx 窗口打开了 baidu
target="xxx" 的意思是，如果有一个窗口为 xxx 的，就在那个窗口打开；
如果没有就新建一个 xxx 的窗口打开。
window.name 查看窗口名字
img 标签
作用
发出 get 请求，展示一张图片
属性
alt / height / width / src
alt 是 src 加载不到的时候显示
height / width 只写一个，图片显示会自适应
<img width="400" src="dog.png" alt="一只小狗">
事件
onload / onerror
<img id="xxx" width="400" src="dog.png" alt="一只小狗">
<script>
xxx.onload = function() {
console.log('图片加载成功')
}
xxx.onerror = function() {
console.log('图片加载失败')
xxx.src = "/404.png"
}
</script>
如果加载失败，就载入 404 的照片，图片上说加载失败，请刷新
响应式
max-width: 100%
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
}
</style>
</head>
table 标签
相关的标签
- table
- thead
- tbody
- tfoot
- tr
table row - td
- th
table head
<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>
<head>
<style>
table {
width: 600px;
table-layout: auto;
border-collapse: collapse;
border-spacing: 0;
}
td,th {
border: 1px solid red;
}
</head>
<body>
<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>97</td>
<td>87</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>总分</th>
<td>200</td>
<td>200</td>
<td>200</td>
</tr>
</tfoot>
</table>
</body>
相关的样式
table-layout
auto
表格及单元格的宽度取决于其包含的内容fixed
表格和列的宽度通过表格的宽度来设置
table-collapse
合并表格间的空隙
table-spacing
表格间的距离
个人感想
HTML 就是标签套标签，要多写多用才能熟练。
版权归于饥人谷所有
