Web
1.Web:全球广域网,也称万维网(www World Wide Web),能够通过浏览器访问的网站。
2.前后端分离开发:
如果是前后端不分离开发(混合开发),那么前端和Java程序都会在后端服务器中,,并且没有了前端服务器:
Web前端开发
1.Web标准:
- Web标准也称为网页标准,由一系列的标准组成,大部分由W3C(World Wide Web Consortium,万维网联盟)负责制定
- 三个组成部分:
1)HTML:负责网页的结构(页面元素和内容)
2)CSS:负责网页的表现(页面元素的外观、位置等页面样式,如:颜色、大小等)
3)JavaScript:负责网页的行为(交互效果)
HTML
1.HTML(HyperText Markup Language)超文本标记语言:
- 超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容
- 标记语言:由标签构成的语言。HTML标签都是预定义好的。例如:使用<a>展示超链接,使用<img>展示图片,<video>展示视频;HTML代码直接在浏览器中运行,HTML标签由浏览器解析
2.HTML结构标签:
<html>
<head>
<title>标题</title>
</head>
<body>
</body>
</html>
3.特点:
- HTML标签不区分大小写
- HTML标签属性值单双引号都可以
- HTML语法松散(比如最后的</html>没有了右边尖括号也不影响),但在写的时候尽量还是严格按照语法标准
4.图片标签<img>:
- src:指定图像的url(绝对路径/相对路径)
绝对路径分为绝对磁盘路径和绝对网络路径,前者不用多说,后者就是网页中图片的链接
如果使用绝对网络路径,要保证联网且对应的网址是有这张图片
相对路径:VScode中相对路径与IDEA中相对路径稍微有点不一样,IDEA中的相对路径是从当前项目开始,而VScode中相对路径是从当前文件所在的目录开始
- width:图像的宽度(像素/相对于父元素的百分比)
- height:图像的高度(像素/相对于父元素的百分比)
- 一般只指定宽度和高度的其中一个,另一个会进行等比例的缩放
5.HTML常用标签:
- 标题标签:<h1> - <h6>
- 水平线标签:<hr>,用于生成一条水平线
- 无实意的布局标签:<span></span>
- 无实意的布局标签:<div></div>
- 超链接标签:<a></a>
- 视频标签:<video>
- 音频标签:<audio>
- 段落标签:<p>
- 文本加粗标签:<b>/<strong>(strong标签具有强调作用)
- 换行标签:<br>
- 表格标签:<table>、<tr>、<td>
- 表单标签:<form>
- 表单项:不同类型的input元素(<input>)、下拉列表(<select>)、文本域(<textarea>)等
span标签特点:
一行可以显示多个;
宽度和高度默认由内容撑开;
不可以设置宽高(width、height)
div标签特点:
一行只显示一个(独占一行);
宽度默认是父元素的宽度,高度默认由内容撑开;
可以设置宽高(width、height)
超链接标签:<a></a>,属性:
href:指定资源访问的url;
target:指定在何处打开资源链接,_self:默认值,在当前页面打开,_blank:在空白页面打开
视频标签:<video>,属性:
src:规定视频的url;
controls:显示播放控件;(一定要写这个属性,否则展示出来的视频只是一张图片,无法操作;直接controls="controls",或者直接controls,因为如果属性值和属性名相同那就可以省略属性值)
width:播放器的宽度;
height:播放器的高度;
音频标签:<audio>,属性:
src:指定音频的url;
controls:显示播放控件
表格标签:
场景:在网页中以表格(行、列)形式整齐展示数据,如:班级表
<table>:定义表格整体,可以包裹多个<tr>
属性:
border:规定表格边框的宽度;
width:规定表格的宽度;
cellspacing:规定单元之间的空间。
<tr>:表格的行,可以包裹多个<td>。
<td>:表格单元格(普通),可以包裹内容,如果是表头单元格,可以替换为<th>。
表单标签:<form>
场景:在网页中主要负责数据采集功能,如注册、登录等数据采集。
属性:
action:规定当提交表单时向何处发送表单数据,URL,如果不指定,默认提交到当前页面
method:规定用于发送表单数据的方式。get、post。
使用get:默认提交方式,在url后面拼接表单数据,比如:.html?username=leap&age=18,但是url长度是有限制的
使用post:表单数据在消息体(请求体)中传递的,参数大小没有限制
表单项标签:
<input>:表单项。通过type属性控制输入形式
<select>:定义下拉列表,<option>定义列表项
<textarea>:文本域
表单项必须有name属性才可以提交
6.在HTML中无论输入多少个空格,只会显示一个。可以使用空格占位符:
CSS
1.CSS(Cascading Style Sheet):层叠样式表,用于控制页面的样式(表现)。
2.HTML中CSS的三种引入方式:
- 行内样式:写在标签的style属性中(不推荐)(属性名:属性值;不同的属性之间用分号隔开)
<h1 style="color: red;" >焦点访谈:中国底气 新思想夯实大国粮仓</h1>
- 内嵌样式:写在style标签中(可以写在页面任何位置,但通常约定写在head标签中)
<style>
h1{
color: red;
}
</style>
- 外联样式:写在一个单独的.css文件中(需要通过link标签在网页中引入 <link rel="stylesheet" href="文件位置">,link标签也写在head标签中)
<-- news.css -->
h1{
color: red;
}
<-- 对应的html文件 -->
<link rel="stylesheet" href="css/news.css">
3.颜色的表示形式:
表示方式 | 表示含义 | 取值 |
关键字 | 预定义的颜色名 | red、green、blue... |
rgb表示法 | 红绿蓝三原色,每项取值范围:0~255 | rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)... |
十六进制表示法 | #开头,将数字转换成十六进制表示 | #000000、#ff0000、#cccccc,缩写#000、#f00、#ccc |
4.CSS选择器:用来选取需要设置样式的元素(标签):
- 元素选择器
- id选择器(id不可重复)
- 类选择器(类名可重复)
- 三种选择器同时存在,id选择器的优先级最高,其次是类选择器,最后是元素选择器
// 元素选择器
元素名称{
color:red;
}
// id选择器
#id属性值{
color:red;
}
// 类选择器
.class属性值{
color:red;
}
// 例:
<h1 id="hid" class="cls">hello<h1>
// 元素选择器
h1{
color:red;
}
// id选择器
#hid{
color:red;
}
// 类选择器
.cls{
color:red;
}
5.CSS常用样式:
- font-size:设置字体大小(注意:记得加px)
- color:设置文本颜色
- text-decoration:设置文本样式
- text-indent:设置首行缩进像素值
- line-height:设置行高
- text-align:对齐方式
使用HTML和CSS进行页面布局
1.盒子:页面中所有的元素(标签),都可以看作是一个盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更方便地进行页面布局。
2.盒子模型组成:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)