自学web前端的小笔记(入门html+css)

1:Chrome浏览器字体默认大小为 16
2:首行缩进标签: text-indent:2em
3:Chrome浏览器默认字体为: 微软雅黑
4:JS的数据类型有哪些:
基本数据类型:String,boolean,Number,Undefined,Null
引用数据类型:Object(Array,Function,RegEXP,Date)
5:希望获取到页面中所有的checkbox怎么做?(不使用第三方框架)
Var domlist=document.getelementbyTagName(‘input’)
Var yylist=[]
Var len =domlist.length //缓存到局部变量
While(len–){ //使用while循环效率比for循环更高
If(domlist[len].type==’checkbox’){
Yylist.push(domlist[len])
}
}
6.什么是AJAX和JSON
AJAX是异步Javascript和XML
不加载页面全部内容,只加载页面局部内容,降低页面加载的数据量
避免页面不断刷新和跳转页面,提高用户体验
对搜索引擎不友好
要实现AJAX的前后退功能,成本比较大
可能造成请求数的增加
跨域问题限制
JSON是一种轻量级的数据交互模式,ECMA的一个子集
优点:轻量级、易于人们的阅读和编写,便于机器(Javascript)解析,支持复合的数据类型(数组,对象,字符串,数字)
7.DOM事件流:三个阶段–事件捕捉 目标阶段 事件冒泡
事件捕捉:事件由最不具体的节点先接收,然后逐级向下,然后到最具体的
事件冒泡:事件开始由最具体的元素接收,然后逐层向上传播
8.Javascript中
Var a;
Alert(a)
会报undefined,虽然声明了变量,但是没有赋值
Alert(b)
会报错,因为没有声明
9.强制换行(中文在html里会自动换行,但英文不会,因为浏览器会把一长串的英文看成一个单词)
Word-break:break-all
10.外边距塌陷问题
两个块元素,父级和子级元素,当给子元素设置向上的外边距(margin-top)时.效果是整个父级元素向下移动(不是我们要的效果),此时,这种现象叫做外边距塌陷
解决方案:1.给父元素设置边框上面(border),效果不是最理想的,因为边框也会占空间
2.在父元素里设置属性overflow:hidden即可,这个属性意思是溢出属性隐藏(这个是最简单粗暴的方式)
3.设置父级元素的内边距,并减去溢出空间的大小
11.水平居中
文本:在父元素内写入text-align:center
块元素:在你要居中的块元素写入 div{margin:0 auto;}
利用auto自适应的特性,参照于父元素水平居中
12.网页版心
根据电脑分辨率宽度设计的,早期电脑分辨率较低,版心通常为960px,980px,1000px
版心是固定宽度且居中于浏览器的
通栏盒子(版心之外的区域)为无固定宽度的盒子,根据浏览器的宽度决定
13.文本环绕
块元素浮动时,永远不会覆盖或压在下面的文字中,文字会环绕着块元素显示
14.LOGO的规则
在web页面里,h1标签只能出现一次,并且只能给logo用,而点击logo会跳到首页,所以说,在h1里还有嵌套一层a标签,然后才是logo
横向布局,每一块基本都用浮动
15.overflow三个属性
Hidden:多余的内容给你切掉
Scroll:多余的内容,给你加滚动条(没有溢出的话,也会多个条)
Auto: 多余就加滚动条,没有多余就切掉
16.
浮动也是一种解决外边距塌陷的解决方案
17.
父元素设置了浮动,子元素设置了向上的浮动,不会造成外边距的塌陷
子元素设置了浮动,在给向上的外边距,也不会造成父元素外边距的塌陷
18.
Span div p等等就是普通的显示模式
浮动是半脱离文档流,会影响周围的盒子
定位是完全脱离文档流,相当于一个飞机,不会影响周围的盒子
19.
绝对定位和相对定位的配合使用原则(子绝父相)
当元素设置为绝对定位后,设置宽高起作用
20.
层级(z-index):当元素设置定位后,默认层级都是0,当层级相同时,后写的标签会压在先写的标签上面
层级的取值范围为整数 负数 0 整数
可能把层级想象成z轴,空中作业
针对于子绝父相的原则,如果爸爸级别和爷爷级别都有reletaive相对定位,那么设为绝对定位的子元素会优先找爸爸级别的父元素作为定位基准
21.
CSS精灵,也叫CSS sprite,CSS雪碧图,是一种背景图技术
由于现在网速比较快,稀缺资源为服务器连接数,将很多的小图放在一个大图里,一次性进行下载,在将很多小图进行位置移动,在需要的位置显示对应的图片位置.
CSS精灵移动的永远是负值,最大的是0
!---------------感受:最初的阶段,刚开始会让你简单的认识一下浏览器,之后就是三剑客的前两位,学完html4和css2.1的常用标签 中间简单的学习下ps(切图,吸色,量宽高) 一般都会让你仿个首页 淘宝 京东都可以
越丑越好(显得有个性) 穿插着js笔记是从某某面试题摘得 芜锁胃
这里有个小贴士,因为之前我一直搞不懂绝对定位和相对定位,就这么理解,绝对是相对与父元素的,会脱离文档流;相对是相对于自己的,不会脱离文档流

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值