2023年信息科学与工程学院学生科协第一次前端培训

一、前端是什么？

前端能做什么？

举几个例子：

1.有趣的特效：https://juejin.cn/post/7106018120036253710

2.高端的3D效果：https://www.midwam.com/en

3.好玩的游戏：http://hexgl.bkcore.com/play/

前端需要做什么？

如果把制作一个网页比喻成做菜的话，那么过程如下:
美工准备好素材及界面布局（色）
交互做好交互规则（香）
后端准备好数据（味）
然后前端工程师就像一个大厨，通过料理工具及调料（HTML、CSS、JS），把这些都整合起来，作出一道色香味俱全的佳肴（网页）。当然这盘菜还有诸多要考虑的地方，比如不同人群的口味（可以认为是浏览器兼容性），不光要Chrome、Firefox小伙子吃了说好，就是这个味儿，还得要口味比较怪的IE先生觉得也可以。

现阶段如何理解前端

前端现阶段可以理解为网站的前台部分，即运行在PC端移动端等浏览器上展示给用户浏览交互的网页

二、前端学习路线

要学会前端首先要熟练掌握三种语言:html、css以及js

html是什么？

html全称：HyperText Markup Language

翻译为： 超文本标记语言

我们将其分为三部分：超文本、标记以及语言

• 超文本：顾名思义，即为超级文本，相较于普通文本内容更为丰富，如下图所示，左侧记事本中所写文件即为普通文本，右侧网页中含有图片文字表格等等，且文字含有各种样式相较于普通文本更加“炫酷”
  

• 标记：文本要变为超文本，就要用到各种标记符号。举个例子，正如下图所示，我们用【】【】来替代前文中的“原神”二字，而规定此标记的含义为将普通文本中“【】【】”的部分替换为图片，通过这种方式使得我们可以将普通文本变为超级文本。
  

• 语言：当然在正常书写的过程中不可能会像上述案例一样随意，html有着自己的一套语法规则。

css是什么？

css全称：Cascading Style Sheets

翻译为：层叠样式表

我们仍将其分为三部分：层叠、样式以及表

• 样式：即调整图片文字等的大小，颜色，元素按高等。

• 层叠：即将样式一层一层的“叠”上去，让超级文本能够具有丰富的样式而非单一一种

• 表：即列表，指css的书写方式类似于列表

什么是js

js全称：javascript

别看他前面有个Java但实际上与Java关系并不大。javascript是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。说人话就是：他在网页中的作用就是赋予网页更好的交互性，以及动态效果。

html、css以及js关系

• HTML/CSS标记语言——描述类语言

HTML决定网页的结构和内容（决定看到什么），相当于人的身体
CSS决定网页呈现给用户的摸样（决定好不好看），相当于给人穿衣服、化妆

• JS脚本语言——编程类语言

实现业务逻辑和页面控制（决定功能），相当于人的各种动作

掌握三种语言之后的学习路线

• 1.jQuery

jQuery是一个快速、简洁的JavaScript框架，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

它能够将原本复杂的js代码进行精简，使我们能够更加方便的做出好看的交互功能

• 2.ajax

使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

在搭建一个网站的过程中我们不可能将所有数据都保存在前端页面中，这个时候就需要学习后端的同学与我们配合。ajax就是一种能够向后端发送请求，并接收后端数据的技术。

• 3.Vue

Vue 是一套用于构建用户界面的渐进式JavaScript框架。Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，易于上手，且便于与第三方库或既有项目整合。也是现阶段国内前端工程师使用最多的框架。

三、HTML基础语法

标题

标题（Heading）是通过<h1>-<h6>标签进行定义的。
<h1>定义最大的标题，<h6>定义最小的标题。

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

效果如图所示：

注意：规范使用标题，不要仅仅为了生成粗体或大号字体而使用标题。

标题标签位置摆放
在标签中添加属性：align="left|center|right"默认居左

段落文本

段落是通过<p>标签定义的。

    <p>这是一个段落</p>
    <p>这是另一个段落</p>

换行

如果你希望在不产生一个新段落的情况下进行换行（新行），请使用<br>。

    <p>这个<br>段落<br>演示了分行的效果</p>

效果如图所示：

文本标签

使用文本标签可以对文字进行简单的样式变化。

图像标签

网站中最多的元素毋庸置疑，一定是图片。
<img>标签定义html页面中的图像。

<img src="" alt="" title="" width="" height="">

注意：<img>是单标签，不需要进行闭合操作。

建立img文件夹，将图片放于此处。

在src处写下图片路径

<img src="./img/hhu.webp">

效果如图所示：

设定图片大小时，只需设置width或height，即可进行按比例缩放

链接

html使用标签<a>来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像。

    <a href="url">链接文本</a>

创建一个链接到百度官网的字段：

    <a href="https://www.baidu.com/">百度</a>

创建一个链接到百度官网的图片：

    <a href="https://www.baidu.com/"><img src="./img/百度.jpg"></a>

默认情况下，链接会以以下形式显示:

后期我们可以通过CSS修改这些样式

有序列表

通过<ol>标签和<li>标签来创立有序列表

    <ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
     </ol> 

效果如图所示：

可以在<ol>标签中添加type来改变列表属性

无序列表

通过<ul>标签和<li>标签来创立有序列表

    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
     </ul> 

效果如图所示：

可以在<ul>标签中添加type来改变列表属性

注意：列表是可以进行嵌套的

表格

表格标签
表格：<table>
行：<tr>
单元格（列）：<td>

注意：表格属性在<table>中设置

    <table border<