Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

html5 新技术

Avatar for hugo hugo
November 27, 2013
Programming
190
3

html5 新技术

主要介绍了html的一些新增属性和api

Avatar for hugo

hugo

November 27, 2013

More Decks by hugo

See All by hugo
CSS命名及书写规范
Avatar for hugo baofen14787
0
700
移动端性能调优及16ms优化
Avatar for hugo baofen14787
1
2.4k
html5 新技术 2
Avatar for hugo baofen14787
1
150
html5 新技术 3
Avatar for hugo baofen14787
1
130

Other Decks in Programming

See All in Programming
複雑なUIコンポーネントとの ⻑い付き合い⽅：波及するバグからテスト戦略を経て、安全な再設計へ
Avatar for masahiko.asai mixplace
0
410
作れる、でも消せるか？──安全に「枯らして消す」機能削除術 / Drain, Then Delete
Avatar for chobishiba chobishiba
2
490
Herb in Rails 8.2: Your ERB views, now HTML-aware @ Kaigi on Rails 2026, Tokyo, Japan
Avatar for Marco Roth marcoroth
2
200
IBM Bob でAI駆動開発『QC-Playbook』
Avatar for 1kano ichirokano2
0
110
wkhtmltopdfの次どうするか問題2026
Avatar for Shinichi Maeshima willnet
2
1.9k
dotNET_vulnclicker_intro.pdf
Avatar for Tomohiko Morita deka_morita
0
140
IBM Bob Dojo #1 仕様駆動開発入門
Avatar for Akira Onishi (IBM) oniak3ibm
PRO
0
390
AmebaブログはKMPから卒業します
Avatar for 伊藤光次郎 kmars0605
0
160
[Rails World 2026] Durable orchestration on Rails: from continuation to workflow
Avatar for Vladimir Dementyev palkan
1
750
現場と育てるRailsモデリング 〜Spreadsheetから始めたモデル設計〜
Avatar for siroemk siroemk
2
550
The Rails Doctrine Decade
Avatar for Koichi ITO koic
2
580
Verilogで学ぶCPU自作入門
Avatar for uyuki uyuki234
8
4.1k

Featured

See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
3.1k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
184
10k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.4k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
500
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
520
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
520
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
1
280
A Soul's Torment
Avatar for Nat Ma seathinner
8
3.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.6k

Transcript

  1. HTML5新技术(1) hugohua

  2. data-***  符合html5规范  高级浏览器支持  js提供dataset方法  jq提供data方法 

    CSS提供attr() 方法

  3. dataset *带连字符连接的名称在使用的时候需要命名驼峰化

  4. $(‘’).data() *data方法，页面初始化时缓存数据，后续无法修改属性值。 参考文献： http://www.learningjquery.com/2011/09/using-jquerys-data-apis

  5. CSS attr() DEMO

  6. Demo

  7. datalist *扩展阅读： http://www.zhangxinxu.com/wordpress/2013/03/html5-datalist-实际应用-可行性/

  8. download

  9. download Download属性：表明一个资源是让用户下载的,而不是立即显示的。 Download如果存在值，则这个值是文件名。 DEMO

  10. 下载动态生成的文件 可以通过Bob创建二进制文件，然后用这个属性下载到本地。

  11. autofocus Autofocus：页面加载时自动地获得焦点。 仅对 input、button、textarea等表单元素有效 多个autofocus存在时，作用于最后一个 DEMO

  12. placeholder 文本框默认文字提示 默认颜色在各浏览器下表现不一致，建议通过CSS重置样式 DEMO

  13. Context Menus Chrome暂不支持 DEMO

  14. None

  15. HTML5 JS API • 未完待续 • 3Q