前端学习笔记知识整理

前端学习知识整理

编辑器: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;
    }

Wuxin_233

发布了1 篇原创文章 · 获赞 0 · 访问量 41

私信关注