前端基础

1.HTML文档结构：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Bestforme</title>
  </head>
  <body>
  </body>
</html>

2.HTML基本语法：开始标签+属性+内容+结束标签

 

3.HTML元素：

　　自闭合标签：input、img、br、link

　　块级元素：div、p、h1/2/3/4/5/6、table

　　行内元素：span、img、i、button

　　结构元素div、span、thead、tbody、tr、td

4.CSS应用

　　1.行内样式

　　2.内嵌样式

　　3.外部链接

5.css选择器：

　　1.标签选择器

　　

列如：
    div{
    color:red;
}

　　2.class类名选择器

　　

.btn{
  color:red;  
}

　　3.id选择器

#btn{
  color:red;      
}

　　4.后代选择器

　　父选择器+空格+子选择器 { 样式 }

　　5.子元素选择器

　　

div>p
{
  background-color:yellow;
}

　　6.相邻兄弟选择器

　　

div+p
{
  background-color:yellow;
}

　　7.后续兄弟选择器

div~p
{
  background-color:yellow;
}

6.CSS属性

　　相同权重的，后面的样式覆盖前面的，或者选择器数量越多，权重越大，权重大的样式生效！　　

7.CSS布局-flex布局

弹性布局：设置了弹性布局的容器内所有子元素默认在水平上按序排列

设置弹性布局：通过设置display：flex；即可为当前元素开启弹性布局

设置了flex的元素下面的子元素设置flex：1；表示当前元素占满剩余空间

justify-content:定义水平方向对齐方式

align-items：定义垂直方向对齐方式

.filter-btn{
          flex:1;
          display:flex;
          justify-content:end;
   }
如下图：

　　

 

JS基础语法：

　　数据类型：数字、字符串、布尔值、null（空） & undefined（未定义）、数组、对象

　　javascript是弱类型语言，定义变量时不需要指定类型

　　模板字符串：

let test = 'a'+'b';
console.log('c${test}de'); 
会输出：//cabde

　const test = [1,'1'];
    test.length //2
    test[0] //1

　　

　　类型判断：

typeof 1 ==='number';
typeof 'abc' ==='string';
typeof true==='blooean';
typeof null ==='object';
typeof undefined ==='undefined';
typeof [] ==='object';
Array.isArray([])  //true
typeof{} ==== 'object';

JS条件判断要用 === ，不然会发生隐式转换；


if条件转换：转换为布尔值

　　Numbr的0 NaN

　　String空字符串

　　undefined

　　null

　　以上全为false，其他情况皆为true；

 

JS函数声明：

　　匿名函数，命名函数，箭头函数

数组和对象：　

　　对象：解构赋值

　　数组：push(),forEach()...　

posted @ 2022-03-14 12:01  笨比不会Java  阅读(44)  评论(0)    收藏  举报