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
動作中のプログラムの中身をリアルタイムに覗く / Realtime Debugger for CSharp with Roslyn
Avatar for Prota prota
1
1.9k
ソニーのクラウド共通基盤の変遷と AI時代の開発スタイルに合わせた進化 / The Journey of Sony’s Common Cloud Platform and Its Evolution for AI-Native Development
Avatar for KenjiYoneyama kenjiyoneyama
0
260
SalesForceを内製化！？ ~ HR事業を支える顧客管理基盤のインフラを大公開 ~
Avatar for Kobujee_53 oku053
0
170
作って学ぶSpring BootのAuto Configuration / JJUG Night Seminar 2026-10-19
Avatar for Ryo Shindo rshindo
0
140
iOS 27でニュースアプリはどう変わる！？ 〜日経電子版の新機能対応と、開発事例から〜
Avatar for Kazuki Nakashima lynnswap
7
13k
[Rails World 2026] Durable orchestration on Rails: from continuation to workflow
Avatar for Vladimir Dementyev palkan
1
750
sbt 2.0: takeoff
Avatar for Eugene Yokota eed3si9n
0
160
JIS keyboard support in Omarchy
Avatar for LEF lef237
0
110
個人開発者よ、Honoを使え（おじさんver）
Avatar for tanahiro2010 tanahiro2010
2
260
見えないものを探る要求要件定義に必要な基本的思考 / invisible-requirement-thinking
Avatar for MinoDriven minodriven
15
8.4k
Kotlinの15年とServer-Side Kotlin
Avatar for Takehata Naoto n_takehata
1
150
外から家のPCの電源入れたい！をＰＨＰで解決する
Avatar for かわしも（Shimokawa Shion） kawashimo0
1
130

Featured

See All Featured
Docker and Python
Avatar for Tania Allard trallard
47
4.2k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
41k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
450
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
3
1.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.6k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
580
Side Projects
Avatar for Sacha Greif sachag
456
43k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
480
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
480
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
410

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