HTML常用标签

Posted on

1. a

  1. href:
    • 网址: //google.com
    • 路径: a/b/c.index
    • 伪协议代码: javascript:;. mailto: 邮箱. tel: 手机号
    • id: href = #xxx
  2. target: 新窗口打开
    • _blank: 新标签页打开
    • _top: 最顶层页面打开
    • _parent: 上一级页面打开
    • _self: 自身页面打开，默认为这个属性
  3. download: 下载
  4. rel=noopener: 解决安全问题

2. iframe

内联框架元素, 它能够将另一个HTML页面嵌入到当前页面中。基本不用了

3. table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
table {
    table-layout: auto/fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

<table>
    <thead>
        <tr><th>english</th><th>翻译</th></tr>
    </thead>
    <tbody>
        <tr><td>hyper</td><td>超级</td></tr>
    </tbody>
    <tfoot>
        <tr><td>reference</td><td>引用</td></tr>
    </tfoot>
</table>

4.img

发出get请求，展示图片。永远不能让图片变形！！！

  1. alt: 图片未加载，显示alt值
  2. src: 图片源
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <img id="xx" src="youxiu.jpg" alt="pupian">
    <script>
        // 两个事件
        xx.onload = function() {
            console.log("图片加载成功");
        }
        xx.error = function () {
            console.log("图片记载失败");
            xx.src= "404.jpg";
        }
    </script>

    5. form

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <!-- 属性
    autocomplete 自动填充 input需要加上name=“username”
    targe=_blank 新打开标签页提交表单
    -->
    <form action="/a" method="POST" autocomplete="on" target="_blank">
        <!-- input必须有name -->
        <input name="username" type="text">
        <input type="submit" value="提交">
        <input name="gender" type="radio">男 <input name="gender" type="radio">女
        <button>提交</button> <!-- 没写type的话默认type="submit" -->
        <!-- input type="color/password/radio/checkbox/file/hidden" -->
        <textarea style="resize: none;">文本区</textarea>
        <select>
            <option value="">请选择</option>
            <option value="Mon">周一</option>
            <option value="Tue">周二</option>
            <option value="Wed">周二</option>
        </select>
        <!--  input事件 onchange/onfocus/onblur -->
    </form>