任何问题请联系WX:uu16853

买模板送网站采集器 让你轻松放开双手运营网站!

购买更多有优惠!

WordPress Caniuse.com,浏览器兼容 文字详细教程

关于成为Web开发人员的最好笑话之一是,您将20%的时间花在编码上。而另外80%的人则在互联网上搜索您遇到的问题的解决方案。如果有点夸张,这也不是非常不真实。多亏了像Can I Use这样的工具, 可以大大减少搜索时间。 什么是CanIUse? 使用此工具,可以快速查看网站上的特定技术是否与特定浏览器兼容的问题,可帮助您更轻松地做出设计和开发决策。该网站主要由Alexis Deveria建立和维护, Lennart Schoors设计。CanIUse是一个开源项目,任何人都可以有助于为促进信息的数据库,甚至小的努力。 使用该工具很简单。通过对属性、参数或功能的简单搜索,caniuse.com将准确地告诉您哪些浏览器和版本支持该技术。 CanIUse还可以让您了解您正在寻找的属性的变体。这样你就知道哪些浏览器支持哪些类型的媒体查询。 以及到什么程度。兼容性图表不仅表明浏览器是否支持该技术,还表明是否支持某些版本的部分兼容性。 为什么要使用CanIUse? 好吧,对于初学者来说,如果您想为您的客户、顾客和访客提供最佳体验,您应该使用它。在尝试决定是否应该使用悬停效果、透明效果、jquery on-clicks甚至自动暗模式切换时。 如果您使用您能想到的所有花里胡哨建立一个网站,做出比应用程序更具艺术性的精美设计,那么您已经完成了一些了不起的事情。但是,如果您的主要人群仍然使用 Internet Explorer 6(不寒而栗),那么不仅会浪费您的设计和开发时间,而且您的网站也会从根本上被破坏。访问者甚至可能无法在最基本的水平上发挥作用。 不可否认,大多数(但不幸的是并非全部)您的访问者将使用比 IE6 更现代的东西。然而,使用的不同浏览器的数量是巨大的。不同版本的平板电脑、手机和台式机。好吧,值得一看的是您即将推出的网站(或什至您现有的网站)是否符合您的受众的最佳利益)。 如何使用CanIUse 该网站的工作流程非常简单,而且UI非常易于阅读。 看看上面的截图,你可以在搜索字段中输入任何你想要的技术。我们找到了使用您在代码中使用的特定语法的最佳结果。不是语义化的、人类可读的术语。如在(1) 中,应该选择prefers-color-scheme而不是使用暗模式切换CSS。 CanIUse给出的描述 (2)也使得如果您正在研究一项技术,您可以准确地看到它是什么、它做什么以及它如何与DOM交互。 CanIUse最有用的部分之一是任何特定条目底部的注释 (3)选项卡。它本身不是技术信息,它更多的是提醒您可能有一些您在彩色版本图表中看不到的注意事项。 当您将鼠标悬停在特定浏览器版本上时(让我们以臭名昭著的Internet Explorer 6为例),会出现一个包含大量信息的弹出窗口(4)。该版本的全球总使用量,开发人员是否仍然支持它,以及使用BrowserStack模拟测试技术的能力。最后一点很重要。查看不受支持的功能如何呈现可能会向您展示解决问题的方法。 有时,备注 (5)选项卡还会显示特定类型的功能已被弃用。在上面的示例中,@media查询已被弃用。因为有一个单独工作的dark-mode/light-mode查询。 如何查找网站访客使用的浏览器 考虑到所有这些,您可以查看要使用的任何给定技术支持哪些浏览器。但这如何必然适用于您的用户?您可以使用Google Analytics或者百度统计深入了解访问者使用的浏览器和操作系统 (OS),以确保尽可能兼容。下面以Google Analytics为例: 首先,导航到左侧边栏的Audience(受众)部分。然后展开 Technology(技术)并单击 Browser & OS(浏览器&操作系统)。 正如您看到的用户细分以及他们用来访问您网站的浏览器。如今,几乎每个网站都将成为顶级的Chrome和Safari。Chrome因为它是桌面用户的标准(也是Android设备的默认设置)。和Safari,因为iPhone(以及 MacOS)默认使用它。 单击浏览器 (3)可以让您查看正在使用的浏览器版本(字面意思是发布)。如果您注意到,下面的版本有很多差异。从12.x一直到604.x。这是一个很大的差距。它表明操作系统使用情况有所不同。因此,单击其他 (4) 并在下拉菜单中滚动,查找操作系统(5)。 现在按操作系统排序。现在您将看到有多少流量是移动的,有多少是桌面的。 有了这些信息,您就可以返回Caniuse.com并确保您网站上的任何技术都能像应有的那样为最高比例的用户提供服务。 小结 因此,下次您在查看一些新技术或阅读css教程并找到新的东西时,请查看caniuse.com。某些浏览器可能需要一段时间才能识别某些技术。但是,如果您的大多数受众来自支持新功能和有趣功能的浏览器,Can I Use绝对可以告诉您是否可以使用它。

图片有助于使您的网站具有吸引力和视觉吸引力。但是,如果您不使用ALT标签(也称为“替代文本”或“替代标签”)优化图像,您将错失改善用户体验和网站可访问性的重要机会。

图片有助于使您的网站具有吸引力和视觉吸引力。但是,如果您不使用ALT标签(也称为“替代文本”或“替代标签”)优化图像,您将错失改善用户体验和网站可访问性的重要机会。 要正确使用它们,首先了解什么是alt标签很重要。在这篇教程中,我们将讨论什么是alt标签以及使用它们的原因。我们还将解释如何在WordPress中为图像添加alt标签,并介绍一些最佳实践。 什么是Alt标签? Alt标签被添加到HTML中的图像,以描述它们在网页上的内容和上下文。当媒体文件无法正确加载或显示时,alt标签也会出现在图像容器中: Alt标签可帮助使用屏幕阅读器的人(例如有视觉障碍的人)了解您网站上的内容。更重要的是,搜索引擎蜘蛛在对您的网站进行爬行、索引和排名时使用它们来解释您的图像。 在图像标签中添加的质量alt标签是一个简短的描述,不仅解释了图像呈现的内容,还解释了它在页面上的用途。在HTML代码中使用时,完整的图像标记如下所示: <img src=”motorcycle-sunset.png” /> 第一页不仅仅产生基于文本的结果;还有很多图像结果。如果优化并正确使用,alt标签可以帮助提升您的SEO并生成超链接、可点击的图像,以显示在此类搜索中。这对电子商务网站和登陆页面特别有益。 如何在WordPress中添加图像Alt标签 一旦您了解在您的网站上使用图像alt属性的好处,就该学习如何实际做到这一点了。幸运的是,WordPress使这项任务变得非常简单明了。 要在WordPress中添加图像 alt 标签,请登录到您的管理仪表板并导航到您想要添加图像的页面或文章。在WordPress编辑器中,单击加号图标并选择图像区块: 接下来,上传您的图片或从您的媒体库中选择一张。将图像插入区块后,图像设置面板将在右侧的侧栏中打开。您可以在Alt文本框中输入您的描述: 完成后,保存更改。您也可以对现有图像执行此操作。例如,如果您想更新已发布在您网站上的文章上的图片,只需单击该图片并在侧栏中输入新的alt标签即可。 如何在HTML中添加图像Alt标签 当您使用WordPress或其他包含用于添加和编辑alt标签的模块的CMS时,它会自动为您添加HTML代码。但是,如果您想自己添加代码,则可以轻松完成。 要在WordPress中添加alt标签HTML,请单击相关的图像区块。在区块工具栏中,选择带有三个垂直点的按钮,然后选择作为HTML编辑: HTML代码将显示图像标记。您会注意到alt属性为空。将您的文本放在引号内: 完成后,单击“预览”按钮返回可视化编辑器,然后保存更改。您可以使用相同的语法和格式来编辑任何文件的HTML图像标签。 如果您是一个懒站长,你也可以使用Smart SEO Tool插件,进入图片优化设置,开启智能图片ALT标签填入。如下图所示: 编写图像替代标签的技巧和最佳实践 在创建alt标签时,需要牢记几个关键点。遵守这些最佳实践将有助于使您的alt标签更有效: 具体的和描述性的。alt标签的目的是描述图像,因此您希望尽可能具体。如果您不确定您的描述是否充分,请考虑如果您只看到该行文本,您会想象出什么样的图像。 保持简短。虽然您想要详细说明,但您也不需要让alt标签很长(甚至是一个完整的句子)。最大目标是100到125个字符。 不要多余。为了充分利用您的alt标签,您不想包含任何不必要的词。这包括在描述之前添加“图片”或“图片”。这些元素是不必要的,因为它们已经被暗示了。 自然地结合相关关键词。考虑您的目标关键字,并在可能的情况下将它们有机地合并到页面上下文中。当您使用与文本对应的高度相关图像时,这会更容易。 避免关键字堆砌。虽然在alt标签中使用关键字可以改善SEO,但请注意不要过度使用。关键字填充实际上会损害您的SEO并产生糟糕的用户体验。 不要使用图像代替文本。alt标签的主要目的是为无法处理和解释页面上的视觉元素的机器提供文本上下文。因此,在图像中使用文本是没有意义的,尤其是标题和页面标题。 在为您的图像创建alt标签时,请始终记住目标是向那些可能无法看到它的人描述图像。虽然考虑SEO和关键字绝对是一个聪明的主意,但考虑到真实用户编写替代标签可以帮助产生更积极的结果。 小结 图像可以帮助改善网页的外观,并使它们更有趣、内容更丰富、更吸引人。然而,为了最大化它们的价值,最好用alt标签补充它们。这些简短而描述性的解释为用户和搜索引擎提供了上下文。图片alt标签有助于增强用户体验,提高可访问性,并使相关关键字的排名更容易。

100% Secure Checkout

PayPal / MasterCard / Visa