前端学习知识整理
编辑器:vscode
学习课程:腾讯课堂渡一 黑马前端等课程
♥ HTML+CSS ♥
HTML基础结构
> <!DOCTYPE html>
> <html lang="en">
> <head>
> <title></title>
> <meta charset="UTF-8">
> <meta name="viewport" content="width=device-width, initial-scale=1">
> <link href="css/style.css" rel="stylesheet">
> </head>
> <body>
>
> </body> </html>
html注释
<!--内容-->
css注释:
/*内容*/
js注释
单行代码 //内容
多行代码 /*内容*/
1 行级元素,内联元素 Inline
feature:内容决定元素所占高度
不可以通过css改变宽高
span strong em a del
凡是带有inline的元素都有文字特性
2 块级元素 block
feature:独占一行
可以通过css改变宽高
div p ul li ol form address
3 行级块元素 inline-block
feature:内容决定大小
可以改宽高
img
行级元素只能嵌套行级元素
块级元素可以嵌套任何元素
inline inline-block -->文本类元素
HTML特殊的标签
iframe frame 将别的网页整体引入自己的页面
css选择器类型
1 ID选择器
2 class
3 标签
4 通配符
5 属性
6 伪类
7 伪元素
8 子选择器 相邻选择器
权重
!important infinity
行间样式 1000
ID选择器 100
属性,伪类选择器,class 10
标签,伪元素 1
通配符 子选择器 相邻选择器 0
使用
position:absolute;
float:left/right;
会自动触发display:inline-block; 将元素转为行级块元素
盒子模型:
1 盒子壁 border
2 内边距 padding
3 盒子内容 width height
4 外边距 margin
模型四部分
margin+border+padding+(content=width+height)
触发一个盒子的bfc(block format context)
(可以清除浮动元素浮动流)
position:absolute;
display:inline-block;
float:left/right;
overflow:hidden;
position:absolute ; float:left/right
从内部把元素转换成Inline-block
伪元素处理
{
content:""
clear:both;
}
单行文字溢出处理三件套
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
文字图片处理
1 加文字 css三件套
text-indent:**px;
white-space:nowrap;
overflow:hidden;
2 加文字 改padding
height:0px;
padding-top:**px;
overflow:hidden;
♥ javascript ♥
浏览器的组成: shell 内核 渲染引擎(语法规则和渲染) js引擎 其他模块
javascript:解释型语言 单线程 ECMA标注
主流浏览器内核
IE ------------- trident
Chrome ----- webkit/blink
Firefox ------- Gecko
Opera -------- presto
Safari -------- webkit
定义变量:声明 赋值
JS是寄生语言,不能脱离HTML运行(node.js除外)
js语句基本规则
*语句后面要用分号结束 “;” exc funtion for else 等
*js语法错误会引发后续代码终结,但不会影响其他JS代码块
*书写格式规范 '+ - ='两边应当有空格,方便好看,便于程序维护
NaN:Not a Number
alert 弹窗
API(application interfaces) 通用程序接口
javascript运算符:
“+” 1.数学运算,字符串链接 2.任何数据类型加字符串都等于字符串
“-” “*” “/” “%” “=” “()”
优先级 “=” 最弱 “()” 最强
“++” “–” “+=” “-=” “*=” “%=”
赋值顺序 自右向左
计算顺序 自左向右
*比较运算符
“>” “<” “==” “>=” “<=” “!=”
比较结果为boolean值
*逻辑运算符
“&&” 与 (全真才为真) “||” 或 “!” 非
*运算结果为真实的值
被认定为false的值
undefined null NaN “” 0 false
值类型–数据类型
原始值(不可改变) stack
number var a = -123.123;
boolean var a = false/true;
string var b = “abcd”;字符串
undefined var b; 输出显示undefined
null var b = null;
由值决定类型
引用值 heap
array
object
funtion
…
date
RegExp
两者赋值的情况不一样
输入n
var n = parseInt(window.promat(‘input’));
条件语句
if(){
}
switch(){ //条件
case:**; //情况
}
break 中断语句
continue
循环语句for
for(var i = 0; i < 10; i++){
document.write('a');
}
while语句
while(){
}
js实现斐波那契数列n位次的数
var n = parseInt(window.prompt('input'));
var first = 1,
second = 1,
third;
if(n > 2){
for(var i = 0;i < n-2; i++){
third = first + second;
first = second;
second = third;
}
document.write(third);
}else{
document.write(1);
}
求100以内质数
var count = 0;
for(var i = 1; i < 100;i ++){
for(var j = 1; j <=i ; j++){
if(i % j ==0){
count++;
}
if( j==i && count==2){
document.write(i + " ");
}
}
count = 0;
}