René's URL Explorer Experiment

等，更加语义化，利于SEO； HTML5 还提供了更多交互与媒体元素，如

Open Graph Description: HTML5 前段时间 HTML5 规范已经定稿，不知道是颠覆还是昙花一现。不管怎样，建立起规范总是好事，接下来让市场来决定。 HTML5 带来了哪些新的变化在结构层中， HTML5 添加了新的标记元素，如

、
、、
、
、
等，更加语义化，利于SEO； HTML5 还提供了更多交互与媒体元素，如
X Description: HTML5 前段时间 HTML5 规范已经定稿，不知道是颠覆还是昙花一现。不管怎样，建立起规范总是好事，接下来让市场来决定。 HTML5 带来了哪些新的变化在结构层中， HTML5 添加了新的标记元素，如<section>、<nav>、<menu>、<header>、<footer>、<article>等，更加语义化，...
Opengraph URL: https://github.com/paddingme/Learning-JavaScript/issues/19
X: @github
direct link
Domain: github.com
Hey, it has json ld scripts: {"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"【前端】【学习心得】初识 HTML5 第十五天","articleBody":"## HTML5\n\n前段时间 HTML5 规范已经定稿，不知道是颠覆还是昙花一现。不管怎样，建立起规范总是好事，接下来让市场来决定。\n## HTML5 带来了哪些新的变化\n- 在结构层中， HTML5 添加了新的标记元素，如`\u003csection\u003e`、`\u003cnav\u003e`、`\u003cmenu\u003e`、`\u003cheader\u003e`、`\u003cfooter\u003e`、`\u003carticle\u003e`等，更加语义化，利于SEO；\n- HTML5 还提供了更多交互与媒体元素，如 `\u003ccanvas\u003e`、`\u003caudio\u003e`、`\u003cvideo\u003e`。\n- 表单得到了增强，新增了颜色拾取器、数据选择器、滑动条和进度条等。\n- 还有很多新元素带着自己的 JavaScript 和 DOM API。\n- 在行为层，HTML5 规定了 DOM 中每个新元素的交互方式、以及新的 API。\n- 表现层，CSS3的多个模块囊括了高级选择器、渐变、变换，还有动画。\n- 新 JavaScript 模块还包括其他模块：Geolocation、Storage、Drap-and-Drop、Socket以及多线程。\n## Modernizr\n\nHTML5 尚未普及，有很多浏览器不支持，我们可以使用 Modernizr, Modernizr 是一个开源的 JavaScript 库，利用其富特性检测功能。可对 HTML5 文档进行更好的控制。\n\nModernizr 不会给浏览器添加不支持的特性，能做的是为你提供一些不同的 CSS 类名以及特性检测（feature-detection）属性。\n\n添加 Modernizr 之后，它会修改 `\u003chtml\u003e` 的 class 属性，基于可用的 html5 特性添加额外的类名。要使用 Modernizr 编写文档，通常都要给`\u003chtml\u003e` 添加一个 no-js 类，利用这个类可以在浏览器不支持 JavaScript 的情况下应用 CSS 样式：\n\n```\n.no-js selector {\n style porperties\n}\n```\n\n然后， Modernizr 会检测浏览器可能支持的各种特性，并相应地添加类名 feature 或 no-feature，例如：`\u003chtml class=\"canvas\"\u003e`或`\u003chtml class=\"no-canvas\"\u003e`。根据这些类名，可在 CSS 中定义相应的增强和退化版本，改善用户体验。\n\n```\n.multiplebgs article p {\n/* 为支持多背景浏览器编写的样式*/\n}\n\n.no-multiplebgs article p {\n/* 为不支持多背景浏览器编写的后备样式*/\n}\n```\n\nModernizr 库还提供了 JavaScript 特性检测对象，可在 DOM 脚本中直接使用：\n\n``` js\n if (!Modernizr.inputtypes.date) {\n createDatePicker(document.getElementById('birthday'));\n }\n```\n\nModernizr 还可以帮助旧式浏览器处理 HTML5 新元素如 `\u003csection\u003e`、`\u003cnav\u003e`、`\u003cmenu\u003e`、`\u003cheader\u003e`、`\u003cfooter\u003e`、`\u003carticle\u003e` 等。为使用这些新元素，只需要指定它们为块状元素:\n\n``` css\n article,aside,footer,header,hgroup,nav,section {\n display: block;\n }\n```\n\n唯一的特例是 IE 必须用 JavaScript 创建未知元素：\n\n``` js\n document.createElement(\"article\");\n```\n\nModernizr.js 可在 http://modernizr.com/ 下载。记住一定要把此脚本放在`\u003chead\u003e` 元素中。这样可以在加载其他标记之前先加载它，以便它在文档呈现之前能够创建好新的 HTML5 元素.\n## Canvas\n\n`\u003cCanvas\u003e` 元素可动态创建和操作图形推向。\n\n``` html\n\u003ccanvas id=\"draw-in-me\" width=\"120\" height=\"40\"\u003e\n \u003cp\u003ePowerd By HTML5 canvas\u003c/p\u003e\n\u003c/canvas\u003e\n```\n\n使用 `\u003cCanvas\u003e` 画一个圆角小黑盒子，带有2像素宽的白色描边\n效果。\n\n``` js\n function draw() {\n var canvas = document.getElementById(\"draw-in-me\");\n if (canvas.getContext) {\n var ctx = canvas.getContent('2d');\n ctx.beginPath();\n ctx.moveTo(120.0,32.0);\n ctx.bezierCurveTo(120.0,36.4,116.4,40.0,112.0,40.0);\n ctx.lineTo(8.0,40.0);\n ctx.bezierCurveTo(3.6,40.0,0.0,36.4,0.0,32.0);\n ctx.lineTo(0.0,8.0);\n ctx.bezierCurveTo(0.0,3.6,3.6,0.0,8.0,0.0);\n ctx.lineTo(120.0,32.0);\n ctx.closePath();\n ctx.fill();\n ctx.lineWidth = 2.0;\n ctx.strokeStyle = \"rgb(255,255,255)\";\n ctx.stroke();\n }\n }\n\n window.onload = draw;\n```\n\ntodo 缺个彩色图像变为灰色图像的例子。\n\n有了 `\u003cCanvas\u003e` ,就可以在浏览器窗口绘制任何对象、任何像素了。当然，还能通过它来操作图像，或者创建令人眼花缭乱的界面元素。值得注意的`\u003cCanvas\u003e`和 Flash 不具备可访问性。\n","author":{"url":"https://github.com/paddingme","@type":"Person","name":"paddingme"},"datePublished":"2014-12-01T16:32:19.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/19/Learning-JavaScript/issues/19"}

route-pattern /_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format)

route-controller voltron_issues_fragments

route-action issue_layout

fetch-nonce v2:6c6c8442-504d-3bfd-a226-cfd561b5e33b

current-catalog-service-hash 81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114

request-id 8F76:32DA89:635A2A:65075C:6A610A54

html-safe-nonce cb0d4b8087fec8433e7d8569d8245176a2638efbec84d61dd657a4df6d8ff300

visitor-payload eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiI4Rjc2OjMyREE4OTo2MzVBMkE6NjUwNzVDOjZBNjEwQTU0IiwidmlzaXRvcl9pZCI6IjYxMjUxMzk2NjM4OTkzOTY2OTIiLCJyZWdpb25fZWRnZSI6InNlYSIsInJlZ2lvbl9yZW5kZXIiOiJzZWEifQ==

visitor-hmac db04bcc6a7e1575baac6767da403db14cd1d4c39358eaadbc8bbc0925dcf576d

hovercard-subject-tag issue:50543854

github-keyboard-shortcuts repository,issues,copilot

google-site-verification Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I

octolytics-url https://collector.github.com/github/collect

analytics-location ///voltron/issues_fragments/issue_layout

fb:app_id 1401488693436528

apple-itunes-app app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/paddingme/Learning-JavaScript/19/issue_layout

twitter:image https://opengraph.githubassets.com/b1cc7c64ac74b2ea70ad3f2c65e80c62ccd7e7498623fabe76019e93efb64ef3/paddingme/Learning-JavaScript/issues/19

twitter:card summary_large_image

og:image https://opengraph.githubassets.com/b1cc7c64ac74b2ea70ad3f2c65e80c62ccd7e7498623fabe76019e93efb64ef3/paddingme/Learning-JavaScript/issues/19

og:image:alt HTML5 前段时间 HTML5 规范已经定稿，不知道是颠覆还是昙花一现。不管怎样，建立起规范总是好事，接下来让市场来决定。 HTML5 带来了哪些新的变化在结构层中， HTML5 添加了新的标记元素，如
、
、、
、
、
等，更加语义化，利于SEO； HTML5 还提供了更多交互与媒体元素，如

og:image:width 1200

og:image:height 600

og:site_name GitHub

og:type object

og:author:username paddingme

hostname github.com

expected-hostname github.com

None 86be97fd69ac233b46e43a5eed04ceac6498abe1efaf1af3b9573eb216019c05

turbo-cache-control no-preview

go-import github.com/paddingme/Learning-JavaScript git https://github.com/paddingme/Learning-JavaScript.git

octolytics-dimension-user_id 5771087

octolytics-dimension-user_login paddingme

octolytics-dimension-repository_id 25473884

octolytics-dimension-repository_nwo paddingme/Learning-JavaScript

octolytics-dimension-repository_public true

octolytics-dimension-repository_is_fork false

octolytics-dimension-repository_network_root_id 25473884

octolytics-dimension-repository_network_root_nwo paddingme/Learning-JavaScript

turbo-body-classes logged-out env-production page-responsive

disable-turbo false

browser-stats-url https://api.github.com/_private/browser/stats

browser-errors-url https://api.github.com/_private/browser/errors

release f80280886562a52fe1f6b9cab9f9c1dc3b9a78a2

ui-target full

theme-color #1e2327

color-scheme light dark

Links:

Skip to content https://github.com/paddingme/Learning-JavaScript/issues/19#start-of-content

https://github.com/

Sign in https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fpaddingme%2FLearning-JavaScript%2Fissues%2F19

GitHub CopilotWrite better code with AI https://github.com/features/copilot

GitHub Copilot appDirect agents from issue to merge https://github.com/features/ai/github-app

MCP RegistryNewIntegrate external tools https://github.com/mcp

ActionsAutomate any workflow https://github.com/features/actions

CodespacesInstant dev environments https://github.com/features/codespaces

IssuesPlan and track work https://github.com/features/issues

Code ReviewManage code changes https://github.com/features/code-review

Code QualityEnforce quality at merge https://github.com/features/code-quality

GitHub Advanced SecurityFind and fix vulnerabilities https://github.com/security/advanced-security

Code securitySecure your code as you build https://github.com/security/advanced-security/code-security

Secret protectionStop leaks before they start https://github.com/security/advanced-security/secret-protection

Why GitHub https://github.com/why-github

Documentation https://docs.github.com

Blog https://github.blog

Changelog https://github.blog/changelog

Marketplace https://github.com/marketplace

View all features https://github.com/features

Enterprises https://github.com/enterprise

Small and medium teams https://github.com/team

Startups https://github.com/enterprise/startups

Nonprofits https://github.com/solutions/industry/nonprofits

App Modernization https://github.com/solutions/use-case/app-modernization

DevSecOps https://github.com/solutions/use-case/devsecops

DevOps https://github.com/solutions/use-case/devops

CI/CD https://github.com/solutions/use-case/ci-cd

View all use cases https://github.com/solutions/use-case

Healthcare https://github.com/solutions/industry/healthcare

Financial services https://github.com/solutions/industry/financial-services

Manufacturing https://github.com/solutions/industry/manufacturing

Government https://github.com/solutions/industry/government

View all industries https://github.com/solutions/industry

View all solutions https://github.com/solutions

AI https://github.com/resources/articles?topic=ai

Software Development https://github.com/resources/articles?topic=software-development

DevOps https://github.com/resources/articles?topic=devops

Security https://github.com/resources/articles?topic=security

View all topics https://github.com/resources/articles

Customer stories https://github.com/customer-stories

Events & webinars https://github.com/resources/events

Ebooks & reports https://github.com/resources/whitepapers

Business insights https://github.com/solutions/executive-insights

GitHub Skills https://skills.github.com

Documentation https://docs.github.com

Customer support https://support.github.com

Community forum https://github.com/orgs/community/discussions

Trust center https://github.com/trust-center

Partners https://github.com/partners

View all resources https://github.com/resources

GitHub SponsorsFund open source developers https://github.com/open-source/sponsors

Security Lab https://securitylab.github.com

Maintainer Community https://maintainers.github.com

Accelerator https://github.com/open-source/accelerator

GitHub Stars https://stars.github.com

Archive Program https://archiveprogram.github.com

Topics https://github.com/topics

Trending https://github.com/trending

Collections https://github.com/collections

Enterprise platformAI-powered developer platform https://github.com/enterprise

GitHub Advanced SecurityEnterprise-grade security features https://github.com/security/advanced-security

Copilot for BusinessEnterprise-grade AI features https://github.com/features/copilot/copilot-business

Premium SupportEnterprise-grade 24/7 support https://github.com/enterprise/premium-support

Pricing https://github.com/pricing

Search syntax tips https://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax

documentation https://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax

Sign in https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fpaddingme%2FLearning-JavaScript%2Fissues%2F19

Sign up https://github.com/signup?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F%3Cuser-name%3E%2F%3Crepo-name%3E%2Fvoltron%2Fissues_fragments%2Fissue_layout&source=header-repo&source_repo=paddingme%2FLearning-JavaScript

Reload https://github.com/paddingme/Learning-JavaScript/issues/19

Reload https://github.com/paddingme/Learning-JavaScript/issues/19

Reload https://github.com/paddingme/Learning-JavaScript/issues/19

paddingme https://github.com/paddingme

Learning-JavaScript https://github.com/paddingme/Learning-JavaScript

Notifications https://github.com/login?return_to=%2Fpaddingme%2FLearning-JavaScript

Fork 13 https://github.com/login?return_to=%2Fpaddingme%2FLearning-JavaScript

Star 28 https://github.com/login?return_to=%2Fpaddingme%2FLearning-JavaScript

Code https://github.com/paddingme/Learning-JavaScript

Issues 30 https://github.com/paddingme/Learning-JavaScript/issues

Pull requests 0 https://github.com/paddingme/Learning-JavaScript/pulls

Actions https://github.com/paddingme/Learning-JavaScript/actions

Projects https://github.com/paddingme/Learning-JavaScript/projects

Wiki https://github.com/paddingme/Learning-JavaScript/wiki

Security and quality 0 https://github.com/paddingme/Learning-JavaScript/security

Insights https://github.com/paddingme/Learning-JavaScript/pulse

Code https://github.com/paddingme/Learning-JavaScript

Issues https://github.com/paddingme/Learning-JavaScript/issues

Pull requests https://github.com/paddingme/Learning-JavaScript/pulls

Actions https://github.com/paddingme/Learning-JavaScript/actions

Projects https://github.com/paddingme/Learning-JavaScript/projects

Wiki https://github.com/paddingme/Learning-JavaScript/wiki

Security and quality https://github.com/paddingme/Learning-JavaScript/security

Insights https://github.com/paddingme/Learning-JavaScript/pulse

【前端】【学习心得】初识 HTML5 第十五天 https://github.com/paddingme/Learning-JavaScript/issues/19#top

Mu-Help-Plan https://github.com/paddingme/Learning-JavaScript/issues?q=state%3Aopen%20label%3A%22Mu-Help-Plan%22

https://github.com/paddingme

paddingme https://github.com/paddingme

on Dec 1, 2014 https://github.com/paddingme/Learning-JavaScript/issues/19#issue-50543854

http://modernizr.com/ http://modernizr.com/

Mu-Help-Plan https://github.com/paddingme/Learning-JavaScript/issues?q=state%3Aopen%20label%3A%22Mu-Help-Plan%22

https://github.com

Terms https://docs.github.com/site-policy/github-terms/github-terms-of-service

Privacy https://docs.github.com/site-policy/privacy-policies/github-privacy-statement

Security https://github.com/security

Status https://www.githubstatus.com/

Community https://github.community/

Docs https://docs.github.com/

Contact https://support.github.com?tags=dotcom-footer

Viewport: width=device-width
URLs of crawlers that visited me.