├── html5.png ├── map ├── lion.jpg ├── circus.jpg ├── clown.jpg ├── horse.jpg ├── elephant.jpg ├── lion.htm ├── clown.htm ├── horse.htm ├── elephant.htm └── index.html ├── favicons ├── favicon.ico ├── apple-icon.png ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon-96x96.png ├── ms-icon-70x70.png ├── apple-icon-57x57.png ├── apple-icon-60x60.png ├── apple-icon-72x72.png ├── apple-icon-76x76.png ├── ms-icon-144x144.png ├── ms-icon-150x150.png ├── ms-icon-310x310.png ├── android-icon-36x36.png ├── android-icon-48x48.png ├── android-icon-72x72.png ├── android-icon-96x96.png ├── apple-icon-114x114.png ├── apple-icon-120x120.png ├── apple-icon-144x144.png ├── apple-icon-152x152.png ├── apple-icon-180x180.png ├── android-icon-144x144.png ├── android-icon-192x192.png ├── apple-icon-precomposed.png ├── browserconfig.xml └── manifest.json ├── home.svg ├── README.md ├── mark └── index.html ├── LICENSE ├── content-editable └── index.html ├── output └── index.html ├── range └── index.html ├── meter └── index.html ├── datalist └── index.html ├── data-attribute └── index.html ├── main.css ├── dialog └── index.html ├── .gitignore ├── details └── index.html ├── inputs └── index.html └── index.html /html5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/html5.png -------------------------------------------------------------------------------- /map/lion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/map/lion.jpg -------------------------------------------------------------------------------- /map/circus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/map/circus.jpg -------------------------------------------------------------------------------- /map/clown.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/map/clown.jpg -------------------------------------------------------------------------------- /map/horse.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/map/horse.jpg -------------------------------------------------------------------------------- /map/elephant.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/map/elephant.jpg -------------------------------------------------------------------------------- /favicons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/favicons/favicon.ico -------------------------------------------------------------------------------- /favicons/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/favicons/apple-icon.png -------------------------------------------------------------------------------- /favicons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/favicons/favicon-16x16.png -------------------------------------------------------------------------------- /favicons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/favicons/favicon-32x32.png -------------------------------------------------------------------------------- /favicons/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/favicons/favicon-96x96.png -------------------------------------------------------------------------------- /favicons/ms-icon-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/favicons/ms-icon-70x70.png -------------------------------------------------------------------------------- /favicons/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/favicons/apple-icon-57x57.png -------------------------------------------------------------------------------- /favicons/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/favicons/apple-icon-60x60.png -------------------------------------------------------------------------------- /favicons/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/favicons/apple-icon-72x72.png -------------------------------------------------------------------------------- /favicons/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/favicons/apple-icon-76x76.png -------------------------------------------------------------------------------- /favicons/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/favicons/ms-icon-144x144.png -------------------------------------------------------------------------------- /favicons/ms-icon-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/favicons/ms-icon-150x150.png -------------------------------------------------------------------------------- /favicons/ms-icon-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/favicons/ms-icon-310x310.png -------------------------------------------------------------------------------- /favicons/android-icon-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/favicons/android-icon-36x36.png -------------------------------------------------------------------------------- /favicons/android-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/favicons/android-icon-48x48.png -------------------------------------------------------------------------------- /favicons/android-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/favicons/android-icon-72x72.png -------------------------------------------------------------------------------- /favicons/android-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/favicons/android-icon-96x96.png -------------------------------------------------------------------------------- /favicons/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/favicons/apple-icon-114x114.png -------------------------------------------------------------------------------- /favicons/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/favicons/apple-icon-120x120.png -------------------------------------------------------------------------------- /favicons/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/favicons/apple-icon-144x144.png -------------------------------------------------------------------------------- /favicons/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/favicons/apple-icon-152x152.png -------------------------------------------------------------------------------- /favicons/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/favicons/apple-icon-180x180.png -------------------------------------------------------------------------------- /favicons/android-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/favicons/android-icon-144x144.png -------------------------------------------------------------------------------- /favicons/android-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/favicons/android-icon-192x192.png -------------------------------------------------------------------------------- /favicons/apple-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanghao221/html-tips-tricks/HEAD/favicons/apple-icon-precomposed.png -------------------------------------------------------------------------------- /favicons/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | #ffffff -------------------------------------------------------------------------------- /home.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /map/lion.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML Tips and Tricks - Map 8 | 9 | 10 | 11 | 12 | 13 |
14 |

You have selected a Lion

15 |
16 | lion 17 |
18 |
19 | 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # html-tips-tricks 2 | 3 | HTML5不是什么新鲜事。自初始版本（2008 年 1 月）以来，我们一直在使用它的几个功能。我再次仔细查看了 HTML5 功能列表。看看我发现了什么？到目前为止，我还没有真正使用过很多！ 4 | 5 | 在本文中，我列出了 10 个这样的HTML5功能，这些功能过去我用得不多，但现在发现它们很有用。我还创建了一个工作示例流程并托管在GitHub. 希望你也觉得它有用。让我们开始了解有关它们中的每一个的解释、代码和快速提示。 6 | 7 | > [https://wanghao221.github.io/html-tips-tricks/](https://wanghao221.github.io/html-tips-tricks/) 8 | 9 | 阅读更多相关信息: 10 | 11 | > [你真的熟练运用 HTML5 了吗，这10 个酷炫的 H5 特性你会几个？](https://blog.csdn.net/qq_44273429/article/details/118487938) 12 | 13 | ———————————————— 14 | 版权声明：本文为CSDN博主「海拥✘」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 15 | 原文链接：https://blog.csdn.net/qq_44273429/article/details/118487938 16 | -------------------------------------------------------------------------------- /map/clown.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML Tips and Tricks - Map 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

You have selected a Clown

16 |
17 | clown 18 |
19 |
20 | 21 | -------------------------------------------------------------------------------- /map/horse.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML Tips and Tricks - Map 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

You have selected a Horse

16 |
17 | horse 18 |
19 |
20 | 21 | -------------------------------------------------------------------------------- /map/elephant.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML Tips and Tricks - Map 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

You have selected an Elephant

16 |
17 | elephant 18 |
19 |
20 | 21 | -------------------------------------------------------------------------------- /favicons/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "App", 3 | "icons": [ 4 | { 5 | "src": "\/android-icon-36x36.png", 6 | "sizes": "36x36", 7 | "type": "image\/png", 8 | "density": "0.75" 9 | }, 10 | { 11 | "src": "\/android-icon-48x48.png", 12 | "sizes": "48x48", 13 | "type": "image\/png", 14 | "density": "1.0" 15 | }, 16 | { 17 | "src": "\/android-icon-72x72.png", 18 | "sizes": "72x72", 19 | "type": "image\/png", 20 | "density": "1.5" 21 | }, 22 | { 23 | "src": "\/android-icon-96x96.png", 24 | "sizes": "96x96", 25 | "type": "image\/png", 26 | "density": "2.0" 27 | }, 28 | { 29 | "src": "\/android-icon-144x144.png", 30 | "sizes": "144x144", 31 | "type": "image\/png", 32 | "density": "3.0" 33 | }, 34 | { 35 | "src": "\/android-icon-192x192.png", 36 | "sizes": "192x192", 37 | "type": "image\/png", 38 | "density": "4.0" 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /mark/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML Tips and Tricks - Mark Element 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | home 17 | 18 |

Mark something to Highlight

19 |

你知道吗，你可以仅使用 HTML 标签 "突出显示有趣的东西"

20 |
21 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Tapas Adhikary 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /content-editable/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML Tips and Tricks - Content Editable 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | home 17 | 18 |

Shoppping List(Content Editable)

19 | 24 |
25 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /output/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML Tips and Tricks - Output 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | home 17 | 18 |

Let's see the Output

19 |
20 | 21 | * 22 | = 23 |
24 |
25 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /range/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | HTML Tips and Tricks - Range Slider 9 | 10 | 11 | 12 | 13 | 20 | 21 | 22 | 23 |
24 | 25 | home 26 | 27 |

Slider

28 |
29 | 37 |
38 |
39 | 40 |
41 |
42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /map/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML Tips and Tricks - Map 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | home 17 | 18 |

Map - Image map

19 |
20 | Circus 21 | 22 | 23 | Elephant 24 | Lion 25 | Horse 26 | Clown 27 | Clown 28 | 29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /meter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML Tips and Tricks - Meter 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | home 17 | 18 |

Meter

19 | 20 | 2 out of 10
21 | 22 | 23 | 60%
24 | 25 | 26 | 32% 27 |
28 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /datalist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML Tips and Tricks - Datalist Tag 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | home 17 | 18 |

Datalist Tag

19 |
20 | 21 | 22 | 23 | 29 | 30 |
31 |
32 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /data-attribute/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML Tips and Tricks - Data Attribute 8 | 9 | 10 | 11 | 12 | 20 | 21 | 22 | 23 |
24 | 25 | home 26 | 27 |

Know data attribute

28 |
I have a hidden secret! 32 |
33 | 34 | 35 |
36 | 37 |

38 |
39 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #000000; 3 | color: #ffffff; 4 | font-family: 'Chilanka', cursive; 5 | } 6 | 7 | a { 8 | color: #61dafb; 9 | } 10 | 11 | table { 12 | border-collapse: collapse; 13 | width: 100%; 14 | } 15 | 16 | th, 17 | td { 18 | padding: 8px; 19 | text-align: left; 20 | border-bottom: 1px solid #ddd; 21 | } 22 | 23 | li { 24 | list-style: none; 25 | } 26 | 27 | .home { 28 | text-decoration: none; 29 | } 30 | 31 | .home span { 32 | font-size: 25px;; 33 | } 34 | 35 | .box { 36 | border: 1px dotted; 37 | border-radius: 5px; 38 | padding: 10px; 39 | width: 80%; 40 | margin: 10px; 41 | } 42 | .demo { 43 | margin: 10px auto 30px auto; 44 | display: flex; 45 | align-items: center; 46 | justify-content: center; 47 | flex-direction: column; 48 | } 49 | 50 | .demo .list li{ 51 | padding: 10px; 52 | } 53 | 54 | .demo .content-editable { 55 | border: 1px solid; 56 | border-radius: 5px; 57 | padding: 10px; 58 | } 59 | 60 | .demo .data-attribute { 61 | padding: 10px; 62 | } 63 | 64 | .demo .range output { 65 | font-size: 62px; 66 | } 67 | 68 | dialog::backdrop { 69 | background: repeating-linear-gradient( 70 | 45deg, 71 | rgba(0, 0, 0, 0.2), 72 | rgba(0, 0, 0, 0.2) 1px, 73 | rgba(0, 0, 0, 0.3) 1px, 74 | rgba(0, 0, 0, 0.3) 20px 75 | ); 76 | backdrop-filter: blur(3px); 77 | } 78 | .page-footer { 79 | position: fixed; 80 | right: 0; 81 | bottom: 20px; 82 | display: flex; 83 | align-items: center; 84 | padding: 5px; 85 | color: black; 86 | background: rgba(255, 255, 255, 0.65); 87 | } 88 | 89 | .page-footer a { 90 | display: flex; 91 | margin-left: 4px; 92 | } 93 | .touxiang{ 94 | width:24px; 95 | height:24px; 96 | } 97 | -------------------------------------------------------------------------------- /dialog/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML Tips and Tricks - Dialog Tag 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | home 17 | 18 |

Dialog Tag

19 | 20 | 21 | 22 | 23 |
24 |

I'm a Dialog

25 |

What do you think of me?

26 | 27 | 28 | 29 |
30 | 31 | 32 |
33 | 39 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | -------------------------------------------------------------------------------- /details/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML Tips and Tricks - Details Tag 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | home 17 | 18 |

Details Tag

19 |
20 | Click Here to get the user details 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 |
#NameLocationJob
1AdamHustonUI/UX
2BobLondonMachine Learning
3JackAustraliaUI Designer
4TapasIndiaBlogger
53 |
54 | 60 |
61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /inputs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML Tips and Tricks - Inputs 8 | 9 | 10 | 11 | 12 | 18 | 19 | 20 | 21 |
22 | 23 | home 24 | 25 |

All about Inputs

26 | 27 |

Color picker

28 | 29 |

Color Me!

30 | 31 |
32 |

Required

33 |
34 | 35 | 36 | 37 |
38 |
39 | 40 |
41 |

Autofocus

42 |
43 | 44 | 45 | 46 |
47 |
48 | 49 |
50 |

Placeholder

51 |
52 | 53 | 54 | 55 |
56 |
57 | 58 |
59 |

E-mail

60 |
61 | 62 | 63 | 64 |
65 |
66 | 67 |
68 |

Regex validations

69 |
70 | 71 | 76 | 77 |
78 |
79 |
80 | 86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML5 Feature Tips 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 34 | Fork me on GitHub 41 | 42 | 43 | Github 44 |
45 |

HTML5 功能提示

46 | HTML5 47 | 93 |
94 | 95 | 96 | 97 | --------------------------------------------------------------------------------