重要标签
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)