HTML、CSS

重要标签

a标签

href的取值
  • 网址:http://baidu,com、https://baidu.coom、//baidu.com(推荐)
  • 路径:/a/b/c以及a/b/c、index.html以及./index.html(会自动补全)
  • 伪协议:
    • “javascript:;”、“javascript:console.log(1);” 让链接可以点击但不进行跳转或进行特定操作(#号会跳转到页面顶部)
    • mailto:邮箱
    • tel:手机号 电脑网页复制链接去生成二维码https://cli.im/,就可以手机访问拨号了
  • ID:href=#xxx
target
  • 内置名字
    • _blank:在新的页面打开
    • _top
    • _parent
    • _self:在当前页面打开
  • 程序员手动命名
    • window的name
    • iframe的name

img标签

  • 作用:展示图片
  • 属性
    • alt
    • width
    • height
    • src
  • 事件
    • onload
    • onerror
    • 作用:可以设置兜底图片
<body>
<img id=i src="//static.xiedaimala.com/xdml/image/5939aa7c-d446-47c4-
a9c1-ea1e52b10249/2021-7-19-15-6-24.pngxxxx" alt="" width="100%"
 οnlοad="a()" οnerrοr="b()">
<script>
  a = function(){
    console.log("加载完毕");
  }
  b = function(){
    console.log("加载失败");
    i.src = "//static.xiedaimala.com/xdml/image/593
    aa7c-d446-47c4-a9c1-ea1e52b10249/2021-7-19-15-6-24.png"
  }
</script>
</body>

输出结果

“加载失败”
“加载完毕”

  • 响应式
    • max-width:100%
  • 可替换元素
    • 考试会问,被问概率30%

用js创建标签

const div = document.createElement('div')
div.textContent = "hi"
document.body.append(div)
![在这里插入图片描述](https://img-blog.csdnimg.cn/e5b5d0804f484ebd83093b5df994d541.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Li65LuA5LmI5L2g6YKj5LmI576O44CC,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值