从零开始的前端生活~No.1（0基础，学生向）

小白本白~

于 2024-08-11 18:15:03 发布

阅读量454

点赞数 23

文章标签：前端前端框架 css html javascript 学习

本文链接：https://blog.csdn.net/2302_76220607/article/details/140986486

版权

为手机端用户考虑，这里插入目录~~~

前言

本文根据学校前端老师上课所留思维导图拓展编写而成，（我会上传此思维导图，将在文章顶部展示，并可下载————文章篇幅较长，建议收藏慢慢学习~）

这里提供一张预览图（限于图片大小仅展示主干，详情可下载学习）

附：思维导图是在Xmind上制作的，格式也是.xmind，可能没有此软件会无法查看，这里提供Xmind的下载链接——戳这里~

特此说明：本文没有任何盈利目的，文件下载所需的会员要求也非小编设置，为平台自行限制，文件仅作学习交流使用，感谢老师的辛苦付出与支持~ps：封面链接在文章结尾处获取

前端的基本认识

提及前端，就不得不涉及到两种架构方式————B/S架构与C/S架构

B/S架构

B/S架构，即浏览器/服务器架构，是一种网络架构模式，将系统功能实现的核心部分集中到服务器上，简化了系统的开发、维护和使用。客户端只需要安装一个浏览器，通过Web服务器与数据库服务器进行数据交互。B/S架构利用了Web浏览器技术和Internet协议，实现了异构系统的连接和信息的共享。

C/S架构

即客户端/服务器架构，是一种分布式应用模式，将系统功能分为两层：客户端和服务器端。客户端负责用户界面和业务逻辑，服务器端负责数据存储和处理。C/S架构需要在每个客户端安装专用的软件，对网络和硬件资源的要求较高。

（选自“幻世界”的文章《什么是B/S架构》，原文戳这里~）

本文主要围绕B/S架构展开说明~

在B/S架构下，我们就可以制作浏览器的页面了，首先我们要清楚知道页面的组成，我们可以把页面的组成分为三个要素————内容，样式和布局，动效交互（附：这三个词汇并非专业术语，仅作说明使用），接下来将详细介绍三要素的内涵和彼此对应的实现工具~

三要素内涵与对应实现工具

内容方面

其实，“内容”的含义浅显易懂，就是指网页上的文字、图片、按钮、标题、输入框等等，这里就不多赘述，它所对应的核心实现技术就是我们耳熟能详的HTML（超文本标记语言），此语言专门用于制作网页内容除了上述提到的网页内容，它还可以直接插入视频与音频（附：前提是你可以取得视频、音频的直链，如果有直链存在就说明此视频、音频是可以直接下载到本地的，也就是说，如果此视频、音频是不对全部人群可见或可下载的，如“会员专享”，那么很大概率是无法获取它的直链的）

样式与布局方面

样式指的就是内容的颜色，大小，布局则是内容在页面中的位置，其所对应的实现技术为CSS语言。事实上，部分简单的样式与布局涉及也可以利用HTML语言来实现，但其完成后的效果和细节就远没有CSS制作的精良了

动效交互方面

动态交互其实就是用户与网页的互动效果，比如按钮点击后的反应，鼠标移至图片上出现的简介或响应，这里所对应的语言是JavaScript

以上三种语言/技术的编码平台普遍为VS code（全称是：Visual Studio Code），接下来会提供其下载链接与优缺点对比讨论

VS code下载链接

这里是下载链接~

以上的三要素的实现语言，可以在VS code上进行编码，可能会有人使用记事本编码，但在VS code上可以具体看到很多细节，代码出错也会有标识提醒，且敲代码时也会有连锁弹出，十分适合新手，记事本的好处在于无需安装，但每个代码都需手动打出来~~~记事本在编码简单的命令上，其便利程度就会显然大于软件编码了，这里在我的上一篇文章里有提到，主要是关于Windows批处理命令的，如有兴趣的同学可以前往学习交流，这里给出文章的跳转链接如何同时删除文件夹中的同一类型文件（“bat”批处理文件的简易实现）_怎么批量把文件夹中的指定的文件删除-CSDN博客

关于VS code的下载详情，以及安装完成后所需下载的拓展，可以移步至“dcczzzm”的文章《Visual Studio Code (VS Code)安装教程（配图超详细）》学习，这里给出跳转链接Visual Studio Code (VS Code)安装教程（配图超详细）_visual studio code安装教程-CSDN博客

各语言的基本语法与实例展示（附代码）

在下载完成VS code以后，点击左上角的资源管理器，鼠标移至“工作区”，会发现弹出三个小图标，点击其中的“新建文件夹”，然后点击新建的文件夹，在其中用上述方法新建文件（注意，尽量不要把文件夹新建在C盘，这样会浪费掉C盘的内存，一般在D盘即可），新建的文件夹可以自己随意命名成喜欢的名字，但你需要操作的文件在重命名后的文件名后缀需要改为特定的后缀名，如HTML文件的后缀名是.html，CSS文件则为.css，JS文件为.js

HTML

在上文中也提到了HTML即为超文本标记语言，顾名思义它的编写主要是由一个个标签完成的，其所采用的也是一种简便的标签语法，所用的基本格式如下所示

<标签名属性名=属性值属性名=属性值....>

文本/子标签

</标签名>

基本语法如下所示

<!DOCTYPE  html>
<html  lang="en|zh-CN">  <!--这里是网页的语言选择，en表示英文，zh-CN表示中文，如果选择英文，点击运行后网页会自动提示你是否要进行翻译-->
     <head>
              title       <!--这里是网页的名字（标题）-->
     </head>
     <body>
                          <!--这里就是网页的主体部分，你可以在这里插入你想展示的网页内容的所属标签-->
     </body>

</html>

可以看到，HTML的语法十分简洁明了，标签有头有尾，显得十分规整，（附：有的标签是单标签有头无尾）网页的主要内容也就是由这样的一个个标签所组成的，接下来介绍HTML的各个常用标签

文本标签

常用的文本标签有

<s>...</s> 效果：会使字体上带有删除线

<b>...</b> 用于加粗文本

<i>...</i> 以斜体格式呈现文本

<span>...</span> 其本身并没有特殊效果，但可以作为灵活变化的容器与CSS，JS结合使用

<u>...</u> 会使字体上带有下划线

标题标签

标题标签最多可以设置6个，<h1>...</h1>至<h6>...</h6>，可以在前标签中添加属性align，从而调整标题的位置如——

<h1 style=''align:center''>...</h1>

多媒体标签

多媒体标签又分为图片标签，视频标签，音频标签

图片标签

注意：此标签属于单标签，没有结束标签，可添加属性：src ，alt

src为图片的地址，alt是未显示图片时的默认文字，基本格式如下：

<img src=" " alt=" ">

视频标签

<video controls>
<source src=" " type=" " poster=" video/ ">
</video>

controls: 显示播放、暂停和音量控制等控件。
src: 指定视频文件的 URL（通常在 <source> 标签中使用），这里需要有前文提到的直链才能正常播放
type: 指定视频文件的格式
poster:可添加封面图片的地址

音频标签

<audio controls>
<sourcr src=" " type=" audio/ ">
</audio>

超链接标签

<a href="URL" target="可按需选择下列选项">链接文本</a>

href：指定链接的目标 URL。
target（可选）：指定在何处打开链接。例如：
- _self：在当前窗口或标签页中打开（默认）。
- _blank：在新窗口或标签页中打开。
- _parent：在父框架中打开。
- _top：在整个窗口中打开，移除所有框架。

按钮标签

<button type="button">按钮文本</button>

输入框标签

<input type="text" placeholder="请输入文本">

文本框：type="text" - 允许用户输入单行文本。
密码框：type="password" - 输入的内容会被隐藏，适用于密码。
电子邮件：type="email" - 验证用户输入是否为有效的电子邮件地址。
电话号码：type="tel" - 适合输入电话号码。
日期：type="date" - 选择日期。
复选框：type="checkbox" - 允许用户选择多个选项。
单选框：type="radio" - 允许用户从多个选项中选择一个。

placeholder用于显示为输入文本时的默认提示文字

下拉框标签

<select id="exampleSelect">
<option value="1">选项 1</option>
<option value="2">选项 2</option>
<option value="3">选项 3</option>
</select>

id：用于标识下拉框，通常与 <label> 标签搭配使用。
name：用于标识表单数据的名称。
multiple：如果包含此属性，用户可以选择多个选项，以下则是multiple的使用示例

<form>  
    <label for="colors">选择颜色:</label>  
    <select id="colors" name="colors" multiple>  
        <option value="red">红色</option>  
        <option value="green">绿色</option>  
        <option value="blue">蓝色</option>  
        <option value="yellow">黄色</option>  
    </select>  

    <input type="submit" value="提交">  
</form>

表格标签

基本结构：

<table>  
    <thead>  
        <tr>  
            <th>列标题 1</th>  
            <th>列标题 2</th>  
            <th>列标题 3</th>  
        </tr>  
    </thead>  
    <tbody>  
        <tr>  
            <td>数据 1-1</td>  
            <td>数据 1-2</td>  
            <td>数据 1-3</td>  
        </tr>  
        <tr>  
            <td>数据 2-1</td>  
            <td>数据 2-2</td>  
            <td>数据 2-3</td>  
        </tr>  
    </tbody>  
</table>

主要标签：

<table>：表示表格的开始和结束。
<thead>：表头部分，通常包含列标题。
<tbody>：表体部分，包含实际的数据行。
<tr>：表示表格的行（row）。
<th>：表示表头单元格，通常用来定义表头的内容，文本通常加粗并居中。
<td>：表示表格的单元格，用于定义数据内容。

HTML阶段综合作业展示

接下来的代码将涵盖上述大部分标签，作为使用示例展示

<!DOCTYPE html>
<html lang="zh">
    <head>
        <title>音乐列表页面</title>
    </head>
    <body>
        <table border="1px" cellpadding="0" cellspacing="0" align="center">
            <thead>
                <th>序号</th>
                <th>音乐的名称</th>
                <th>音乐的播放控件</th>
                <th>音乐的mv</th>
                <th>操作</th>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td><a href="https://music.163.com/#/song?id=29418062" target="_blank">最炫民族风 </a></td>
                    <td><audio src="http://music.163.com/song/media/outer/url?id=2013262191.mp3" controls></audio>
                    </td>
                    <td>这里插入MV的外链</td>
                    <td><button>编辑</button><button>删除</button></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td><a href="https://music.163.com/#/song?id=29723044" target="_blank">没有翅膀的天使</a></td>
                    <td>
                        <audio src="https://m701.music.126.net/20240811091044/75986668c993a4752765cc5928c969c8/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/44947596141/e523/8b9b/d1a3/07914c14b6353defb6561afe98724808.mp3" controls></audio>
                    </td>
                    <td>这里插入MV的外链</td>
                    <td><button>编辑</button><button>删除</button></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

附：因为实在找不到MV的外链了，这里就用文字代替

border:表格边框的磅数

cellpadding:各个框中内容与边框的距离（旧版中依然存在，单在HTML5中已无法使用）

cellspacing:各个框彼此之间的距离

以下插入运行后的效果图

CSS

使用方式

行内样式

任何一个HTML元素都有一个style属性，style属性就是用来设置CSS样式的，

style="css样式名：css样式值;css样式名：css样式值;....."

内联样式

使用选择器或者head标签中的style都可以实现内联样式，这里我们仅说明CSS选择器的使用

基本格式为：

css选择器

{ css样式名：css样式值;

css样式名：css样式值; ..... }

CSS选择器就是用来选择HTML界面上的元素内容的

其可以分为以下几种选择器：

id选择器

任何一个HTML元素还有一个id属性，id相当于元素的身份证号码，id属性值在一个HTML网页中必须是唯一的

基本格式：

#id值{ }

class选择器

任何一个元素都有一个class属性，class属性的属性值是可以在界面中重复的

.class属性值{ }

元素选择器

选中界面同一个标签的所有元素

标签名{ }

通配符选择器

*{ }

扩展选择器

扩展选择器又可分为伪类选择器，后代选择器，并集选择器

伪类选择器：

当鼠标移动到选择器选中的元素上之后才会触发css样式

选择器:hover{ }

后代选择器：

根据父元素选择子元素的

父元素的选择器子元素的选择器 ...{ }

并集选择器：

同时选中界面上的多个选择器指定的元素设置同一个样式

选择器1,选择器2,选择器3,.....{ }

外联样式

将内联样式的所有代码放到一个后缀名为css文件中，需要将css文件在html文件中引入一下

head标签中有一个link标签，link标签可以引入css文件,如下所示

在此插入外联样式的简单示例代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Document</title>
        <link rel="stylesheet" href="css/a.css">
        <style>
           
        </style>
    </head>
    <body>
        <span style="color:red;font-size:50px">文字</span>
        <span id="s1" class="c">文字</span>
        <span id="s2">哈哈哈</span>
        <button class="c">登录</button>
        <b>哈哈</b>
        <b>呵呵</b>
        <b>嘿嘿</b>
        <i>gg</i>
        <s>80</s>
        <div id="d1">
            <s>90</s>
        </div>
        <a href="">hahahah</a>
        <i>hehe</i>
    </body>
</html>

下面的代码则是其外联的CSS文件——a.css

#s2{
    color: green;
    font-size: 50px;
}
.c{
    font-size: 30px;
    color: blue;
}
b:hover{
    color: pink;
    font-size: 100px;
}
#d1 s{
    color: red;
}
a,i{
    color: red;
}

选择器的优先级

如果同一个元素同一种样式同时使用了多种方式定义，那么样式的优先级规则如下：

!improtant 优先级是有一个值 ∞

行内样式优先级 1000

id选择器优先级100

class选择器优先级10

元素选择器优先级1

常用样式

说了这么多，那么样式究竟有哪些？接下来将详细介绍CSS中的几个常见常用的样式

宽高

width height

他们带有单位————px 、vw、vh、百分比

字体样式

color：字体的颜色值有四种方式：

英语单词 rgb(xx,xx,xx) rgba(xx,xx,xx,x) 十六进制的颜色

font-size：字体大小

font-family:字体样式选择如：楷体

font-weight：字体的粗细 bold

text-shadow:增加阴影效果

px px px color

以上四个单位分别指的是：水平阴影偏移量，垂直阴影偏移量，模糊半径，阴影颜色

布局方式

前景知识

html的元素类型：

行内标签：不会独占一行，元素不能设置宽高 span b s u i audio

行内块标签：不会独占一行，同时元素可以设置宽高的 input button img video select a

块标签：独占一行，同时元素可以设置宽高的 div table h1~h6 p

任何一个HTML元素都有一个默认的元素类型的，默认类型能不能改 display: inline inline-block block

html的盒子模型：

任何一个HTML元素标签都是由四部分组成的，四部分类似于一个盒子

内容：文本以及width height

内边距:padding 内容和边框之间的距离

边框：border

外边距: 两个元素之间的距离 margin

元素的实际宽度：左边框+左内边距+width+右内边距+右边框

布局方式：

1、默认布局：利用元素的类型和盒子模型进行位置的放置

2、定位布局：选择一个参照物，然后将想定位的元素，参照参照物进行位置的放置。 left top bottom rigth

定位布局又分为相对，固定，绝对定位

相对定位

参照物的是该元素没有定位之前的位置| position:relative

固定定位

参照物就是浏览器 position:fixed,不会随着屏幕的滚动而滚动

绝对定位

参照物距离他最近的被定位过的父元素，如果他的父元素都没有被定位过，那么参照物就是浏览器 postion:absolute

CSS动画

事实上，CSS动画也是一种简易的动效，在不使用JS的情况下，也能用CSS进行简单的交互设计

CSS的动画使用包含两部分

1.定义一个动画

CSS中使用如下语法即可：

@keyframes 动画名

{ 0%{ css属性名：css属性值; }

1%{ }

...... }

2.将动画绑定成一个元素

CSS属性：

anmination：动画名字动画的时间动画的运行速度动画的周期

这里做一个简单的心型旋转效果的CSS动画（代码下方附解释）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            @keyframes jump {
                0%{
                    /* transform: rotate(-45deg) scale(0.5); */
                    transform: rotate(0deg);
                }
                100%{
                    /* transform: rotate(-45deg) scale(1); */
                    transform: rotate(360deg);
                }
            }

            .container{
                width: 200px;
                height: 200px;
                background-color: red;
                position: fixed;
                left: 50%;
                top: 50%;
                margin-left: -100px;
                margin-top: -100px;
                transform: rotate(-45deg);
                animation: jump 10ms linear infinite;
            }
            .first,.second{
                width: 200px;
                height: 200px;
                border-radius: 100px;
                background-color: red;
                position: absolute;
            }
            .first{
                top: -100px;
            }
            .second{
                right: -100px
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="first"></div>
            <div class="second"></div>
        </div>
    </body>
</html>

这里做简单的函数解释：

首先就是上述代码中使用的transform函数

常见的 transform 函数包括：

translate(x, y)：平移元素。可以使用像素（px）或百分比（%）。
scale(x, y)：缩放元素。x 和 y 分别表示水平和垂直方向的缩放倍数。
rotate(angle)：旋转元素。angle 可以使用度（deg）或弧度（rad）。
skew(x-angle, y-angle)：倾斜元素。x-angle 和 y-angle 表示 horizontal 和 vertical 方向的倾斜角度。

上述代码中使用的就是其中的旋转元素————rotate（deg），缩放元素被注释掉了，可以取消注释后观察效果~

JavaScript

JS的使用方式

内联：在HTML的任何一个位置都可以声明一个标签script标签，然后在标签中可以编写JS代码了在一个界面中，可以存在多个标签

外联：JS代码写到外部的一个js文件中，然后在html中引入JS文件基本格式为：

<script src="***.js"></script>

注意：一旦script加了src属性引入外部js文件，那么script中就不能再写js代码了

JS和HTML的交互事件

HTML内容想实现一些动效：按钮点击有反应、鼠标划过有响应...这些需求就可以用JS来解决，完成这些需求需要三个条件

1、事件源（HTML中任何一个元素都可以是事件源）

2、事件的触发动作

3、动作触发之后需要完成的事情

常见的触发动作有以下几种：

onclick

作用：当用户单击某个元素时触发。
用途：通常用于按钮、链接等，执行特定操作，如打开新页面、提交表单等。

<button οnclick="alert('按钮被点击！')">点击我</button>

上述示例代码的效果是：当你点击 “点击我” 后，浏览器会出现提示弹窗，内容为————“ '按钮被点击！' ”

ondbclick

作用：当用户双击某个元素时触发。
用途：可以用于实现双击选择或编辑操作等。

<div οndblclick="alert('元素被双击！')">双击我</div>

效果与前者相似

onmouseenter

作用：当鼠标指针离开某个元素的区域时触发。
用途：常用于隐藏 tooltip 或恢复高亮效果。

<div οnmοuseenter="this.style.backgroundColor='lightblue'">把鼠标放在我这里</div>

onmouseleave

作用：当鼠标指针离开某个元素的区域时触发。
用途：常用于隐藏 tooltip 或恢复高亮效果。

<div οnmοuseleave="this.style.backgroundColor='white'">把鼠标移开我</div>

onkeyup

作用：当用户在输入框中松开键盘上的键时触发。
用途：可以用于实时验证用户输入、搜索推荐等。

<input type="text" οnkeyup="console.log(this.value)" placeholder="输入文本...">

此外，JS中因为涉及种种交互，需要各种判定条件，自然也就离不开函数的使用，其中常使用的函数有：

if else

switch case

for while do while

接下来是一个简单的JS示例代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onmouseleave="fun()" onclick="fun()">按钮</button>
    <img id="im" src="https://emoji.bj.bcebos.com/yige-aigc/index_aigc/final/toolspics/pc_aigc.png" alt="" onclick="fun()">
    <script>
        function fun(){
            let i = 1
            switch(i){
                case 1:
                    window.alert("哈哈哈")
                    break;
                default:
                    window.alert("嘿嘿嘿")
                    break;
            }
            for(let j = 0;j<10;j++){
                window.alert(j)
            }
            
        }
    </script>
</body>
</html>