【HTML5】html5知识结构大纲视图

最新推荐文章于 2021-06-15 17:15:54 发布

原创最新推荐文章于 2021-06-15 17:15:54 发布 · 488 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

12 篇文章

订阅专栏

本文深入探讨HTML5的新特性，包括语义化标签、智能表单、多媒体支持、DOM扩展及微数据的应用，增强用户体验，同时解析语法规范及浏览器兼容性处理。

HTML5介绍
- 新语义标签，智能表单，多媒体标签提供js API，如地理定位，重力感应，硬件访问，结合canvas开发游戏，结合css3过渡，转换，动画等特性，增强用户体验。
- 日常讨论的H5其实是范称，指H5+CSS3+JS等技术组合成的一个应用开发平台。
语法规范
- 为了能够保证浏览器可以兼容不同版本语法规范的，我们可以使用<!DOCTYPE html>只是浏览器应该如何处理我们的html。
- sublime快捷键：html:4s 严格模式;html:4t 宽松模式;html:xt 过渡模式。
- https://validator.w3.org 可以检测html文档符合什么版本的规范。
- 总结规范特点：更简洁，更宽松。
语义化
- Html5增加了大量更有意义的语义标签，有利于搜索引擎或辅助设备理解html页面内容
- 常用语义标签：nav header Footer section article aside progress.
- 因为header,footer,aside可嵌套，所以尽量避免全局使用
html5标签兼容处理
- 引用腻子脚本 — HTML5Shiv，即可使ie6-ie8识别新标签，实现原理见https://www.dazhuanlan.com/2020/01/06/5e12b761d0c16/
微数据&ARIA
- 微数据是在如span、div的标签内添加属性，让机器如搜索引擎识别其含义，某些特定类型的信息例如评论人物信息或事件，都有相应的属性用来描述其含义，可以理解成新语义标签的一种补充。
  - 扩展链接https://www.cnblogs.com/yangyang63963/p/5839619.html
  - https://www.bbsmax.com/A/QV5ZeOQbJy/
- WAI-ARIA :他主要解决的一个问题，让残障人士能无障碍地访问网页上的动态内容https://www.jianshu.com/p/2424e4119bc6
音频&视频
- audio
- video
表单
- 输入元素
- 新增元素与属性
- 见csdn博客
DOM扩展
- 获取元素
  - byid, ByClassName
  - querySelector(".header")获取到符合的第一个元素;querySelector(".header a") 。
  - querySelectorAll 通过css选择器获取元素，以伪数组形式存在.
- 类名操作
  - Node.classList.add('class')，~remove，toggle切换，有则移除，无则添加，contains检测是否存在class。缺图片1（代码）
- 自定义属性
  - data-name="local"，都是以data-前缀开头的。
  - dataset是自定义属性的数组，内容是键值对的形式。name:"local"，可用dataset.name直接找到指定自定义的属性，dataset.demo="123"，增加demo属性。