方糖全栈学习路线图

 学习路径

 Web基础

 计算机网络基础

 网络基础课目录

 为什么网络传输是个难题

 网络分层和OSI模型

 往哪儿传？—— IP  网络构成

 怎么传？——TCP/UDP

 TCP/IP协议族

 IP协议

 IP地址 网络和主机

 子网掩码

 寻址和路由

 IP分包

 IP相关协议

 ARP

 ICMP

 DHCP

 DNS

 NAT

 IPv6

 TCP协议

 HTTP和Web

 Web的历史

 没有Web的时代

 www发布

 构建Web的核心技术

 浏览器

 Web服务器

 HTML简介

 URI/URL

 HTTP

 版本

 Web的工作原理 URL

 IP协议

 使用PostMan观察数据  眼见为实

 前端基础课

 HTML

 HTML文档  结构可视化

 基本结构 http://get.ftqq.com/490.card

 Firefox47之前可以通过 3D 模式查看网页，可以用来做课件

 HTML标签

 标签构成

 开始标签

 结束标签

 内容  innerHTML

 空标签

 建议小写

 属性

 id

 class

 style

 标签不会显示，只会显示标签内容

 标签的嵌套构成页面

 基本结构

 !DOCTYPE  HTML

 HTML5

 HTML版本

 http://get.ftqq.com/491.card

 html

 head

 存放元信息（关于文档本身的信息）

 title  网页标题 可以动态修改

 当失去焦点时，不断闪烁的标题栏

 meta

 关键字  

 编码：

 编码小课堂

 编码

 定时刷新：

 指定 Viewport：

 style：页面内引入CSS

 link：引入外部CSS（独立文件）

 script：引入 JavaScript

 base：指定相对路径

 body

 轻松一下

 head和body的纹身

 https://weibo.com/2194035935/Fzhl01E1a

 小知识

 在 HTML5 规范里边，html head 和 body 都是可以省略的

 使用 jsfiddle.net 在线学习 HTML

 jsfiddle.net

 简单的使用视频

 常用标签

 段落构成

 

 截断是个大问题

 行间距，是非常重要的问题  中文字符比英文字母要高大方，标准行距不适合阅读

 

   保留原格式

   使用等宽字体

 但是  标签不保持原格式

 只好这么用 �

   x = 5; y = 6; z = x + y;  

 

 

 块级标签和 Inline 标签

 块 新起一行

 试图从左到右整个填充满

 inline  不换行  textarea

 

 文字样式

 ~

  & 

  & 

 中文斜体是非常难看的

 难看到什么份儿呢，腾讯为了用斜体，花大价钱找设计师们设计了一套字 体

 https://v.qq.com/x/page/o0505gnbt5w.html

 如果你没有腾讯爸爸那么多钱，还是不要用斜体了

   注意中文里边小字体会造成网页看不清  最小12px、9pt

 

 

 inserted

 下划线

 标签

 HTML4里边被废除

 在HTML5里边被加回来了

 不建议使用

 容易和超链接混淆

 下划线的位置不适合中文

 使用SPAN + CSS 的 border 属性来做，更好看

  & 

   注释

  文字方向

 This text will be written from right to left

 链接 A

 绝对链接

 相对链接  还记得 meta 标签里的 base 么

 锚点 Chapter 4

 Jump to Chapter 4

 包含其他标签  IMG

 结构体

 列表

 ul

 ol

 dl  description lists

 dt：title

 dd：content

 demo

    Coffee    black hot drink   Milk    white cold drink 

 表格

 table

 caption   Monthly savings

 tr th  跨行 rowspan=2

 td

         Firstname     Lastname      Age           Jill     Smith      50           Eve     Jackson      94    

 富媒体内容

 小知识：MIME

 MIME 的全称是 Multipurpose Internet Mail Extensions  「多用途互联网 邮件扩展」

 用来标识文件  为什么不用文件名

 文件名不一定靠谱

 有时候没有文件名

 比文件名优先级高  txt文件的强制下载

 清单：http://svn.apache.org/repos/asf/httpd/httpd/trunk/docs/conf/mime. types

 图片

 img  src

 alt

 picture

     

 浏览器支持

 视频  video

        Your browser does not support the video tag. 

 音频  audio

        Your browser does not support the audio element. 

 音视频文件格式的浏览器支持情况

 桌面

 手机

 https://developer.mozilla.org/enUS/docs/Web/HTML/Supported_media_ formats

 注释

 大段注释  >

 条件注释      .... some HTML here .... 

 表单

 form

 action  数据提交的目的地

 method GET

 POST

 enctype multipart

 urlencode

 name  数组 a[] 

 input  type

 text

 radio

 submit

 button

 select

 textarea

 其他

 iframe  嵌入页面  多用于视频的嵌入

 canvas  画布

 绘制2D图案

 http://2.deerface.sinaapp.com/

 昆西生成器

 html2canvas

 绘制3D图案 MMDComic

 https://github.com/easychen/mmdcomic

 svg

 可缩放矢量图形

 XML

                 

 我们一般用它来做图标

 标签的结构类型

 Block

 blockquote

 canvas

 dd/dl/dt

 div

 Inline

 XHTML

 EXtensible HyperText Markup Language

 更为严格的HTML

 文档结构

 DOCTYPE 是强制性的  

 html 的 xmlns 属性是强制性的  

 html head title body 必须有

 标签

 必须合理嵌套  This text is bold and italic

 必须关闭

 标签名必须小写

 必须只有一个根元素

 属性

 属性名必须小写

 属性值必须用引号包起来

 属性值不能省略  

 验证地址  https://www.w3schools.com/html/html_validate.html

 我们稍后要学习的 React 中，JSX 里的标签就全是 XHTML，所以了解 XHTML的规范对我们而言很重要。

 小知识

 XML

 eXtensible Markup Language

 被设计来存放数据 微信公众号接口返回的格式就是 XML

 目前在很多地方被 json 取代

    Tove   Jani   Reminder   Don't forget me this weekend! 

 相关工具

 XSLT  CSS for XML  XPath 

 XQuery  SQL for XML

 XLink  A for XML

 XMLHttpRequest   Ajax

 小结

 HTML 文档的基本结构，常用标签有哪些，如何通过 jsfidder 在线调试  HTML，HTML 和 XHTML 、XML 有什么区别

 CSS

 Cascading Style Sheets，简写CSS

 举个例子

 网页化妆师，HTML的美颜神器

 妹子化妆前后的对比图

 网页添加样式之前和之后的对比图

 嵌入 HTML 的方式

 Style标签

 独立文件  可以（最好）指定字符集  血泪教训

 Inline  不推荐使用  重复太多

 方法论：DRY

 DRY原则

 程序员职业的不同之处

 语法

 选择器+属性+值  选择器

 类型（标签）选择器  tagname

 类选择器  class="name"

  ID选择器  id="name"

 万能选择器  *

 属性选择器

 [attr]  有此属性

 [attr="value"]  属性值等于value

 [attr~="value"]  属性值用空白隔开的值里有value

 [attr|="value"]  属性值以value开头或者等于value

 [attr^="value"]  属性值以value开头

 [attr$="value"]  属性值以value结尾

 [attr*="value"]  属性值里value出现一次以上

 伪元素选择器

 ::before

 ::after

 ::firstline

 ::firstletter

 ::selection

 伪类别选择器

 :checked

 :empty  干掉空行？

 :enabled  :disabled

 :focus

 :not()

 链接

 :link  未访问链接

 :active

 :visited

 :hover

 子元素

 :nthchild  第几个子元素

 :firstchild

 :lastchild  列表样式常用

 选择器的组合

 A > B  A下一层元素里的B

 A ~ B  和 A 同父层的元素里的 B

 A + B  和 A 相邻的元素里的 B  不能隔开

 A B  A 包含的所有元素中的 B

 样式

 文字

 中文字体

 https://ant.design/docs/spec/fontcn

 fontfamily: applesystem, BlinkMacSystemFont, "Segoe UI", Roboto,              "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans  GB", "Microsoft YaHei",              SimSun, sansserif;

 Text

 color

 小知识

 颜色值 HEX

 rgba

 取色器

 Mac

 系统自带

 Windows 赏色

 http://colorwanted.hyjiacan.com/

 textalign

 left

 right

 center

 justify

 textdecoration

 none

 underline  通过span+borderbottom 来模拟

 overline

 linethrouht

 装X风格包

 texttransform

 uppercase  查找时要注意

 lowercase

 capotalize

 textindent  行首缩进（中文以前用得多）

 letterspacing  字间距

 lineheight  行间距  保护视力

 链接  hover等伪元素选择符

 换行

 换行是个大问题

 英文按词换行  wordwrap:breakword;

 中文按字换行  whitespace:prewrap

 不换行，直接隐藏  whitespace:nowrap; overflow:hidden; textoverflow:ellipsis; width: 100px;

 位置和布局

 Box模型

 content

 padding

 border

 outline

 margin

 https://www.w3schools.com/css/css_boxmodel.asp

 内容超过Box时候的处理

 overflow

 visible 默认值，会显示到外边

 hidden

 scroll  强制显示滚动条 Mac上边会自动隐藏，只有滚动时才出来

 丑，建议使用第三方插件来修改效果

 auto  自动显示滚动条

 方向指定 overflowx : 左右方向的溢出

 overflowy

 必须指定高

 对齐

 块元素居中：margin:auto

 文字居中：textalign

 左右对齐  float

 垂直居中

 valign不好用

 用 lineheight 和 padding

 还能用 transform: translate(50%, 50%);

 Position

 relative 相对位置

 其他元素不会尝试填补挪出来的空间

 fixed

 固定

 总是在固定位置 包括页面滚动

 同时指定 top bottom left right 可以控制 100%

 absolute

 绝对位置

 绝对位置不是绝对的，是相对于「positioned ancestors」的位置。

 什么是 positioned 元素？ 除了 static 的其他元素

 static 默认值

 对 top bottom left  right 不生效

 sticky

 滚动挂起

 兼容性

 属性

 top

 bottom

 left

 right

 calc 函数  http://get.ftqq.com/473.card

 通过 padding 和 margin 来辅助布局 

 宽高

 width

 height

 maxheight/width

 minheight/width

 浮动

 float

 left

 right

 none

 inherit

 clear

 left

 right

 none

 both

 inherit

 display

 修改元素的level

 block

 inline

 inlineblock

 none  和 visibility:hidden 的区别

 FlexBox  稍后再讲

 实战

 包小猫的名片

 方法论：如何处理海量细节

 细节记不清楚没关系  面试时除外�

 但要知道能力边界 哪些能做

 哪些不能做

 以及将来用到，在什么地方去找

 小结

 CSS是什么，如何在 HTML里边引入 CSS，如何使用 CSS 修改元素样式 和 进行页面布局

 JavaScript

 方法论

 如何学习计算机语言

 描述了对数据进行加工的逻辑

 数据类型 数字

 字符串

 数据容器

 常量

 变量

 数组

 对象（OOP部分讲解）

 对数据进行加工  操作符

 赋值

 加减乘除

 取模

 位操作

 按条件进行加工

 流程控制  goto

 分支逻辑

 条件判断 if

 循环 for

 while

 逻辑的重用

 函数

 类和对象

 小知识

 面向对象（趣图）

 类是属性和方法的集合

 值和函数的打包

 约束了函数和值的调用范围 public

 private

 通过继承实现有选择性的重用 override

 子类

 对象是类的实例

 类是一种规范

 对象根据这个规范创造出来的实物

 模具和其产物

 每一种语言中，对OOP的支持和实现细节是不同的

 外部和底层资源 扩展库

 包管理和依赖管理

 语法

 数据类型

 数值

 整型

 浮点

 双精度

 isNaN

 字符串 "双引号"

 '单引号'

 对象  { key:value , key:value }

 弱类型  TypeJS

 typeof 判断类型

 undefined

 变量和常量

 var 没有用 var 声明过的变量是 undefined

 可以赋值为null

 ES6

 作用域

 let

 const  对象时的注意事项 锁定地址而非值

 Object.freeze

 操作符

 赋值

 等号不是等于的意思

 x = x+ 1

 ES6的解构赋值

 http://es6.ruanyifeng.com/#docs/destructuring

 let { a , b } = [ a , b ];

 import 时用得最多

 算术操作符

 加减乘除

 ++/ ; += 

 取模 分页算法

 平均分配资源

 字符串连接  +

 比较运算符

 ==/===

 !=/!==

 >/=/