HTML常用标签

一 a 标签的用法

1.a 标签的属性：

超链接：

<a href="www.baidu.com" target="_blank">百度一下</a>

href 里边放网址，target=“_blank”的作用是跳转后新打开一个页面

a的target的取值

1.连接跳转到新的页面
<a href="http:www.baidu.com" target="_blank">百度</a>

2.在当前页面打开连接
<a href="http:www.baidu.com" target="_self">百度</a>

3.在父窗口中打开
<a href="http:www.baidu.com" target="_parent">百度</a>

4.打开页面时忽略所有的框架
<a href="http:www.baidu.com" target="_top">百度</a>

2.作用

锚点，例如：

<div id=“demo1”></div> <br>
<div id=“demo2”></div> <br>
<a href=“#demo1”>find demo1</a> <br>
<a href=“#demo2”>find demo2</a> <br>

当两个 div 在一个页面中时，a 标签可以起到一个目录的作用，点击 a 标签，跳转到对应的位置。

打电话

<a href="tel:13333333333">给xxx打电话</a> <br>

发邮件：

<a href="mailto:邮箱地址">给xxx发邮件</a> <br>

协议限定符（黑客）：例如：

<a href="javascript:while(1){alert('让xxxx!')}">JavaScript伪协议</a>，这么写的话他就会强制运行里边的 js 代码。<br>

二 img标签的用法

1.作用

发出get请求，展示一张图片

2.属性

<img width="200px" height="200px" src= "这是一张图片.jpg" alt="这是图片"><br>

alt图片加载失败后显示的提示文字

width 指定图片宽度 只写宽度，高度为自适应

height 指定图片高度 只写高度，宽度为自适应

3.事件

onload/onerror 实现图片加载成功/失败的事件

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <img src="图片.jpg" alt="图没了" id="aaa">
    </body>
    <script>
        aaa.onload = function () {
            console.log('图片加载成功');

        }
        aaa.nerror = function () {
            console.log('图片加载失败');
        }
    </script>
</html>

4.响应式

max-windth="100%" 指定元素的宽度不超过父元素的宽度，则大小不变，如果超过了父元素的宽度，则将宽度收缩为父元素的宽度

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <style>
        img {
            max-width: 100%;
        }
    </style>
    <body>
        <img src="图片.jpg" alt="图片加载失败" id="aaa">
    </body>
</html>

三 table 标签的用法

1.table标签

<thead><tbody><tfoot><th><td><tr>

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            table{
                width: 600px;
                table-layout:auto;
                border-spacing: 0px;
                border-collapse: collapse;
            }
            td,th{
                border: 1px solid #008c8c
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
            <tr>
                <th></th>
                <th>张三</th>
                <th>李四</th>
                <th>小五</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>数学</td>
                <td>60</td>
                <td>70</td>
                <td>80</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>60</td>
                <td>70</td>
                <td>80</td>
            </tr>
            <tr>
                <td>英语</td>
                <td>60</td>
                <td>70</td>
                <td>80</td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <th>总分</th>
                <td>180</td>
                <td>210</td>
                <td>240</td>
            </tr>
            </tfoot>
        </table>
    </body>

</html>

其他感想

需要不断的多敲，才能更好的掌握这些标签的用法