*日期：2020年2月16日
*目标：
入门了解知识
网页访问过程
CSS学习
一、网页访问过程How？
小白打开chrome浏览器，在地址栏输入“https://ask.csdn.net/subjects/40”访问的时候经历了这样的访问过程：
- 小白的浏览器：嘿！csdn服务器我这里有一个HTTP请求“我要访问 ‘subjects/40‘’ 。”
- 服务器：喂！csdn的数据库我要编号“40”的数据！！
- csdn的数据库：这个数据我有！丢给服务器
- 服务器：小白的浏览器这个页面存在的，我给你发个HTML！HTTP响应接好了喂~
- 小白的浏览器：收到服务器给的html了！让我根据HTML5这个标准，把页面渲染给小白看！
上面的对话拟人化生动了一下，那么机器是怎么读懂这些对话，怎么知道对方需要什么呢？这就依赖于一个约定俗成的HTTP协议了。
1.HTTP协议
网络协议类似是一种约定，这种约定能让不同操作系统，不同设备在网络通讯中实现通信。（避免鸡同鸭讲）
HTTP协议是从WEB服务器传输HTML（超文本标记语言）到本地浏览器的一种传送协议。
假设有学生今天生病了，要向教务处请假，学校的规章制度会规定学生要向教务处说明请假原因，提交病例等证据。把需要请假的学生比作客户端。
当浏览器发送一个HTTP请求时，HTTP协议就会规定这个请求报文的格式，包括请求报头和请求主体两个部分。（这个请求报文的格式好比学生去请假需要提交的内容）
服务器收到客户端发送的HTTP请求，会返回一个响应报文，响应报文会包含一个重要的信息——状态码。（状态码好比教务处反馈给学生是否同意请假）
状态码比较常见的有：
- 200：请求成功
- 404：not found（客户端请求的资源找不到）
- 400：客户端请求有语法错误，服务器无法解析。
那浏览器提交了请求给服务器后，服务器怎么知道这个地址要返回什么样的html代码给你？
2.Web Server
- 初步认识 ：
1.处理WEB的数据元素(html页面)的应用软件。
2.由于Web服务器，使用HTTP（超文本传输协议）与客户机浏览器进行信息交流，所以人们常把它们称为“HTTP服务器”。
3.它与客户端（浏览器）打交道，负责处理主要信息有：session、request、response、Html、js、css。
4.提供“WWW（万维网）、Email（电子邮件）和FTP（文件传输）”等各种互联网服务。 - 功能：提供Web Server、提供缓存、平衡负载
- 常见：IIS、Apache、Nginx、Tomcat
3.服务器脚本
- 初步认识：
客户端除了请求指定的文件，有时候还会需要请求一些经过预处理过的服务器本地的或数据库的文件。因此服务器这边就需要有这些做预处理的代码，这些代码称服务器代码。
举个栗子，浏览csdn学习一番后，小白内心激动忍不住要写个blog记录一下。但是没有登录的小白看到的页面就没有写博客的功能按键啦！但是页面大体的板块几乎没有什么不同。这就是服务器脚本利用已知数据，反馈出了不同的页面的效果！
- 常见：PHP、C#、Visual Basic
（ps. Web Framework提供了一些处理细节的接口为服务器脚本的编写提供了方便。）
【认识完2、3两个小点的内容可以对网页访问过程再作一个细致的梳理：
- 普通网页：
->服务器接收到HTTP请求
->Web Server进行相应的初步处理，使用服务器脚本生成页面
->服务器脚本利用Web Framework调用本地和客户端传来的数据，生成页面
->Web Server 将生成的页面作为 HTTP 响应的 body，根据不同的处理结果生成 HTTP header，发回给客户端
->客户端（浏览器）接收到 HTTP 响应，通常第一个请求得到的 HTTP 响应的 body 里是 HTML 代码，于是对 HTML 代码开始解析
->解析过程中遇到引用的服务器上的资源（额外的 CSS、JS代码，图片、音视频，附件等），再向 Web Server 发送请求
->Web Server 找到对应的文件，发送回来
->浏览器解析 HTML 包含的内容，用得到的 CSS 代码进行外观上的进一步渲染，JS 代码也可能会对外观进行一定的处理
->用户与页面交互（点击，悬停等等）时，JS 代码对此作出一定的反应，添加特效与动画
->交互的过程中可能需要向服务器索取或提交额外的数据（局部的刷新，类似微博的新消息通知，这是AJAX，不用刷新就能与服务器进行交互，更新页面的一小部分~）
->一般不是跳转就是通过 JS 代码（响应某个动作或者定时）向 Web Server 发送请求
->Web Server 再用服务器脚本进行处理（生成资源or写入数据之类的），把资源返回给客户端
->客户端用得到的资源来实现动态效果或其他改变。
**
以上内容在材料基础上加了部分自己的见解所作的总结，也作了部分引用，附上来源（感谢作者大大给我打开前端认识的大门）：
作者：张秋怡
链接：https://www.zhihu.com/question/22689579/answer/22318058
来源：知乎
**
二、CSS学习
- css的继承和层叠
- css的优先级
- css样式命名
1.CSS的继承
-
父元素设置样式，子元素可以继承部分属性。（减少css代码）
一般继承：
/*css*/
div{
font-size:20px;
border:1px solid red;
}
/*html*/
<div>
<p>我继承了部分父元素样式</p>
<div>我继承了全部父元素样式</div>
</div>
（IE6以下版本表格不会继承body的boder属性）
-
当父元素的样式与元素本身定义的样式冲突的时候，忽略继承得来的样式
例如h1标签本身的字体样式大小为2rem(2rem可理解为基准字体大小的两倍) 浏览器有自己默认的字体大小，在chrome中浏览器的默认字体大小是16px，所以在没有继承的前提下h1内的字体大小为32px。 当h1标签继承父元素的字体大小时：
/*css*/
body{font-size:12px;}
<body>
<p>我的字体大小现在是12px</p>
<h1>我的字体大小现在为24px<h1/>
</body>
由于继承父元素的样式，此时h1内的字体大小会变为12px的两倍，变为24px。
2.css的层叠
- 可以定义多个样式。
- 不冲突时，多个样式叠为一个。
- 冲突时，按照不同样式规则优先级来应用样式。
3.css的优先级
-
使用方法优先级
行内样式 优先于 内部样式 优先于 外部样式
ps.- 链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
- 最后定义的优先级最高（就近原则）
-
选择器优先级
id选择器优先于class选择器优先于标签选择器ps.
- 同类样式被同一个标签多次引用时，且发生了样式冲突时，后定义的优先级最高。
/*css*/ #idgreen{color:green;} .classblue{color:blue;} .classyellow{color:yellow;}<div id="idgreen" class="classblue">同一个标签引用 id、class定义的样式，最后结果显示绿色。</div> <div class="classblue classyellow">Css优先级，蓝色在前，黄色在后</div> <div class="classyellow classblue">css优先级，黄色在前，蓝色在后</div>
- css优先级规则
⑴同一样式表中
①权值相同
就近原则（离被设置元素越近优先级越高）
②权值不同
根据权值来判断CSS样式
哪种css权值高，使用哪种样式
⑵**选择器权值**
| 选择器类型 | 权值大小 |
|---|---|
| 标签选择器 | 1 |
| 类选择器和伪类 | 10 |
| ID选择器 | 100 |
| 通配符选择器 | 0 |
| 行内选择器 | 1000 |
⑶权值规则
-
统计不同选择器的个数
-
每类选择器的个数乘以相应权值
-
把所有的值加起来得出选择器的权值
一起举个栗子吧 #main div.warning h2{...} 第一步：统计不同选择器的个数，id：1个 class：1个 标签：2个 第二步：乘以相应的权值，1*100=100 1*10=10 2*1=2 第三步：统计权值，100+10+2=112 继续举起栗子，用代码实现一下
/*CSS*/
*{color:black;}/*0*/
b{color:purple;}/*1*/
p b{color:yellow;}/*2*/
.classblue{color:blue;}/*10*/
#test1 p b {color:orange;}/*102*/
div p .classblue{color:red;}/*12*/
div #test2 b{color:gray;}/*102*/
<p>派生选择器优先级</p>
<div id="test1">
<h1>CSS样式优先级</h1>
<p id="test2">你猜猜<b class="classblue">我是什么</b>颜色呀？？</p>
</div>
计算完权值很明显最后一个样式和倒数第三个样式最高，根据相同权值采用就近原则，使用了最后一个样式。
效果颜色是灰色。
(Ｔ▽Ｔ)问题来了，代码码着码着想要某个样式优先级最高怎么办？？重新计算优先级权值太麻烦了！！神奇的东西诞生了~
- ！important规则
⑴可调整样式规则的优先级
⑵添加在样式规则之后，中间用空格隔开div{color:red !important;}
4.css规范命名
- 一些常用的css样式命名
| 页面结构 | 命名 |
|---|---|
| 页头 | header |
| 导航 | nav |
| 页面主体 | main |
| 侧栏 | sidebar |
| 页尾 | footer |
| 栏目 | column |
| 内容 | content/container |
| 页面外围控制 | wrapper |
| 容器 | container |
| 左右中 | left right center |
| 导航 | 命名 |
|---|---|
| 导航 | nav |
| 左导航 | leftsidebar |
| 主导航 | mainnav |
| 右导航 | rightsidebar |
| 子导航 | subnav |
| 菜单 | menu |
| 顶导航 | topnav |
| 子菜单 | submenu |
| 边导航 | sidebar |
| 标题 | title |
| 摘要 | summary |
| 功能 | 命名 |
|---|---|
| 标志 | logo |
| 广告 | banner |
| 登录 | login |
| 登录条 | loginbar‘ |
| 注册 | register |
| 搜索 | search |
| 功能区 | shop |
| 标题 | title |
小女子不才(๑•̀ㅂ•́)و✧欢迎各位大大指出不足之处！小女虚心学习！
342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
