JAVA前端

已于 2023-08-09 18:43:20 修改
阅读量90 收藏
点赞数
文章标签： java 前端 开发语言
于 2023-07-31 17:42:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jfmyc/article/details/132026328
版权

HTML5文档基本格式

<!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><!结构身体部>
		网页内容
</body>
</html>

基础标签

加粗： <b></b> <strong></strong>  
倾斜： <i></i> <em></em> 
删除线: <del></del> 
下划线: <ins></ins> 
上标: <sup></sup>  下标： <sub></sub> 
缩写： <abbr title=""></abbr> 
标记： <mark></mark>
文本： <span></span> 
标题： <h*>标题标签</h*>h1-h6:从大到小的标题标签
换行: <br/>
字体标签： <font></font>
段落标签： <p></p>

常用标签

图片标签

<img>
属性:
src 引入图片地址
alt 替换文本
title 提示信息
width 宽
height 高

链接标签

<a href="url"> </a
属性:
href 地址
target 目标位置
target 属性值:
blank:新窗口打开、
new:新窗口打开
top:顶级窗口打开

标签的作用

  1. 打开外部文件
<a href="http://www.baidu.com">百度一下</a>
  1. 打开内部文件
<a href="test1.html">test1 文件</a>
  1. 打开一张图片
<a href="images/tulips.jpg">打开一张图片</a>
  1. 书写简单的 javascript
<a href="javascript:alert('这是一个弹框！')">提示框</a>
  1. 锚点(1)创建锚点
<a name="top"></a>
<a id="top2"></a>

(2)引用锚点

<a href='#top'>返回顶部</a>

滚动字幕

<marquee>滚动字幕</marquee>
属性：
direction：方向（left、right）
behavior：滚动方式（scroll、slide、alternate）
scrollamount：速度，值是正数默认为 6
scrolldelay：时间，值是正数默认为 0，单位毫秒
onmouseover="stop()" ：鼠标悬浮停止移动
onmouseout="start()"：鼠标离开开始移动

水平线

<hr />
属性
scrollamount：速度，值是正数默认为 6
scrolldelay：时间，值是正数默认为 0。单位毫秒
onmouseover="stop()" ：鼠标悬浮停止移动
onmouseout="start()"：鼠标离开开始移动
：
width:长度（px|%）
align：水平位置(left 左|center 中|right 右)
color：线的颜色
size：粗细（px

div块标签

div 元素是通用的块元素，内部可以包含其他各种元素包括其他 div
元素。

HTML媒体

我们可以使用 <video>和 <audio>标签来显示视频和音频

HTML 支持有序、无序和自定义列表

  1. 无序列表：使用<ul>标签来表示无序列表，其中每个列表项用<li>标签包裹。例如：
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>
  1. 有序列表：使用<ol>标签来表示有序列表，其中每个列表项用<li>标签包裹。不同于无序列表，有序列表会自动为每个列表项添加序号（数字或字母）。例如:
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>
  1. 自定义列表：使用<dl>标签来表示定义列表，其中每个术语使用<dt>标签包裹，对应的定义使用<dd>标签包裹。例如：
<dl>
  <dt>术语1</dt>
  <dd>定义1</dd>
  <dt>术语2</dt>
  <dd>定义2</dd>
  <dt>术语3</dt>
  <dd>定义3</dd>
</dl>

HTML 表格的基本结构

在HTML中，使用<table>…</table>定义表格标签可以创建表格。表格结构通常由以下几个关键组件组成：

  1. <th>…</th>：定义表格的标题栏（文字加粗）
  2. 行：使用<tr>…</tr>标签来定义表格的行
  3. 列：使用<td>…</td>标签来定义表格的列
    在<table>标签中我们可以使用<caption>… </ caption>标签作为
    标题，并在表的顶部显示出来

HTML 表格空间

有以下两个属性，用于调整 HTML 表格中单元格的空间：
cellspacing 属性-定义表格单元格之间的空间
cellpadding 属性-表示单元格边框与单元格内容之间的距离

  • 合并单元格
    • 如果要将两个或多个列合并为一个列，将使用 colspan 属性
    • 如果要合并两行或更多行，则将使用 rowspan 属性

表单

HTML 表单用于收集不同类型的用户输入
<from>表单元素</from>

文本表单

通过<input type="text">标签来设定，当用户要在表单中键入
字母、数字等内容时，就会用到文本域

密码字段

密码字段通过标签 <input type="password">
注意:密码字段字符不会明文显示，而是以星号或圆点替代

单选按钮

<input type="radio">标签定义了表单单选框选项

复选框

<input type="radio"> 标签定义了表单单选框选项

提交按钮

定义了提交按钮
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的
动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常
会对接收到的输入数据进行相关的处理

框架

整合框架
<frameset></frameset>
内联框架
<iframe></iframe>
属性：
idth 宽
height 高
scrolling 规定是否在框架中显示滚动条
src 规定在 iframe 中引入的 URL

css 层叠样式表

1、css 写法一 style 内联样式表
2、CSS写法二 内部样式
3、CSS写法三 外部样式表
<link rel="stylesheet" href="./class1.css">

层叠： 同一个元素使用了不同的样式表，所有的样式进行叠加就叫做层叠
冲突： 同一元素设置相同的属性会造成冲突，遵循就近原则选择属性值
继承： 在子父关系中，文本样式可以被继承，布局样式不可以被继承（块及元素继承父的宽，行级不可以）

颜色 color background-color
1、英语字母
2、 十六进制
3、rgb(0-255,0-255,0-255)
4、rgba(0-255,0-255,0-255,0-1)

  1. 标签选择器
  2. 全局选择器
{
          margin:0;
          padding:0;
      }

  1. class 选择器
    .q{background-color: aqua;}

  2. id # 独一无二
    #q{background-color: yellow;}

  3. 群组选择器
    b,a{background-color: red;}

  4. 层次选择器
    子代选择器 >
    ul>li{color:red;}
    后代选择器 空格
    去除无序列表的点
    .uu li{list-style: none;}
    相邻兄弟 +
    .ss+a{background-color: blue;}
    通用兄弟 ~
    .ss>li~a~p{background-color: chartreuse;}

  5. 伪类选择器
    ui伪类 a标签使用
    默认状态
    b+a:link{background-color: yellowgreen;}
    访问过后的状态
    b+a:visited{background-color: aqua;}
    鼠标悬浮
    b+a:hover{background-color: red;}
    鼠标按下
    b+a:active{background-color: orange;}

结构伪类
ul li:nth-child(3){background-color: orangered;}
a:nth-child(4){background-color: gold;}
ul p:nth-child(18){background-color: antiquewhite;}

css文字样式

css边框
1.元素的边框属性：
border 简写属性，用于把针对四个边的属性设置在一个声明
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。常用单位为像素(px)、em。
thin 细的边框。/medium 默认/thick 定义粗的边框。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
none 定义无边框。
dotted 定义点状边框
dashed 定义虚线
solid 定义实线。
groove 定义 3D 凹槽边框。
ridge 定义 3D 垄状边框。
inset 定义 3D inset 边框。
outset 定义 3D outset 边框。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。

  • border-bottom-color 设置元素的下边框的颜色。
  • border-bottom-style 设置元素的下边框的样式。
  • border-bottom-width 设置元素的下边框的宽度。
  • border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
  • border-left-style 设置元素的左边框的样式。
  • border-left-width 设置元素的左边框的宽度。
  • border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
  • border-right-color 设置元素的右边框的颜色。
  • border-right-style 设置元素的右边框的样式。
  • border-right-width 设置元素的右边框的宽度。
  • border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
  • border-top-color 设置元素的上边框的颜色。
  • border-top-style 设置元素的上边框的样式。
  • border-top-width 设置元素的上边框的宽度。
    2.CSS3 新增的边框属性：
    border-radius 设置所有四个 border-radius 属性的简写属性。
    同时设定四个角的圆角。
    分别设定左上 右下、左下 右上圆角。
    分别设定左上 、右上、右下、左下圆角。
    border-top-left-radius 左上角圆角边框。

阴影

box-shadow 添加阴影
向方框添加一个或多个阴影。
none： 无阴影。
阴影水平偏移值/阴影垂直偏移值/阴影模糊值/阴影外延
值/阴影的颜色/inset 内阴影(默认值为 outset)

CSS盒模型请添加图片描述

margin xxxx
一个参数代表上下左右的数据
两个参数时第一个代上下，第二个左右的数据
三个参数时第一个上，第二个左右的数据，第三给下的数据
四个参数时 上，右，下，左
argin：0px auto （水平方向居中） （外边距）
标准盒模型 div宽=内容的宽
怪异盒模型 div宽=内容宽+border+padding
box-sizing:border-box（转换怪异盒模型）
font-size:0(消空格)
opacity：0.3（透明度）
cursor:pointer(变小手)wait（等待）
overflow:hidden(溢出隐藏)scroll(溢出滚动条)
auto（自动）visible(默认,溢出显示)
display:none(隐藏)
display:block(显示)

浮动

文档流：包含代表元素的布局宽高背景颜色
文本流：包含文字元素内容
顺序是上，左，右，下
左浮：不脱离文本流脱离文档流
float:left
右浮：脱离文本流也脱离文本流
float:right
浮动带来的问题
1.对自身有影响都脱离文档流
2.对兄弟改变了布局
3.对父级造成了坍塌

清浮动

1.给父设置高（不推荐）
2.给使用浮动元素后面添加空的块级元素，clear：both；
3.after伪类清浮动 在浮动元素的父级上清楚浮动
父级::after{
content:“”;
display:block;
clear:both;
}
4.在父容器上添加溢出隐藏属性 overflow：hidden；

补充：
display:inline-block(转换行内块标签)
display:block（转换块）
border-radius:50%（设置圆）
transparent（透明色）

相对定位

position relative相对定位 top距离上 left距离左边。
相对定位不会脱离文档流，也不会脱离文本流
相对定位是根据原位置定位的

绝对定位

position absolute绝对定位 top距离上 left距离左边。
相对定位会脱离文档流和脱离文本流
相对定位是根据原位置定位的
绝对定位父级没定位，根据窗口定位，如果有定位，根据父级定位。

固定定位

position fixed固定定位。opac加透明度
脱离文档流和文本流
永远根据窗口定位，固定在页面中不会移动

粘性定位

position sticky
距离顶部xx像素才会移动
当没达到偏移量是，是相对定位，达到偏移量是固定定位.

z-index

设置元素的堆叠顺序。
z-index 可以设置元素的堆叠顺序，但必须搭配定位使用。

渐变

线性渐变

farthest-side:圆心到距离最远的边
o closest-corner：圆心到距离最近的角
o farthest-corner：圆心到距离最远的角
bbackground-image: linear-gradient(red blue)两种颜色的渐变，方向默认由上到下
background-image: linear-gradient(to right,red blue)能添加方向属性，改变渐变的颜色方向
background-image: linear-gradient( to right bottom,red,blue)添加方向属性，改变渐变的颜色方向
backgro und-image: linear-gradient(60deg,red,blue)添加角度，60度渐变

径向渐变：

background-image: radial-gradient
重复的径向渐变：repeating-radial-gradinet()
radial-gradinet()(形状 发散方向，起始颜色，终止颜色)
形状:ellipse（椭圆）/circle（圆形）
发散方向：属性值可以为 left、right、top、bottom、center (可组合使用)
重复渐变将属性修改为：repeating-linear-gradinet()

动画

css动画：
通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长
或拉伸。转换方法：
translate()/rotate()/scale()/skew()/matrix()

none 定义不进行转换。
translate(x,y) 定义 2D 平移转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值
动画 transform：translate{100px，100px}水平竖直方向上的位移
transition：0.3s 过渡时间
transform: scale(0.5)缩放为原来的0.5倍
transform: rotate(60deg)旋转，单位是度deg
transform-origin: right bottom;旋转的基准点
动画帧： @keyframes 动画名｛from｛｝ to｛｝ ｝
动画 animation:属性值（动画名 动画时长 贝塞尔曲线 开始时间 播放次数 ）
Transition：all 动画秒数 ease 0s；鼠标移开动画返回

Css过渡：

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

指定要添加效果的CSS属性

指定效果的持续时间。
还得要有设置触发过渡（例如鼠标悬浮时）
例如：宽属性过渡，过渡时间两秒

-webkit-transition: width 2s;(必须在上)
transition: width 2s; }

布局

布局
表格布局
display:table(转换成表格标签)
display:table-cell;
浮动
对自身的影响：脱离文本流，使元素独立起来并且可以设置宽高
对兄弟元素影响：改变兄弟元素布局
对父容器影响：造成坍塌
定位
left(左)
right（右）
固定布局：使用标准px单位
流式布局：使用百分百 %
多列布局：
列宽：column-width:xxpx;

弹性布局
Flex也叫弹性布局，可以实现子元素在父元素自动伸缩，特别适合移动端布局
display: flex; 弹性盒模型，默认主轴方向是x轴，起始线是左边开始
w-reverse x轴为主轴,起始线从右开始
column-reverse y轴为主轴,起始线从下开始
flex-direction 改变主轴方向
row x轴为主轴
colum y轴为主轴
rflex-wrap: wrap; 默认是nowrap不换行，子元素在父元素中换行 */flex-flow 以上两种的综合属性
设置子元素在父容器中主轴的排列位置的justify-content:space-between
两端对齐，有空余会分配给每个子元素中间space-around 将剩余空间分成元素的2倍
分别在元素的左右分配space-evenly 平均分配剩余空间

呆呆敲代码的小辰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端开发学java_Java前端开发需要学习什么
weixin_39692557的博客
02-12 3650
目前，国内外信息化建设已经进入基于Web应用为核心的阶段，Java作为应用于网络的最好语言，前景无限看好。然而，就算用Java建造一个不是很烦琐的web应用，也不是件轻松的事情。那么，具备JavaWeb开发能力需要掌握哪些知识？本文，动力节点Java培训小编就来详细说说JavaWeb需要掌握的技术！首先Java基础语法是基础，另外大家对于MySQL、JDBC、HTML和CSS、JavaScript...
java前端框架有哪些_web前端框架有哪些
weixin_42697609的博客
02-15 3249
前端开发并不难，但是要想做得优雅、健壮并不容易，使用一个好的前端框架能够帮你很多忙。本文列举了20个优秀的前端框架，供选择使用。1. Twitter BootStrap (Apache v2.0；响应式)(推荐学习：PHP视频教程)时髦、直观并且强大的前端框架，让Web开发变得更加容易。2. Foundation (MIT；响应式)最先进的响应式前端框架。3. 960gs(GPL&MIT；...
java前端开发_Java前端开发学习什么内容
weixin_42151373的博客
02-15 3031
Java是一门高级编程语言，现在java工程师需求很大，所以java的前景很好，有些朋友往java前端开发方向发展，那么，Java前端开发学习什么内容呢?动力节点java学院小编来告诉你。就目前市场行情来看，Java最流行的应用还是Web开发。像HTML、CSS、Javascript等都是基础的知识，一定要打好基础，另外作为开发人员对目前最流行的Javascript框架Jquery更是必学不可的。...
关于java前端的相关技术讲解
qq_58804301的博客
06-07 3465
----------------------------jQuery时代---------------------------- 1. HTML 2. css 3.JavaScript 4.JQuery 5. bootstrap 6.easyui ----------------------------前后端分离-------------------------------1. vue2.ElementUI (1)生命周期/钩子函数： (2)默认会执行的函数： (3)常用指令： (4)路..
java前端编译和后端编译理解
我的青春一去不复返
03-27 2223
导读： 1.前端编译 java前端编译是指：通过javac编译器（JDK的bin文件）把*.java文件转换为*.class文件的过程。 优点： 许多Java语法新特性（"语法糖"：泛型、内部类等等），是靠前端编译器实现的,而不是依赖虚拟机； 编译成的Class文件可以直接给JVM解释器解释执行，省去编译时间，加快启动速度； 缺点： 对代码运行效率几乎没有任何优化措施； 解释执行效率较低，所以需要结合下面的JIT编译； 前端编译器：Oracle ja...
java前端和后端的区别
deqing271的博客
04-07 2776
java"前端”是与用户直接交互的部分，包括你在浏览网页时接触的所有视觉内容--从字体到颜色，以及下拉菜单和侧边栏。这些视觉内容，都是由浏览器解析、处理、渲染相关 HTML、CSS、Javascript 文件后呈现而来。 java后端开发者使用这些工具编写干净、可移植、具有良好文档支持的代码来创建或更新 Web 应用。但在写代码之前，他们需要与客户沟通，了解其实际需求并转化为技术目标，制定最有效且精简的方案来进行实现。 java"前端”开发，就是要创造上面提到的网站面向用户的部分背后的代码，并通过.
idea开发java前端_Web前端开发神器 Intellij IDEA
weixin_35261213的博客
02-26 8884
1前言在创建项目中，IDEA提供了很多项目模板，比如Spring MVC模板，可以直接创建一个基于Maven的Spring MVC的demo，各种配置都已经设定好了，直接编译部署就可以使用。最开始自己创建maven web项目时，要么创建一个springmvc项目进行修改，要么创建了一个maven项目(不是web项目)，自己添加webapp目录添加配置web.xml文件，以及添加web moudl...
java前端学习路线_Java前端需要学什么？Java前端学习路线分享
weixin_39614276的博客
02-20 1895
Java前端需要学什么？JavaWeb学习阶段内容比较复杂，需要掌握的知识点有很多，HTML、CSS、Javascript等基础知识要打好基础，对目前流行的Javascript框架Jquery必需熟练掌握。小编列了Java前端学习大纲，供大家参考学习。Java前端学习大纲：数据库概念、MySQL安装与使用、SQL基本概念与通用语法、数据库的CRUD操作、数据库表的CRUD操作、数据库表中记录的基本...
Java前端和后端的区别
weixin_44057803的博客
05-31 6591
用于应用构建的服务器端语言:PHP, Ruby , Python,Java, .Net等; 数据相关工具:MySQL, Oracle, sQL Server等; PHP框架Q: Zend, Symfony, CakePHP等; 版本控制工具:SVN , cVs , Git 等; 还要熟练使用Linux 作为开发和部署环境 Java具有简单性、面向对象口、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点。Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等。 Jav
java前端接口怎么写_前端与java如何对接，能使前后端分离？
weixin_33034073的博客
02-25 1951
我们打算开发一个后台供应链系统，需要前端配合写页面，请问如何将前端写的页面与java对接，而互不影响？我了解过用vue + java， 可是是开发的后台系统，有没有其他的与java对接方式？能实现前后端分离，互不影响开发，提高工作效率的方式？ 多谢，多谢！项目开始前先把接口文档写好，然后java提供跟据接口文档写真实的接口，前端跟据接口文档模拟数据请求，这样就是同时开发，互不影响了，后期再进行接口...
java前端面试题
12-01
java前端面试题目
java前端交互
11-06
java前端交互 jar包，代码段
学生管理系统JAVA前端网站
09-21
学生管理系统JAVA前端网站
java前端岗位职责.docx
07-14
java前端岗位职责
常见java前端面试题及Java面试问题集
04-17
常见java前端面试题，以及常见Java面试问题集，供初级java工程师参考
jdk8新特性----Lambda表达式
w_t_y_y的博客
05-11 442
Java的Lambda表达式是Java 8引入的一个特性，它支持函数式编程，允许将函数作为方法的参数或返回值，从而简化了匿名内部类的使用，并提供了对并行编程的更好支持。
jar包增量更新分析
最新发布
junlaiyan的专栏
05-16 138
借助jdeps分析出jar包的增量文件
CMS垃圾回收器为什么被移除
m0_54187478的博客
05-10 521
由于上述缺点，加上需要将资源投入到更现代垃圾回收器的开发和优化上，Oracle决定从Java 9开始标记CMS为废弃，并在后续版本中完全移除CMS。这些新的收集器旨在提供更低的停顿时间和更高的性能，同时减少配置和维护的复杂性。当它在垃圾收集周期内无法足够快地回收内存时，会退回到一种需要完全暂停所有应用线程的老年代收集模式，这与它设计的初衷相违背。：CMS使用的标记-清除算法会导致较多的内存碎片。：CMS需要更多的CPU资源来执行垃圾回收的并发阶段，而且它在运行时对系统资源的利用也较为激进。
java导出excel动态加载多sheet多复杂表头
weixin_43931108的博客
05-14 204
java导出excel动态加载多sheet多复杂表头
Java前端爱心代码
04-29
Java前端开发主要涉及到使用Java语言进行前端开发，常用的框架有Spring MVC、Spring Boot等。以下是一些常见的Java前端开发技术和爱心代码的介绍： 1. HTML/CSS：HTML是网页的标记语言，CSS用于控制网页的样式。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值