HTML笔记-HTML常用标签提要：a 标签，iframe标签，table 标签，img 标签，form 标签，inpu

提要：

a 标签
iframe标签
table 标签
img 标签
form 标签
input 标签
其他标签

一. a 标签的用法

作用：超链接

1. 属性

1) href 超链接

<a href="https://taobao.com">
    TB
</a>

取值
① 网址

href="taobao.com"
href="taobao.com"
href="//taobao.com" (推荐，自动选择http/https)

② 路径

href="/a/b/c.html" 虽为绝对路径格式，但表示在当前开启http服务的目录下找文件
href="a/b/c.html" 相对路径格式，在当前目录下找文件
href="index.html" 或 href="./index.html"

③ 伪协议

JavaScript伪协议
href="javascript:alert(1);" 执行alert(1)
href="javascript: ;" "无事发生(不自动刷新、不自动滚回顶部)
id
href="#xxx"
邮箱
href="XXXXX@xxx.com"
电话
href="tel:123456789xx"

即a标签可实现跳转到外部页面、内部锚点、邮箱和电话。

2) target 指定在某页面打开超链接

<a href="https://taobao.com" target="_blank">
    TB
</a>

取值
① 内置取值

_blank 在新窗口打开
_self 在当前窗口打开
_top 在最顶级窗口打开
_parent 在上级窗口打开

② 自命名

window的name target="yyy"
若存在名为“yyy”的窗口，则在该窗口打开；
若不存在则创建名为“yyy”的窗口，然后打开
iframe的name 提供一种使用场景：
在一个页面打开多个网站

<a href="//taobao.com" target="xxx">
    TB
</a>
<a href="//baidu.com" target="xxx">
    BD
</a>
<iframe style="border:none"; width:100%; height:800px; src="" name="xxx">
</iframe>

3) download 下载页面 (有些浏览器不支持)

<a href="https://taobao.com" download>
    TB
</a>

4) rel=noopeaner (后续补充)

二. iframe 标签 (不推荐)

作用：内嵌窗口

三. table 标签的用法

作用：展示表格

1. 结构

<table>
    <thead>……</thead>
    <tbody>……</tbody>
    <tfoot>……</tfoot>
</table>

1) thead

<thead>
    <tr>                 新建一行(table row)
        <th>英语</th>    表头用th
        <th>翻译</th>
    </tr>
</thead>

2) tbody

<tbody>
    <tr>
        <td>hyper</td>    表中用td
        <td>超级</td>
    </tr>
    <tr>
        <td>target</td>
        <td>目标</td>
    </tr>
</tbody>

3) tfoot

<tfoot>
    <tr>
        <td>空</td>
        <td>空</td>
    </tr>
</tfoot>

2. 样式

1) 单元格宽度

<style>
    table{
        table-layout:auto;    自动算法
        table-layout:fixed;   按首行等宽
    }
</style>

2) 单元格边框

<style>
    td,th{
        border:1px solid blue;      加边框
    }
    table{
        border-spacing:20px;        指定相邻单元格边框之间的距离
    }

<style>
    td,th{
        border:1px solid blue;      加边框
    }
    table{
        border-collapse:collapse;   合并相邻单元格边框
        border-collapse:separate;   分隔相邻单元格边框
    }

四. img 标签的用法

作用：发出GET请求，展示图片

1. 属性

1) alt 图片加载失败时，提示图片信息

<img src="猫咪.PNG" alt="一只奶猫">

2) width,height 设置图片尺寸

<img src="猫咪.PNG" width="400">
<img src="猫咪.PNG" height="600">

注：不要使图片变形

3) src 图片地址

<img src="网址、路径(/文件)">

2. 事件 (JavaScript)

1) onload 图片加载成功时调用

<img id="xxx" src="猫咪.PNG">
<script>
    xxx.onload=function(){
        console.log("图片加载成功");
    };
</script>

2) onerror 图片加载失败时调用

<img id="xxx" src="猫咪.PNG">
<script>
    xxx.onerror=function(){
        console.log("图片加载失败");
        xxx.src-"/404.jpg";            加载失败时放一张“挽救图”
    };
</script>

3. 响应式

<style>
    img{
        max-width:100%;
    }
</style>

五. form 标签的用法

作用：发送GET或POST请求，然后刷新页面

1. 属性

1) action 指定请求页面

<form action="/xxx">

2) method 指定用GET/POST请求

(不写默认用GET请求)

<form action="/xxx" method="POST">

3) autocomplete 自动填充

<form action="/xxx" autocomplete="on">    浏览器可自动补全条目
<form action="/xxx" autocomplete="off">   浏览器可能不会自动补全条目
<input name="username" type="text">
<input type="submit">

4) target 指定在某页面打开表单

<form action="/xxx" target="_blank">

2. 事件

onsubmit 用户提交时触发

六. input 标签的用法

作用：用户输入

1. 属性

1) type 类型

<input type="text">       输入文本
<input type="color">      输入颜色
<input type="password">   输入密码
<input type="email">      输入邮箱
<input type="tel">        输入电话
<input type="number">     输入数字
<input type="search">     输入搜索
<input type="hidden">     看不见的输入

单选

<input type="radio" name="gender">男
<input type="radio" name="gender">女

多选

<input type="checkbox" name="爱好">唱跳
<input type="checkbox" name="爱好">Rap
<input type="checkbox" name="爱好">篮球

上传文件

<input type="file">            上传一个文件
<input type="file" multiple>   上传多个文件

提交

<input type="submit">
<input type="submit" value="冲鸭">   提交按钮显示为“冲鸭”

或

<button type="submit">冲鸭</button>
<button type="submit"><strong>冲鸭</strong></button>   可以再套其他标签，input不可以

2) 其他

value,name,autofocus,checked,disable,maxlength,pattern,placeholder

2. 其他输入标签

1) textarea 标签

作用：输入多行文本

<textarea>……</textarea>   可用鼠标拖动文本框改变大小
<textarea style="resize:none; width:50%; height:100px;">……</textarea>   固定文本框大小

2) select + option 标签

作用：提供选项

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

3) label 标签 (后续补充)

3. 事件

1) onchange 用户输入改变时触发

2) onfocus 用户鼠标聚焦到某处触发

3) onchange 用户从某处出来时触发

4) 验证器 (HTML5新增功能)

如：required表示必须输入，如未输入就提交则会弹出提示要求输入

<input name="username" type="text" required>

七. 其他标签 (后续补充)

video,audio,canvas,svg