百度暑期前端实训DAY1心得

最新推荐文章于 2022-07-05 09:44:58 发布

ksk_19

最新推荐文章于 2022-07-05 09:44:58 发布

阅读量300

点赞数

文章标签：前端 css html javascript

本文链接：https://blog.csdn.net/m0_50904831/article/details/125538543

版权

CSS部分

1.CSS的结构

2.CSS标签选择器、类选择器（最常用）、id选择器

1.CSS flex布局在css中写作display:flex;

5.DOM基础（Document object model）

前端工程化部分

第一课是htmlcssjs基础。该博客主要是课程概览和关键词的记录，方便日后查找相关知识。

以前学过的就不记了，实验案例也不记，一个是因为代码不全一个是觉得自己敲一下掌握快一些。

CSS部分

1.CSS的结构

2.CSS标签选择器、类选择器（最常用）、id选择器

（优先级从低到高）

①标签选择器nav{}
这样的样式是给特定的标签直接定义样式时使用的，这个样式名称是跟标签是相对应的，比如我要给<div></div>这个标签设置样式，那我就可以直接写：div{样式}就可以。
②类选择器.nav{}

这种前面加 “.” 的样式，是说明该样式是由类调用的，也就是容器是使用class调用这个样式的，这种样式是可以被多个不同的容器多次重复调用而没有限制的，属于共有样式。
③id选择器#nav{}

这种前面加 “#” 的样式是ID调用的，就是容器使用id=“#nav”这样来调用的，这样的样式是一次性的，专有的样式，即该样式只能是一个指定的容器只能调用一次这个样式，其他容器不能再次调用这个样式，也不可以多次调用，属于私有样式；

例：
<div class="demo1" id="demo2">示例一</div>
<div class="demo1" id="demo3">示例二</div>
<div class="demo4" id="demo5">示例三</div>
示例的需要的样式是红色、宋体字，示例二是黑色、宋体字，而这三个示例都需要水平居中显示，那么他们的共同点就是示例一和示例二都需要宋体字，三个示例都要居中显示，那么就可以这样写样式：
<style>

</style>

其他：

类选择器可以多个，如下：

类选择器的常规命名法：BEM

3.属性选择器

4.伪类选择器

5.后代选择器（嵌套）

Of course可以用类选择器替换

6.一些常用效果（如鼠标、阴影）

7.loading动画

Web布局部分

1.CSS flex布局在css中写作display:flex;

flex容器上的属性

flex-flow是前两个的总写

flex元素上的属性

flex是前三个的总写

JS部分

1.在html输出

document.body.innerHTML = “Hello World”;

在console中输出

console.log(“要输出的内容or变量”);

2.变量声明

举例：let a = 1;//let不能重复声明，但可以修改值和类型

举例：const b=1;//不能修改

const arr1 = [10,20,30]//数组声明

arr.push(40);//增加数组元素

3.class基本语法

4.简单的数字时钟

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
setinterval()用法

setInterval(code,millisec[,"lang"])

　　后面就两个参数code是你的js代码，millisec为时间间隔，以毫秒计

5.DOM基础（Document object model）

Dom是HTML的编程接口

dom树

Dom的基本操作：增删改查

前端工程化部分

模块化开发：es6 module,commonJS,AMD

打包：webpack,rollup

组件化

组件库：santd等

Babel

CSS预处理器：一种能用自己的语法生成css的程序

第一次作业

学习 html、css、js 并尝试实现一个 hello world 页面，在页面中显示“Hello World！”以及两个按钮，点击“变为红色”按钮可以改变文字颜色为红色，点击“复原”按钮颜色恢复为默认颜色。

style.css:

div{
    text-align:center;
} 
button{
    background-color:dodgerblue;
    color:white;
    width: 300px;
    height: 47px;
    border:0;
    font-size: 16px;			
    border-radius: 30px;
    cursor:pointer;
}

main.js:

function red()
    {document.getElementById("b2").style.color="#FF0000";}
function black()
    {document.getElementById("b2").style.color="#000000";}

indes.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BAIDUSUMMER_HOMEWORK1</title>
    <!-- style css -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body >
    <div>
        <h1  id="b2">Hello World!</h1>
        <button onclick="red()" id="b1" >变为红色</button>
        <button onclick="black()" id="b1" >复原</button>
    </div>
<!-- Javascript files-->
<script src="js/main.js"></script>
</body>
</html>

特别简单，而且也不算分 sad