HTML常用标签 自动替换失效图片

a标签用法

作用

  • 跳转到外部页面
  • 跳转到内部锚点
  • 跳转到邮箱或者电话等

属性

  1. href可以接网址 http://baidu.com``https://baidu.com``//baidu.com 建议使用//baidu.com形式该形式会自动寻找可用网址路径 /a/b/c.html /a/b/c abc.html ./abc.html 服务器/本地 网站目录下文件或网址伪协议 JavaScript:代码 mailto:电子邮件地址 tel:手机号码id
  2. target常接 _blank会在新窗口打开该页面_top顶级窗口打开页面_parent父级窗口打开_self 当前原视窗打开
  3. download引导浏览器下载URL并提示用户保存到本地,可以预填充文件名
  4. rel=noopener打开链接但不授予新的浏览上下文的权限一般用于打开不信任链接

img标签用法

作用:发出get请求,展示图片

属性:alt(描述)/height/width/src(图片地址)

事件:onload加载成功/onerror加载失败

响应式:max-width:100%(自适应,图片宽度=屏幕宽度)

可替换元素:用404图片来替换失效图片(面试可能会考)

假设 img的id为demo,可以添加js onerror函数替换失效图片代码为默认图片

table标签用法

table-MDN

tr=table row 列

th=table head 表头

td=table data 表单数据

tfoot=table foot

tbody=table body

一般含有border时 table最好加 border-spacing:0 border-collapse:collapse的CSS对表格进行闭合

表格自适应大小的CSS为table-layout:auto

杂谈

一点SEO想法:网页面对搜索引擎时其实文字占比很大,用户看到图片或者效果会知道这个文章说的是什么,但是搜索引擎的蜘蛛不会,在网站含有大量图片时,甚至图片内容占比大于文字占比,比如一些壁纸站点,图片的alt属性应该充分的利用上,因为蜘蛛是能够爬取到该内容,这样可以让搜索引擎明白这个图片这个文章到底说的是什么。图片的名称也同样会有一定影响,但是普通图床一般都是随机字符重命名图片还是很可惜的。一般作者也很少浪费时间关注这些细节问题。

前端

HTML入门笔记1

2020-11-23 15:15:17

前端

适合小白的CSS入门知识(动画)

2020-11-27 0:03:48

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索