1. a 标签的用法
<a href=""></a>
属性
- href
超链接 - target
指定在哪个窗口打开超链接 - download
- rel=noopener
防止一个bug,暂时未学
a的href的取值
- 网址
<a href="https://bilibili.com"></a>
<a href="http://bilibili.com"></a>
<a href="//bilibili.com"></a>
(无协议网址) - 路径
<a href="/a/b/c"></a>
<a href="a/b/c"></a>
<a href="index.html"></a>
<a href="./index.html"></a>
- 伪协议
<a href="javascript:代码;"></a>
<a href="mailto:abcdef@163.com"></a>
<a href="tel:12345678901"></a>
- id
<a href="#xxx"></a>
(跳转到指定的标签)
a的target的取值
- 内置名字
<a href="https://bilibili.com" target="_blank"></a>
(在空白页面打开)
<a href="https://bilibili.com" target="_top"></a>
(在顶级页面打开)
<a href="https://bilibili.com" target="_parent"></a>
(在当前链接所在的iframe的上一层打开)
<a href="https://bilibili.com" target="_self"></a>
(在当前页面打开,为默认值) - 程序员命名
iframe的name:
<a href="http://163.com" target="xxx">163</a>
<a href="http://taobao.com" target="yyy">taobao</a>
<hr>
<iframe src="" name="xxx"></iframe>
<hr>
<iframe src="" name="yyy"></iframe>
总结:a标签的作用
- 跳转外部页面
- 跳转内部锚点
- 跳转到邮箱或电话等
2. img 标签的用法
<img src="" alt="">
作用
发出get请求,展示一张图片
属性
- src
<img src="abc.png" alt="加载失败">
(图片的来源) - alt
<img src="abc.png" alt="加载失败">
(如果图片加载失败,就会展示alt的内容) - height/width
<img src="abc.png" alt="加载失败" height="800">
<img src="abc.png" alt="加载失败" width="800">
(只写宽度时,高度会自适应。只写宽度时,高度会自适应)
3. table 标签的用法
-
相关的标签
table/thead/tbody/tfoot/tr/td/th
tr指table row,表格行
td指table data,表格数据
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>
- 有一行一列表头的表格
<table>
<thead>
<tr>
<th></th>
<th>小明</th>
<th>小红</th>
<th>小影</th>
</tr>
</thead>
<tbody>
<tr>
<th>数学</th>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<th>语文</th>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<th>英语</th>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>总分</th>
<td>300</td>
<td>300</td>
<td>300</td>
</tr>
</tfoot>
</table>
- 相关的样式
table {
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
}
table {
table-layout: auto;
border-collapse: collapse;
border-spacing: 0;
}
table-layout
值
auto:根据内容去预测多宽
fixed:尽量平均
border-collapse:控制border是否合并
border-spacing:控制border之间的距离
4. 其他感想
- !!永远不能让图片变形!!
- !!永远不能让图片变形!!
- !!永远不能让图片变形!!
- iframe标签为内嵌窗口,已经很少使用,还有些老系统再用
网友评论