iframe
标签
- 现代前端开发很少用到。
- 作用:在页面中嵌入一个页面。
<iframe src="https://www.baidu.com" frameborder="0"></iframe>
复制代码
- 默认高度50,宽度100。所以也是一个
可替换标签
;宽高可以由自己决定,可以在iframe标签中添加width和hight属性改变尺寸,也可用CSS更改。 - 默认属性 frameborder="0" ,不显示默认边框。
- 与
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
标签
- 属性
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>
复制代码
补充:
让浏览器下载文件由两个层面决定
由HTTP响应决定:HTTP响应的
Content-Type
为Content-Type: application/octet-stream
浏览器则会以下载的形式来接收这个请求,而不是在页面上展示。在 a标签 中添加
download
属性:虽然响应的Content-Type不是application/octet-stream
,但是依旧可以让浏览器强制下载。
herf
- 网址
- google.com
- google.com
- //google.com [无协议网址]浏览器自动选择协议
- 路径
- 相对路径
- 绝对路径
- 伪协议
javascript:代码;
mailto:邮件
tel:电话
- 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
:表格线条样式