![](https://img-blog.csdnimg.cn/d52d0b99d2b7463a85fdde3d52f8805e.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML+CSS+JavaScript
文章平均质量分 66
HTML+CSS+JavaScript学习
LearnerZJ
这个作者很懒,什么都没留下…
展开
-
JS-数据类型
JS是一门弱类型语言,这意味着不用提前声明变量的类型,在程序运行过程中,只要该变量被赋值,则类型会被自动确定。也意味着相同的变量可用作不同的数据类型。JS中数据类型分为:(1)简单数据类型(2)复杂数据类型简单数据类型:数值型,字符串型,布尔型,未定义,空(Number,String,Boolean,Undefined,Null)复杂数据类型:对象(object)原创 2023-10-31 14:58:18 · 65 阅读 · 0 评论 -
JS-变量
一个变量被重新复赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准。同时声明多个变量时,只需要写一个 var, 多个变量名之间使用英文逗号隔开。声明关键字:var 例子:var age 声明一个变量,变量名是age。初始化:声明+赋值 例子:var age = 23 声明变量的同时赋值。赋值符号:= 例子:age = 23 为变量age赋值23。原创 2023-10-30 14:30:00 · 21 阅读 · 0 评论 -
JS-引入
JS 引擎:也称为 JS 解释器。用来读取网页中的JavaScript代码,对其处理后运行,比如 chrome 浏览器的 V8,逐行解释翻译为机器语言执行。JavaScript 是世界上最流行的语言之一,是一种运行在客户端(可以认为是自己的电脑)的脚本语言 (Script 是脚本的意思)渲染引擎:用来解析HTML与CSS,俗称内核,比如 chrome 浏览器的 blink ,老版本的 webkit。脚本语言:不需要编译,逐行进行解释并执行。浏览器分成两部分:渲染引擎和 JS 引擎。原创 2023-10-30 14:11:09 · 26 阅读 · 0 评论 -
CSS 动画
(1)可通过设置多个节点来精确控制一个或一组动画 ,常用来实现复杂的动画效果。(2)相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。原创 2023-10-30 16:05:59 · 84 阅读 · 0 评论 -
HTML5 新特性
</video><audio src="文件地址" controls="controls"></audio>视频标签是重点,我们经常设置自动播放,不使用 controls 控件,循环和设置大小属性。<video>原创 2023-10-31 13:53:37 · 69 阅读 · 0 评论 -
CSS calc函数
括号里面可以使用 + - * / 来进行计算。原创 2023-10-31 13:40:44 · 87 阅读 · 0 评论 -
CSS3 图片模糊
filter: 函数();例如: filter: blur(5px);blur模糊处理 数值越大越模糊。原创 2023-10-31 13:39:29 · 53 阅读 · 0 评论 -
CSS3 盒子模型
如果盒子模型改为了box-sizing: border-box , 那padding和border就不会撑大盒子了(前提padding 和border不会超过width宽度)CSS3 中可以通过 box-sizing 来指定盒模型,有2个值:即可指定为 content-box、border-box,这样我们计算盒子大小的方式就发生了改变。1. box-sizing: content-box 盒子大小为 width + padding + border (以前默认的)原创 2023-10-31 13:38:19 · 28 阅读 · 0 评论 -
CSS3 新增选择器
nth-child会把父元素中的所有盒子都排列序号,例如section div:nth-child(1) 执行的时候先看 nth-child(1),再回去看前面的div。nth-of-type会把父元素中的指定盒子排列序号,例如section div:nth-of-type(1)执行的时候先看div,再看nth-of-type(1)before 在父元素内容的前面创建元素,after 在父元素内容的后面插入元素。nth-child(n) 选择某个父元素的一个或多个特定的子元素(重点)原创 2023-10-31 13:35:56 · 34 阅读 · 0 评论 -
CSS3 过渡
在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。过渡动画: 是从一个状态 渐渐的过渡到另外一个状态经常和:hover搭配使用。原创 2023-10-31 09:07:24 · 31 阅读 · 0 评论 -
CSS 2D转换
同时使用多个转换,其格式为:transform: translate() rotate() scale() ...等。transform:scale(2) :只写一个参数,第二个参数则和第一个参数一样,相当于 scale(2,2)translate中的百分比单位是相对于自身元素的 translate:(50%,50%)sacle缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子。x y 默认转换的中心点是元素的中心点 (50% 50%)默认旋转的中心点是元素的中心点。原创 2023-10-30 15:41:23 · 26 阅读 · 0 评论 -
HTML+CSS+JavaScript第八天
浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片),这是由于浮动的诞生是为了解决环绕文字的效果的。实现功能:某个元素可以自由的在一个盒子内移动位置,并且压住其它盒子,或者当我们滚动窗口的时候,盒子是固定屏幕某个位置的。子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。相对定位是元素在移动位置的时候,是相对于它原来的位置(作为标准流时的位置)来说的。它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。原创 2023-10-22 09:25:05 · 34 阅读 · 0 评论 -
HTML+CSS+JavaScript第七天
若根据此时内容的大小给定父盒子的高度,则当有更大的内容需要填到这个盒子中去时,就会导致空间不足,例如新闻。为了约束浮动元素位置,网页布局一般采取的策略是:先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置.符合网页布局第一准则。浮动的元素之间是没有间隙的,如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行排列。注意点:一个盒子里面有多个子盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防止引起问题。此时两端对齐,对齐的是其父亲div的区域,约束了浮动盒子的位置。原创 2023-10-21 15:18:11 · 159 阅读 · 0 评论 -
HTML+CSS+JavaScript第六天
分开设置4个角的圆度:borde-top-left-radius,borde-top-right-radius,borde-bottom-left-radius,borde-bottom-right-radius。注意点:边框的宽度会影响盒子的大小,例如设置盒子的宽度和高度为200px,边框的宽度为10px,则最终体现的盒子大小是220px*220px,因此设置盒子的尺寸时,要用宽度和高度减去边框的宽度。当嵌套关系的两个块元素,父元素有上外边距,子元素也有上外边距,此时父元素会塌陷较大 是外边距值。原创 2023-10-21 10:04:35 · 30 阅读 · 0 评论 -
HTML+CSS+JavaScript第五天
背景图片:background-image: none(默认,无背景图)|url(url背景图像的绝对地址或相对地址),与img的区别在于便于控制图片的位置。行内块元素:在行内元素有几个特殊的标签:img,input,td,具有块元素和行内元素的特点。,改变图片在背景中的位置。行内元素: a,strong,b,em,i,del,s,ins,u,span。元素1和元素2用>隔开,元素1是父级,元素2是子级,最终选择的是元素2。背景属性:背景颜色,背景图片,背景平铺,背景图片位置,背景图像固定等。原创 2023-10-21 08:59:14 · 33 阅读 · 0 评论 -
HTML+CSS+JavaScript第四天
该属性值可有多个字体,每个字体用逗号隔开,如果有空格隔开的多个单词组成的字体,需要加上双引号,英文,中文都可以,但是尽量使用英文,例如"Microsoft YAHEI"类选择器相当于人名,id选择器相当于身份证号,对于修改样式类选择器用的多,id选择器常与JavaScript搭配使用。浏览器会看第一个字体是否兼容,若不兼容就查看下一个字体,若输入的字体浏览器都不兼容,就采用浏览器默认的字体:微软雅黑。基础选择器包括:标签选择器,类选择器,id选择器,通配符选择器。原创 2023-10-18 10:18:57 · 25 阅读 · 0 评论 -
HTML+CSS+JavaScript第三天
请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached,响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。meta标签的组成:它有两个属性,分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。可以向浏览器传输一些信息。原创 2023-10-17 16:19:30 · 25 阅读 · 0 评论 -
HTML+CSS+JavaScript第二天
每一个表单元素都可以设置唯一的name值,其中单选按钮或复选框若有多个,则可以设置同一个name值,这样才能实现多选一的效果,value属性可以设置表单元素的初始文本。shape = rect 则coords = "x1,y1,x2,y2",(x1,y1)是左上角的坐标,(x2,y2)是右下角的坐标。定义独立的内容,也就是说artical标签包含的内容必须是有意义且独立于文档的其它部分,例如评论,新闻等,这个内容可以是一篇文章。蓝色环绕的区域就是表单域,绿色标记的就是表单元素,紫色标记的就是提示信息。原创 2023-10-17 15:36:26 · 30 阅读 · 0 评论 -
HTML+CSS+JavaScript第一天
html标签的属性lang 指定当前文档显示的语言 en表示英语(英文网站) zh-CN表示中文(中文网站),但是定义为英文的文档也可以显示中文,定义为中文的文档也可以显示英文。相对路径和绝对路径:./表是当前文件夹,可以省略,../表示上一级文件夹,../../表示上上级文件夹,以此类推,使用时尽量使用相对路径。web标准包括结构,样式,行为三方面,这三者是相互分离的,其中html来决定结构,css决定样式,javascript决定行为。设置目标位置的标签的id属性 = 刚才的名字。原创 2023-10-16 16:22:41 · 43 阅读 · 0 评论