前端入坑合集之HTML(5)篇

前端之路

---

0. 基础学习

0.1 规划

第一阶段 ----> html4+html5
第二阶段 ----> css2+css3
第三阶段 ----> javascript
第四阶段 ----> ES6
第五阶段 ----> Vue
第六阶段 ----> React (Native)
第七阶段 ----> BAT小程序

0.2 方法

先整体再细节，先模仿再思考，
狂敲代码，勤于动手，
多花时间在练习上而不是在看视频上，
只有不断练习才能转化为自己的东西。

---

1. HTML基础

1.1 浏览器访问网页的原理

常见面试题： 从输入某个网址之后，发生了什么？
答： 简单来说就是：web浏览器与web服务器之间通过HTTP协议进行通信的过程，具体过程看下图

具体过程来说： 从浏览器地址栏输入url地址开始，浏览器通过DNS域名解析，查找此域名所对应的ip地址，随后向此ip地址取得连接，接着就将请求头信息，通过HTTP协议向此ip地址所在的服务器发起请求，服务器收到请求之后，对请求进行判断并等待处理，最后向浏览器发回响应，此时浏览器应该接收到 text/html 类型的代码，浏览器开始解析并渲染此HTML，并同时获取其中的内嵌资源地址，比如图片资源，css资源等，然后再向服务器发起请求来获取这些资源，并最终在HTML中显示。

具体的环节可分为：域名解析 ----> 建立连接 ----> 发起请求 ----> 等待响应 ----> 接收数据 ----> 解析代码 ----> 渲染页面

注意ajax异步请求资源也是遵循http协议

【补充】 浏览器加载显示HTML页面内容的顺序：

• 1.HTML代码i的下载和渲染是从上往下的，并且是同时的
• 2.渲染到页面某一部分时，其上面的部分都已下载完，但不意味着相关联的元素，比如图片，css，js等资源也下载完
• 3.若遇到css或js代码，则会启用单独连接进行下载，并在下载完之后马上进行解析，此时停止页面下面元素的下载
• 4.样式表文件下载完之后，将和所有前面下载好的样式文件一起进行解析，解析完成后，将对此前的所有元素重新渲染
• 5.js和css中有重复定义的代码，后面的将会覆盖掉前面的
• 6.js的下载会造成一定的阻塞，下载完，就进行解释
• 7.图片的下载，图片文件是同时下载的，并且下载完成后马上在页面显示，直到所有图片下载完成

1.2 HTML语法

*1. 用英文命名文件
*2. head 是给浏览器看的，且head和body只能有一个
*3. 字符集，注意只写utf-8还不够，要检查代码编辑器的编码格式
*4. 标签分为单标签（自闭合，建议闭合），双标签
*5. DTD文档声明，任何版本都需要版本声明，不是一个标签，不区分大小写
*6. HTML, XHTML(严格，双引号，小写，闭合)，HTML5(功能多，但结构松散)

1.3 HTML标签

。。。未完待续