为什么要学习WEB前端基础
由于JavaEE是BS模式，必须要使用浏览器渲染页面，程序都需要页面呈现数据。
所以后台开发，需要知道如何将数据显示在页面中。
学习WEB基础，就是学习开发网页。
网页是一个文件，后缀名为.html
浏览器
用于解析页面的平台。
| 名称 |
|---|
| 谷歌浏览器Chrome |
| 火狐浏览器FireFox |
| 微软IE/Edge |
| IOS Safira |
编写前端页面的工具
| 软件 | 下载 |
|---|---|
| HBuilder | HBuilderX-高效极客技巧 |
| VSCode | Visual Studio Code - Code Editing. Redefined |
| Sublime | Sublime Text - Text Editing, Done Right |
HTML
Hyper Text Markup Language 超文本标记语言
超文本：超级文本/超链接文本，超越了文本的限制，如多媒体文件、超链接等。
标记：也可以称为标签，用<>括起来的一个特定单词，整体称为标记或标签，分为单标签和双标签。
- 单标签：<单词/>
- 双标签：<单词></单词>
标签的类型
- 块级元素，占页面中的一整行。block
- 行内元素，占一行中的一部分。inline
标签的属性
标签第一个中括号中，使用 属性="值" ，让某个标签拥有特定属性。
如<meta charset="utf-8">中，charset="utf-8"就是meta标签的属性
chartset称为属性名，utf-8称为属性值。
如果有多个属性，使用空格隔开。
如<div id="xxx" class="xxx"></div>。
网页基本结构
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页主体
</body>
</html>创建一个文本文档，将以上内容进行保存，文档的后缀名改为.html，用浏览器就能解释运行。
HTML注释
<!-- HTML中的注释 -->
页面种显示颜色的方式
- 颜色单词，如red、blue、green等
- 颜色RGB。R-RED,G-GREEN,B-BLUE。rgb(255,0,0)表示红色，数字范围[0,255]，值越大，对应的颜色越深
- 颜色的十六进制RGB。#FF0000表示红色，相当于RGB(255,0,0)
资源的路径
-
绝对路径：资源的完整地址。如在线图片地址或带有盘符的地址
-
相对路径：从当前页面出发，找到图片所在位置
- 使用“../”跳出当前目录
- 使用"xxx/"进入xxx目录
常用标签
文字
| 标签名 | 作用 |
|---|---|
| h1~h6 | 块级元素。标题。文字加粗，1最大，6最小。通常用h1~h3 |
| p | 块级元素。段落。 |
| span | 行内元素。 |
| pre | 块级元素。预处理标签。 |
| i | 行内元素。倾斜。 |
| u | 行内元素。下划线。 |
| b | 行内元素。加粗。 |
| sub | 行内元素。文字下标。 |
| sup | 行内元素。文字上标。 |
| 以上标签都是双标签 |
用法：复制表情对应的十进制或十六进制的代码，最好使用span显示
<!--十进制 &#特定值;-->
<span>⭐</span>
<!--十六进制 &#x特定值; -->
<span>⌛</span>图片img
单标签，行内元素
<img src="图片路径" alt="无法显示图片时显示的文字" title="鼠标悬停时的提示文字" width="宽度" height="高度">列表ul/ol/li
双标签，块级元素，li是ul或ol的子标签
无序列表ul
默认每一项前用实心圆符号修饰
通过type属性修改符号
- disc 默认，实心圆
- circle 空心圆
- square 正方形
- none 去掉修饰符号
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>有序列表ol
默认每一项前用自增数字修饰
通过type属性修改符号
- a/A 英文字母
- i/I 罗马符号
- 1 默认数字
- none 去掉修饰符号
<ol>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ol>表格table
| 表格中的标签 | 作用 |
|---|---|
| tr | 表格中的行 |
| td | 每行中的单元格 |
| th | 特殊的单元格，表头，文字加粗居中 |
td可以通过
colspan=“3”属性实现跨3列
rowspan=“2”属性实现跨2行
<table border="1" >
<tr>
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<td rowspan="2">上午</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr>
<td>数学</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td colspan="6" align="center">午休</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>体育</td>
<td>音乐</td>
<td>自然</td>
<td>科技</td>
<td>美术</td>
</tr>
<tr>
<td>音乐</td>
<td>体育</td>
<td>科技</td>
<td>美术</td>
<td>自然</td>
</tr>
</table>
多媒体
音频audio
<audio controls autoplay loop muted >
<source src="xxx.mp3" type="audio/mpeg">
</audio>视频video
<video width="320" height="240" controls autoplay loop muted >
<source src="xxx.mp4" type="video/mp4">
</video>controls开启控制器
autoplay自动播放
loop循环
muted静音
谷歌浏览器，默认不允许自动播放非静音视频
水平线hr
<hr color="颜色" size="粗细" width="宽度">换行br
<br>a标签
行内元素，双标签。
超链接
可以通过a标签访问任何一个地址
<a href="资源路径" target="">点击跳转</a>target可以控制要访问的资源在哪里打开
-
_self 默认。在当前页面打开
-
_blank 在新页面打开
-
_parent 在父页面打开
-
指定的name名
- 如果是锚点的name，通过“#name“访问
- 如果是iframe的name，通过"name"访问
锚点
可以通过a标签定义锚点和访问锚点，实现当前页面的快速定位
1.设置锚点
<a name="锚点名"></a>2.访问锚点
<a href="#指定的锚点名">点击访问锚点</a>浮动框架iframe
<a href="xx" target="main">xx</a>
<a href="yy" target="main">yy</a>
<iframe name="main" src="页面的路径" width="宽度" height="高度">
</iframe>marquee标签
<!--
direction="left/right/up/down"朝向。默认left
behavior=""行为。scroll默认重复 slide移动到底后停止 alternate往复
scrollamount=""移动速度。
-->
<marquee scrollamount="10" direction="right" >
xxxx
</marquee>
表单和表单元素
表单form
双标签，用于接收用户输入的数据
<form action="表单提交的最终目的路径" method="表单提交方式">
</form>form表单有两个重要的属性
- action:设置提交路径
- 可以是一个页面，也可以是后台请求映射
- method:设置提交方式
- 默认值为get，表示使用get方式提交，提交的数据会暴露在浏览器地址栏中
- 设置为post方式，提交的数据不会暴露在浏览器地址栏中
-
表单元素
定义在表单form标签中的标签
常用表单元素 作用 input 单标签，行内元素。通过修改关键属性type，变化为不同的组件 select 双标签，行内元素。下拉菜单 textarea 双标签，行内元素。文本域 input标签type属性的值 作用 text 文本框 password 密码框 radio 单选按钮 checkbox 复选框 date 日历组件 number 数字组件 hidden 隐藏域 file 上传文件 image 图片提交按钮 submit 提交按钮 reset 重置按钮 表单元素中的属性 作用 name 用于提交数据时设置提交的参数名 value 用于设置组件的默认值 checked 用于设置单选按钮和复选框的默认选中 placeholder 用于设置输入框的提示文字 required 用于设置输入框为必填项 selected 用于设置下拉菜单默认选中 disabled 用于设置某个组件为不可用状态 readonly 用于设置某个组件为只读状态 max/min/step number独有，用于设置最大值、最小值和步长 rows/cols/ textarea独有，用于设置文本域的行数和列数 div标签
块级元素，双标签，没有任何特点。
页面布局时采用div布局。
-
CSS
Cascading Style Sheets 层叠样式表
用于控制HTML中标签样式的语言。可以精确到像素，美化修饰HTML标签。
CSS语法
样式名：样式值；
color:red;
font-size:20px;
选择器
用于选择页面中元素(标签)的工具。
id选择器
1.给标签添加id属性，对其命名
2.在style标签中通过**#id**名获取
通常用于选择某一个元素
<html> <head> <style> #test{ } </style> </head> <body> <div id="test"> </div> </body> </html>
class选择器
1.给标签添加class属性，对其命名
2.在style标签中通过**.class**名获取
通常用于选择一组元素
<html>
<head>
<style>
.test{
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</body>
</html>
元素/html/标签选择器
直接通过标签名获取。
通常用于选择一组元素。
<html>
<head>
<style>
div{
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>层次选择器
通过空格或>获取某个元素的子元素。
"元素A 元素B" 表示获取元素A下的所有元素B
""元素A > 元素B" 表示获取元素A下的第一层元素B
<html>
<head>
<style>
#father div{
获取其中的所有子元素
}
#father > div{
获取其中的第一层子元素
}
</style>
</head>
<body>
<div id="father">
<div>
<div>使用>无法获取该div</div>
</div>
<div></div>
</div>
</body>
</html>
群组选择器
通过,同时选择多个元素
<html>
<head>
<style>
div,#mp,.mu{
}
</style>
</head>
<body>
<div ></div>
<p id="mp"></p>
<ul class="mu">
<li></li>
</ul>
</body>
</html>将CSS写在哪里
1.写在标签的style属性中
style="样式:值;样式:值;"
<body style="background-color:red;">
</body>2.写在<style>标签中，通过选择器获取标签后控制样式
style标签通常放在head标签中
<html>
<head>
<style>
选择器{
样式:值;
样式:值;
}
/*获取页面中所有名为div的元素*/
div{
}
/*获取页面中class为test的元素*/
.test{
}
/*获取页面中id为test的元素*/
#test{
}
</style>
</head>
</html>
3.创建一个独立的.css文件，通过link标签引入
1.创建一个.css文件，将原本写在style标签中的内容保存在该文件中
2.在页面的head标签中，使用以下代码引入
<link rel="stylesheet" href="css文件路径">CSS优先级
style属性==>style标签==>引入css文件。
如果某个元素同时拥有id、class以及style属性时。
优先级从高到低
style属性==>id选择器==>类选择器==>元素选择器
常用样式
尺寸
只能对块级元素设置尺寸。
如果要对行内元素设置尺寸，需要先将其改为块级元素。
| 样式名 | 作用 | 值 |
|---|---|---|
| width | 设置块级元素的宽度 | px像素或百分比或vw |
| height | 设置块级元素的高度 | px像素或百分比或vh |
设置为像素时，元素不会根据浏览器的窗口大小变化而变化，是固定值。
设置为百分比或vh/vw时，元素会根据浏览器的窗口大小变化二变化，都是百分比。
如果元素需要根据实际窗口变化，宽度建议使用百分比，高度建议使用vh。
背景background
| 样式名 | 作用 | 值 |
|---|---|---|
| background-color | 背景色 | 颜色的单词、十进制RGB、十六进制RGB |
| background-image | 背景图 | url(图片路径) |
| background-repeat | 背景重复 | 默认重复。 no-repeat不重复 repeat-x表示x轴重复 repeat-y表示y轴重复 |
| background-size | 背景尺寸 | 默认加载原图。 100%表示完整显示图片。 cover表示覆盖元素。 如body的背景如果设置为cover，随着页面高度变大，背景也会变大，100%则会完整显示图片。 |
| background-position | 背景位置 | 可以同时设置x轴和y轴的距离。 如10px 20px表示向右移动10px，向下移动20px 也可以通过background-position-x或-y只移动具体轴 通过使用right left top bottom center设置指定方向 |
| background-attachment | 背景固定方式 | fixed表示固定背景，scroll或默认表示跟随滚动条移动 |
| background | 背景属性简写 | 可以同时设置图片路径、是否重复和图片位置，无关顺序。如 background:url(图片地址) no-repeat right top 表示图片不重复位于容器右上角 |
| background | 渐变函数 | linear-gradient(to left, #7a28c1, #a17fe0, #59C173) |
边框border
边框会"套"在元素外层，元素原本大小不变，但所占区域会变为原本大小+边框宽度
| 样式 | 作用 | 值 |
|---|---|---|
| border-style | 边框线型 | solid单线，double双线，dotted点线，dashed虚线 |
| border-width | 边框宽度 | 像素 |
| border-color | 边框颜色 | 颜色的三种写法 |
| border | 同时设置边框线型、宽度和颜色 | 1px solid red |
| border-方向-样式 | 某个方向的style或width或color。方向可以是left、right、top、bottom | border-bottom-color:red |
| border-方向 | 同时设置指定方向边框线型、宽度和颜色 | border-right:1px solid red; |
| border-上下-左右-radius | 设置某个方向为圆角 | |
| border-radius | 同时设置四个角为圆角。如果正方形，值设置为边长的一半变为圆形 | |
| outline | 轮廓。input文本框获得焦点时，会自动显示一个轮廓，通过将该属性设置为none去除轮廓 | |
| border-collapse | 合并相邻边框。通常用于表格设置边框时，将其值改为collapse，表示合并相邻td边框。 | collapse |
字体font
| 样式名 | 作用 | 值 |
|---|---|---|
| font-size | 字体大小 | 像素。默认16px，最小12px |
| font-family | 字体字型 | 默认微软雅黑 |
| font-weight | 字体粗细 | lighter细，bolder粗 |
文本text
| 样式 | 作用 | 值 |
|---|---|---|
| color | 文本颜色 | 颜色的三种写法 |
| text-align | 文本对齐方式 | 默认left，right右对齐，center居中 |
| line-height | 行高 | 像素。如果希望文字“垂直居中”，设置行高为所在容器的高度。 |
| letter-spacing | 字符间距 | 像素。 |
| text-indent | 首行缩进 | 像素。如果缩进2个字，默认设置为32px |
| text-shandow | 文本阴影 | 颜色 水平位置 垂直位置 模糊程度。如gray 4px 4px 3px 表示向右下角移动4px，模糊3px |
| text-decoration | 文本修饰 | under-line下划线，over-line上划线，line-through删除线。通常将a标签设置该样式为none表示去掉默认的下划线 |
| word-break | 英文换行方式 | 默认以单词为单位换行，不会拆分单词。break-all表示以字母为单位换行，会拆分单词。 |
列表list
| 样式名 | 作用 | 值 |
|---|---|---|
| list-style-type | 列表符号 | 通常用none去掉。 |
| list-style-image | 使用图片替换列表符号 | url(图片路径) |
| list-style-position | 列表符号位置 | 默认outside表示符号和文本分离。inside表示符号和文本绑定。 |
伪类
表示某个元素的某种状态。
用于对某些元素在不同的情况下呈现不同的效果。
如a标签在访问前、悬停时、访问时、访问后的四个状态对应四个伪类
| a标签伪类 | 作用 |
|---|---|
| a:link | 未访问时 |
| a:hover | 鼠标悬停 |
| a:active | 鼠标按住 |
| a:visited | 访问后 |
以上的:hover可以适用于很多标签，如div:hover。
但其余伪类只适用于a标签。
鼠标样式cursor
| 值 | 效果 |
|---|---|
| pointer | 光标呈现为指示链接的指针（一只手） |
| crosshair | 光标呈现为十字线。 |
| move | 此光标指示某对象可被移动。 |
| text | 此光标指示文本。 |
| wait | 此光标指示程序正忙（通常是一只表或沙漏）。 |
| help | 此光标指示可用的帮助（通常是一个问号或一个气球）。 |
| progress | 载入 |
显示方式display
| 值 | |
|---|---|
| block | 将元素设置为块级元素，能设置尺寸，独占一行 |
| inline | 将元素设置为行内元素，不能设置尺寸，占一行中的一部分，尺寸由内容决定 |
| inline-block | 将元素设置为行内块，能设置尺寸，占一行中的一部分 |
| none | 不显示，不保留自身位置，后续元素会顶替其位置 |
浮动float
让某个元素脱离原本的位置，朝某个方向对齐。
| 值 | 作用 |
|---|---|
| left | 向左浮动 |
| right | 向右浮动 |
| none | 清除浮动 |
float:left和display:inline-block的区别
相同点：都能让多个独占一行的块级元素位于同一行
display:inline-block
多个元素最终会位于同一行内，保留该行位置，元素以下线对齐，保留元素间的缝隙，后续元素是新的一行。
float:left
多个元素脱离自身的位置向指定方向贴合，不保留该行位置，元素向上线对齐，不保留元素间的缝隙，后续元素会顶替之前元素的位置
盒子模型
页面中的所有块级元素，都是一个“盒子”，每个“盒子”由元素自身、内边距padding、边框border、外边距margin组成
内边距padding：边框与元素自身之间的距离
外边距margin：元素A的边框与元素B的边框之间的距离
| 盒子模型相关样式 | 作用 |
|---|---|
| padding | 内边距。一个参数表示同时设置4个方向，两个参数表示上下 左右；三个参数表示上 左右 下；四个参数表示上 右 下 左； |
| padding-方向 | 某个方向的内边距，方向可以是left、right、top、bottom |
| margin | 外边距。如果某个值设置为auto表示自动将所在容器剩余距离除以2 |
| margin-方向 | 某个方向的外边距 |
一个元素的所占位置是外边距+边框+内边距+元素自身的大小。
溢出overflow
当子元素超出父元素的范围时，称为溢出。通过overflow控制溢出部分的表现。
默认显示溢出部分，溢出部分不会影响后续元素。
| 值 | 作用 |
|---|---|
| hidden | 溢出部分隐藏 |
| scroll | 使用滚动条 |
| visiable | 默认。显示。 |
盒子模型阴影box-shadow
类似于text-shadow，通常设置4个值 颜色 左右位置 上下位置 模糊程度
box-shadow:gray 4px 5px 6px 灰色阴影 向右4px 向下5px 模糊6px
定位position
将元素以像素为单位调整位置
| 值 | 作用 | |
|---|---|---|
| relative | 相对定位 | |
| fixed | 固定定位 | |
| absolute | 绝对定位 |
配合定位使用样式
| 定位相关方向样式 | 作用 | 值 |
|---|---|---|
| left | 元素距离页面左边界的左右距离 | 正值向右，负值向左 |
| top | 元素距离页面左边界的上下距离 | 正值向下，负值向上 |
| right | 元素距离页面右边界的左右距离 | 正值向左，负值向右 |
| bottom | 元素距离页面下边界的上下距离 | 正值向上，负值向下 |
文档流
页面中每个元素默认都有自己的位置，这个位置称为文档流。
如果某个元素脱离文档流，就会失去原本所占位置，让后续元素顶替其位置。
可以通过浮动float、固定定位fixed和绝对定位absolute让元素脱离文档流。
脱离文档流后，通过改变元素的left、top、bottom、right移动其位置
相对定义relative
让某个元素，相对于原本的位置进行定位。定位原点为元素本身的位置。
元素不会脱离文档流(后续元素不会顶替其位置)。
固定定位fixed
让某个元素脱离文档流，默认根据页面的四个边界进行定位。
通常用于放置一些工具、广告、返回首页等。
绝对定位absolute
让某个元素脱离文档流，根据已定位的父元素进行定位。如果没有已定位的父元素，会根据页面定位。
层叠z-index
某个已定位的元素，可以通过z-index控制其层叠顺序。
z-index是一个数字，数字越大，距离视线越近。
不透明度
取值范围[0,1]，值越大，越不透明
opacity
独立的样式，修改某个元素的不透明度
opacity:0.5;rgba
background-color的值的一种写法，修改背景的不透明度
background-color:rgba(255,0,0,0.5);转换transform
改变某个元素的状态，如旋转、移动、缩放等
| 值 | 作用 |
|---|---|
| rotate(30deg) | 顺时针旋转30度 |
| translate(10px,20px) | 向右平移10px，向下平移20px |
| translateX(10px)/translateY(10px) | 向右/向下平移10px |
| rotateX(30deg)/rotateY(30deg)/rotateZ(30) | 沿着X/Y/Z轴3D旋转30度 |
| rotate3d(1,1,0,30deg) | 沿着X和Y轴3D旋转30度(0表示该轴不变化) |
| scale(1.5) | 放大1.5倍 |
以上所有效果可以通过“transform:效果1 效果2 ...”同时设置，如
transform:rotate(30deg) scale(1.5) translate(10px,20px);过渡transition
设置某个转换效果完成所需的时间等
| 相关样式 | 作用 |
|---|---|
| transition-duration:3s | 所需时间 |
| transition-delay:2s | 延时生效 |
| transition-timing-function:linear | 时间函数 |
| transition:5s 2s ease | 2s后执行，所需5s，慢-快-慢 |
动画animation
1.定义动画的关键帧
@keyframes 动画名{
0%{
/*该阶段的样式*/
样式名:值;
}
25%{}
50%{}
75%{}
100%{}
}2.给某个元素设置animation样式
#xxx{
/*指定动画名*/
animation-name:动画名;
/*动画执行时间*/
animation-duration:3s;
/*延时*/
animation-delay:3s;
/*动画执行次数 infinite无限*/
animation-iteration-count:4;
/*动画时间函数 linear匀速 ease-in ease-out ease-in-out*/
animation-timing-function:linear;
/*简写 只写一个时间表示用时 写两个时间表示第一个是用时，第二个是延时*/
animation:动画名 5s 2s infinite linear;
}| animation相关样式 | 作用 |
|---|---|
| animation-name:动画名 | 执行指定动画 |
| animation-duration:3s | 动画执行时间 |
| animation-delay:3s | 动画延时时间 |
| animation-iteration-count:3 | 动画执行次数，infinite表示无限 |
| animation-timing-function:linear | 动画执行时间函数，linear表示匀速 |
| animation:动画名 5s 2s | 简写。只写一个时间表示用时 写两个时间表示第一个是用时，第二个是延时 |
滤镜filter
| 滤镜函数 | 作用 |
|---|---|
| grayscale(100%) | 灰度 |
| blur(4px) | 模糊 |
| brightness(150%) | 亮度 |
| contrast(150%) | 对比度 |
| hue-rotate(45deg) | 色调旋转 |
| invert(100%) | 颜色反转 |
| opacity(50%) | 不透明度 |
| saturate(2) | 饱和度 |
| sepia(80%) | 灰褐色(做旧) |
可以同时给某个元素设置多个滤镜
filter:滤镜函数1 滤镜函数2 ...;
最低0.47元/天 解锁文章
297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
