HTML常用标签

1. a 标签的用法

a元素又称为锚（Anchor）元素，一般用来创建一个可以跳转到其他网页、同一页面内部锚点、文件、邮箱地址、电话或者其他URL的超链接。

• href属性

href是Hyper reference的缩写。

属性值	用法
网址	<a href="//google.com"></a> 无协议网址，前面不加http：或http：，浏览器会自动匹配，这是建议的用法。
文件路径	<a href="/a/b/c.html"></a> 路径最前面的/代表的是启动http服务的根目录，并非系统文件的根目录。
伪协议	javascript:可执行代码； 点击该元素后，执行该代码。 <a href="javascript:;">点我无反应</a> 代码为空时可用来创建一个点击之后无任务动作的元素。 <a href="mailto:[邮箱地址]"></a> 可自动呼出发邮件的应用。 <a href="tel:[手机号码]"></a> 创建一个电话链接，若在手机上，会自动呼出拨号界面。
id	<a href="#xxx"></a> 滚动到本页id值为xxx部分，即内部锚点。

• target属性

以_开头的代表内置关键字

属性值	描述
_blank	新窗口打开链接。
_self	在本页面（frame）打开链接，为target默认值。
_top	在顶层frame加载。
_parent	在父级frame加载，如果没有父级frame，则等同于_self。
window.name	在指定页面加载。
iframe.name	在指定iframe加载。

2. img 标签的用法

• 作用：

发出一个GET请求，然后展示一张图片。

• src属性

图像的 URL，这个属性对 <img> 元素来说是必需的。

• alt属性

定义了图像的备用文本描述。当图像加载失败时，显示该内容。

• width与height属性

定义图像的宽度和高度，只需要指定其中的一个，另外一个会自动适配。
永远不要让图片变形

• 事件

onload onerror
监听图片是否加载成功

    <script>
        xxx.onload = function () {
            console.log("图片加载成功");
        };
        xxx.onerror = function () {
            console.log("图片加载失败");//抢救图
            xxx.src = "/404.png";
        };
    </script>

• 响应式

max-width:100% 在任何屏幕下适配页面宽度

3. table 标签的用法

第一层到第四层依次包裹
| 相关标签| 描述|
| --------- | ------ |
table| 表格 二维数据表，第一层
thead| 表头 即第一行，第二层
tbody| 表格主体，第二层
tfoot| 表格末行，即汇总行，第二层
tr| table row 行，第三层
th| table header 表头单元格，默认粗体，第四层
td| table data 包含数据的单元格，第四层

示例代码：

<table>
        <thead>
            <tr>
                <th>科目</th>
                <th>小红</th>
                <th>小明</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>语文</th>
                <td>89</td>
                <td>90</td>
            </tr>
            <tr>
                <th>数学</th>
                <td>80</td>
                <td>70</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>合计</th>
                <td>169</td>
                <td>160</td>
            </tr>
        </tfoot>
    </table>

HTML表格预览效果：

4. 未完待续

下一篇文章将介绍form input textarea select等其他类型的标签。