HTML常用标签

307 阅读3分钟

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等其他类型的标签。