初识前端，凭着脑中模糊的前端映像，凭着网络搜索的“只言片语”，我将在这条路上渐行渐远。随着学习的深入，总觉着该写些什么，内容不多只言片语，闲暇时翻来看看未尝不是一件令人欣慰的事。我的前端笔记将随着课程的进度逐渐展开，以下内容纯属个人理解，如有异议欢迎辅正。
1.w3c标准和html语义化。
网页由三部分组成：结构、表现、行为；
对应的标准也分为三个方面：结构化标准：xhtml和xml网页元素内容；表现标准：CSS控制网页样式；行为标准：ECMAScript, DOM, BOM操作网页内容，实现功能或者效果。
html语义化：选择合适的标签，使用合理的代码结构，便于开发者阅读，让浏览器爬虫和机器能更好的解析，有利于搜索引擎的抓取。
优点 1. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构； 2. 有利于SEO和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息（爬虫依赖于标签来确定上下文和各个关键字的权重）； 3. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页； 4. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
2.头部标签。
Doctype:用于声明文档使用规范；告知浏览器文档使用哪种 HTML 或 XHTML 规范。
meta：提供有关页面的元信息。
.<meta name="description" content=" ">定义描述内容，显示在搜索页面标题下方的一段文字
.<meta name="keyword" content=" ">定义关键字，用来描述网站相关内容，便于网络爬虫的抓取。
.<meta http-equiv="Cache-Control" content="no-cache">防止网页缓存到本地
title：定义页面标题。
3.常见的浏览器及其内核。
使用Gecko内核的浏览器：Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey；
使用Presto内核的浏览器：Opera7及以上版本；
使用Webkit内核的浏览器：Safari、Chrome、360的极速模式等、搜狗浏览器。
4.关于src、url的用处和alt、title的区别。
url：用于css样式中background-image属性的地址链接；
src：用于html中<img>标签的地址链接；
alt：用于图片标签中网上过慢图片加载慢时的图片占位解释字；
title：用于鼠标放上时显示的提示框。
5.块级元素和行内元素。
块级元素占用空间是一整行，行内元素占用空间是它自身的内容宽度。行内元素可以一并排显示，块级元素不能。
行内元素：a、span、img、input、button、em、textarea
.设置宽度width 无效。
•设置高度height 无效，可以通过line-height来设置。
•设置margin 只有左右margin有效，上下无效。
•设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
行内元素和块级元素之间的转换：
.display：block 将行内元素转化为块级元素，拥有块级元素的属性；
.display:inline-block 将行内元素转换为行内块元素，拥有行内元素和块级元素的所有属性。
6.浏览器标准模式、怪异模式及标准盒模型、怪异盒模型。
怪异模式：使用浏览器自己的方式解析执行代码，页面以一种比较宽松的向后兼容（高版本可以兼容低版本）的方式显示。因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式；
标准盒模型：实际的宽/高 = width/height + 2padding + 2border；
怪异盒模型: width/height就是该盒子的大小，是包含内边距padding和边框border宽度在内的，即实际宽/高=width/height=2padding+2border+content(这种情况发生在html文档中没有文档声明的情况下)
7.表单提交中，get方式和post方式的区别。
.get提交的数据在浏览器历史记录中，安全性不好。
1. 无法使用缓存文件（更新服务器上的文件或数据库）
2. 向服务器发送大量数据（POST 没有数据量限制）
3. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
8.px、em、rem的区别。
.Em：em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸:1. em的值并不是固定的；2. em会继承父级元素的字体大小。
.Rem：相对的只是HTML根元素。它可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
9.从输入url到页面呈现的过程。
.url到IP：DNS解析过程：域名解析服务器指向对应的主机的IP地址 。浏览器查缓存→系统缓存→路由器缓存→服务商缓存→根服务器缓存（目的：通过URL定位到IP地址找到主机）；
.打包http请求：浏览器打包服务器所需信息；
.创建tcp协议(浏览器向服务器发出请求)；
.浏览器发送相关信息至服务器；
.相关进程处理请求：服务器通过端口号确定哪个进程处理该请求；
.服务器响应请求；
.服务器响应内容后传递给浏览器；
.浏览器拿到内容后进行下载和页面渲染。
2. 浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
3. 一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。
4. 此时，Web 服务器提供资源服务，客户端开始下载资源。
请求返回后，便进入了我们关注的前端模块
简单来说，浏览器会解析 HTML 生成 DOM Tree，其次会根据 CSS 生成 CSS Rule Tree，而 javascript 又可以根据 DOM API 操作 DOM
三次握手：
1.浏览器向服务器发出请求并发送相关信息；
2.服务器收到信息后进行确认，并返回信息至浏览器；
3.浏览器收到返回信息后进行确认。
10.网页乱码原因及解决方式
原因：html文件中设置的编码格式与浏览器的解码格式不一致
解决：在head中设置<meat charset="">(charset的值为文件保存时的编码方式，告诉浏览器以哪种方式解码)
网友评论