JavaWeb前端课程总结回顾

最新推荐文章于 2023-12-26 10:56:52 发布

杨羊羊咩咩～

最新推荐文章于 2023-12-26 10:56:52 发布

阅读量1.7k

点赞数 1

分类专栏：前端文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_48700248/article/details/121341435

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JavaWeb前期课程总结回顾

第一部分：html
第二部分：css
第三部分：Javascript
文章注明说明：

第一部分：html

基础概念

什么是HTML？
网络协议

hypertext markup language：超文本标记语言

环境准备

开发环境：
	|-- sublime、VScode、editplus
	|-- IDE：hbuilder、webstorm
运行环境
	|-- 浏览器即可（Chrome）

第一个页面

<DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>hello 标题</title>
</head>
<body>
<h1>hello Java web!</h1>
<h2>hello Java web!</h2>
<h3>hello Java web!</h3>
<h4>hello Java web!</h4>
<h5>hello Java web!</h5>
<p><div style="border: 1px solid red;">
	国家互联网信息办公室副主任赵泽良在会上介绍说，本次大会主题是<b><i>“迈向数字文明新时代</i>——<em>携手构建网络空间命运共同体”</em></b>，<br>将采用<b><u>“线上+线下”</u></b>相结合的方式举行，除在浙江乌镇设置实景会场举办各项活动外，还将邀请部分重要嘉宾以线上形式参会。
	</div>
</p>
<p>
	<hr>据悉，大会共设置20个分论坛，其间将举办世界互联网领先科技成果发布活动、“互联网之光”博览会和<del>“直通乌镇”</del>全球互联网大赛，并将继续发布<b>《世界互联网发展报告2021》</b>和,<strong>《中国互联网发展报告2021》</strong>蓝皮书<sup>[2]</sup>。
</p>
</body>
</html>

HTML的注释

<!--       注释      -->

常见的页面标签

p 		段落标签
hn(1~6)		标题标签
br 		换行标签
hr 		分割线标签
b/strong 	加粗标签
i/em 		加斜标签
sub 		下标标签（了解即可）
sup 		上标标签（了解即可）
div		标准块标签
span		标准行内标签

标签分类：

	块标签：占据当前行的标签，只要有内容，宽就占据100%（相对于父级），块标签是可以设置宽高。
	行内标签：只占据内容部分，不能设置宽高。

语义化标签：

H5新特性：让正确的标签干正确的事

header
section
footer
article
……

图片标签

<img src="G:\pictures\jdbc.png" alt="">
	<img src="./img/java2.png" alt="" style="width: 400px;height: 100px;">
	<img src="https://img1.baidu.com/it/u=1062876694,3042236286&fm=26&fmt=auto&gp=0.jpg" alt="">

	<hr>
	<img src="./img/java2.png" alt="这个是美景图片" title="这个是美景图片">
	<hr>

视频标签

<h1>视频标签</h1>
	<video style="width: 800px;" 
		src="I:\上课视频\java\java se\2021年暑假班\01.计算机的基本概念.mp4"
		controls
		autoplay
		muted 
		></video>

音频标签

<h2>音频标签</h2>
	<audio src="G:\myMusic\甘十九妹秦小合奏曲《勿相忘》.mp3"
		controls
		autoplay 
		></audio>

表格标签：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格标签</title>
</head>
<body>
	<h1>表格标签</h1>
	<table border="1" cellspacing="0" cellpadding="0" width="800">
		<thead>
			<tr>
				<td>用户名称</td>
				<td>用户性别</td>
				<td>用户邮箱</td>
				<td>用户年龄</td>
				<td>用户操作</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>110@qq.com</td>
				<td rowspan="3">18</td>
				<td>
					<button>删除</button>
					<button>更新</button>
				</td>
			</tr>
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>110@qq.com</td>
				
				<td>
					<button>删除</button>
					<button>更新</button>
				</td>
			</tr>
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>110@qq.com</td>
				
				<td>
					<button>删除</button>
					<button>更新</button>
				</td>
			</tr>
			<tr>
				<td colspan="5">张三</td>
				
			</tr>
		</tbody>
		
	</table>
</body>
</html>

在这里插入图片描述

表单标签：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>表单标签</title>
</head>
<body>
		<h1>用户注册</h1>
		<!--
			form标签是所有表单的提交标签
			action属性：表示提交的地址url
			method：表示提交的请求方式
					http网络协议的八种请求方式
			enctype:如果没有文件上传 则使用默认值，如果存在文件上传，则必须使用
			enctype="multipart/form-data"
			name属性  不能重复
			没有后端代码就加个“#”
			submit提交按钮
			<input type="button" value="提交数据">不会提交表单
			数据提交但是界面不变
			required必填
			placeholder填了内容就消失



		-->
		<form action="#" method="get" >
			<p>
			用户名称：<input type="text" id="username" name="username" placeholder="请输入用户名称" >
			</p>
			<p>
			用户密码：<input type="password" id="password" name="password"
			 placeholder="请输入用户密码" maxlength="6">
			</p>
			<p>
				用户性别：
				<input type="radio" value="男" name="gender">男
				<input type="radio" value="女" name="gender" checked>女
			</p>
			<p>
				用户爱好：
				<input type="checkbox" value="篮球" name="hobby">篮球
				<input type="checkbox" value="跑步" name="hobby">跑步
				<input type="checkbox" value="听音乐" name="hobby">听音乐
				<input type="checkbox" value="看书" name="hobby">看书
				<input type="checkbox" value="Coding" name="hobby" checked="">Coding

			</p>
			<p>
				用户头像：
				<input type="file" name="avatar" >
			</p>
			<!--em-->
			<p>
				用户博客:
				<input type="url" name="url" id="url" required="required"/>
			</p>
			<p>
				用户邮箱:
				<input type="email" name="email" id="email" />
			</p>
			<!--颜色调板<input type="color" name="" id="" />
			--时间<input type="time" name="" id="" />
			--日期<input type="datetime-local" name="" id="" />
			-->
			<!--
			<input type="number" name="" id="" />
			<input type="range" max="80" min="50" name="" id="" />
			隐藏<input type="hidden" name="id" id="" />
			-->
			<p>
				用户地址:
				<select name="address" id="address">
					<option>北京</option>
					<option>南京</option>
					<option>上海</option>
					<option>深圳</option>
					<option>浙江</option>
				</select>
			</p>
			<p>
				用户意见:
				<br>
				<textarea name="" id="" rows="10" cols="50"></textarea>
			</p>
			<p>
				
				<input type="submit" value="用户注册">
				<!--提交表单按钮
				<button>提交数据</button>
				<input type="button" value="提交数据">
				<input type="reset" value="重置">
				
				<input type="image" src="" />
				-->
			</p>


			div>p*10>ul>li*10{这是一个列表$}


		</form>

</body>
</html>

在这里插入图片描述

超链接标签

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
	<title>超链接标签</title>
</head>
<body>
<!-- 超链接
			herf：表示要跳转的url
			target：默认值是_self:表示在当前选择卡打开页面
				_blank:使用新的空白选项卡打开页面
				 -->
				<a href="http://www.baidu.com">百度</a>
				<a href="http://www.baidu.com"target="_blank">百度</a>


				<a href="a.html">本地页面</a>
				<a href="a.html" target="_blank">本地页面</a>

</body>
</html>

锚点功能

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
	<title>锚点</title>
	
</head>
<body>
	<div class="top" style="height: 300px;border: 1px solid red;" id="top">
<!--a标签的href没有值，默认是当前页面的路径-->
	<a href="#footer">回到底部</a>
	</div>
	
	<div class="content" style="height: 800px;border: 1px solid red;" id="content">
	<a href="#top">回到顶部</a>
	</div>
	
	<div class="footer" style="height: 500px;border: 1px solid red;" id="footer">
	<a href="#top">回到顶部</a>
	<a href="#content">回到中间</a>
	</div>


</body>
</html>

有序列表

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
	<title>列表</title>
	<style >
		ul{
			list-style: none;
			list-style-image:url(D:\JAVAweb课堂笔记\img/dot.jpg); 
			
		}
		ol{

		}


	</style>

</head>
<body>
	<h1>有序列表</h1>
	<ol>
	<li>您吃了吗？</li>
	<li>您吃了吗？</li>
	<li>您吃了吗？</li>
	<li>您吃了吗？</li>
	<li>您吃了吗？</li>
	</ol>
	

	<h1>无序列表</h1>
	<ul>
		<li>您吃了吗？</li>
		<li>您吃了吗？</li>
		<li>您吃了吗？</li>
		<li>您吃了吗？</li>
		<li>您吃了吗？</li>
	</ul>

	<h1>数据列表</h1>
	<dl>
		<dt>国际热点</dt>
		<dd>你在吗？</dd>
		<dd>你在吗？</dd>
		<dd>你在吗？</dd>
		<dd>你在吗？</dd>
		<dd>你在吗？</dd>
	</dl>
</body>
</html>

第二部分：css

CSS:装饰页面的技术 92，93年广泛

什么是CSS？

css（cascading style sheets）:级联样式表、层叠样式表，
是w3c提出用来装饰网页样式和UI等等。

CSS的几种写法：

行内样式  
style属性上写

页面样式（内联样式）
	style标签内部
外联样式
	写在一个独立的xxx.css文件中
	2007年 w3c 三层分离
	
	HTML	结构层
	CSS	表示层
	JavaScript

CSS的选择器：

基本选择器
包含选择器
属性选择器
css3提供的新式选择器

基本选择器：

ID选择器：
	#
类选择器：
	claas
标签选择器：
通配符选择器：margin   padding
逗号选择器：后面可以跟任何选择器

包含选择器：

子代选择器：
	news.>li只选择当前子代
后代选择器：news li
	所有属于包含的
使用复合选择器，将选择的范围尽量的准确化。

属性选择器：

通过属性反向选择标签
[属性]

常见样式

字体样式

font：修饰字体的快捷样式
color：修饰字体颜色样色
font-family：修饰选择字体
font-size：修饰字体大小
font-weight：修饰字体是否加粗
text-align：修饰字体水平对齐方式
line-height：修饰字体所占行高
text-decoration：修饰字体边线
text-shadow：字体阴影
box-shadow:盒子阴影

尺寸边框样式

width：元素宽度

height：元素高度

border：元素边框

box-shadow：元素阴影

display：元素显示/隐藏

背景样式

background：背景快捷方式

background-color：背景颜色

background-image：背景图片

background-position：背景定位

background-attachment：背景定位方式

background-repeat：背景重复

Background-size：  背景大小

定位样式

position：修饰定位方式

left：距离浏览器/父级元素左侧的距离

top：距离浏览器/父级元素顶部的距离

float：浮动

margin：元素的外边框

padding：元素的内边框

页面布局

盒子模型

div是一个标准块标签，而HTML的块标签都存在了 margin,padding,border 等属性，我们就可以
通过这些内边距、边框、外边距来控制不同的标签的布局和存放位置，这个就是我们经常说的盒子
模型。
自从 1996 年 CSS1 的推出，W3C 组织就建议把所有网页上的对象都放在一个盒子(box)中，我
们可以通过控制盒子属性，来操作页面。
盒模型主要定义四个区域：内容(content)、内边距(padding)、边界(border)和外边距(margin)，
DIV+CSS页面布局就是把每一个标签当做一个盒子，使用属性完成盒子的布局，标签之间就是
盒子嵌套、挤压盒子等。
在这里插入图片描述

CSS3 Grid布局

之前我们介绍了CSS3的Flexbox 布局方式，Flexbox布局方式是一维布局，也就是针对的是一行
或者一列，没办法对应多行多列，因此CSS3提供 Grid布局，Grid布局是多维布局方式。
Grid做前端的同学应该都很熟悉了，翻译成中文为“栅格”，用过bootstrap、semantic ui、ant design的同学肯定都了解grid layout（删格布局）。Grid作为一个二维的栅格系统，由若干列
（column）和行（row）构成。

具体案例请看下一篇

动画效果
|-- 过渡（transition）

|-- 变幻（transform）
	|-- 平移
	|-- 缩放
	|-- 旋转
|-- 帧动画

CSS的优化

大量的css重复，解决方案：
	1、less、sass编程语言
	2、合理的架构
		|-- 通过定义公共的样式
		|-- 定义公共的变量
			如果长度、颜色等样式重复，建议定义成css的变量

CSS的常见函数

var()
calc()
rgb()
rgba()
……

字体

注意：字体版权问题！！！！！

媒体查询
媒体查询

颜色渐变

自己使用想要的任何颜色（至少两种）实现颜色渐变的图片

网页中小图标：

1、图片：img标签，引入小图标，小图标的数量比较少时候，可以选择，如果小图标非常多，不建议使用这种方式
2、精灵图或雪碧图：
	将大量的小图标放在一个
3、SVG矢量图
	使用xml实现
4、通过css，自己实现各种小图标
5、使用字体图标，国内推荐阿里巴巴矢量图库

第三部分：Javascript

什么是JavaScript

JavaScript是一门面向对象的、弱数据类型、解释性、动态的脚本语言，简称js。诞生于1995
年，ECMAScript标准在1997年第一次制定。JavaScript 是一种具有面向对象能力、解释型的程序设
计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需
要在一个语言环境下运行，而只需要支持它的浏览器即可。它的主要目的是，验证发往服务器端的
数据、增加 Web 互动、加强用户体验度等

JavaScript可以干什么

JavaScript的主要作用有三个：
数据校验（js就是为这个诞生的）
网页特效（目前主要的使用场景）
数据交互（主要指Ajax技术）

JavaScript 的一些特点

JavaScript 是一个脚本编程语言。
脚本语言相对传统的编程语言而已，语法和规则相对没有那么严格。
avaScript 是解释执行。即JavaScript 在执行的时候，不会编译成二进制代码。而是将
JavaScript 代码调入引擎，然后解释执行。
JavaScript 的主要的作用，可以对网页的元素动态编程。
JavaScript是弱数据类型编程语言。
JavaScript是面向对象编程语言。

js的书写方式

在css阶段时，css当时有三种写法，js同样有三种写法。

行内js

使用HTML标签的onxxx这种属性（这种属性一般都是js和html互动的事件属性），完成js的书
写。
注意：事件中引号中不是字符串，是JavaScript代码！！！

<button onclick="alert('你点我干嘛？');alert('点你一下咋地？')">一点下试试</button>

页面内嵌js

就像刚刚写的第一个js程序–hello world，js写在script标签中。

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8" /> 
<title>js,hello world</title> 
</head> 
<body>
<script> 
alert('hello JavaScript， I am coming！！！'); alert('点你一下咋地？'); 
</script> 
</body> 
</html

注意：script标签在head和body中都可以书写，大家一般习惯写在head中，和css一样，但是基
于优化原则，建议script写在body的最后部分。

外联js文件

W3C在2007年，提出了三层分离原则，就是将HTML、css、JavaScript分离开，以便于程序的维
护和开发。
结构层 HTML
表示层 CSS
行为层 JavaScript
我们就可以在外部定义xx.js脚本（注意：后缀名必须是js），使用script标签引入，src属
性就是地址。

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

对话框

JavaScript为我们主要提供了三种对话框：警告框、确认框、输入框

警告框

警告框是JavaScript中使用较多的一种对话框，主要用来向用户展示警告信息。
警告框，只有一个标题信息和一个确定按钮。

<button onclick="alert('你点我干嘛？');
alert('点你一下咋地？')">一点下试试</button>

确认框

确认框又叫做疑问框，主要用来确定用户的操作，防止误操作所使用的。

// 确认框 
var isDelete = confirm("您确定要删除您的账号吗？"); 
alert(isDelete) 
if (isDelete) { 
	alert("数据删除了") 
}

确认框，有两个按钮，分别是确认和取消，如果用户点击了确认，则返回一个真
（true）的数据，如果用户选择了取消，则返回一个假（false）的数据，我们就可以通过这个值判断用户选择了什么，从而确定执行的代码。

输入框

输入框主要用来接收用户在页面输入的值（真正开发中几乎不用），主要用来测试代码。

// 注意：三种对话框函数都是window对象的方法，
所以可以通过window.alert()这种方式来调用 
// 当然也可以不写，直接调用，因为js中window就是全局对象，
默认访问就是window对象 
var age = window.prompt("请输入您的年龄：", "20"); 
alert("您今年是"+ age + "岁了");

关键字

在程序（不管什么编程语言）开发中，一般都存在着一些表示特殊含义的单词或者词组，这些
单词和词组都表示一些特定的意思，所以我们把这些单词就叫做关键字或者保留字，如 if、for、 while、else、try、function等。
关键字：已经在程序中表示特定的意思，如：for表示循环。
保留字：目前没有特定的含义，但是将来版本准备使用，如ES6之前的class保留字，当然现
在class也是关键字了。
在这里插入图片描述

变量的命名规范

在JavaScript中，变量的名称命名是存在规范的，主要需要遵循如下几条规则：
变量名只能有有效符号组成（大小写字母、数字、下划线_、 $），注意：在有些编程语言中$ 并不是有效符号，如python
变量名不能以数字开头！！切记
变量名不能使用关键字或者保留字
变量名最好有意义，如年龄使用age、姓名使用name，不要使用a、b这种无意义的单词
或者字母
变量名应当尽量遵循小驼峰法名称，如userName、classRoom等，当然下划线法也行，
如user_name。但是建议跟官方保存一致，使用小驼峰法，类的名称使用大驼峰法。

常量

和变量对应，变量是指在程序运行时可以值发生变化的量，而常量就是在程序运行时
不能变化、固定的量，JavaScript早期并没有专门的关键字来定义常量，一般就是变量充当常量，
在ES6之后，专门提供了const关键字来定义常量。

数据类型

JavaScript提供了两大类数据类型：基本数据类型和引用数据类型（对象、指针）。

基本数据类型

数值类型（Number） int 整数
float 小数、浮点数
布尔类型（Boolean）
只有两个值 – true、false
字符串（String）
被单引号或者双引号引起来的符号，ES6中两个`符号引起来的也
是字符串
空（null）
表示不存在
未定义（undefined、空的特殊表现）
表示引用未定义的变量
不是数字（NaN - Not a Number）
判断不是数字

引用数据类型

数值（Array） Object（对象）万物皆对象

BOM编程

在这里插入图片描述

DOM对象节点

在这里插入图片描述

鼠标事件

在这里插入图片描述

文章注明说明：

因为主要方向不是前端，所以是基于了解进行学习，下一篇会将一些经典案例展示。基础知识我所总结的大概有这些，大家想详细学习了解可以找网课和菜鸟编程上面也有。

杨羊羊咩咩～

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb前端课程总结回顾

JavaWeb前期课程总结回顾第一部分：html基础概念环境准备第一个页面常见的页面标签语义化标签：图片标签视频标签音频标签表格标签：表单标签：超链接标签锚点功能有序列表第二部分：css什么是CSS？CSS的几种写法：CSS的选择器：基本选择器：包含选择器：属性选择器：常见样式字体样式尺寸边框样式背景样式定位样式页面布局盒子模型CSS3 Grid布局CSS的优化CSS的常见函数颜色渐变网页中小图标：第三部分：Javascript什么是JavaScriptJavaScript可以干什么JavaScript 的
复制链接

扫一扫

专栏目录