html学习感想
我的学习html5的感想,我感觉跟着江哥学习html5就是轻松,很容易上手,听江哥的视屏非常有意思,江哥的那副嗓音辨识度特别高。
在看江哥的视频的时候,收获很大,江哥对html的知识点讲解的很透彻,原理也都讲解的很清楚。比如在阿静一个网页是如何运行起来的时候,用图示的方式,将一个网页是如何跑起来的讲的很清楚,从发送请求,到服务器接收请求,进行处理,返回请求报文,在浏览器进行显示这些部分讲解的很是明白。以前完全不懂这些,现在对这些也算是有了一定理解。尤其是在讲浮动时,用psp模拟整个过程,让每个人都能明白原理,都清楚为啥会这样, 讲盒子模型讲的也比较透彻,学起来兴趣很足.
html5学习笔记
一、浏览器访问服务器的原理
缓存文件夹:专门存储网页数据的文件夹
1、当我们利用浏览器访问网页时,是有真实的物理文件传输的浏览器会将网页上的内容缓存到本地文件夹中,然后再渲染出来给用户查看
2、第二次访问网页比第一访问快,因为第一次访问时,已经将网页的信息缓存到本地
3、缓存文件夹中有图片、**.html、**.css、**.js,一个网页不是文件、而是多个文件组成
浏览器
请求数据的原理
请求报文:请求行+请求头+请求体
响应报文:相应行+响应头+响应体
调试工具:
谷歌浏览器(chrome):开发者工具 (F12)
network
火狐(Firefox):firebug(F12)
什么是URL
浏览器的地址栏内的地址
http://****:
默认80端口
URL拆分:
http://URL协议
123.0.0.1: 服务器IP地址
:80服务器默认端口号
index.html访问的资源名称,一般默认为index.html或index.html
IP地址+端口号 即可找到所要访问的服务器
Index.html当我们通过IP地址+端口号找到服务器时,告诉浏览器我们所请求的资源
http://协议超文本传输协议
约束规范浏览器与服务器之间如何沟通
div
1.什么是div?
作用: 一般用于配合css完成网页的基本布局
2.什么是span?
作用: 一般用于配合css修改网页中的一些局部信息
3.div和span有什么区别?
1.div会单独的占领一行,而span不会单独占领一行
2.div是一个容器级的标签, 而span是一个文本级的标签
4.容器级的标签和文本级的标签的区别?
容器级的标签中可以嵌套其它所有的标签
文本级的标签中只能嵌套文字/图片/超链接
容器级的标签
div h ul ol dl li dt dd ...
文本级的标签
span p buis strong em ins del ...
注意点:
哪些标签是文本级的哪些标签是容器级的, 我们不用刻意去记忆, 在企业开发中一般情况下要嵌套都是嵌套在div中, 或者按照组标签来嵌套
在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级
在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素
元素的分类
1.什么是块级元素, 什么是行内元素?
块级元素会独占一行
行内元素不会独占一行
容器级的标签
div h ul ol dl li dt dd ...
文本级的标签
span p buis stong em ins del ...
块级元素
p div h ul ol dl li dt dd
行内元素
span buis strong em ins del
2.块级元素和行内元素的区别?
2.1块级元素
独占一行
如果没有设置宽度, 那么默认和父元素一样宽
如果设置了宽高, 那么就按照设置的来显示
2.2行内元素
不会独占一行
如果没有设置宽度, 那么默认和内容一样宽
行内元素是不可以设置宽度和高度的
2.3行内块级元素
为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素
盒子模型
1.什么是CSS盒子模型?
CSS盒子模型仅仅是一个形象的比喻, HTML中所有的标签都是盒子
结论
1.在HTML中所有的标签都可以设置
宽度/高度 == 指定可以存放内容的区域
内边距 == 填充物
边框 == 手机盒子自己
外边距 == 盒子和盒子之间的间隙
网页的布局
1.什么是网页的布局方式?
网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的
1.标准流(文档流/普通流)排版方式
1.1其实浏览器默认的排版方式就是标准流的排版方式
1.2在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素
1.3 在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版
垂直排版, 如果元素是块级元素, 那么就会垂直排版
水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版
2.浮动流排版方式
2.1浮动流是一种"半脱离标准流"的排版方式
2.2浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐
注意点:
1.浮动流中没有居中对齐, 也就是没有center这个取值
2.在浮动流中是不可以使用margin: 0 auto;
特点:
1.在浮动流中是不区分块级元素/行内元素/行内块级元素的
无论是级元素/行内元素/行内块级元素都可以水平排版
2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像
3.定位流排版方式