前端速成教程（HTML、CSS、JS、Vue…）

Akira37

已于 2024-08-15 01:45:43 修改

阅读量3.3k

点赞数 105

文章标签：前端 javascript html css vue.js elementui ajax

于 2024-05-06 21:51:47 首次发布

本文链接：https://blog.csdn.net/Akira37/article/details/138486105

版权

JavaWeb开发 SSM框架基础前端速成——HTML、CSS、JS、Vue、Ajax、前端工程化

Web技术教程W3School：https://www.w3school.com.cn

文章目录

1 HTML、CSS简介
2 JavaScript
3 Vue
4 Ajax
5 前端工程化

1 HTML、CSS简介

1.1 基本标签

<html>
	<head>
		<title>Title</title>
	</head>
	<body>
	
	</body>
</html>

特点

HTML标签不区分大小写

HTML标签属性值单双引号都可以

HTML语法松散

标题标签：<h1>...</h1>（h1 → h6）
水平线标签：<hr>
图片标签：<img src="..." width="..." height="...">
- 绝对路径：绝对磁盘路径（D:/xxxx）、绝对网络路径（https://xxxx）
- 相对路径：从当前文件开始查找（./：当前目录，../：上级目录）
超链接：<a href="..." target="...">
- href：指定资源访问的url
- target：指定在何处打开资源链接——_self默认值，在当前页面打开；_blank在空白页面打开
音频<audio>、视频<video>
换行<br>、段落<p>（空格占位符 ）
文本加粗标签：<b>、<strong>

1.2 CSS样式

1.2.1 基本概念

引入方式

行内样式：<h1 style="...">
内嵌样式：<style> ... </style>
外联样式：<link href="css/xxxx.css">

1.2.2 选择器

优先级：id选择器 > 类选择器 > 元素选择器

类选择器

<style>
	.c1 {
     
		color: red;
	}
	.c2 {
     
		color: blue;
		border: 1px solid green;
	}
	.c3 {
     
		color: yellow !important;	/* 标注important以强行调用被覆盖的样式 */
	}
</style>

<!--对所有类c1标签生效-->
<div class="c1">red</div>

<!--可同时属于多个类，从而生效多种样式。若有重复则后面会覆盖前面的（除非important）-->
<div class="c1 c2">blue with green border</div>
<div class="c3 c2">yellow with green border</div>

ID选择器

<style>
	#x1 {
     
		color: red;
	}
</style>

<!--对id为x1的标签生效（注意id不可重复）-->
<div id="x1">red</div>

元素选择器

<style>
	div {
     
		color: red;
	}
</style>

<!--对所有该标签名（div）的标签生效-->
<div>red</div>

属性选择器

<style>
	.c1[type="text"] {
     		/* 可为类、id、标签名 */
		border: 1px solid red;
	}
</style>

<!--对类型为text的类c1标签生效-->
<input class="c1" type="text">

后代选择器

<style>
	.c1 .c2 {
     
		color: green;
	}
	.c1 > .c3 {
     			/* 使得仅对儿子生效 */
		color: blue;
	}
</style>

<!--对类c1标签中的类c2标签（亦可为ID或标签名）生效-->
<div class="c1">black <span class="c2">green</span></div>
<!--仅对类c1标签的儿子中的类c3标签（亦可为ID或标签名）生效-->
<div class="c1">black <span>black <span class="c3">black</span></span></div>

1.2.3 伪类

hover：当鼠标悬停在该标签上时产生的效果

a:hover {
   	/* 鼠标悬停在链接上时文字变红 */
	color: #ff6780;
}
.c1:hover .c2 {
   	/* 仅当鼠标悬停在类c1上时显示类c2的样式（成为块级） */
	display: block;
}

after：在该标签内部元素的尾部加上的效果

.c1:after {
   
	content: "";
	display: block;
	clear: both;
}

1.2.4 常用样式

高度和宽度：对行内标签默认无效，对块级标签默认有效（剩余空白区域也会被占用）

.c1 {
   
	height: 300px;	/* 高度 */
	width: 50%;		/* 宽度（仅宽度支持百分比） */
}

块级和行内标签

.c1 {
   
	display: inline-block;	/* 强行使以下样式对行内标签生效 */
	height: 100px;
	width: 300px;
	border: 1px solid red;	/* 边框：像素、线条实虚、颜色（可为transparent透明）。左边框为border-left，其他类似 */
}

<div style="display: inline;"></div>	<!--使该块级标签变为行内标签-->
<span style="display: block;"></span>	<!--使该行内标签变为块级标签-->

若父亲无宽度/高度，则会被其孩子支撑起来

字体和颜色等

.c1 {
   
	color: #00FF7F;					/* 颜色（支持RGB：#00FF7F为SpringGreen1） */
	font-size: 18px;				/* 字体大小（亦可直接为large、larger等） */
	font-weight: 400;				/* 字体粗细（亦可为bold、bolder等） */
	font-family: Microsoft Yahei;	/* 字体 */
	opacity: 0.7;					/* 透明度（0~1，1为不透明）*/
	text-decoration: none;			/* 取消文字样式（如链接默认的下划线） */
}

文字的对齐方式
- line-height：设置行高
- text-indent：定义第一个行内容的缩进
- text-align：规定元素中的文本的水平对齐方式

.c1 {
   
	height: 59px;
	text-align: center;		/* 文本水平居中（center） */
	line-height: 59px;		/* 垂直居中（像素值与高度height设置一致） */
}

/* 区域居中：见下文margin */

浮动：让标签浮动起来后，会脱离文档流，可能会覆盖其他内容（如背景）

<span>left</span>							<!--默认在左边-->
<span style="float: right">right</span>		<!--设置float为right，使之飘至最右边-->

<!--让块级标签浮动，脱离文档流，不再占用一整行-->
<div style="float: left; width: 200px;">block</div>	
<!--对于一堆浮动的标签，在同级子标签的最下面添加这一行，以防止覆盖其他内容-->
<div style="clear: both;"></div>			<!--与上面浮动的div不同，该div依旧占一整行-->

1.3 布局

盒子：页面中所有的元素（标签）都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）
在这里插入图片描述

常使用<div>和<span>这两个没有语义的布局标签来完成页面布局

<div>标签
- 一行只显示一个（独占一行）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高（width、height）
<span>标签
- 以后可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高（width、height）

常用属性（若只设置某方位可在属性名后加"-位置"，如padding-top、margin-left）

padding：内边距，顺时针上右下左顺序
margin：外边距，同上

/* 内边距：内部四方向空出的距离 */
.c1 {
   
	padding-top: 20px;				/* 分别为上、右、下、左空出的距离 */
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding: 20px 10px 5px 20px;	/* 按顺时针，上右下左空出的距离（为单一参数时为四方向设置相同值） */
}
/* 外边距：外部四方向空出的距离，同内边距 */
.c2 {
   
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
	margin-right: 20px;
	margin: 30px;
}

/* 去掉默认的外边距 */
body {
   
	margin: 0;
}

/* 内容水平居中（auto表示自动，默认为居中） */
.container {
   
	margin: 0 auto;		/* 第1个为上下，第2个为左右 */
}

position：位置，可设为fixed、relative、absolute等

/* fixed：固定在窗口的某个位置 */
/* 回到顶部按钮 */
.back {
   
	position: fixed;	
	width: 60px;
	height: 60px;
	
	right: 10px;
	bottom: 10px;
}

/* 对话框 */
.dialog {
   
	position: fixed;
	height: 300px;
	width: 500px;
	background-color: white;	/* 背景色 */
	/* 居中 */
	left: 0;
	right: 0;