常见HTML标签

iframe标签

  1. 现代前端开发很少用到。
  2. 作用:在页面中嵌入一个页面。
<iframe src="https://www.baidu.com" frameborder="0"></iframe>
复制代码
  1. 默认高度50,宽度100。所以也是一个可替换标签;宽高可以由自己决定,可以在iframe标签中添加width和hight属性改变尺寸,也可用CSS更改。
  2. 默认属性 frameborder="0" ,不显示默认边框。
  3. a标签结合使用

iframe与a标签搭配使用.png

<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-TypeContent-Type: application/octet-stream浏览器则会以下载的形式来接收这个请求,而不是在页面上展示。

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

herf

  1. 网址
  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标签

相关标签

table相关标签.jpg

其中:

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

相关样式

  • table-layout:单元格内容宽度
  • boder-collapse:单元格间间距
  • boder-spacing:表格线条样式
分类:
前端
标签: