HTML常用标签1. a 标签 2. img 标签响应式： img { max-width: 100%; } 3. ta

1. a 标签的用法

属性：

href
<a href="https://www.baidu.com/">超链接</a>

target
<a href="https://www.baidu.com/" target="_self">超链接</a>
<a href="https://www.baidu.com/" target="_blank">超链接</a>

伪协议：
<a href="javascript:;">查看</a>

2. img 标签的用法

响应式： img { max-width: 100%; }

    <img id="_img" width="400" src="1.jpg" alt="篮球图片">
    <script>
        _img.onload = function () {
            console.log("图片加载成功")
        }
        _img.onerror = function () {
            console.log("图片加载失败")
            _img.src = '/404.jpg'
        }
    </script>

3. table 标签的用法

table相关的标签：table、thead、tbody、tfoot、tr、td、th
table相关的样式：table-layout、border-collapse、border-spacing

        table {
            width: 1000px;
            table-layout: auto;
            border-spacing: 0;
            border-collapse: collapse;
        }

        td,
        th {
            border: 1px solid blue;
        }
        
        <table>

        <thead>
            <tr>
                <th></th>
                <th>心凌</th>
                <th>娜扎</th>
                <th>丽颖</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>数学</th>
                <td>60</td>
                <td>70</td>
                <td>80</td>
            </tr>
            <tr>
                <th>语文</th>
                <td>60</td>
                <td>70</td>
                <td>80</td>
            </tr>
            <tr>
                <th>英语</th>
                <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>

4. form标签、input标签、select标签和textarea标签

form标签会发送get或post请求（可以在method中设置），然后刷新页面
form标签的属性：action、autocomplete、method、target
form标签会触发：onsubmit事件

<body>
    <!-- 一个form表单，必须要有一个type的submit，才可以提交，如果写了一个按钮没有写type，默认就是submit -->
    <form action="/xxx" method="POST" autocomplete="on" target="_blank">
        <input name="username" type="text" />
        <input type="submit" value="提交了哈" />
        <button type="submit">
            <strong>搞起</strong>
            <img width="200" src="hai.jpeg" alt="">
        </button>

        <input type="text" required/>
        <hr />
        <input type="color" />
        <hr />
        <input type="password">
        <hr />
        <!-- 两个radio用同一个name，做到二选一 -->
        <input name="gender" type="radio">男
        <input name="gender" type="radio">女
        <hr />
        <!-- 页面上有很多checkbox，如何知道checkbox是一组的呢？让这几个checkbox拥有同一个name -->
        <input type="checkbox" name="hobby"/>唱<input type="checkbox" name="hobby"/>跳<input type="checkbox" name="hobby"/>Rap<input type="checkbox"
        name="hobby" />篮球
        <hr/>
        <input type="file">
        <input type="file" multiple>
        <hr/>
        看不见我吧：<input type="hidden">
        <hr/>
    </form>
</body>

input标签有多种类型：button、checkbox、email、file、hidden、password、radio
input中的事件：onchange、onfocus、onblur

select+option
<select>
            <option value="">-请选择-</option>
            <option value="1">星期一</option>
            <option value="2">星期二</option>
</select>

textarea
resize:none 禁止控制一个文本框的可调整大小性
<textarea style="resize: none;width: 50%;height: 300px;"></textarea>

资料来源：饥人谷