我的前端入门笔记（1）--html

初识前端，凭着脑中模糊的前端映像，凭着网络搜索的“只言片语”，我将在这条路上渐行渐远。随着学习的深入，总觉着该写些什么，内容不多只言片语，闲暇时翻来看看未尝不是一件令人欣慰的事。我的前端笔记将随着课程的进度逐渐展开，以下内容纯属个人理解，如有异议欢迎辅正。

---

1.w3c标准和html语义化。

网页由三部分组成：结构、表现、行为；

对应的标准也分为三个方面：结构化标准：xhtml和xml网页元素内容；表现标准：CSS控制网页样式；行为标准：ECMAScript, DOM, BOM操作网页内容，实现功能或者效果。

html语义化：选择合适的标签，使用合理的代码结构，便于开发者阅读，让浏览器爬虫和机器能更好的解析，有利于搜索引擎的抓取。

优点 1. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构； 2. 有利于SEO和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息（爬虫依赖于标签来确定上下文和各个关键字的权重）； 3. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页； 4. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

2.头部标签。

Doctype:用于声明文档使用规范；告知浏览器文档使用哪种 HTML 或 XHTML 规范。

meta：提供有关页面的元信息。

.定义描述内容，显示在搜索页面标题下方的一段文字

.定义关键字，用来描述网站相关内容，便于网络爬虫的抓取。

.防止网页缓存到本地

title：定义页面标题。

3.常见的浏览器及其内核。

使用Gecko内核的浏览器：Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey；

使用Presto内核的浏览器：Opera7及以上版本；

使用Webkit内核的浏览器：Safari、Chrome、360的极速模式等、搜狗浏览器。

4.关于src、url的用处和alt、title的区别。

url：用于css样式中background-image属性的地址链接；

src：用于html中标签的地址链接；

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中设置(charset的值为文件保存时的编码方式，告诉浏览器以哪种方式解码)