加百利
统信UOS系统认证工程师。
现任神州数码高级前端开发工程师。
从事互联网工作十余年。
精通JavaEE、Web前端等技术，具有丰富的实战经验。
擅长Mobile Web、Hybrid app、小程序等多种移动端开发。
B站知识类UP主，视频累计播放量破百万。

曾负责项目：
Boss直聘直课堂教育平台。
中国科技馆官方App及小程序。
大型电子商务valuefix.com交易平台。

虽然HTML/CSS作为非常经典的技术，已经有很多人写过相关的教程，但它依然没有足够简单到任何人都可以尝试来学习。尽管作为前端技术方向，它有着丰富的界面交互，但里面隐藏的逻辑规则却很容易被人忽略。本书的主要内容为HTML/CSS的相关技术，包含了基础标签、智能表单和语义化标签等，同时还讲解了CSS选择器、文本修饰、图片修饰、浮动、溢出、经典盒模型与弹性盒模型、伪元素等，除PC端布局外还讲解了针对移动端的网页适配。
为了更好的阅读体验和学习效果，本书除了全彩印刷、扫码看视频，还大胆地做了几项创新性尝试，包括预计阅读时间、知识补给站、编程单词表、知识点案例化，以及在线练习平台等。
即便是非理工科出身的人，或者已经脱离系统学习多年的上班族，只要你对网页制作有兴趣，就可以学懂书中的内容。本书的读者对象主要针对网页开发零基础的人群，以及一些非计算机专业的网页开发爱好者。编程并非程序员的专利，作者希望本书可以极大限度地降低读者入门HTML/CSS的难度。

前言
第1章 准备工作
1.1什么是前端
1.1.1一道经典的面试题
1.1.2前端后端怎么区分
1.1.3一些小问题
1.2网页为什么叫HTML
1.2.1常见浏览器介绍
1.2.2浏览器的规范与W3C
1.3编写第一个网页
1.4开发前的准备工作
1.4.1使用开发工具
1.4.2代码基本规范
补给1：什么是IP
补给2：什么是DNS
补给3：你了解域名吗
补给4：什么是服务器
补给5：修改文件扩展名
补给6：何为绿色软件
第2章 准备工作
2.1写一篇博客
2.2制作百度新闻列表
2.2.1无序列表
2.2.2有序列表
2.3向网页中添加图片
2.3.1图片的排列方式
2.3.2百分比大小
2.4如何获取自己喜欢的图片
2.4.1图片另存为
2.4.2开发者工具
2.5先搞懂路径问题
2.5.1相对路径与绝对路径的区分
2.5.2图片引入练习
2.6来模拟个百度云盘
2.7批量的数据展示
2.8个人简历制作
2.9QQ登录表单
2.10其他属性
补给1：表单的密码管理
补给2：常见的图片格式
第3章 样式基础与布局
3.1认识CSS
3.1.1结构表现分离
3.1.2感受样式的作用
3.1.3提取自己想要的颜色
3.2容器的作用
3.2.1给一篇文章排版
3.2.2div容器
3.2.3span容器
3.3样式选择器
3.4样式为什么会重叠
3.5优先级可以精确的计算吗
3.5.1选择器的权重值
3.5.2头条新闻列表
补给1：颜色为什么用十六进制表示
补给2：什么是ID
补给3：代码注释的重要性
补给4：什么是权重值
第4章 图文的基本处理与混排
4.1文本样式的处理
4.1.1字体基础样式
4.1.2字体排列方式
4.2添加背景图
4.2.1背景图与img标签的区别
4.2.2背景图的平铺
4.2.3背景图的定位
4.2.4平铺的巧妙利用
4.3浮动布局
4.3.1文字环绕
4.3.2水平排列
4.3.3高度塌陷
4.3.4清除浮动影响
4.4完成一个聊天对话框
4.5浮动的进阶
4.5.1浮动元素的排列原则
4.5.2右浮动的顺序问题
4.5.3浮动元素的重叠问题
4.6为什么需要盒模型
4.6.1外边距margin
4.6.2填充padding
4.6.3边框border
4.7完成一个更复杂的布局
4.8命令的简写形式
4.8.1背景background
4.8.2边框border
4.8.3font字体
4.8.4margin边距
4.8.5color颜色
4.8.6padding填充
补给1：浏览器中的坐标系
补给2：控制面板的使用
第5章 页面布局与基本交互
5.1了解元素类型
5.1.1block与inline
5.1.2水平排列的差异
5.2精准的定位元素
5.2.1相对定位与绝对定位
5.2.2坐标体系
5.2.3固定定位
5.2.4如何确定参考系
5.3鼠标的hover效果
5.4滤镜相册
5.5精灵图
补给：制作精灵图片
第6章 智能表单与BFC规则
6.1语义化标签
6.1.1语义化的作用
6.1.2常见标签
6.2智能表单制作
6.3其他属性
6.3.1关于resize属性
6.3.2关于outline属性
6.4overflow的作用
6.5适当了解一下BFC
补给1：什么是URL
补给2：程序漏洞为什么叫BUG
第7章 高级选择器与动画
7.1文件图标的添加
7.1.1nth-child(n)
7.1.2属性选择器
7.1.3nth-of-type(n)
7.2电影IMDB排行
7.3如何学习不常见的CSS选择器
7.4一个精致的开关
7.4.1阴影的概念
7.4.2伪元素
7.4.3背景过渡
7.4.4盒子阴影
7.4.5复选框的:checked状态
7.5过渡效果
7.5.1帧和帧率的概念
7.5.2transition属性
7.5.3升级照片墙
7.6综合练习
7.7字体图标
补给1：什么是Unicode
补给2：计算机为什么会采用二进制
补给3：硬盘为什么会缩水
第8章 变形与3D
8.1元素也能变形
8.1.1定位与过渡的结合
8.1.2位移
8.1.3缩放
8.1.4旋转
8.1.5综合练习
8.2高级扩展
8.2.1透视与3D效果
8.2.23D翻转菜单
8.2.3自定义帧动画
第9章 移动端布局
9.1什么叫响应式网页
9.1.1响应式网页布局
9.1.2媒介查询
9.2PC端与移动端的差别
9.3移动端网页适配
9.4viewport
9.5进阶技巧
补给：什么是像素
第10章 布局神器flex
10.1弹性盒模型
10.1.1display:flex
10.1.2flex的布局特性
10.1.3水平垂直居中
10.1.4强大的弹性盒模型
10.2移动端网页综合练习
第11章 项目实战：制作个人站点
11.1为什么需要个人网站
11.2动手之前先学点设计
11.2.1拟物化与扁平化
11.2.2复杂的动画如何处理
11.3需要花钱买服务器吗
11.4项目的开发过程
11.5常见特效的实现
11.5.1动态背景
11.5.2banner图切换
11.5.3时间轴效果
11.5.4美化卡片列表
11.5.5打字机效果
11.6如何添加音频和视频
11.6.1添加音频
11.6.2添加视频
补给1：世界上第一个程序员是谁
补给2：蓝光高清与1080P的区别是什么
附录A单词汇总
附录B知识点索引