这是我参与「第四届青训营 」笔记创作活动的的第1天
HTML规范
HTML与HTML5是W3C与WHATWG共同规范的。
知识点
- 前端关注：美观、安全、性能、无障碍、交互体验、兼容性
- 前端边界：Node.js、Electron、Flutter、WebGL、WebRTC、WebAssembly、React Native
- HTML使用者：开发者、浏览器、搜索引擎、屏幕阅读器
- HTML语法：标签属性小写、空标签不闭合、属性值双引号、属性值可省略
- HTML语义化：可读性、可维护性、提高SEO、提升无障碍性
HTML语义化分类
- Head
doctype html head meta title base link style script noscript
- Sections
body article section nav article main h1~h6 header footer menu
- Grouping
p div ol,ul,li dl,dt,dd blockquote figture figcaption
- Table
table caption thead th td tbody tr tfoot colgroup col
- Form
form input select button textarea label legend fieldset progress datalist meter output
- Interactive
details summary command
- Edits
ins del
- Embedbed
img source video radio picture iframe embed track canvas map area
- Text
a em strong small s cite q dfn abbr ruby rt rp data time code var samp kbd sub i b u mark bdii bdo span br wbr
HTML5便利
- 绘画：
canvas - 音视频：
video和audio - 本地存储：
localStorage、sessionStorage - 语义化标签：
header、footer、nav、section、article、aside - 新表单控件：
calendar、email、url、search、time、date - 拼音：
ruby、rt - 展开和收起(手风琴)：
details、summary - 原生进度条：
progress - 度量衡：
meter
例子
语义化实践
- 概览及了解标准规范中标签及属性含义
- 思考标签正确的匹配内容
- 不使用可视化工具
语义化拓展microformats
- 实现特定类型信息的语义标记，hCard和hCalendar获得批准
- 语义化class，帮助机器学习到更多信息
参考
总结
先见森林，后见树木。
先概览原始文档，后深入某个细节。
