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>
等class
和id
通用<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:
很简单,大纲显示器查看页面的结构和标题,并将其映射为一系列嵌套的有序列表。 例如,这是此博客上下文中的本文地图:
-
- featured articles 精选文章
- popular favourites 热门收藏
-
- HTML5 Outliners HTML5大纲器
- Rich Snippets Testing Tool 丰富网页摘要测试工具
- Facebook Linter Facebook的林特
- web developer guide Web开发人员指南
- featured comment 特色评论
- what i'm reading 我在读什么
- what i'm watching 我在看什么
- what i'm playing 我在玩什么
- what i'm hearing 我在听什么
- blogs 网志
- podcasts 播客
- no ads ever 从来没有广告
- 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.
作为一种开放的算法,大纲工具也可以作为Chrome , Opera的扩展以及在每种现代浏览器中都可以使用的书签的扩展程序。
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测试工具一样,要测试的页面必须位于可公开访问的服务器上。
html5工具