Java学习--前端基础学习_java前端-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_58289119/article/details/137856036

HTML

一、常用的实体标签

&nbsp：空格 &gt: >(大于号） &lt: <

二、超链接

1、新建页面（target用法）

情况分为三种：1.直接当前页面2.当前页面进入下个页面3.弹出一个新的页面

<a href="./test1.html">超链接--默认界面</a><br />
<a href="./test1.html" target="_self">超链接--当前界面</a><br />
<a href="./test1.html" target="_blank">超链接--新建界面</a><br />

2、锚点跳转

#：作为超链接的路径占位符；

若href=“#”，则点击超链接页面不会发生跳转，而是转到当前页面顶部；

若href="#目标id" 则跳转到页面的指定位置。

3、图片设置

<img src= " " alt= " " width= px />
/**一般设置宽度不设置高度，设置高度会失帧**/

src :属性指定的是外部图片的路径；
alt :图片的描述，这个描述默认情况下不会显示，浏览器会在图片无法加载时才显示;
width :图片的宽度（px）；
height :图片的高度（px）；

4、引入页面

内联格式：内联框架iframe ,用于向当前页面中引入一个其他页面。
src：指定要引入的网页的路径、frameborder：指定内联框架的边框。

举例：

<iframe
    src="https://www.baidu.com"
    width=" 800 height=”600 //引入页面的大小
    frameborder=”0" //边框为0 
></iframe>

CSS

1、选择器与样式规则

（1）选择器优先级

（2）基础选择器类型

全局选择器：

特点：以 * 号定义

*{
    margin：0;
    padding：0;
}

id选择器

ID属性：以＃号定义
不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

#myclass{
    backgroundcolor：green;
}

<h1 id="myclass">你好</h1>
/**使用id选择器**/

类选择器（class）

属性的特点：以 . 号定义
        类选择器可以被多种标签使用；
        类名不能以数字开头；
        同一个标签可以使用多个类选择器。用空格隔开

.oneclass{
    width:80px;
}

<h1 class="oneclass">你好</h1>
/**使用类选择器**/

元素选择器

特点：规定已有的元素

h1{
    color：grren;
}
<h1>你好</h1>
/**使用后你好就成绿色**/

（3）伪类选择器

1、:hover ：表示鼠标悬停在元素上时的状态

2、:active ：表示元素被激活或者点击时的状态

3、:focus ：表示元素获取焦点时的状态，如输入框被选中时

3、:first-child : 表示选择元素的第一个子元素

4、:last-child ：表示选择元素的最后一个子元素

（4）关系选择器

子代选择器

：选择所有作为E元素的直接子元素F,对更深一层的元素不起作用，用>表示

特点：E>F{}

例子：

相邻兄弟选择器

：选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择。

h1+p{
    color:red;
}

<h1>h1元素</h1>
<p>第一个元素</p> //这个有效果
<p>第二个元素</p> //无效果

通用兄弟选择器

：定义选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开语法

E~F{}
    h1~p{
        color:red;
        }
/**使用**/
<h1>h1元素</h1>    //下面都有效果
<p>第一个元素</p> 
<p>第二个元素</p>

常用的字体样式

熟悉文字属性，如字体、字号、字重、行高等，掌握如何通过CSS来控制文字的样式和布局

字体属性（font-family）：用于设置字体的名称，可以指定多个字体，按优先级逐个查找。

示例：font-family: Arial, sans-serif;

字号属性（font-size）：用于设置字体的大小。

示例：font-size: 16px;

字重属性（font-weight）：用于设置字体的粗细程度。

示例：font-weight: bold;

行高属性（line-height）：用于设置行间距，可以是具体的像素值或相对值。

示例：line-height: 1.5;

文本颜色属性（color）：用于设置文字的颜色。

示例：color: #333333;

文本装饰属性（text-decoration）：用于设置文字的装饰效果，如下划线、删除线等。

示例：text-decoration: underline;

文本对齐属性（text-align）：用于设置文字的水平对齐方式。

示例：text-align: center;

文本缩进属性（text-indent）：用于设置文字的首行缩进。

示例：text-indent: 20px;

换行处理属性（white-space）：用于设置文字的换行方式，如保留空白符、自动换行等。

示例：white-space: nowrap; //可以用于禁止文本换行，让文本内容在一行内保持连续显示。

背景和边框

背景属性

背景图片（background-image）：用于设置元素的背景图像，可以通过 URL 来指定图片的路径。示例：

background-image: url('example.jpg');

背景平铺方式（background-repeat）：用于设置背景图片的平铺方式，
常见的值有 repeat（默认，沿着水平和垂直方向平铺）、repeat-x（沿着水平方向平铺）、repeat-y（沿着垂直方向平铺）、no-repeat（不平铺）。
示例：

background-repeat: repeat;

背景图片起始位置（background-position）：用于设置背景图片的起始位置，可以使用关键词（如 top、center、bottom）或者具体的像素值来定位。
示例：

background-position: center top;

背景图像大小（background-size）：用于设置背景图片的大小，可以使用像素值、百分比或关键词（如 cover、contain）来指定。

示例：

background-size: cover;

背景颜色（background-color）：用于设置元素的背景颜色，可以使用颜色名称、十六进制值或 RGB 值。
示例：

background-color: #f0f0f0;

边框属性

边框宽度（border-width）：用于设置边框的宽度，可以是像素值、百分比或预定义的值（如 thin、medium、thick）。
示例：

border-width: 2px;

边框颜色（border-color）：用于设置边框的颜色，可以使用颜色名称、十六进制值或 RGB 值。示例：

border-color: #cccccc;

边框样式（border-style）：用于设置边框的样式，常见的值有 solid（实线）、dashed（虚线）、dotted（点线）等。
示例：

border-style: solid;

圆角边框属性：

圆角边框（border-radius）：用于设置元素的边框的圆角程度，可以单独设置每个角的半径，也可以统一设置。
示例：

border-radius: 5px; 或 border-radius: 5px 10px 15px 20px;

盒阴影和渐变

使用 box-shadow 创建阴影：

box-shadow 属性用于在元素周围创建阴影效果，可以控制阴影的位置、大小、模糊度和颜色。

.box {

  width: 200px;

  height: 200px;

  background-color: #ffffff;

  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* 水平偏移量 垂直偏移量 模糊半径 阴影颜色 */

}

在上面的示例中，box-shadow 属性用于在 .box 元素周围创建一个水平和垂直偏移量都为 5px，模糊半径为 10px，颜色为淡灰色的阴影。

使用 linear-gradient 创建线性渐变背景：

linear-gradient 值用于创建线性渐变背景，可以沿着一条直线改变颜色。

.gradient-box {

  width: 200px;

  height: 200px;

  background-image: linear-gradient(to right, #ff7e5f, #feb47b); /* 渐变方向 颜色起始值 颜色结束值 */

}

在上面的示例中，linear-gradient 创建了一个从左到右渐变的背景，起始颜色为 #ff7e5f，结束颜色为 #feb47b。

定位

position：

三种情况：relative相对定位——absolute绝对定位——fixed固定定位

绝对定位和固定定位会脱离文档流；
设置定位之后:可以使用四个方向值进行调整位置:left、 top、 right、 bottom。

相对定位和绝对定位之间的关系

设置定位之后,相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整,如果父级元素不存在定位,则继续向上逐级寻找,直到顶层文档

相对定位：

.box{
    width: 200px;
    height: 200px;
    background-color: red; 
    position: relative; 
    left: 100px;
}

绝对定位：脱离文档流，可以实现覆盖效果（多层结构）

<div class="box1"></div> 
<div class="box2"></div>
.box2{ 
     width: 200px; 
    height: 200px; 
    background-color: red;
    position:absolute; 
    left: 50px;
}
.box1{
    width: 300px;
    height: 300px;
    background-color: green;
}

效果图：

固定定位：不会随着滚动而滚动，实在在那个位置

.home-tool-bar[data-v-7f93789e] {
    position: fixed;
    bottom: 70px;
    right: 0;z-index: 99;
}
div{
   display: block;
}

效果：

其中z-index:谁大覆盖谁（相当于权重）

本来是box3覆盖box2的(默认是后面的覆盖前面的），但是由于box2的Z-index大，所以box2覆盖box3

弹性容器

怎么让一个盒子在父盒子中水平、垂直方向都居中？
：添加justify-content:center; Align-items:center;

.container{
width: 500px;
height: 500px;
display:flex;
flex-direction: column;
justify-content: center; //垂直方向居中
align-items: center;    //水平方向居中
}