前端html css
百度2020校招Web前端工程师笔试卷(第二批)(20~23)
21. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .checkgroup .item{ height: 42px; line-height: 42px; padding: 0 10px; margin: 10px 0; ......
html学的皮毛
1、标题标签 <!DOCTYPE html> <!--声名文档的类型是html--> <html> <!--这个<>叫做标签,这里html的开始 --> <head> <!--这里是html的头部--> <meta charset="UTF-8"> <!--表示当前页面的编码的格式--> <titl ......
前端设计模式——计算属性模式
计算属性模式(Computed Property Pattern):在JavaScript中,可以使用Object.defineProperty()方法来实现计算属性模式,通过get和set方法来计算属性值。 计算属性模式用于将对象的某些属性值与其他属性值相关联。该模式常用于Vue.js等框架中。 ......
什么是前端开发领域中的 time to first byte 指标
在前端开发领域中,time to first byte(TTFB)指标是指浏览器发出请求后,服务器第一次返回数据所花费的时间,即从请求发送到收到第一个字节的时间。这个时间包括了浏览器发出请求到服务器接收到请求、处理请求并返回响应的时间。 TTFB 是一个重要的性能指标,因为它直接影响到用户的体验。较 ......
前端获取视频缩略图方式
代码示例: /** * 获取缩略图 * @param url 视频地址 * @param currentTime 缩略图取第几秒的图片 * @param width 截取的图片宽 * @param height 截取的图片高 * @returns {Promise<unknown>} */ expo ......
前端常用的终端命令
终端主要的目的是可以让我们在文件系统中进行四处浏览和打开/运行某些东西,只是在 windows 上我们之前都是用 GUI 界面进行操作的,现在是在终端中使用 shell 命令进行操作而已。 ......
Gin学习笔记--Gin Html模版渲染
当后台html文件与前台html文件都存储在一个文件下,会显的很臃肿,这时我们需要将前台文件与后台文件区分开来,具体例子如下: 案例代码: package main import ( "github.com/gin-gonic/gin" "net/http" ) type News struct { ......
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi ......
css-内容超出区域
overflow: hidden; //visible、hidden、scroll、auto .remarkArea{ height: 470px; overflow: hidden; } 例如在这个音乐播放器页面.音乐列表和评论列表都会出现内容超出区域的情况 ......
关于 Web 应用的内联 css 和 scss 文件里的 var 关键字用法
为什么网站性能调优准则里都强调要 Use inline fonts and CSS instead of loading them asynchronously? 网站性能优化的一个重要目标是尽可能地缩短页面加载时间,使用户可以更快地访问您的网站。加载字体和CSS样式表是构建页面的重要组成部分,但是 ......
解决html中ol ul li的默认往左偏移的样式问题
在HTML中,有序列表(ol)和无序列表(ul)元素通常会默认有一定的内边距(padding)和外边距(margin),这是由浏览器默认样式表所定义的。这些内边距和外边距可能导致列表向左偏移,从而出现左边超出的情况。 具体来说,ol和ul元素的默认样式表通常会定义: padding-left:列表项 ......
html5新增
语义化元素 header:头部元素 nav:导航元素 section:定义文档某个区域的元素 article:内容元素 aside:侧边栏元素 footer:尾部元素 音频、视频元素 audio video <!-- 兼容写法 audio与video一样写法--> <video src="./x ......
CSS
字体属性 text-decoration none:无任何装饰线,可以去掉a标签默认的下划线 underline:下划线 overline:上划线 line-through:中划线(删除线) text-transform capitalize:首字母大写 uppercase:将所有单词转为大写 lo ......
前端用户图像传递给后端数据库
在业务中,我们将图片上传到服务器之后,需要将图片保存地址返回给前端和保存在数据库中,那么怎么获得这个地址呢? 图片上传到哪里了??? 上传到什么服务器??? 前端上传 后端获取URL地址,保存数据库 数据库查询,返回URL地址前端,显示 ......
css3新特性
css3新特性 圆角 使用CSS3 border-radius属性,你可以给任何元素制作"圆角" border-radius属性,可以使用以下规则: 四个值:第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角 三个值:第一个值为左上角,第二个值为右上角和左下角,第三个值为右下角 ......
一些常用的HTML标签
空格 nbsp; 长传图片在上面实时显示 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1 ......
前端安全性
1.XSS(Cross-site Scripting 跨站脚本)攻击 方式:通过获取用户的Cookie、SessionId等敏感信息,影响网站及用户数据信息安全 XSS攻击要素: 1)攻击者提交恶意代码 2)浏览器执行恶意代码 防御方式: 1.增加攻击难度,降低攻击后果 2.增加验证码功能,防止冒充 ......
css盒子水平垂直居中的几种方式
第一种:son盒子中定位的上下左右全部为0,然后margin:auto 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" conten ......
css让div在页面上下左右居中
.box{ position: absolute; left:50%; top:20%; transform: translate(-50%, -50%); } <div class="box"><div > ......
css3实现模糊背景
☆filter采用高斯模糊,只能在背景图片上,纯色图片不显示 https://www.zhihu.com/tardis/sogou/art/382696698 ......
使用css绘制聊天气泡
实现原理: 给聊天区域的边框补充一个三角形 1: 左三角聊天气泡 .left-box{ max-width: 540rpx; min-height: 80rpx; border-radius: 10rpx; border: 2rpx solid #D7D7D7; position: relative ......
html 原生dom创建添加移除元素
创建添加 <body> <input type="text" id="txt1"> <input type="button" id="btn1" value="创建"> <ul id="ul1"> </ul> <script> window.onload = function () { var oU ......
百度2020校招Web前端工程师笔试卷(第一批)大题部分(21~23)
非大题在本地pdf中有详解 #21.异或 题解 #include <iostream> using namespace std; long long change(long long x){ if(x % 4 == 0){ return x; }else if(x % 4 == 1){ return ......
css 样式笔记
calc calc() 函数用于动态计算长度值。 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px); 任何长度值都可以使用calc()函数进行计算; calc()函数支持 "+", "-", "*", "/" 运算; calc()函数使用标准的数学运 ......
友塔游戏23春招前端笔试复盘
笔试共计三道编程题,时间共计两小时,其中后面两道需要自己处理输入输出,平时习惯不用处理,突然上手才发现自己在这方面很弱,也惊觉自己在C语言方面也已经十分生疏,还需多多练习。 1.给出后序排列的算术式,计算结果, 如9,5,3,-,-,15,*,10,- 最后返回结果为5 思路:从左到右遍历给定的序列 ......
前端设计模式——委托模式
委托模式(Delegation pattern):将一个对象的某个方法委托给另一个对象来执行,它可以帮助我们将对象之间的关系更加灵活地组织起来,从而提高代码的可维护性和复用性。 在委托模式中,一个对象(称为委托对象)将一些特定的任务委托给另一个对象(称为代理对象)来执行。代理对象通常具有和委托对象相 ......
css-输入框和按钮水平对齐
<style> .container { margin: 0 auto; margin-top: 160px; width: 600px; } .search { width: 100%; margin-top: 20px; height: 40px; } .search input { width ......
CSS鼠标样式(cursor)总结(转载)
CSS鼠标样式(cursor)总结 属性值 示意图 描述 auto 默认值,由浏览器根据当前上下文确定要显示的光标样式 default 默认光标,不考虑上下文,通常是一个箭头 none 不显示光标 initial 将此属性设置为其默认值 inherit 从父元素基础 cursor 属性的值 cont ......
CSS选择器(包含CSS3新增的伪类和属性选择器等)
选择器 详见https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors CSS语法 规则由两个主要的部分构成:选择器,以及一条或多条声明(样式) 全局选择器 可以与任何元素匹配,优先级最低,一般做样式初始化 ......