分类前端技术下的文章

一文梳理总结HTML+CSS琐碎知识点快速上手前端开发_前端开发学到的html css js知识点总结

2024-08-07

在前端开发中，HTML和CSS是两个最基本和重要的知识点。HTML用于定义网页的结构，CSS用于定义网页的样式。

文档类型声明(DOCTYPE)

DOCTYPE是用来告知浏览器当前网页使用的HTML版本。通常位于HTML文档的第一行。




<!DOCTYPE html>
<html>
...
</html>

字符集

字符集用来指定HTML文档应该使用哪个字符集编码。




<meta charset="UTF-8">

标题标签(h1-h6)

h1-h6标签用于定义标题，h1为最高级别，h6为最低级别。




<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
...
<h6>这是一个标题</h6>

段落标签(p)

p标签用于定义段落。




<p>这是一个段落。</p>

链接标签(a)

a标签用于定义超链接。




<a href="https://www.example.com">访问Example网站</a>

图像标签(img)

img标签用于定义图像。




<img src="image.jpg" alt="描述文字">

列表标签

有序列表使用ol标签，无序列表使用ul标签，列表项使用li标签。




<ol>
  <li>第一项</li>
  <li>第二项</li>
</ol>
 
<ul>
  <li>第一项</li>
  <li>第二项</li>
</ul>

表格标签

table标签用于定义表格，tr标签用于定义行，td标签用于定义单元格。




<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

表单标签

form标签用于定义表单，input标签用于定义表单项。




<form action="submit.php" method="post">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username">
  <input type="submit" value="提交">
</form>

CSS样式

CSS用于定义网页的样式，可以通过内联样式、内部样式表和外部样式表三种方式来应用样式。




<!-- 内联样式 -->
<p style="color: blue;">这是一个蓝色的段落。</p>
 
<!-- 内部样式表 -->
<head>
  <style>
    p { color: red; }
  </style>
</head>
 
<!-- 外部样式表 -->
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

CSS选择器

CSS选择器用于选择网页中的元素，可以选择元素本身，类，ID或者其他属性。




/* 选择所有的段落 */
p {
  color: green;
}
 
/* 选择class为"special"的元素 */
.special {
  font-weight: bold;
}
 
/* 选择id为"main"的元素 */
#main {
  background-color: yellow

- 阅读更多 -

CSS margin 属性和CSS 单边外边距属性

System

2024-08-07

所有,css

CSS 的 margin 属性用于设置元素的外边距，它可以影响一个元素的边界框到其父元素或者兄弟元素之间的距离。margin 属性可以有一到四个值，表示元素的上、右、下、左外边距，顺时针方向。

CSS 的单边外边距属性可以单独设置元素的一侧外边距，它们是：

margin-top：设置元素的上外边距。
margin-right：设置元素的右外边距。
margin-bottom：设置元素的下外边距。
margin-left：设置元素的左外边距。

实例代码：




/* 设置四个方向的外边距 */
.box {
  margin: 10px 20px 30px 40px;
}
 
/* 设置单边外边距 */
.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}
 
/* 使用 margin 属性简写 */
.box {
  margin: 10px 20px; /* 上下、左右外边距分别为10px和20px */
}
 
/* 使用 margin 属性简写 */
.box {
  margin: 10px 20px 30px; /* 上外边距10px，左右外边距20px，下外边距30px */
}
 
/* 设置元素的所有四个外边距相同 */
.box {
  margin: 10px; /* 所有四个方向外边距都是10px */
}

在实际应用中，可以根据需要选择使用 margin 属性的简写形式或单独设置元素的某一侧外边距。

- 阅读更多 -

CSS（盒子模型，定位，浮动，扩展）

System

2024-08-07

所有,css

CSS盒子模型、定位和浮动是前端开发中的重要概念，以下是对应的简要解释和示例代码：

盒子模型(Box Model)：
定义了元素的边框、内边距（padding）、外边距（margin）和内容区域。




.box {
  width: 300px; /* 内容宽度 */
  padding: 20px; /* 内边距 */
  border: 5px solid blue; /* 边框 */
  margin: 10px; /* 外边距 */
}

定位(Positioning)：
CSS提供了相对定位、绝对定位和固定定位三种方式。




/* 相对定位 */
.relative {
  position: relative;
  top: 10px;
  left: 20px;
}
 
/* 绝对定位 */
.absolute {
  position: absolute;
  top: 50px;
  right: 30px;
}
 
/* 固定定位 */
.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
}

浮动(Floating)：
可以使元素向左或向右浮动，影响周围元素的布局。




/* 向左浮动 */
.float-left {
  float: left;
  margin-right: 10px;
}
 
/* 向右浮动 */
.float-right {
  float: right;
  margin-left: 10px;
}
 
/* 清除浮动 */
.clearfix {
  clear: both;
}

以上代码展示了如何使用CSS进行盒子模型的设置、元素的定位以及元素的浮动操作，是前端开发中的基础知识。

- 阅读更多 -

vue实现点击复制功能

System

2024-08-07

所有,vue.js

在Vue中实现点击复制的功能，可以使用第三方库vue-clipboard2或者vue-clipboard3。以下是使用vue-clipboard3的示例代码：

首先安装vue-clipboard3：




npm install vue-clipboard3 --save

在Vue组件中使用：




<template>
  <button v-clipboard="copyContent" @success="onCopySuccess">复制</button>
</template>
 
<script>
import { defineComponent, ref } from 'vue';
import { useClipboard } from 'vue-clipboard3';
 
export default defineComponent({
  setup() {
    const copyContent = ref('要复制的文本内容');
    const { isSupported, copy } = useClipboard();
 
    const onCopySuccess = () => {
      alert('复制成功');
    };
 
    return {
      copyContent,
      onCopySuccess,
      isSupported,
      copy
    };
  }
});
</script>

在这个示例中，v-clipboard 指令用于绑定要复制的内容，@success 事件处理函数在复制成功时被调用。isSupported 函数用于检查浏览器是否支持剪贴板API，copy 函数用于执行复制操作。

- 阅读更多 -

CSS高级知识点

System

2024-08-07

所有,css

CSS的高级特性可以包括布局技术、动画、响应式设计、媒体查询等。以下是一些CSS的高级技巧：

布局技术：

使用Flexbox进行布局：




.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用Grid布局：




.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

动画：

创建简单的动画：




@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}
 
.animatedBox {
  animation-name: example;
  animation-duration: 4s;
}

响应式设计：

使用媒体查询进行响应式设计：




/* 标准样式 */
.sidebar {
  width: 200px;
  height: 500px;
}
 
/* 屏幕宽度小于768px时 */
@media screen and (max-width: 768px) {
  .sidebar {
    width: 100%;
    height: auto;
  }
}

其他高级特性：

使用CSS变量（也称为CSS自定义属性）：




:root {
  --main-bg-color: coral;
}
 
.main {
  background-color: var(--main-bg-color);
}

使用伪元素：




.element::before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background-color: green;
}

使用Z-index调整层叠顺序：




.firstElement {
  z-index: 1;
}
 
.secondElement {
  z-index: 2;
}

这些是CSS中一些高级技巧的简单示例。实际应用中，可能需要根据具体设计需求和布局结构来使用这些技术。

- 阅读更多 -

CSS之动画及2D、3D转换

System

2024-08-07

所有,css




/* 定义一个简单的3D旋转动画 */
@keyframes rotate3d {
  from {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}
 
/* 应用动画到一个元素上 */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 20px;
  /* 开启3D空间 */
  perspective: 500px;
  /* 应用动画 */
  animation: rotate3d 5s infinite linear;
}

这段代码定义了一个名为rotate3d的3D旋转动画，并将其应用到拥有box类的HTML元素上。开启了3D空间，使元素在3维空间内进行旋转，从而创建了一个动态的3D效果。

- 阅读更多 -

css初学中如何让图片放入铺满整个盒子

System

2024-08-07

所有,css

要让图片铺满整个盒子，可以使用CSS的background-size属性，并将图片设置为盒子的背景。以下是实现这一效果的CSS代码示例：




.box {
  width: 300px; /* 设置盒子的宽度 */
  height: 200px; /* 设置盒子的高度 */
  background-image: url('image.jpg'); /* 设置背景图片 */
  background-size: cover; /* 背景图片铺满整个盒子 */
  background-position: center; /* 背景图片居中 */
  background-repeat: no-repeat; /* 背景图片不重复 */
}

HTML部分：




<div class="box"></div>

在这个例子中，.box是你的盒子类名，image.jpg是你要使用的图片的路径。background-size: cover;确保图片会覆盖整个盒子，但图片可能会被裁剪以适应盒子的比例。如果你不希望图片被裁剪，可以使用background-size: contain;，但这可能会导致图片不能覆盖整个盒子。

- 阅读更多 -

CSS之选择器、优先级、继承

System

2024-08-07

所有,css

CSS选择器用于指定CSS样式应用的HTML标签，可以基于标签名、类名、ID等进行选择。

基础选择器：
- 标签选择器（Element selector）：直接使用HTML标签名作为选择器。
- 类选择器（Class selector）：使用.前缀。
- ID选择器（ID selector）：使用#前缀。




/* 标签选择器 */
p { color: blue; }
 
/* 类选择器 */
.center { text-align: center; }
 
/* ID选择器 */
#header { background-color: yellow; }

组合选择器：
- 分组选择器（Grouping selector）：用逗号分隔多个选择器，同样规则适用于所有选择器。
- 子选择器（Child selector）：使用>表示直接子元素。
- 后代选择器（Descendant selector）：使用空格表示所有后代元素。




/* 分组选择器 */
h1, h2, h3 { color: green; }
 
/* 子选择器 */
ul > li { list-style-type: square; }
 
/* 后代选择器 */
div a { text-decoration: none; }

优先级：
- 内联样式（Inline style）：直接在HTML元素的style属性中指定，优先级最高。
- ID选择器（ID selectors）> 类选择器（Class selectors）> 标签选择器（Element selectors）> 通用选择器（Universal selectors）。
- 后代选择器中，层级越深，优先级越低。
- 如果优先级相同，后定义的样式会覆盖先定义的样式。
继承：
- CSS中，某些属性是可以继承的，比如color和font-family。
- 子元素没有明确指定这些属性时，会继承父元素的属性值。




/* 当没有为p标签指定color时，它将继承body的color属性 */
body { color: red; }
p { } /* 这里不指定color，将继承body的red */

以上是CSS选择器、优先级和继承的基本概念和示例。

System

2024-08-07

所有,ajax

这些都是前端开发中常用的一些技术或工具，但是你没有给出具体的问题，我无法提供针对性的解决方案。不过，我可以给你一个简单的指导，如何区分这些技术。

HTML：HTML是用来制作网页的一种标记语言，它主要负责网页的结构。
CSS：CSS是用来描述网页样式的语言，它主要负责网页的样式美化。
JSON：JSON是一种轻量级的数据交换格式，主要用于存储和交换文本信息的语法，类似于JavaScript的对象或数组。
AJAX：AJAX是一种在无需重新加载整个网页的情况下，与服务器交换数据并更新网页部分内容的技术。
Layer：Layer是一种基于jQuery的web弹层插件，主要用于实现网页中的弹窗效果。
jQuery：jQuery是一个快速、简洁的JavaScript框架，它封装了JavaScript常用的功能代码，提供一种简化的操作方式。
EL：EL是Expression Language的缩写，它是JSTL(JSP Standard Tag Library)的一部分，用于在JSP页面中实现表达式的简化。
JSTL：JSTL是JSP的标准标签库，它提供了一系列的标签，用于在JSP页面中实现一些常用的功能，比如循环、判断等。

如果你有具体的问题，请提供详细信息，我会尽我所能为你提供解决方案。

- 阅读更多 -

Javaweb基础 Vue Ajax

System

2024-08-07

所有,ajax

问题描述不是很清晰，但我猜你可能想要的是如何在Java Web应用程序中使用Vue.js和Ajax进行前后端交互的示例。

后端（Java）:




@RestController
public class DataController {
 
    @GetMapping("/data")
    public ResponseEntity<String> getData() {
        // 假设这是从数据库获取的数据
        String data = "Hello, Vue!";
        return ResponseEntity.ok(data);
    }
}

前端（Vue.js）:




<!DOCTYPE html>
<html>
<head>
    <title>Vue Ajax Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>
 
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Loading...'
            },
            created() {
                this.fetchData();
            },
            methods: {
                fetchData() {
                    $.ajax({
                        url: '/data',
                        type: 'GET',
                        success: (response) => {
                            this.message = response;
                        },
                        error: (xhr, status, error) => {
                            console.error("An error occurred:", status, error);
                            this.message = "Error fetching data";
                        }
                    });
                }
            }
        });
    </script>
</body>
</html>

在这个例子中，我们使用了Vue.js来处理前端的逻辑，并通过jQuery的Ajax方法来从后端的Java控制器发送HTTP GET请求并获取数据。然后，我们更新Vue实例的数据属性message，这会自动更新DOM中的显示内容。

- 阅读更多 -