常见HTML标签

iframe标签

1. 现代前端开发很少用到。
2. 作用：在页面中嵌入一个页面。

<iframe src="https://www.baidu.com" frameborder="0"></iframe>
复制代码

3. 默认高度50，宽度100。所以也是一个可替换标签；宽高可以由自己决定，可以在iframe标签中添加width和hight属性改变尺寸，也可用CSS更改。
4. 默认属性 frameborder="0" ，不显示默认边框。
5. 与a标签结合使用

<iframe src="#" name="xxx" frameborder="0" width="100%" height="500px"></iframe>
<a href="https://www.baidu.com" target="xxx">百度</a>
<a href="https://www.qq.com" target="xxx">腾讯</a>

a标签中的 target 属性值要与iframe标签的 name 属性值一致
复制代码

a标签

1. 属性 target

• _blank ：新标签页中打开
• _self ：a标签当前所在页面打开
• _parent：当前链接的上一级页面
• _top：顶级窗口

download

需要让用户下载图片或者文件，可以加上一个download属性，但不是所有浏览器都支持，尤其是手机浏览器。

例如：

<a href="https://i.loli.net/2021/06/13/OFfpMbmnHWUYN5d.gif" download>
下载图片
</a>
复制代码

还可以指定下载文件的名字，例如：

<a href="https://i.loli.net/2021/06/13/OFfpMbmnHWUYN5d.gif" download="嗨，大笨蛋">
下载图片
</a>
复制代码

补充：

让浏览器下载文件由两个层面决定

1. 由HTTP响应决定：HTTP响应的Content-Type为Content-Type: application/octet-stream浏览器则会以下载的形式来接收这个请求，而不是在页面上展示。

2. 在 a标签 中添加download属性：虽然响应的Content-Type不是application/octet-stream，但是依旧可以让浏览器强制下载。

herf

1. 网址
   • google.com
   • google.com
   • //google.com     [无协议网址]浏览器自动选择协议
2. 路径
   • 相对路径
   • 绝对路径
3. 伪协议
   • javascript:代码;
   • mailto:邮件
   • tel:电话
4. ID
   • 内部锚点herf = "#xxx"

img标签

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

常用属性：

• alt：当图片无法显示时，可以显示的图片说明
• src
• height：宽高只写其中一项，另一项会根据宽高比自适应
• width：不建议两项都写，图片会变形

JS事件

onload onerror监听图片是否加载成功

例如：

html

<img id="xxx" src="dog.png" alt="dog">

JavaScript

xxx.onload = function () {
    console.log("加载成功")
}
xxx.onerror = function () {
    console.log("加载失败")
}

复制代码

响应式

max-width:100%

table标签

相关标签

其中：

• tr：表行
• th：表头
• td：表内容
• <tfoot>：可不写

相关样式

• table-layout：单元格内容宽度
• boder-collapse：单元格间间距
• boder-spacing：表格线条样式