html5工具_HTML5测试工具

html5工具

While validation will remain your front-line defense against pages that render poorly in the browser, there is a suite of other testing tools that can help you determine that you’ve created your page the right way, most especially for search engines. As a broad rule, these tools should be used after you’ve validated the page.

尽管验证仍然是您在浏览器中呈现效果较差的页面的第一道防线,但还有其他一系列测试工具可以帮助您确定以正确的方式创建了页面,尤其是对于搜索引擎而言。 一般来说,验证页面后应使用这些工具。

HTML5大纲器 (HTML5 Outliners)

One of the advances that HTML5 has provided us is the ability to create pages that are far richer in semantics: generic <div> elements with class and id replaced with <article>,, <section>, <aside> and more.

HTML5提供给我们的一项进步是能够创建语义更加丰富的页面的能力:具有<article>, 、、 <section><aside>classid通用<div>元素。

Validation will tell you if you’ve used these tags in the right order, but to actually understand the structure of your page, you should view your page in an HTML5 Outliner. Like the validator, the outliner accepts input either directly or from a URL.

验证会告诉您是否以正确的顺序使用了这些标记,但是要真正理解页面的结构 ,您应该在HTML5 Outliner中查看页面。 像验证器一样,大纲器可以直接接受输入,也可以从URL接受输入。

Very simply, an outliner looks at the structure and headings of your page, and maps it as a series of nested ordered lists. As an example, this is a map of this article in the context of this blog:

很简单,大纲显示器查看页面的结构和标题,并将其映射为一系列嵌套的有序列表。 例如,这是此博客上下文中的本文地图:

    1. featured articles

      精选文章
    2. popular favourites

      热门收藏
      1. HTML5 Outliners

        HTML5大纲器
      2. Rich Snippets Testing Tool

        丰富网页摘要测试工具
      3. Facebook Linter

        Facebook的林特
    3. web developer guide

      Web开发人员指南
    4. featured comment

      特色评论
    5. what i'm reading

      我在读什么
    6. what i'm watching

      我在看什么
    7. what i'm playing

      我在玩什么
    8. what i'm hearing

      我在听什么
    9. blogs

      网志
    10. podcasts

      播客
    11. no ads ever

      从来没有广告
    12. creative commons licensed

      创作共用许可

As an open algorithm, outliner tools are also available as extensions for Chrome, Opera, and as a bookmarklet that works in every modern browser.

作为一种开放的算法,大纲工具也可以作为ChromeOpera的扩展以及在每种现代浏览器中都可以使用的书签的扩展程序。

Some common errors reported in the outliner:

大纲概述中报告的一些常见错误:

  • If you find entries in the outliner are untitled, you are probably not using headings correctly.

    如果您在大纲视图中找到未命名的条目,则可能是标题使用不正确。
  • If you find numbers skipped, you are likely not resetting your headings. (Remember that using <article>, <section> or <aside> resets your elements in HTML5: you use <h1> again from the start).

    如果发现数字被跳过,则可能不会重置标题。 (请记住,使用<article>, <section><aside>重置HTML5中的元素:从头开始再次使用<h1> )。

丰富网页摘要测试工具 (Rich Snippets Testing Tool)

The advent of HTML5 has meant that search engines are now moving on from looking at metatags within the <head> of web pages to far more discrete, particular information, most especially in the form of microdata. The tools available to test this are less advanced, the schema proposal only being a year old. The only reliable service that I am aware of that tests “rich snippets”, as Google calls microdata-enhanced pages, is the Rich Snippets Testing Tool. There is no offline version yet available for the tool: the page to test must be on a public server.

HTML5的出现意味着搜索引擎现在正在从查看网页<head>的元标记转变为更加离散的特定信息,尤其是微数据形式。 可用于测试此功能的工具较不先进, 方案建议仅使用了一年。 正如Google所说的,我所知道的唯一可测试“丰富网页摘要”的可靠服务是Rich Snippets Testing Tool 。 该工具尚无离线版本:要测试的页面必须位于公共服务器上。

Facebook的林特 (Facebook Linter)

While not directly related to HTML5, it is worthwhile mentioning the Facebook Linter (aka the Facebook debugger), which can show how your page appears to Facebook, together with any errors the Facebook crawler encounters. Like the Rich Snippets Testing Tool, the page to test must be on a publicly accessible server.

尽管与HTML5没有直接关系,但值得一提的是Facebook Linter (又名Facebook调试器),它可以显示您的页面在Facebook上的显示方式以及Facebook搜寻器遇到的任何错误。 与Rich Snippets测试工具一样,要测试的页面必须位于可公开访问的服务器上。

翻译自: https://thenewcode.com/470/HTML5-Testing-Tools

html5工具

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值