HTML常用标签

1.a 标签的用法

<!-- href -->
<a href="https://google.com" target="_blank">在新页面（空白页）打开谷歌</a>
<a href="//google.com">双斜杠自动匹配，不会出错，最安全。</a>
<a href="/a/b/c">使用路径</a>
<a href="index.html">在当前目录找</a>
<a href="./index.html">在当前目录找</a>
<a href="javascript:alert(1);">伪协议（可以执行的js代码）</a>
<a href="javascript:;">查看（为了让a标签没有动作）</a>
<a href="#xxx">跳转到id = xxx的位置</a>
<a href="mailto:aaabbbccc@foxmail.com">发邮件</a>
<a href="tel:1391391399">直接打电话</a>
<a href="//google.com"></a>
<!-- target -->
<a href="//google.com" target="_blank"></a>在空白页面打开
<a href="//google.com" target="_top"></a>在顶级窗口打开
<a href="//google.com" target="_parent"></a>在当前连接所在层的上一级打开
<a href="//google.com" target="_self"></a>在当前连接所在层打开
<a href="//google.com" target="xxx"></a>在XXX中打开，如没有就新建，如果已经存在就在名为XXX的页面中打开window.name
xxx也可以是iframe的名字

2.img标签的用法

<img src="dog.png" alt="一只狗子" width="500" height="500" id="xxx">
<!-- 
    作用------------
    发出get请求,展示一张图片
    属性------------
    src后接图片地址,可以是相对路径,绝对路径,网络地址 
    alt后接代替内容,如果src加载失败,用alt的文字
    width是图片的宽度,只写宽度时,高度自适应
    height是图片的高度,只写高度时,宽度自适应
    都写的时候如果不是按照照片比例,会导致突破变形
    !!! 图片一定不要变形 !!!
    事件------------
    onload  图片加载成功时触发的事件
    onerror 图片加载失败时触发的事件
    max-width: 100% 宽度自适应,为了让手机也方便看图片
-->

xxx.onload = function() {
  console.log("图片加载成功");
};
xxx.onerror = function() {
  console.log("图片加载成功");
  xxx.src = "404.png"  
};

3.table标签的用法

<table>
    <thead>
        <tr><!-- table row 列表的行 -->
            <th>英语</th><!-- table head 表头-->
            <th>翻译</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>hyper</td><!-- table data 数据-->
            <td>超级</td>
        </tr>
        <tr>
            <td>target</td>
            <td>目标</td>
        </tr>
        <tr>
            <td>reference</td>
            <td>引用</td>
        </tr>
    </tbody>
    <tfoot></tfoot>
</table>

/* table相关样式 */
table {
    table-layout: auto;/* 大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。 */
    table-layout: fixed;/* 表格和列的宽度通过表格的宽度来设置，
    某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。 */
    border-collapse: collapse;/* 控制border是否合并 */
    border-spacing: 0;/* 控制border和border之间的距离 */
}

4.感想

在遇到不清楚的属性的时候先去MDN搜索，可以很方便的找到自己想要的内容。还需要根据遗忘曲线的规律回顾之前学习的内容。这样才能加深记忆！