HTML5+CSS3 从入门到精通

HTML5+CSS3 从入门到精通

2021-12 粗读前三章，价值不大

书籍介绍：HTML5+CSS3从入门到精通，李东博主编，清华大学出版社。2013年第一次出版，时间很早，入门级别书籍，大部分章节可以快速阅读。

第一章 Web 开发新时代

HTML5特点

• 兼容性好(传统的 HTML4 比较旧，XML规则太严格，所以出了 HTML5)大小写不敏感
• 简单：DOCTYPE；utf-8 字符集支持；原生的 header footer 取代 <div className="footer" id="footer"></div>的写法，直接根据 HTML语义化，可以推测出当前的功能和结构是什么。Header 不一定出现在页面顶部，可以是某一个区域的标题。重要的是语义，而不是在界面中的位置。

网页设计原则

• 二八定律：我们不是取悦于所有人，而是明白哪些客户是重要的，哪些浏览器是重要的。不需要把 80% 的时间解决 20% 的兼容性或者极端情况上。优先完成主要的业务。早期 IE 浏览器的兼容问题，或者某些老版本移动端兼容问题，不需要考虑。
• 伯斯塔尔法则：发送时要保守，接收时要开放。
• 文档：在 web 上很多不规范的文档或者代码规范，我们不能要求全部的文档规范正确，我们自己要做到完善的文档和代码规范。
• API：请求参数尽可能规范，后端返回的数据尽可能开放(API返回值变化，前端业务不能奔溃)
• 用户交互：我们给用户的提示尽可能清楚明确，页面交互逻辑尽可能简单；用户输入的数据要开放，考虑到用户的错误输入(数据类型验证)，用户的大量输入(长文本分页或者批量渲染)，大量用户请求(高并发操作)
• 公共函数(组件)：参数包容，可能参数个数或者数据类型不对；返回值明确(确定的数据类型等)
• 兼容性
• 软件版本更新，需要兼容旧数据，尽可能避免出现断层式的更新(Angular就是一个反例，需要重构项目，造成用户流失)
• 初始设计：考虑到未来可扩展性，某个字段使用字符串还是数组(数据类型可扩展)，数据量从 100 到 10000 的界面效果(数据量的扩招：界面分片渲染，还是分页，性能问题)
• 代码兼容：团队中水平层次不齐，代码习惯不同。初始可以约定基本的习惯，同样需要兼容某些同事的问题代码(例如写单元测试，使用 ESLint)自己提高代码可读性(名称逻辑可读性)注释规范；提交信息规范等。小型项目使用 JS，规范少一点；大型项目使用 TS + 测试，接口规范和文档明确，坚持统一的语法风格
• 渐进增强，平稳退化：尽量使用各大浏览器兼容性较好的写法和标签，避免使用某些浏览器支持的格式。video中的资源可以设置多种格式(mp4，swf, ogg)都不支持就直接 A 标签下载到本地
• 解决问题第一：用户的需求是第一位的。必须满足产品需求和用户需求，再考虑代码性能；格式规范；文档规范等。

工作机制(最好两个机制结合)

• 公平机制：一个团队中各抒己见，最后结论考虑到大部分人，相对民主；可能花费很多时间
• 精英机制：少数精英选择正确的方案，否决不合理的方案，相对高效；可能造成内部怨言

页面布局

• block 块级布局
• inline 行内布局
• inline-block 内部块级布局，外部行内布局
• flex 布局
• Inline-flex 布局
• table 布局
• Grid 布局(功能最强大，实际项目中使用较少)

第二章 HTML XML HTML5

<sub> 下标文本

<sup> 上标文本

<a> 标签的两个用法：标识超链接；作为页面的锚点(定位到页面中具体的位置)

tabIndex 用来定义元素的 Tab 键访问顺序(点击TAB遍历页面中的所有链接和表单元素，按照 tabIndex 的顺序遍历，设置 -1 不遍历)

titlle 提示文本，为元素提供额外的说明信息

alt: alternate text 替代文本，并不是做提示(图片无法显示时，显示替换的文本)修饰性的图片可以使用空值

HTML5 新增了很多语义化的标签，实际使用的不多

input 如果是数字，可以设置 max min step 限制输入，这样就不需要使用 JS 处理了

contentEditable: 是否允许用户编辑元素中的内容

designMode：设置整个界面可编辑状态(on-off)在 on 的情况下，才能使用 contentEditable 注意浏览器兼容性

document.querySelector(".hightlight", ".focus") 获取满足多个条件的 DOM 节点

parse() 把字符串序列化成对象

stringify() 把对象反序列化成字符串

第三章 HTML 标签的使用

不同标签的具体作用，meta 标签的作用等

第四章 表单

表单基本提交和交互

第五章 canvas

基本使用。canvas 和项目密切相关。如果涉及 canvas 绘图或者游戏，这部分使用非常多。如果是办公项目，现在接触的几个项目中，基本没有用到 canvas 大量画图的情况。

总结

这本书介绍 H5 的内容，基础知识为主，相对2021年的最新技术落伍了，没有太多可读性。实际项目中，特别关注 HTML 的比较少，关键在数据处理和具体功能。这本书可以归档，基本用不到。日常遇到某个细节知识点，直接查网络资料即可。