殿君不是殿军

web前端基础知识

HTML&CSS基础经典版

HTML：结构（页面元素和内容）
css：表现（网页元素的外观和位置等页面样式）
行为：JavaScript：行为（网页模型定义与页面交互）

排版标签
1. 排版标签标题标签：h系列标签重要程度依次递减
  
  特点：独占一行、h1-h6文字逐渐减小
2. 段落标签：p
  
  特点：段落之间存在间隙、独占一行
3. 换行标签：
4. 水平分割线：

文本格式化标签

场景：让文字加粗b strong、下划线u ins、倾斜i em、删除线s del等
语义：突出重要性的强调语境 strong、ins、em、del

图片标签

特点：单标签
src alt为图片标签的属性、属性之间没有顺序
src为属性名 =""为属性值
alt是替换文本当图片不显示的时候显示的文字
title时提示文本不仅可以为图片标签添加，还可以用于其他标签
width和height属性只需要给出一个值，另一个等比例缩放，好处就是图片不变形

路径的介绍

路径可分为：绝对路径（了解）相对路径（常用）
绝对路径例如：盘符开头：D\day01、完整的网络地址：https://www.itcast.cn
相对路径：从当前文件出发找目标文件的过程

相对路径之同级 **./**表示当前位置

相对路径之下级：images/baobao.jpg

相对路径之上级：**…/**表示上级

音频标签：audio

视频标签：video

添加muted在静音状态下自动播放

链接标签

href的作用是**调转地址**

在新窗口打开：属性名为target、取值：_blank

列表标签

自定义列表：dl dt dd

去掉无序列表小黑点：

li {
            /* 去除小圆点 */
            list-style: none;
        }

表格标签

table>tr>td
th为表头标签，有加粗效果
caption为表格大标题
结构标签：thead,tbody,tfoot

学生成绩单
姓名	年龄	成绩
张三	19	33
李四	20	44
王二	20	44

合并单元格

跨行并列：rowspan、跨列并列：colspan

遵循左上原则

列表标签

列表的应用场景
无序列表
有序列表
自定义列表

绝对路径

绝对路径：绝对路径例如：
- 盘符开头：D\day01
- 完整的网络地址：http://wdianjun.vcn.ink

特点：地址很长

相对路径

相对路径之同级 ./表示当前位置
相对路径之下级：**如：**images/baobao.jpg
相对路径之上级：**如：../**images/baobao.jpg

表单标签-input

input type="text"文本框
input type="text"密码框
input type="radio"单选框
input type="checkbox"复选框

注意：

有相同name属性值的单选框为一组，一组中只能同时有一个被选

属性对于单选框有分组功能

占位符：placeholder

button按钮标签

如果不指定type值，button按钮默认为submit值

按钮要放在==表单域(form)==中才会有行为，否则就是一个普通按钮

按钮标签是双标签，可以插入其他标签如：图片

select下拉菜单

select标签：下拉菜单的整体

option标签：下拉菜单的每一项

selected属性：下来菜单的默认选中

lable标签

强调文本的作用

没有语义化的标签

div：独占一行

span：

语义化标签

网页头部

网页导航

网页底部

网页侧边栏

网页区块

网页文章

CSS：层叠样式表

css的引入方式

==内嵌式：==写在style标签中,一般写在head里
==外联式：==写在一个单独的.css文件中
==行内式：==写在标签的style属性中，大多数配合js使用

基础选择器

标签选择器

类选择器

id选择器

id必须是唯一的，不能出现两个标签有相同的id
你好，hello

通配符选择器

清除内外边距,获取所有标签


        * {
            margin: 0;
            padding: 0;
        }

字体和文本样式

字体：

字体粗细

font=weight

字体样式

font-style

字体类型

font-family

层叠性

建立在相同的权重下，如相同的选择器，后面的会覆盖前面的

复合属性

font复合书写顺序：font：style weight size family
注意：

顺序不能乱

如果之前已经写了零散的font属性，当心可能会覆盖掉之前的

水平居中对齐 text-aling:center

如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

文本修饰

添加下划线
- ```
text-decoration: underline;
```
删除线
- ```
text-decoration: line-through;
```
上划线
- ```
text-decoration: overline;
```
清除下划线
- ```
text-decoration: none;
```

行高line-height

控制一行的上下行间距

让单行文本垂直居中可以设置 line-height : 文字父元素高度
注意如果同时设置了行高和font复合，注意覆盖问题
书写顺序：font：style weight size/line-height family

颜色取值

rgba表示法：( 0 , 0 , 0 , 0.5 ) 可以省略写成 rgba ( 0 , 0 , 0 , .5 )
- 取值范围0~1 ，1表示完全不透明

选择器进阶

复合选择器

后代选择器

根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
语法：选择器1 选择器2 {} 空格隔开
注意：后代包括：儿子、孙子…

并集选择器

作用：选中页面中同时满足多个选择器的标签
语法：选择器1选择器2 { css }
注意：交集选择器中的选择器之间是紧挨着的，没有东西分隔，交集选择器中如果有标签选择器，标签选择器必须写在最前面

交集选择器

交集选择器：标签选择器在前，类选择器在后，中间没有空格

id是唯一的，不能做交集

交集选择器只可能是标签选择器 + 类选择器

hover伪类选择器

鼠标悬停在元素上的状态

可以用在任何标签上

背景相关属性

背景复合
- 复合写法：推荐：background：color image repeat position
背景位置如果是英文状态下可以颠倒位置

元素显示模式之块级元素

独占一行，可以设置宽高

宽度默认是父元素的宽度，高度默认由内容撑开

元素显示模式之行内元素

不可以设置宽高，一行多个显示

元素显示模式之行内块元素

一行可以显示多个

可以设置宽高

代表标签：input、textarea、button、select…

img标签有行内块元素特点

元素显示模式转换

转换成块级元素display:block

转换成行内块元素display:inline-block

转换成行内元素display:inline

html嵌套规范

p标签中不要嵌套div、p、h等块级元素
a标签不能嵌套a标签

css特性

继承性

子元素有默认继承父元素的特点

**控制文字的属性**都可以继承

原则：本身有就不会继承，没有就继承父级

层叠性
- 在优先级相同的条件下，后面的覆盖前面的
- 若优先级不同谁的优先级高，谁就覆盖

背景的复合写法

背景复合写法建议： color URL（）平铺位置-
 background: skyblue url(./images/1.jpg) no-repeat bottom right;
注意：使用英文方位词不考虑顺序数字下第一个必须是x，第二个必须是y

盒子模型

padding内边距

            /* 四个值：上右下左 顺时针*/
            /* padding: 10px 20px 40px 80px; */
            /* 三个值：上 左右 下 */
            /* padding: 10px 20px 15px; */
            /* 两个值：上下 左右 */
            /* padding: 10px 20px; */
            /* 一个值：上下左右 */
            padding: 60px;

css3盒子模型

自动内减：box-sizing:border-box

margin外边距

合并现象

垂直布局的块级元素，上下margin会合并

最终距离为两者margin最大值

解决办法：只给一个盒子设置margin即可

行内元素设置上下外边距无效上下内边距也无效

margin的塌陷问题（重要）

现象：互相嵌套的块级元素，子元素的margin-top 会作用在父元素上

结果：导致父元素一起移动

解决方法：

触发BFC（块级盒子格式化上下文）

BFC可以解决浮动和塌陷问题

给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）

给父元素设置overflow：hidden（超出部分隐藏）

转换成行内块元素

设置浮动

解决塌陷最佳办法给父级添加overflow：hidden

行内元素的margin和padding无效情况

水平方向的margin和padding布局中有效！

垂直方向的margin和padding布局中无效！

结构伪类选择器

这个选择器是个逻辑并且的关系

比如div:nth-child(n)表示要找一个div，这个div必须是某个元素的一个子元素

/* 选择第一个li */
        /* li:first-child {
            background-color: blue;
        } */
        /* 选中最后一个li */
        /* li:last-child {
            background-color: blue;
        } */
        /* 任选一个 */
        /* li:nth-child(n) {
            background-color: skyblue;
        } */
        /* 选择倒数第3个 */
        
        li:nth-last-child(3) {
            background-color: blue;
        }
       /* 选择后三个*/
        li:nth-last-child(-n+3)

结构伪类选择器之公式(重要)

/* li:nth-child(n) 小括号里不仅可以写数字还可以写公式 */
        /* 选择偶数 even或者2n*/
        /* li:nth-child(even) {
            background-color: red;
        } */
        /* 选择奇数 odd或者2n+1 */
        /* li:nth-child(odd) {
            background-color: blue;
        } */
        /* 选择前5个 -n+5 */
        
        li:nth-child(-n+5) {
            background-color: pink;
        }

易错点

/* 找到第一个li里面的a 两种写法*/
        /* li:nth-child(1) a {
            background-color: red;
        } */
        /* li:first-child a {
            background-color: red;
        } */
        /* 找到第五个li里的第3个a */
        
        li:nth-child(5) a:nth-child(3) {
            background-color: blue;
        }
        /* 找到后五个li里的a */
        li:nth-last-child(-n+3) {
            
        }

伪元素::before&::after

必须设置==content属性==才能生效

伪元素默认是行内元素

==注意：==伪元素默认是行内元素，宽高不生效

.father::before {
            display: inline-block;
            /* 内容必须写 */
            content: '加油';
            width: 100px;
            height: 100px;
            background-color: blue;
        }
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-usglb9AS-1646056445989)(C:\Users\Y\Desktop\博客内容\pic\效果1.png)]

标准流（文档流）

标准流就是**标签默认的排列方式 **如：div独占一行

标准流配合浮动和定位完成网页布局

几种居中总结

margin:0 auto

作用是让具有宽度的块级元素居中，行内块不行

text-align: center;

给一个块级元素或者行内块元素设置，让其内部文字或者行内块实现水平居中

line-height: ;

在展示文字的时候会有一个默认的行高，文字在行中肯定是默认居中的，如果行高设置的和元素一样高，那么文字就会在行中垂直居中。

浮动

浏览器在解析行内或行内块元素的时候，如果元素换行之间会有小缝隙

浮动作用：

1.图文环绕

2.让块级盒子在一行显示

浮动的特点：
1.浮动后的元素会脱离标准流（脱标），不占标准流的位置
2.浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3.下一个浮动元素会在上一个浮动元素后面左右浮动
4.浮动一行显示多个，可以设置宽高
注意：浮动的元素不能通过text-align:center或者margin:0 auto

浮动元素具有标准流元素的特性，可以设置宽高，并且在一行展示多个

浮动的不良影响

css书写顺序（重要）

作用：浏览器执行效率更高

书写顺序：

display/浮动/定位

盒子模型：margin、padding、宽高、背景色

文字样式：font:

清除浮动

1.给父级设置高度

2.额外标签法

在父元素内容的最后添加一个块级元素

给添加的块级元素设置 clear:both

缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

3.单伪元素清除法

给父级添加一个类clearfix

.clearfix::after {
            content: '';
            display: block;
            clear: both;
            /* 补充代码，在网页中看不到伪元素 */
            height: 0;
            visibility: hidden;
        }

4.双伪元素清除浮动（常用）

==特点：==不光能清除浮动还能解决塌陷（坑爹现象）问题

.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
  }
  .clearfix:after {
    clear:both;
  }
  .clearfix {
     *zoom:1;
  }

5.给父元素设置overflow : hidden

触发bfc

直接给父元素设置overflow : hidden

特点：方便

注意

版心注意：要清除浮动的影响，在上一级的父级 -->

你可能感兴趣的:(经验分享,前端,css,html)

python学习专栏 zhousenshan python新赛道 python
推荐学习资料《15分钟轻松学Python》教程目录-CSDN博客每天40分玩转Django教程目录-CSDN博客Pycharm社区版搭建Django环境及Django简单项目、操控mysql数据库-CSDN博客这个开源有关于事务方面高级内容介绍：django-vue-lyadmin:django-vue-lyadmin前端采用vue3+elementplus,后端采用PythonDjangoDRF
Python中使用SQLite 昂热校长
开发十年，就只剩下这套Java开发体系了>>>SQLite：SQLite是一种数据库，Python中集成了SQLite3，所以在Python中使用SQLite，可以直接导入SQLite包，不需要做额外的配置。更多的SQLite简介和相关知识可以查看专门的教程：http://www.runoob.com/sqlite/sqlite-tutorial.htmlPython中使用SQLite:可以直接像
springboot中DTO、VO、Entity相互转换会说法语的猪后端 springboot java spring boot 后端 java
在我们平时开发中，dto、vo、entity之间的相互转换是很频繁的操作，这篇就简单记录一下我在平时开发中转换的方法。在这之前先简单描述一下dto、vo、entityDTO：一般我们在开发中会定义数据传输对象（DataTransferObject,DTO）来接收前端传递的参数是最常见的。VO：平时开发中，一般会定义VO（viewobject）来封装返回给前端的数据Entity：在我们开发中，Ent
前端经典样式参考 momomo_mocs 前端 javascript 开发语言
左边导航栏；右边展示区组件间通信方式使用-根目录{{idx+1}}.{{navigateItem.title}}import{reactive}from'vue'letnavigaters=reactive([{title:"PropsLearn",linkPath:"/props"},{title:"CustomEvent",linkPath:"/props"},{title:"Provide-
深入探讨：服务器如何响应前端请求及后端如何查看前端提交的数据我的青春不太冷服务器前端运维
深入探讨：服务器如何响应前端请求及后端如何查看前端提交的数据一、服务器如何响应前端请求前端与后端的交互主要通过HTTP协议实现。以下是详细步骤：1.前端发起HTTP请求GET请求：用于从服务器获取数据。POST请求：用于向服务器提交数据。例如，使用JavaScript的fetchAPI发送POST请求：fetch('https://example.com/api/data',{method:'PO
深入理解 Axios 拦截器的执行链机制不做超级小白项目开发 web前端前端功能通关秘籍 javascript 前端开发语言
深入理解Axios拦截器的执行链机制在现代前端开发中，Axios是最流行的HTTP请求库之一，而拦截器（Interceptor）功能是其核心特性之一。通过拦截器，我们可以在请求发送前或响应返回后进行灵活的预处理或后处理。然而，很多人并不了解拦截器在Axios内部是如何构建和执行的。本文将深入剖析Axios拦截器的执行链机制，帮助更多开发者掌握这一重要知识。1.Axios拦截器的结构拦截器分为两类：
Liunx上安装nginx详细步骤以及nginx配置前端页面 a754782427 nginx 前端服务器
1.安装依赖包安装wgetyuminstallwgetyum-yinstallgcczlibzlib-develpcre-developensslopenssl-devel2.下载并解压安装包//创建一个文件夹cd/usr/localmkdirnginxcdnginx//下载tar包wgethttp://nginx.org/download/nginx-1.13.7.tar.gztar-xvfng
【零散技术】MAC 安装多版本node Odoo穆尘前端 macos
时间是我们最宝贵的财富,珍惜手上的每个时分不同前端项目运行的node版本不一致，会导致无法运行，就像Odoo也需要依据版本使用对应的python环境。python可以用conda随时切换版本，那么Node可以吗？答案是肯定的。1、安装n（类似于conda的工具，单一字符还是很特别）npminstall-gn2、安装nodesudo-En14.21.3版本参照表Node.jsVersionRelea
第23节课：前端调试技巧—掌握浏览器开发者工具与性能优化学问小小谢 HTML学习前端性能优化交互 html5 安全学习
目录浏览器开发者工具常见的浏览器开发者工具浏览器开发者工具的基本使用打开开发者工具开发者工具的面板使用开发者工具进行调试Elements面板检查和编辑HTML检查和编辑CSSConsole面板输出日志和调试信息执行JavaScript代码Network面板监控网络请求分析请求和响应Performance面板记录和分析性能优化性能Application面板检查和管理资源调试存储性能优化与调试性能优化
第22节课：前端测试与调试—确保代码质量和性能的关键学问小小谢 HTML学习前端学习服务器运维网络
目录前端测试的重要性测试类型：单元测试与集成测试单元测试单元测试的优点单元测试的实践集成测试集成测试的优点集成测试的实践测试框架：Jest与MochaJestJest的特点Jest的安装与使用MochaMocha的特点Mocha的安装与使用实践：使用Jest和Mocha进行前端测试示例：使用Jest进行单元测试示例：使用Mocha进行集成测试结语在现代软件开发中，测试和调试是确保代码质量和性能的关
第2节课：文本内容与格式化——HTML中的文本处理技巧学问小小谢 HTML学习 html 前端学习
目录文本内容与格式化：段落和标题：构建文本基础段落``标题``到``格式化：强调和样式加粗``斜体``下划线``列表：组织内容无序列表``有序列表``定义列表``实践：创建一个内容丰富的网页结语文本内容与格式化：在网页设计中，文本是传达信息的核心元素。HTML提供了多种方式来创建和格式化文本，使其既美观又易于阅读。在本节课中，我们将深入学习HTML中文本内容的创建和格式化，包括段落、标题、加粗、斜
第5节课：HTML5 新标签——构建更智能的网页结构学问小小谢 HTML学习 html5 前端学习
目录语义化标记的重要性新标签详解````````````实践：使用HTML5新标签构建网页结语随着HTML5的推出，网页开发者们获得了一套新的强大工具——语义标签。这些标签不仅帮助我们更好地组织内容，还使得网页更易于搜索引擎优化（SEO）和辅助技术访问。本节课将深入探讨HTML5中的新语义标签，包括、、、、和，并强调使用这些标签进行语义化标记的重要性。语义化标记的重要性在HTML5之前，我们通常使
使用 Nginx 实现动态图片加水印：技术探索与实践指南20250122 Narutolxy 前端技术干货分享 nginx 运维
使用Nginx实现动态图片加水印：技术探索与实践指南引言图片水印是一种广泛应用于保护图片隐私、防止盗用的重要手段。传统方式通常通过前端或后端实现水印处理，但两者各有局限性。本文探讨了一种基于Nginx的折中方案：通过Nginx代理拦截图片请求，动态添加水印并返回给前端。这种方法不仅安全高效，还能减轻后端压力，为开发者提供了一种灵活的实践思路。背景与问题分析在图片加水印的场景中，常见的实现方式包括：
代替Winform、Win32控件的一些界面框架Electron,QT等专注VB编程开发20年前端 c++ui 界面框架
以下是一些可以代替Winform、Win32控件，在VC++、VBA等EXE程序上用来做控件元素、表格数据绑定、窗口显示的WEBUI框架和工具：1.Electron特点：Electron是一个使用JavaScript、HTML和CSS构建跨平台桌面应用程序的框架。它允许开发者使用Web技术来创建桌面应用，具有良好的跨平台兼容性。适用场景：适用于需要快速开发跨平台桌面应用的场景，尤其是对UI灵活性和
用SpringBoot+mysql+html实现ATM 系统总结与扩展 SAFE20242034 #一 SpringBoot spring boot mysql html
这里写目录标题ATM系统总结与扩展项目概述主要功能模块1.用户注册2.用户登录3.账户查询4.存款与取款5.转账6.修改密码7.销户系统改进建议功能扩展技术优化完整代码实现数据库表设计后端代码（SpringBoot示例）1.Account实体类2.AccountRepository接口3.AccountController类前端代码（HTML+JavaScript示例）实际开发与部署步骤**1.开
Qt: QT图形绘制简介大白萝卜不紧张 qt qt 开发语言
1.QPainter描述：QPainter是Qt最常用的绘图类。它提供了一组丰富的功能来绘制各种形状、文本和图像。用途：适用于自定义绘制，比如在QWidget或QGraphicsView中绘制。功能：绘制基本图形（线条、矩形、圆形、多边形等）。绘制文本和图像。支持渐变、纹理和抗锯齿效果。2.QGraphicsView和QGraphicsScene描述：QGraphicsView是一个用于显示和管理
前端el-table导出pdf 努力奋进的前端小菜鸟 javascript 前端 vue.js
1、首先来看下效果图2、使用技术：html2Canvas、JsPDF插件，mode_modules下载两个插件npm i html2Canvas JsPDF其中，html2Canvas负责把html转为图片，JsPDF负责把图片转为pdf文件3、点击按钮触发打印事件//点击按钮触发打印事件button@click='htmlToPdf(节点ID',文件名')'>print//传入打印节点，文件名,
vue3+elementPlus之后台管理系统（从0到1）(day1-项目主体搭建) 沐暖沐 vue.js 前端 javascript
vue3官方文档：https://cn.vuejs.org/guide/introduction.html1、项目创建确保电脑已安装node查看命令：node-v进入项目目录，创建项目npminitvue@latestNeedtoinstallthefollowingpackages:[email protected]?(y)yVue.js-TheProgressiveJav
vue项目html页面生成PDF预览、下载及生成页面水印我是槑槑 Vue html5 vue.js javascript canvas
html2canvas官方文档jspdf官方文档目录概述原理过程中遇到的问题生成的PDF截图代码示例加水印版代码示例现存问题概述因为生成的PDF内还有富文本，后端不好生成PDF，故由前端完成。原理html2canva生成截图，jsPDF利用图片生成PDF。过程中遇到的问题1、生成大于30多页时，容易造成生成页面黑屏问题。原因：canvas生成图片时，对内容高度有一定的限制，超过这个高度，canva
react学习 guhy fighting react react.js 学习前端
react框架的选择低代码、BI前瞻性bs架构，网页客户端去使用react就是用来代替DOM的，dom操作，构建前端界面的react-native直接开发ios，安卓，原生应用虚拟dom，操作react，影响dom，中间人现在的dom和当前的dom做比较看哪个发生了变化，做最小的修改1、虚拟dom2、兼容性3、性能好，避免做一些多余的操作声明式编程：结果为导向命令式编程：过程为导向基于组件开发，组
获取PPT中的MSO格式图片报错 ♢.＊ ppt python
亲爱的小伙伴们，在求知的漫漫旅途中，若你对深度学习的奥秘、Java与Python的奇妙世界，亦或是读研论文的撰写攻略有所探寻，那不妨给我一个小小的关注吧。我会精心筹备，在未来的日子里不定期地为大家呈上这些领域的知识宝藏与实用经验分享。每一个点赞，都如同春日里的一缕阳光，给予我满满的动力与温暖，让我们在学习成长的道路上相伴而行，共同进步✨。期待你的关注与点赞哟！image.ext的报错ValueEr
知识图谱技术剖析 ♢.＊人工智能知识图谱大数据
亲爱的小伙伴们，在求知的漫漫旅途中，若你对深度学习的奥秘、Java与Python的奇妙世界，亦或是读研论文的撰写攻略有所探寻，那不妨给我一个小小的关注吧。我会精心筹备，在未来的日子里不定期地为大家呈上这些领域的知识宝藏与实用经验分享。每一个点赞，都如同春日里的一缕阳光，给予我满满的动力与温暖，让我们在学习成长的道路上相伴而行，共同进步✨。期待你的关注与点赞哟！一、引言在当今数字化信息爆炸的时代，如
从CV工程师到CtrlCV架构师：PromptCoder如何让前端搬砖变成乐高拼装正宗咸豆花前端人工智能 AIGC ai 个人开发
《从CV工程师到CtrlCV架构师：PromptCoder如何让前端搬砖变成乐高拼装》各位在座的代码艺术家、CSS炼金术师、React吟游诗人，今天我们要聊一个能让原型图自动「现出原形」的黑魔法——是的，我说的不是Figma切图插件，而是能让你的Ctrl+C/V进化成量子纠缠的PromptCoder。官网：PromptCoder当截图遇见AI：前端复刻的「降维打击」还记得那些年我们对着设计图手动敲
ThreeJS入门（233）：THREE.DirectionalLightHelper 知识详解，示例代码还是大剑师兰特 #ThreeJS中文API全解大剑师 threejs入门 threejs教程 threejs示例
作者：还是大剑师兰特，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。查看本专栏目录-本文是第233篇入门文章文章目录特性构造函数方法`update()`使用示例注意事项
Vue.js组件开发-实现导出PDF文件可自定义添加水印及水印样式方向 LCG元前端 vue.js pdf javascript
使用Vue实现导出PDF文件并添加水印，同时支持设置水印样式、方向和自定义水印内容。步骤安装依赖：使用html2canvas将HTML内容转换为canvas，使用jspdf生成PDF文件。创建Vue组件：在组件中实现水印生成、HTML转canvas、canvas转PDF的功能。设置水印样式和方向：支持自定义水印内容、字体、颜色、透明度、旋转角度等。导出PDF文件：将带有水印的HTML内容导出为PD
不要再这样编写 async/await 前端javascript
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读最开始接触async/await时，很多人都会发出“终于有这个功能了！”的感叹。它的语法清晰、可读性强，用起来直观又顺手。然而，用得越久，就会发现一些常见的“坑”时常在各种项目里出现：有些是代码审查时发现的，有些是和同事讨论时暴露的问题。这些都说明异步编程本质上并不简单。下文就结合实际经验，列出了一些常见的异步陷阱，以及更高级的用法
华为2024校招AI芯片开发工程师面试题详解 AI天才研究院 ChatGPT AI大模型企业级应用开发实战大数据AI人工智能大厂Offer收割机面试题简历程序员读书硅基计算碳基计算认知计算生物计算深度学习神经网络大数据 AIGC AGI LLM Java Python 架构设计 Agent 程序员实现财富自由
引言核心关键词华为2024校招AI芯片开发工程师面试题详解摘要本文旨在详细解析华为2024校招AI芯片开发工程师的面试题，通过系统的分析，帮助读者深入了解AI芯片的基础知识、设计原理以及面试策略。文章将分为七个主要部分，从AI芯片的概述到面试经验分享，再到行业动态和未来展望，全面覆盖AI芯片开发的核心内容。通过实际案例分析，本文还将展示如何将理论知识应用于实际项目中，为读者提供宝贵的开发实践经验和
Next.js 高级缓存策略分析
CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读在Next.js中，缓存机制往往是被诟病最多的特性之一。许多开发者对其工作方式并不满意。虽然缓存对提升React应用的性能至关重要，但如果对其原理不够理解，很容易导致棘手的错误。例如，页面在客户端显示陈旧数据的问题可能让你在调试时痛苦不堪。对Next.js缓存机制缺乏深入理解，就会让你不断遭遇意料之外的行为和Bug，每次都在不必要的
Mybatis 通过数组的下标进行取值絮落锦乡 java后台 java mybatis
1、前端传参样例2、mybaits写法1）、判空0">2）、错误写法0">andT.create_timebetween#{times[0]}and#{times[1]}报错信息2021-08-2414:19:20.537ERROR45552---[nio-8086-exec-7]o.a.c.c.C.[.[.[/].[dispatcherServlet]:Servlet.service()fors
mybatis（134/134）完结一缕叶 mybatis mybatis spring java
一级缓存（默认情况下开启）同一个sqlsession中执行相同的查询语句走一级缓存二级缓存：同一个sqlsessionfactory，sqlsession关闭了才会将一级缓存提交到二级缓存中外部编写的缓存PageHelper插件：方便进行分页，同时前端可以容易拿到对于分页相关的所有数据调用getXXX方法12天最终完结mybatis，后续找机会手敲一下源码加深了解。
解读Servlet原理篇二---GenericServlet与HttpServlet 周凡杨 java HttpServlet 源理 GenericService 源码
在上一篇《解读Servlet原理篇一》中提到，要实现javax.servlet.Servlet接口（即写自己的Servlet应用），你可以写一个继承自javax.servlet.GenericServletr的generic Servlet ，也可以写一个继承自java.servlet.http.HttpServlet的HTTP Servlet（这就是为什么我们自定义的Servlet通常是exte
MySQL性能优化 bijian1013 数据库 mysql
性能优化是通过某些有效的方法来提高MySQL的运行速度，减少占用的磁盘空间。性能优化包含很多方面，例如优化查询速度，优化更新速度和优化MySQL服务器等。本文介绍方法的主要有： a.优化查询 b.优化数据库结构
ThreadPool定时重试 dai_lm java ThreadPool thread timer timertask
项目需要当某事件触发时，执行http请求任务，失败时需要有重试机制，并根据失败次数的增加，重试间隔也相应增加，任务可能并发。由于是耗时任务，首先考虑的就是用线程来实现，并且为了节约资源，因而选择线程池。为了解决不定间隔的重试，选择Timer和TimerTask来完成 package threadpool; public class ThreadPoolTest {
Oracle 查看数据库的连接情况周凡杨 sql oracle 连接
首先要说的是，不同版本数据库提供的系统表会有不同，你可以根据数据字典查看该版本数据库所提供的表。 select * from dict where table_name like '%SESSION%'; 就可以查出一些表，然后根据这些表就可以获得会话信息 select sid,serial#,status,username,schemaname,osuser,terminal,ma
类的继承朱辉辉33 java
类的继承可以提高代码的重用行，减少冗余代码；还能提高代码的扩展性。Java继承的关键字是extends 格式:public class 类名（子类）extends 类名（父类）{ } 子类可以继承到父类所有的属性和普通方法，但不能继承构造方法。且子类可以直接使用父类的public和 protected属性，但要使用private属性仍需通过调用。子类的方法可以重写，但必须和父类的返回值类
android 悬浮窗特效肆无忌惮_ android
最近在开发项目的时候需要做一个悬浮层的动画，类似于支付宝掉钱动画。但是区别在于，需求是浮出一个窗口，之后边缩放边位移至屏幕右下角标签处。效果图如下：一开始考虑用自定义View来做。后来发现开线程让其移动很卡，ListView+动画也没法精确定位到目标点。后来想利用Dialog的dismiss动画来完成。自定义一个Dialog后，在styl
hadoop伪分布式搭建林鹤霄 hadoop
要修改4个文件 1: vim hadoop-env.sh 第九行 2: vim core-site.xml <configuration> &n
gdb调试命令 aigo gdb
原文：http://blog.csdn.net/hanchaoman/article/details/5517362 一、GDB常用命令简介 r run 运行.程序还没有运行前使用 c cuntinue
Socket编程的HelloWorld实例 alleni123 socket
public class Client { public static void main(String[] args) { Client c=new Client(); c.receiveMessage(); } public void receiveMessage(){ Socket s=null; BufferedRea
线程同步和异步百合不是茶线程同步异步
多线程和同步 : 如进程、线程同步，可理解为进程或线程A和B一块配合，A执行到一定程度时要依靠B的某个结果，于是停下来，示意B运行；B依言执行，再将结果给A；A再继续操作。所谓同步，就是在发出一个功能调用时，在没有得到结果之前，该调用就不返回，同时其它线程也不能调用这个方法多线程和异步:多线程可以做不同的事情,涉及到线程通知 &
JSP中文乱码分析 bijian1013 java jsp 中文乱码
在JSP的开发过程中，经常出现中文乱码的问题。首先了解一下Java中文问题的由来： Java的内核和class文件是基于unicode的，这使Java程序具有良好的跨平台性，但也带来了一些中文乱码问题的麻烦。原因主要有两方面，
js实现页面跳转重定向的几种方式 bijian1013 JavaScript 重定向
js实现页面跳转重定向有如下几种方式：一.window.location.href <script language="javascript"type="text/javascript"> window.location.href="http://www.baidu.c
【Struts2三】Struts2 Action转发类型 bit1129 struts2
在【Struts2一】 Struts Hello World http://bit1129.iteye.com/blog/2109365中配置了一个简单的Action，配置如下 <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configurat
【HBase十一】Java API操作HBase bit1129 hbase
Admin类的主要方法注释： 1. 创建表 /** * Creates a new table. Synchronous operation. * * @param desc table descriptor for table * @throws IllegalArgumentException if the table name is res
nginx gzip ronin47 nginx gzip
Nginx GZip 压缩 Nginx GZip 模块文档详见：http://wiki.nginx.org/HttpGzipModule 常用配置片段如下： gzip on; gzip_comp_level 2; # 压缩比例，比例越大，压缩时间越长。默认是1 gzip_types text/css text/javascript; # 哪些文件可以被压缩 gzip_disable &q
java-7.微软亚院之编程判断俩个链表是否相交给出俩个单向链表的头指针，比如 h1 ， h2 ，判断这俩个链表是否相交 bylijinnan java
public class LinkListTest { /** * we deal with two main missions: * * A. * 1.we create two joined-List(both have no loop) * 2.whether list1 and list2 join * 3.print the join
Spring源码学习-JdbcTemplate batchUpdate批量操作 bylijinnan java spring
Spring JdbcTemplate的batch操作最后还是利用了JDBC提供的方法，Spring只是做了一下改造和封装 JDBC的batch操作： String sql = "INSERT INTO CUSTOMER " + "(CUST_ID, NAME, AGE) VALUES (?, ?, ?)";
[JWFD开源工作流]大规模拓扑矩阵存储结构最新进展 comsci 工作流
生成和创建类已经完成,构造一个100万个元素的矩阵模型,存储空间只有11M大,请大家参考我在博客园上面的文档"构造下一代工作流存储结构的尝试",更加相信的设计和代码将陆续推出......... 竞争对手的能力也很强.......,我相信..你们一定能够先于我们推出大规模拓扑扫描和分析系统的....
base64编码和url编码 cuityang base64 url
import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWriter; import java.io.StringWriter; import java.io.UnsupportedEncodingException;
web应用集群Session保持 dalan_123 session
关于使用 memcached 或redis 存储 session ，以及使用 terracotta 服务器共享。建议使用 redis，不仅仅因为它可以将缓存的内容持久化，还因为它支持的单个对象比较大，而且数据类型丰富，不只是缓存 session，还可以做其他用途，一举几得啊。1、使用 filter 方法存储这种方法比较推荐，因为它的服务器使用范围比较多，不仅限于tomcat ，而且实现的原理比较简
Yii 框架里数据库操作详解-[增加、查询、更新、删除的方法 'AR模式'] dcj3sjt126com 数据库
public function getMinLimit () { $sql = "..."; $result = yii::app()->db->createCo
solr StatsComponent（聚合统计） eksliang solr聚合查询 solr stats
StatsComponent 转载请出自出处：http://eksliang.iteye.com/blog/2169134 http://eksliang.iteye.com/ 一、概述 Solr可以利用StatsComponent 实现数据库的聚合统计查询，也就是min、max、avg、count、sum的功能二、参数
百度一道面试题 greemranqq 位运算百度面试寻找奇数算法 bitmap 算法
那天看朋友提了一个百度面试的题目：怎么找出{1,1,2,3,3,4,4,4,5,5,5,5} 找出出现次数为奇数的数字. 我这里复制的是原话，当然顺序是不一定的，很多拿到题目第一反应就是用map,当然可以解决，但是效率不高。还有人觉得应该用算法xxx,我是没想到用啥算法好...！还有觉得应该先排序... 还有觉
Spring之在开发中使用SpringJDBC ihuning spring
在实际开发中使用SpringJDBC有两种方式： 1. 在Dao中添加属性JdbcTemplate并用Spring注入； JdbcTemplate类被设计成为线程安全的，所以可以在IOC 容器中声明它的单个实例，并将这个实例注入到所有的 DAO 实例中。JdbcTemplate也利用了Java 1.5 的特定(自动装箱，泛型，可变长度
JSON API 1.0 核心开发者自述 | 你所不知道的那些技术细节 justjavac json
2013年5月，Yehuda Katz 完成了JSON API(英文，中文) 技术规范的初稿。事情就发生在 RailsConf 之后，在那次会议上他和 Steve Klabnik 就 JSON 雏形的技术细节相聊甚欢。在沟通单一 Rails 服务器库—— ActiveModel::Serializers 和单一 JavaScript 客户端库——&
网站项目建设流程概述 macroli 工作
一.概念网站项目管理就是根据特定的规范、在预算范围内、按时完成的网站开发任务。二.需求分析项目立项　　我们接到客户的业务咨询，经过双方不断的接洽和了解，并通过基本的可行性讨论够，初步达成制作协议，这时就需要将项目立项。较好的做法是成立一个专门的项目小组，小组成员包括：项目经理，网页设计，程序员，测试员，编辑/文档等必须人员。项目实行项目经理制。客户的需求说明书　　第一步是需
AngularJs 三目运算表达式判断 qiaolevip 每天进步一点点学习永无止境众观千象 AngularJS
事件回顾：由于需要修改同一个模板，里面包含2个不同的内容，第一个里面使用的时间差和第二个里面名称不一样，其他过滤器，内容都大同小异。希望杜绝If这样比较傻的来判断if-show or not，继续追究其源码。 var b = "{{", a = "}}"; this.startSymbol = function(a) {
Spark算子：统计RDD分区中的元素及数量 superlxw1234 spark spark算子 Spark RDD分区元素
关键字：Spark算子、Spark RDD分区、Spark RDD分区元素数量 Spark RDD是被分区的，在生成RDD时候，一般可以指定分区的数量，如果不指定分区数量，当RDD从集合创建时候，则默认为该程序所分配到的资源的CPU核数，如果是从HDFS文件创建，默认为文件的Block数。可以利用RDD的mapPartitionsWithInd
Spring 3.2.x将于2016年12月31日停止支持 wiselyman Spring 3
Spring 团队公布在2016年12月31日停止对Spring Framework 3.2.x（包含tomcat 6.x）的支持。在此之前spring团队将持续发布3.2.x的维护版本。请大家及时准备及时升级到Spring
fis纯前端解决方案fis-pure zccst JavaScript
作者：zccst FIS通过插件扩展可以完美的支持模块化的前端开发方案，我们通过FIS的二次封装能力，封装了一个功能完备的纯前端模块化方案pure。 1，fis-pure的安装 $ fis install -g fis-pure $ pure -v 0.1.4 2，下载demo到本地 git clone https://github.com/hefangshi/f

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他

web前端基础知识

HTML&CSS基础经典版

排版标签

文本格式化标签

图片标签

路径的介绍

音频标签：audio

视频标签：video

链接标签

列表标签

表格标签

合并单元格

列表标签

绝对路径

相对路径

表单标签-input

button按钮标签

select下拉菜单

lable标签

没有语义化的标签

语义化标签

CSS：层叠样式表

css的引入方式

基础选择器

标签选择器

类选择器

id选择器

通配符选择器

清除内外边距,获取所有标签

字体和文本样式

字体：

字体大小

字体粗细

字体样式

字体类型

层叠性

复合属性

水平居中对齐 text-aling:center

文本修饰

行高line-height

颜色取值

选择器进阶

复合选择器

后代选择器

并集选择器

交集选择器

hover伪类选择器

背景相关属性

背景复合

复合写法：推荐：background：color image repeat position

元素显示模式之块级元素

元素显示模式之行内元素

元素显示模式之行内块元素

元素显示模式转换

html嵌套规范

css特性

背景的复合写法

盒子模型

padding内边距

css3盒子模型

margin外边距

合并现象

margin的塌陷问题（重要）

行内元素的margin和padding无效情况

结构伪类选择器

结构伪类选择器之公式(重要)

易错点

伪元素::before&::after

标准流（文档流）

几种居中总结

浮动

浮动的不良影响

css书写顺序（重要）

清除浮动

1.给父级设置高度

2.额外标签法

3.单伪元素清除法

4.双伪元素清除浮动（常用）

5.给父元素设置overflow : hidden

注意

复合写法：`推荐：background：color image repeat position`