HTML入门基础知识--常用标签

最近在回顾HTML，打算梳理一下HTML的基础知识，本文为第二篇整理笔记。

a标签

作为最常用的标签之一，a标签背后也有挺深的学问。最常使用的属性有两个，href和target。

a标签href取值

一共有九种：

网址

1.https://taobao.com HTTPS协议

2.http://taobao.com HTTP协议

3.//taobao.com 继承当前页面的HTTP协议
路径

4./x/y/z和x/y/z 效果是一样的，都是HTTP协议后面跟的相对路径，不要跟文件协议的绝对路径搞混，如果x前面没加/，浏览器会帮你补全

5.index.html和./index.html 同样都是相对路径
伪协议

6.javascript:; 实现一个点了什么都不做的按钮的最完美的方式

7.mailto:邮箱号 发邮件

8.tel:电话号码 打电话
id

9.href=#xxx 跳转到页面中对应id的地方

a标签target取值

一共有四种，分别是：

_blank 空白页跳转
_self 本页跳转
_parent 父页跳转
_top 顶层页跳转

后两种配合iframe时可以看到明显效果，重点是搞清楚页面的层级关系。

img标签

另一个最常用的标签之一，需要注意以下几点。

作用

img标签的作用是发出GET请求，展示一张图片

属性

alt 图片不显示的时候出现的描述文字
height/width 图片长宽，指定其中一个的时候另一个会自适应
src 图片的源地址

事件

主要有onload/onerror这两个事件，示例如下：

<img id='abc' width='300' src='apple.png' alt='苹果' />

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

响应式

max-width: 100% 图片大小适配手机

可替换元素

在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。

简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如<img> 元素，可能具有自己的样式表，但它们不会继承父文档的样式。

CSS 能对可替换元素产生的唯一影响在于，部分属性支持控制元素内容在其框中的位置或定位方式。

table标签

table一共有7个相关的标签，分别是table、thead、tbody、tfoot、tr、th、td，下面用一个示例展示所有标签的用法：

<table>
    <thead>
        <tr>
            <th>编号</th>
            <th>肉类</th>
            <th>单价</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1</th>
            <td>猪肉</td>
            <td>40.5</td>
        </tr>
        <tr>
            <th>2</th>
            <td>牛肉</td>
            <td>47.6</td>
        </tr>
        <tr>
            <th>3</th>
            <td>羊肉</td>
            <td>50.1</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>最高价</th>
            <td>羊肉</td>
            <td>50.1</td>
        </tr>
    </tfoot>
</table>

效果：

注意点

当thead，tbody，tfoot缺省时，HTML的超强纠错功能会自动用tbody包裹住tr；同理，没写tr，会自动在td外加上。
thead，tbody，tfoot可以随意排序，但最终渲染一定是按head，body，foot的顺序。

HTML入门笔记二