{"id":2022,"date":"2006-06-01T16:22:30","date_gmt":"2006-06-01T08:22:30","guid":{"rendered":"https:\/\/imsky.synology.me\/wordpress\/?p=2022"},"modified":"2006-06-01T16:22:30","modified_gmt":"2006-06-01T08:22:30","slug":"%e6%9c%89%e8%b6%a3%e7%9a%84flash","status":"publish","type":"post","link":"https:\/\/imsky.synology.me\/wordpress\/archives\/2022","title":{"rendered":"\u6709\u8da3\u7684flash"},"content":{"rendered":"

<\/p>\n

\u4eca\u5929\u770b\u5230\u8fd9\u6837\u4e00\u7bc7\u6709\u8da3\u7684\u6587\u7ae0<\/font>webpage as graphic<\/font><\/a> (42 hits)<\/font><\/span>\uff0e\u57fa\u672c\u601d\u60f3\u662f\uff1a\u7f51\u7ad9\u4e2d\u7684\u9875\u9762\u4f1a\u6709\u8bb8\u591atag\u4e5f\u5c31\u662f\u6211\u5e38\u8bf4\u7684\u6807\u7b7e\uff0c\u6709\u4eba\u7f16\u5199\u4e86\u4e00\u4e2a\u7a0b\u5e8f\u5c06\u8fd9\u4e9b\u6807\u7b7e\u6e32\u67d3\u6210\u4e0d\u540c\u7684\u56fe\u5f62\u7ed3\u6784\uff0e\u5f88\u6709\u65b0\u610f\uff0e\u5982\u4e0b\u56fe\u4e3agoogle\u7f51\u7ad9\u7684tag \u6807\u7b7e\u56fe\uff0e\u4f60\u4e5f\u53ef\u4ee5\u8f93\u5165\u81ea\u5df2\u7684\u7f51\u7ad9\uff0c\u67e5\u770b\u7ed3\u679c\uff0c\u4f46\u8981\u6c42\u4f60\u5fc5\u987b\u88c5\u6709java\u8fd0\u884c\u73af\u5883\uff0e<\/font><\/font><\/p>\n

YAHOO<\/p>\n

\u00a0<\/p>\n

\"yahoo\"<\/div>\n

Everyday, we look at dozens of websites. The structure of these websites is defined in HTML, the lingua franca for publishing information on the web. Your browser’s job is to render the HTML according to the specs (most of the time, at least). You can look at the code behind any website by selecting the "View source" tab somewhere in your browser’s menu.<\/p>\n

HTML consists of so-called tags, like the A tag for links, IMG tag for images and so on. Since tags are nested in other tags, they are arranged in a hierarchical manner, and that hierarchy can be represented as a graph. I’ve written a little app that visualizes such a graph, and here are some screenshots of websites that I often look at.<\/p>\n

I’ve used some color to indicate the most used tags in the following way:<\/p>\n

blue<\/span>: for links (the A tag)
red<\/span>: for tables (TABLE, TR and TD tags)
green<\/span>: for the DIV tag
violet<\/span>: for images (the IMG tag)
yellow<\/span>: for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)
orange<\/span>: for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)
black<\/span>: the HTML tag, the root node
gray<\/span>: all other tags<\/p>\n

Here I post a couple of screenshots, and I plan to make the app available as an applet, so that anybody can look at their websites in a new way.\u00a0<\/strike><\/p>\n

\u00a0<\/p>\n

Update: Here it is: http:\/\/www.aharef.info\/static\/htmlgraph\/<\/a><\/strong><\/p>\n

\u00a0<\/p>\n

cnn.com<\/a><\/strong><\/p>\n

CNN has a complicated but typical tag structure of a portal: Lots of links, lots of images. Similar use of divs and tables for layouting purposes. (1316 tags)<\/p>\n

\u00a0<\/p>\n

\"cnn\"<\/div>\n

<\/font><\/p>\n

<\/font><\/font><\/p>\n","protected":false},"excerpt":{"rendered":"

\u4eca\u5929\u770b\u5230\u8fd9\u6837\u4e00\u7bc7\u6709\u8da3\u7684\u6587\u7ae0webpage as graphic (42 hits … \u95b1\u8b80\u5168\u6587 →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[20],"tags":[],"class_list":["post-2022","post","type-post","status-publish","format-standard","hentry","category-20"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/imsky.synology.me\/wordpress\/wp-json\/wp\/v2\/posts\/2022","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/imsky.synology.me\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/imsky.synology.me\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/imsky.synology.me\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/imsky.synology.me\/wordpress\/wp-json\/wp\/v2\/comments?post=2022"}],"version-history":[{"count":0,"href":"https:\/\/imsky.synology.me\/wordpress\/wp-json\/wp\/v2\/posts\/2022\/revisions"}],"wp:attachment":[{"href":"https:\/\/imsky.synology.me\/wordpress\/wp-json\/wp\/v2\/media?parent=2022"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/imsky.synology.me\/wordpress\/wp-json\/wp\/v2\/categories?post=2022"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/imsky.synology.me\/wordpress\/wp-json\/wp\/v2\/tags?post=2022"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}