一、前端介绍
| 技术 | 描述 |
|---|---|
| HTML | 用于构建网站的基础结构的 |
| CSS | 用于美化页面的，作用和化妆或者整容作用一样 |
| JS | 实现网页和用户的交互 |
| ==Vue== | 主要用于将数据填充到html页面上的 |
| ==Element== | 主要提供了一些非常美观的组件 |
二、工具软件
VsCode
在前端领域，有一个公认好用的开发软件叫VsCode，他就相当于IDEA
① 双击安装包，选择我同意此协议，再点击下一步
② 选择安装路径，点击下一步，其它的页面都默认就行，一直点下一步
③ 安装完成，运行VS Code
④ 插件安装
VS Code提供了非常丰富的插件功能，根据你的需要，安装对应的插件可以大大提高开发效率。我们安装下面几个：
-
Chinese (Simplified) Language Pack： 适用于 VS Code 的中文（简体）语言包
-
Code Spell Checker：拼写检查器
-
VueHelper：vue代码提示插件
-
Vetur：语法高亮，智能提示，emmet，错误提示，格式化，自动补全
-
IntelliJ IDEA Keybindings：仿IDEA快捷键
-
open in browser：浏览器打开
⑤ 切换皮肤
⑥创建项目
新建一个文件夹，类似于Java中的工程
⑦创建模块
在项目中新建一个文件夹，类似于Java中的模块
⑧编写代码
在模块下创建一个index.html文件，然后编写内容，点击浏览效果
三、HTML规范
"!"使用此符号，快速创建一个HTML的骨架结构 <!DOCTYPE html>声明HTML文档 <html lang="en">声明语言规范 head 标签是文档的头部，里面存放了文档的元信息（编码） title：html的标题 body 标签是文档的主体，里面存放了文档的内容 页面展示的所有元素都写在body部分下 HTML规范： 1.HTML分成两个部分 1-html标签：有特殊含义的标签，会被浏览器解析，呈现出不同的效果 2-html文本：原样输出文本 2.HTML的标签按分类： 单标签：自闭和标签，只需要写一个，<hr> 双标签：由开始和结束标签组成，<div></div> 3.HTML标签都有属性：通过属性修饰标签，添加额外的展示效果 例如: <hr color="red"> 4.HTML标签不区分大小写： <hr>和<HR>效果一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的页面</title>
</head>
<body>
你好！
<hr>
<HR>
</body>
</html>四、基础标签
4.1 标题
作用：用于将普通文字变成标题
语法： <hn>普通文字</hn> n表示范围：1~6，n>6默认为正文
特点：数值越大，字体越小 标题自带换行效果
属性： align：对齐方式 取值：left（默认值，左对齐） 、 center（居中） 、 right（右对齐）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body>
<h1 align="center">一级</h1>
<h2 align="right">二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>
<h7>七级</h7>
<h8>八级</h8>
</body>
</html>4.2 水平线
作用：在页面上生成一条横线
语法： <hr/>
属性： color：颜色， 用于设置颜色线条颜色，通过英文字母或者RGB表示
英文单词: red blue green pink purple yellow black white
RGB: #FFFFF
width：宽度， 用于设置线条的长度，可以是用绝对像素或者百分百设置
绝对: 100px 相对: 百分比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平线</title>
</head>
<body>
<h1>测试不同的横线</h1>
<hr color="purple">
<hr>
<hr color="#9EEEF0">
<hr color="pink">
<hr color="green" width="700px">
<hr color="blue" width="50%">
</body>
</html>4.3 段落和换行
换行： <br/>
分段： <p>一段内容，使用这个标签的效果是一段文字的上下会留出空白</p>
空格:  (中文) (英文)
一个 &emsp效果 = 三个 效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>段落和换行</title>
</head>
<body>
<p>
  传智专修学院是一所为互联网、人工智能、工业4.0培养高精尖科技人才的应用型大学。
<br>学校经江苏省宿迁市教育局批准，由江苏传智播客教育科技股份有限公司投资创办。
</p>
<p>
当今世界已进入人工智能、机器人时代，人工智能、机器人已成为未来30年、甚至50年科技革命最重要的发展方向。世界各国越来越重视，我国政府也高度关注人工智能的发展，无论是党的十八大、十九大，还是2017、2018、2019的政府工作报告，均提出要重点发展人工智能、机器人，并提升到国家战略层面。
</p>
<p>
  技术发展首要是人才，而我国这方面人才非常紧缺。根据国家相关部门测算，目前我国人工智能人才的缺口就已经超过了500万，国内的供求比例仅为1:10，供需比例严重失衡。并且随着社会信息革命的进一步深入，相应人才的缺口会越来越大。但在这些新技术面前，目前我国关于这方面人才的规模化培养，无论是高校还是科研机构，均没有成熟的培养体系和方案，都还处于摸索阶段。
</p>
</body>
</html>4.4 文字效果
<b>文字</b>：加粗标签
<i>文字</i>： 斜体标签
<u>文字</u>：下划线标签，在文字的下方有一条横线
<center>文字</center>: 文字居中显示
<font>文字</font>: 定义文字字体(face)，大小(size:1-7)，颜色(color)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字效果</title>
</head>
<body>
<p>
你看,这行文字加粗了:<b>乾坤未定,你我皆是黑马</b>
</p>
<p>
你看,这行文字倾斜了:<i>乾坤未定,你我皆是黑马</i>
</p>
<p>
你看,这行文字有个下划线呢:<u>乾坤未定,你我皆是黑马</u>
</p>
<p>
<center>
你看,这行文字可以居中:乾坤未定,你我皆是黑马
</center>
</p>
<p style="color: aquamarine;">
你来给这行文字设置下字体、大小和颜色呗!
</p>
<p>
<center>
<font face="楷体" size="8" color="pink">
你来给这行文字设置下字体、大小和颜色呗!
</font>
</center>
</p>
</body>
</html>4.5 超链接
作用：用于给文字添加超链接效果，点击文字是跳转一个目标页面
语法： <a>文字</a>
属性： href：用于指定超链接的跳转地址，支持绝对路径和相对路径两种写法
绝对地址: https://www.baidu.com/
相对地址: ./ 当前文件所在目录
../ 当前文件上层目录
target：用于指定页面打开方式
_self 在当前页签打开目标页面(默认)
_blank 在新页签打开打开目标页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接</title>
</head>
<body>
<a href="https://www.csdn.net/">CSDN-专业开发者社区</a> <br>
<a href="https://www.csdn.net/" target="_blank">CSDN-专业开发者社区</a> <br>
<!--
./ 当前文件所在目录
-->
<a href="./02-水平线.html">02-水平线</a> <br>
<!--
../ 当前文件上层目录
-->
<a href="../01-基本标签/04-文字效果.html">01-基本标签/04-文字效果</a>
</body>
</html>4.6 图像
用于在HTML页面中引入一个图片
语法： <img/>
属性： src：用于指定图片资源的路径，支持绝对路径和相对路径两种写法
alt：用于在指定咋图片丢失时要显示的文字提示
width：用于设置图片宽度（浏览器会根据设置的宽度按照比例自动调整高度）
title: 设置鼠标悬停时展示的文字内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图像</title>
</head>
<body>
<img width="500px" src="D:\Desktop\微信图片_20240730192854.jpg" title="这是我家果果">
<br>
<img height="500px" src="" alt="这里本该是果果的可爱照片">
<br>
</body>
</html>4.7 音频和视频
audio：定义音频。支持的音频格式：MP3、WAV、OGG
video：定义视频。支持的音频格式：MP4, WebM、OGG
src：规定音频的 URL
controls：显示播放控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音频和视频</title>
</head>
<body>
<h3>音频</h3>
<audio src="../img/jq.mp3" controls></audio>
<h3>视频</h3>
<video width="500px" src="../img/ds.mp4" controls></video>
</body>
</html>五、布局标签
5.1 无序列表
<ul>
<li>列表项</li>
<li>列表项</li>
</ul>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无序列表</title>
</head>
<body>
<h3>你喜欢的水果？</h3>
<ul>
<li>芒果</li>
<li>樱桃</li>
<li>桃子</li>
<li>提子</li>
<li>香蕉</li>
</ul>
<h3>友情链接</h3>
<ul>
<li>百度</li>
<li>新浪</li>
<li>搜狐</li>
<li>网易</li>
</ul>
</body>
</html>5.2 有序列表
<ol>
<li>列表项</li>
<li>列表项</li>
</ol>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>有序列表</title>
</head>
<body>
<ol>
<li>农业农村部部长堂人间被查</li>
<li>农业农村部部长堂人间被查</li>
<li>农业农村部部长堂人间被查</li>
</ol>
</body>
</html>5.3 定义列表
<dl>
<dt>大</dt>
<dd>小</dd>
<dd>小</dd>
</dl>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定义列表</title>
</head>
<body>
<dl>
<dt>线下门店</dt>
<dd>小米之家</dd>
<dd>服务网点</dd>
<dd>授权体验店/专区</dd>
</dl>
</body>
</html>5.4 基础表格
<table>：定义表格
border：规定表格边框的宽度
width：规定表格的宽度
cellspacing: 外边距
cellpadding: 内边距
<tr>：定义行
align：定义表格行的内容对齐方式
<td>：定义单元格
<th>：定义表头单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础表格</title>
</head>
<body>
<!-- 实现一个 3行*3列 的单元格 -->
<table border="1px" align="center" cellspacing="0px" width="200px" height = "200px">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr bgcolor="green" align="center">
<th>1</th>
<th>明明</th>
<th>23</th>
</tr>
<tr align="center">
<td>2</td>
<td>白白</td>
<td>23</td>
</tr>
<tr align="center">
<td>3</td>
<td>红红</td>
<td>20</td>
</tr>
</table>
</body>
</html>5.5 合并单元格
rowspan 用于指定单元格纵向跨越的行数
colspan 用于指定单元格横向跨越的列数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>合并单元格</title>
</head>
<body>
<!--
合并需求:
1. 合并1-2和1-3为一个
2. 合并2-1和3-1为一个
-->
<table width="300px" height="200px" align="center" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>1-1</td>
<td colspan="2">1-2</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>5.6 容器
作用：存储内容的容器（盒子），通常与css技术结合使用，完成页面的布局和美化
语法：<div>块级元素,独自占用一行</div>
<span>行内元素,内容有多大，就占用多少</span>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>div和span</title>
</head>
<body>
<div style="background-color: aquamarine;">
1
</div>
<span style="background-color: rgb(243, 141, 8);">
我是span
</span>
</body>
</html>
![[WUSTCTF2020]颜值成绩查询](https://i-blog.csdnimg.cn/direct/b2c9d26249484f7e8528cdd4ec6bb3ae.png)
