正所谓温故而知新,
近期有了总结知识点的想法,
想把之前学习的知识作一个分阶段性的总结,
就从html开始吧!!!
一、浏览器与服务器
1. 浏览器
1.1 浏览器是什么
1.浏览器是一种交互软件(与服务器进行收发包,与用户进行交互)
1.2 浏览器作用
1.解析并渲染页面内容(html&cs&js)
2.让html文件和用户进行交互
1.3 浏览器分类(按内核)
1. Webkit -webkit-: chrome safari
2. Gecko -moz-: firefox
3. Blink -0-: opera
4. Trident -ms-: IE,猎豹安全浏览器,360极速浏览器,百度浏览器(国产浏览器)...
2. 服务器
2.1 服务器是什么
1. 服务器也叫伺服器,提供计算机服务的设备
2.2 服务器作用
1. 响应服务请求,处理请求
2. 承担服务,保障服务
2.3 服务器特点
1. 处理请求
2. 24小时开机
3. 使用开发人员工具来查看请求和响应
3.1 右键浏览器页面,点击审查元素
3.2 打开开发人员工具
3.3 打开network
3.4浏览器向服务器发送请求
3.5浏览器请求的详细信息
3.6 浏览器请求数据的原理
浏览器请求的页面直接去服务器上找(请求报文),找到了以后将这个文件中的内容通过repsonse响应回浏览器(响应报文)。
4. 浏览器请求协议: HTTP
4.1 请求报文(request)
浏览器向服务器发送请求数据
4.2 响应报文(response)
服务器得到浏览器的请求,并响应返回数据
4.3 URL:(地址)
url的组成: 协议://服务器的ip地址:端口号/请求的页面
5.页面的本质
5.1查看页面源代码
5.2 浏览器的本质作用
浏览器将服务器响应回来的response进行从上到下的解析(渲染),将最后的页面效果显示出来。
5.3 世界上第一个html页面
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
6.浏览器内核
6.1 内核的本质
内核(Rendering Engine):可大概译为“渲染引擎”,不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释(如标准通用标记语言下的一个应用HTML、JavaScript)并渲染(显示)网页。
6.2 内核的分类
Trident[ˈtraɪdn:t]:ie , 猎豹安全浏览器,360极速浏览器,百度浏览器...
Gecko[ˈgekoʊ]:Firefox
Webkit[webkit]:Safari ,Chrome,Opera(2013年使用webkit内核)
Blink(基于webkit内核)
6.3 不同内核的区别
不同的内核在渲染同一内容的时候会有差别(兼容性问题)
浏览器内核渲染页面是从上到下依次渲染
二、浏览器能够识别的语言
2.1 W3C三层分离原则
HTML: 从语义角度描述页面结构
CSS: 从审美角度美化页面
JavaScript: 从交互角度提升用户体验
三、HTML
3.1本质
超文本标记语言(HyperText Markup Language)
在浏览器上运行的标记语言,用标签对内容进行标记
每一个标签都有自己的语义
3.2 标签与标签之间的关系
3.2.1 嵌套关系
<a href=”#”><img src=”#”/></a>
3.2.2 并列关系
<p></p>
<div></div>
3.3 HTML固定结构
<html>这是猪
<head>这是猪头
<title></title>这是猪眼睛
</head>
<body></body>这是猪肉
</html>
结构记忆法:二师兄
3.4 编写一个HTML文件
3.4.1 传建一个记事本文件,后缀名为.html
3.4.2 以记事本打开: (编写HTML代码)
3.4.3 输入HTML的结构与内容
<html>
<head>
<title></title>
</head>
<body>
今天天气不错啊!
</body>
</html>
3.4.4 保存找到原始文件,打开方式---浏览器(查看页面效果)
3.5 文件的后缀名和打开方式
3.5.1 文件的后缀名
1. 修改文件的后缀名是不会改变内容的。
2. 后缀名是用来决定这个文件的默认打开方式。
3.(针对我们编写的html页面)如果我们要查看这个文件的内容,直接以浏览器方式打开。但是如果我们要修改这个文件中的内容,应该以记事本的方式打开。
3.5.2 文件的打开方式
电脑中安装了很多的应用程序,可以为某一些的文件选择一种默认的打开方式,如果要修改,可以选中其中一个文件,右键,打开方式(所有的该类程序都以这种方式打开。)