Nano Banana Pro
Agent skill for nano-banana-pro
HTML5是互联网的新一代Web内容构建标准,是构建以及呈现互联网内容的一种语言方式,被认为是互联网的核心技术之一。[查看HTML文档](https://www.w3school.com.cn/html/index.asp)
Sign in to like and favorite skills
HTML5是互联网的新一代Web内容构建标准,是构建以及呈现互联网内容的一种语言方式,被认为是互联网的核心技术之一。查看HTML文档
(1)块级元素:div、h1~h6、hr、p、li、ul、ol、table、from、blockquote;
(2)行内元素:a、span、img、input、textarea、select;
被拖放元素API:
dragstart: 事件主体为被拖拽元素,在开始拖放元素时触发
dragend: 事件主体是被拖放元素,整个拖拽操作结束时触发
drag: 事件主体是被拖放元素,正在拖放元素时触发
目标元素API
dragenter: 事件主体是目标元素,被拖放元素进入时触发
dragover: 事件主体是目标元素,被拖放元素在目标元素内移 动时触发
dragleave: 事件主体是目标元素,被拖放元素移出时触发
drop: 事件主体是目标元素,整个拖放操作完全结束时触发
<div id="draggable" draggable="true">Drag me!</div> <div id="dropzone">Drop here!</div>
// 获取拖拽的元素和放置的区域 var dragItem = document.getElementById('draggable'); var dropZone = document.getElementById('dropzone'); // 添加拖拽事件监听 dragItem.addEventListener('dragstart', function(event) { event.dataTransfer.setData("text/plain", event.target.id); }); // 添加放置事件监听 dropZone.addEventListener('dragover', function(event) { event.preventDefault(); // 阻止默认行为 event.dataTransfer.dropEffect = 'move'; // 设置可拖动的视觉效果 });
H5新增的标签包括:
<video>、<audio>、<source>、<section>、<header>、<footer>、<aside>、<article>、<canvas>、<progress>
<section>定义文档中的节、<header>定义 section 或 document 的页眉、<footer>定义 section 或 document 的页脚、
<article>定义外部的内容、<aside>定义 article 以外的内容、
<audio>定义声音如音乐或其他音频流、<canvas>定义画布,比如矢量图表和其他图像、<video>定义视频如电影片段或其他视频流、<source>为媒介元素(比如 <video> 和 <audio>)定义媒介资源、
<time>定义日期或时间,或者两者、<progress>显示 JavaScript 中耗费时间的函数的进程;
CSS3 是CSS(层叠样式表)技术的最新标准。主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局、过渡动画、2D/3D转换等模块。查看CSS文档
1em = 1rem = 16px(1)定义及区别:
① 回流指的是浏览器重新计算元素属性,然后绘制经修改后的元素的过程,并重新渲染页面,元素的几何属性发生改变(比如修改元素的宽、高或隐藏元素等);
② 重绘指的是浏览器根据元素的样式信息重新绘制页面,但没有改变元素的几何属性(比如修改了颜色或背景色)。
(2)如何避免:
① 尽量使用class属性来批量修改样式;
② 使用CSS3动画或
transition、transform和animation来实现动画效果,因为这些属性通常会在GPU层面处理,而不会引起回流,性能更好;offsetTop、offsetLeft等信息; 常用的伪元素有:
::before(在元素之前插入内容并修改样式)、::after(在元素之后插入内容并修改样式)、::first-letter(设置第一个字符的样式)、::first-line(设置第一行的样式)、::placeholder(设置输入字段的占位符)
!important > 内联样式1000 > Id选择器100 > 属性选择器10 > 伪类选择器10 > Class选择器10 > 伪元素选择器1 > 元素选择器1
标准盒模型:width = content + margin
怪异盒模型:width = content + border + padding + margin
flex-direction: 弹性容器中子元素排列方式,其包含的值有:row、row-reverse、column、column-reverse
flex-warp: 设置弹性盒子的子元素的换行
flex-flow: 上面这两种属性的简写形式
align-item: 设置弹性盒子元素在侧轴上的对齐方式
align-content: 设置行对齐
justify-content: 设置弹性盒子元素在主轴上的对齐方式
flex-basis: 设置子元素在主轴上的初始大小,其值有:auto、%、px
flex-grow: 设置flex的增长系数,与flex-basis类似,以比例设置
BFC(块级格式化上下文)可以理解为CSS元素的一个属性,它属于普通流元素,可以创建一个隔离的/独立的渲染容器。并且可以用于处理外边距重叠现象,可用于清除浮动、阻止元素被浮动元素覆盖等问题;
触发BFC的方式有:html根元素、浮动元素、
绝对定位元素、overflow属性元素等;
require和import的主要区别在于它们所属的``模块化规范不同,加载时机不同,以及动态绑定和缓存方式的不同`。
(1) 所属规范不同: import是ES6(ECMAScript 2015)引入的关键字,属于ES模块化语法规范,主要用于浏览器端;require是CommonJS规范的一部分,主要用于Node.js环境,无法直接用于浏览器端;
(2) 加载时机不同: import是
静态引入,必须在文件的顶部使用,提高了加载效率,但也限制了其使用位置,编译时加载;require是动态引入,可以在代码的任何位置使用,运行时加载,更加灵活但可能影响性能。
(3) 动态绑定和缓存方式不同: import提供静态分析,支持宏类型检验,但无法实现动态绑定;require提供动态绑定,适合服务器或浏览器环境,多次要求相同的模块时,只会执行一次,因为
缓存机制的存在。
CSS加载不会阻塞DOM的解析,但是会阻塞DOM的渲染,因为解析过程两者是独立并行的,而渲染过程这是两者合并进行的;所以要避免CSS加载时间过长,因此就需要对CSS进行包括
合并css文件或压缩、减少请求数等性能优化操作;
CSS加载会堵塞JS运行,因为浏览器中的渲染进程是多线程的,分为GUI渲染线程、JS引擎线程、事件触发线程、定时器线程、异步http请求线程等等,由于JS可以操作DOM和CSS样式,因此为了避免出现冲突,CSS加载会阻塞JS的执行;