HTML标签详解-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_54071710/article/details/121134408

重要标签

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)