![](https://img-blog.csdnimg.cn/2019091813595558.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
htmlcssjs基础
文章平均质量分 53
前端的一些基础
WAWA战士
起飞
展开
-
小程序this.setData
每当我们尝试在wx.request的success回调函数中使用this.setData总会说setData undefined,这时候我联想到之前学的promise,对于wx.request而言,参数是{}即花括号里的是对象,对象中的success方法就类似于之前promise的resolve,即向url请求成功后就会调用success方法而this是 谁调用谁就是this所指对象,这里显然是wx.request调用了,所以this不再是Page的this,也就没有setData方法了var pro.原创 2022-04-16 21:21:03 · 679 阅读 · 0 评论 -
js原型和原型链
静态成员和实例成员静态变量或者静态方法直接 类名.XX=,即可声明感觉比java严格,java的静态变量可以被类和对象访问,原型构造函数的函数名就是类名,如果要用构造函数法生成对象,那么可以把这个构造函数看成java中类的构造函数,即都是只有函数名,只是说不需要像java那样先声明public class XX,但与java在类中直接声明成员变量不同,js把成员变量和成员方法的声明放到构造函数里。(注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。)但构造函数里最好是只有原创 2022-04-11 22:37:33 · 302 阅读 · 0 评论 -
js-变量
在 ES6 之前,JavaScript 只有两种类型的作用域:全局作用域和函数作用域。ES6 引入了两个重要的 JavaScript 新关键词:let 和 const这两个关键字在 JavaScript 中提供了块作用域(Block Scope)变量(和常量)全局作用域全局(在函数之外)声明的变量拥有全局作用域。实例var carName = "porsche";// 此处的代码可以使用 carNamefunction myFunction() { // 此处的代码也可以使用 car原创 2022-04-08 20:41:28 · 1105 阅读 · 0 评论 -
元素包含关系
以前:块级元素可以包含行级元素,行级元素不可以包含块级元素,a元素除外1.容器元素可以包含任何元素2.a元素几乎可以包含任何元素3.某些元素有固定的子元素(ul>li,ol>li,dl>dt+dd)4.标题元素和段落元素不能相互嵌套,并且不能包含容器元素...原创 2020-06-09 14:00:14 · 183 阅读 · 0 评论 -
容器元素
容器元素该元素代表一个块区,内部用于放置其他元素div元素没有语义可以嵌套多个div现在表示的是三个块语义化容器元素div很难区分,后面我们阅读代码会很难因此有了语义化容器元素header:通常用于表示页头,文章头部footer:通常用于表示页脚,文章尾部article:通常用于表示整篇文章section:通常用于表示章节aside:通常用于表示附加信息,侧边栏...原创 2020-06-08 22:12:25 · 129 阅读 · 0 评论 -
列表元素
有序列表ol (ordered list)li (list item)可以在ol元素中加入reversed 使序号倒过来,4321这样可以加type="",引号里面是序号种类(罗马数字,阿拉伯数字,字母…)无序列表ul(unordered list)常用于菜单,新闻定义列表通常用于术语的定义dl:definition listdt:definition titiledd:definition description...原创 2020-06-08 21:47:08 · 154 阅读 · 0 评论 -
多媒体元素
video 视频元素controls元素只能被赋值为controls,控制控件的显示(播放)只有两种状态,取值为属性名,要么不写,这种叫布尔属性autoplay属性:布尔属性,自动播放muted属性:布尔属性,静音播放loop属性:布尔属性,循环播放audio 音频元素和上面的video一样旧版本浏览器不支持这两个元素(用flash)不同浏览器支持的音频格式可能不同我们可以把src属性拿下来,用source子元素来使用src,然后写多个source,引号里面写不同视频格式,浏览器支持原创 2020-06-08 21:28:43 · 258 阅读 · 0 评论 -
图片元素
img元素image缩写,空元素src属性:是source缩写,引号里面是图片地址alt属性:用于断网时描述图片信息,引号里面填写和a元素联用网页是一张图片,点击可以跳转到360和map元素联用map的子元素:areashape属性选择形状圆形的coords属性内容分别是圆心坐标,半径x轴以图片左上角为原点向右出发,y轴以图片左上角为原点向下出发,都是正数target属性使用_blank使得点击这个链接会前往新的窗口,否则不写默认在原网页刷新进入新链接当我们点击太阳的时候会原创 2020-06-08 21:11:05 · 326 阅读 · 0 评论 -
路径的写法
站内资源当前网站的资源站外资源非当前网站的资源站外资源:使用绝对路径绝对路径书写格式 协议名://主机号:端口号/路径 (叫url地址)协议名:http,https,file主机名:域名,IP地址端口号:http协议默认端口号是80,https协议默认端口号443站内资源:使用相对路径以./开头,表示当前资源所在目录(可以省略)…/表示返回上一级目录理解一下文件位置,从当前文件目录出发回到上一级文件目录,然后找到test.html...原创 2020-06-08 20:00:49 · 534 阅读 · 0 评论 -
a元素
超链接href属性hyper reference:通常表示跳转地址1.跳转地址2.跳转某个锚点(页面内跳转)地址是改变了的二者等价+p就是 紧接着是兄弟元素id属性:全局属性,表示元素在文档中的唯一编号效果:点击章节二页面滑到章节二的位置下面两行都回车就能得到上面一样的效果这句话也是给每个章节赋予id属性,中括号表示赋予属性这种写法可以回到顶部这种也可以直接跳转到chapter3...原创 2020-06-08 19:35:46 · 262 阅读 · 0 评论 -
html实体
实体字符通常用于在页面显示一些特殊符号(c语言转义字符)1.&单词2.&#数字(十进制和十六进制都有,去html entity的learn more查)小于符号<大于符号>空格符号(尽量还是用css搞) &符号&...原创 2020-06-08 16:51:18 · 78 阅读 · 0 评论 -
文本元素
文本元素可以去百度查所有元素:html元素周期表h元素标题headh1*6 + 回车自动生成h1*6 {标题名称} + 回车 自动生成h$ * 6 > {$级标题} + 回车$会每次递增效果图p元素段落paragraphlorem:乱数假文,没有任何意义的文字(可以看成random)表示随机生成6个无意义文字段落表示随机生成6个无意义文字段落,每个段落只有1个单词,可以修改后面的数字span元素(无语义)仅用于设置样式,因为css必须要在元素的基础原创 2020-06-08 16:42:13 · 165 阅读 · 0 评论 -
语义化
什么是语义化1.每一个html元素都有具体的含义比如a元素:超链接p元素:段落h1元素:一级标题2.所有元素与展示效果无关html搞内容css搞展示效果(空一行,加粗变小)之所以我们写完html就能在网页上看到,是因为浏览器有默认的css样式为什么要语义化1.为了搜索引擎优化(seo)每隔一段时间,搜索引擎会从整个互联网中,抓取页面源代码2.为了让浏览器理解网页阅读模式,语音模式...原创 2020-06-08 15:58:18 · 94 阅读 · 0 评论 -
第一个网页
! + Tab键自动补全代码注释ctrl + / 出来是这样的 < ! - - 左边是起始,右边是结束 - - >第10行代码的整体叫做 元素(或者标签)元素的构成起始标记<a + 元素属性 + 元素内容 + 结束标记 </ a>起始标记的a和结束标记的a必须一样,在这里a对应一些功能,不要随便改动效果:按下鼠标右键,点击open with live server ,可以跳转到B站看看第13行到15行的代码你在浏览器用鼠标指我们代码原创 2020-06-08 15:39:08 · 87 阅读 · 0 评论 -
body元素的背景
画布 canvas一块区域特点:1.最小宽度为视口宽度2.最小高度为视口高度html元素背景覆盖画布body元素背景如果html元素有背景,body元素的背景正常如果html元素没有背景,body元素的背景覆盖画布关于画布背景图背景图(background-color没事)的宽度百分比,相对于视口背景图的高度百分比,相对于html元素高度背景图的水平方向位置百分比,预设值,相对于视口背景图的垂直方向位置百分比,预设值,相对于html高度...原创 2020-06-19 16:55:09 · 130 阅读 · 0 评论 -
行高的取值
line-height像素值无单位数字当前字体大小的倍数,先继承,再运算,把这个倍数给文本em单位2em,即当前字体大小的两倍,这个会先计算出2em对应的px,然后再运用到文本百分比原创 2020-06-19 15:29:22 · 180 阅读 · 0 评论 -
盒子位置
左浮动的盒子向上向左排列右浮动的盒子向上向右排列浮动盒子的顶边不得高于上一个盒子的顶边若剩余空间无法放下浮动的盒子,则该盒子向下移动,直到具备足够的空间能容纳盒子,然后再向左或右移动...原创 2020-06-19 14:41:30 · 219 阅读 · 0 评论 -
布局
多栏布局二栏布局如果我们希望主区域不定宽,即页面变小变大主区域也跟着变化,那么可以把主区域的float改为overflow:hidden;(原理结合上一节课讲的bfc规则)并且container的width改为90%即可我们可以观察到页面变小的同时main区域的width也变小了要想将二者分开一点,我们必须设置的是浮动元素的margin因为主区域的margin是相对于container而言的,而他们之间隔着浮动元素三栏布局...原创 2020-06-19 14:24:29 · 188 阅读 · 0 评论 -
块级格式化上下文
全称block fomatting context简称bfc他是一块独立的渲染区域,规定了该区域中常规流块盒的布局BFC渲染区域这个区域由某个html元素创建,以下元素会在其内部创建bfc区域根元素即html元素这意味着,html元素创建的BFC区域覆盖了网页中所有元素浮动和绝对定位元素overflow不等于visible的块盒独立不同的bfc区域,他们进行渲染时互不干扰创建bfc的元素,隔绝了他内部与外部的联系,内部的渲染不会影响到外部具体规则:创建bfc的元素,他的自动高度需原创 2020-06-18 18:22:12 · 145 阅读 · 0 评论 -
常规流块盒
水平方向上必须撑满包含块在包含块的垂直方向上依次摆放若外边距无缝相邻,则进行外边距合并自动高度和摆放位置无视浮动元素原创 2020-06-18 16:06:21 · 161 阅读 · 0 评论 -
web字体和图标
web字体解决用户电脑上没有安装相应字体强制让用户下载该字体,只是临时下载,重新刷新页面的时候又要下载一次字体图标图标网站选择几个图标加入到库中,然后创建新项目,生成链接,一般使用font class,复制链接到html中使用link导入即可,我的理解是生成了一个css样式表装着我们准备用的图标如果我们要使用某个图标,就在那个网站上复制图标代码,然后用元素i生成类名为图标代码加上这些图标可以看成是文字(可以像文字一样修改个各种属性),不是图片...原创 2020-06-18 16:00:16 · 333 阅读 · 0 评论 -
@规则
import@import导入另外一个css文件charset@charset “utf-8”;告诉浏览器该css文件使用的字符编码集为utf-8必须写在第一行,一般出现中文才写原创 2020-06-18 14:37:45 · 103 阅读 · 0 评论 -
网站图标
比如这是我们使用的图标加上一行link,rel(relation)改为icon,href加上图标地址左上角图标改变了原创 2020-06-18 14:28:20 · 77 阅读 · 0 评论 -
表格元素
表格渲染速度慢调整table宽度tbody边框合并border-collapse表尾tfoot列合并colspan行合并rowspan原创 2020-06-18 12:35:16 · 92 阅读 · 0 评论 -
美化表单元素
新的伪类1.focus元素聚焦时的样式2.checked单选或多选框被选中的样式常见用法1.重置表单元素样式outline偏移量初始化,取消outline2.设置textarea是否允许调整尺寸css属性resize当resize为both:默认值两个方向都可以调整尺寸none:不能调整horizontal:水平方向可以调整vertical:垂直方向可以调整3.文本框边缘到内容的距离下面任意一个都可以做到首行缩进4.控制单选和多选的样式label的子原创 2020-06-17 22:29:25 · 123 阅读 · 0 评论 -
表单元素
一系列元素,主要用于收集用户数据input元素输入框type属性选择输入框的类型,比如text就是普通文本输入password密码框date日期选择框,有兼容性问题search搜索框,有兼容性问题手机上用的比较多,我们搜索东西的时候,键盘的 “回车” 会变成 “搜索” ,不过在电脑端没什么变化range滑块color颜色选择框number数字输入框,只能输入数字还可以结合min(最小值),max(最大值),step(每次增加或减少的大小)原创 2020-06-17 18:43:51 · 127 阅读 · 0 评论 -
target属性
target:"_blank";就是在新窗口打开当前链接原创 2020-06-17 14:48:26 · 490 阅读 · 0 评论 -
iframe元素
框架页iframe通常用于在网页中嵌入另一个网页是可替换元素frameborder为0表示无边框,1代表有复习:可替换元素特点1.通常是行盒 display:inline;2.通常显示的内容取决于元素的属性3.css不能完全控制其中的样式4.具有行块盒的特点比如b站,我们复制 嵌入代码...原创 2020-06-17 16:36:17 · 198 阅读 · 0 评论 -
更多的样式
透明度opacity设置整个元素的透明,取值0到1,越小越透明下面是opacity为0.3通过rgba设置alpha大小鼠标样式可以更换鼠标图标:url里面填写地址(可以是文件,也可以是外面的),auto意思是如果引用的图片失效了,就用默认的,你也可以改成pointer,那就是url图片失效,最终以pointer形式呈现请一定要注意了,url引用的图片必须是ico格式的,自己改个后缀的是不行的!!!!!!!!!这里是一个ico图标的链接盒子隐藏1.display:none;不原创 2020-06-15 22:34:14 · 310 阅读 · 0 评论 -
更多的选择器
伪类选择器first-child:first-child表示所有第一个子元素通常与一些元素连用,比如li,表示第一个子元素且为li元素要注意一下,当第一个子元素不是li就没用这种情况下又有first-of-type就是子元素当中第一个××类型的元素这里选中了子元素中第一个li元素last-child和first-child一样,但选择的是最后一个子元素,我们仍然可以搭配其他元素使用这里表示子元素中的最后一个,并且为li元素last-of-type选择子元素中的最后1个下原创 2020-06-15 13:53:08 · 132 阅读 · 0 评论 -
cursor
设置cursor:pointer;能让我们指着这个东西的时候有个小手指,比如我们平时点各种链接原创 2020-06-14 16:53:13 · 115 阅读 · 0 评论 -
透明
每个颜色都具有透明通道,大小为0到1,(alpha)越小越透明1.rgb(红,蓝,绿,alpha)2.hex: #红蓝绿透明度原创 2020-06-14 16:26:32 · 199 阅读 · 0 评论 -
包含块
包含块:是视觉格式化模型的一个重要概念,它与盒模型类似,也可以理解为一个矩形,而这个矩形的作用是为它里面包含的元素提供一个参考,元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。可以把包含块理解成一个参考系。那么怎么确定包含块的所属关系了,简单的说谁是谁的包含块,谁是谁的参照系。————————————————版权声明:本文为CSDN博主「wust_cyl」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。原文链接:https://blog.csdn.net/转载 2020-06-14 12:32:58 · 128 阅读 · 0 评论 -
定位应用
二级菜单当我们上京东淘宝的时候,上面有一行的菜单,我们指着其中一个选项会有另一个菜单出现主要是利用display属性,当我们鼠标悬停在 ”我的京东“那个地方, 写上display:block;,平常没指的时候写上的是二级菜单的属性,然后加上一句display:none;意思是不生成盒子具体例子实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <原创 2020-06-14 14:42:05 · 209 阅读 · 0 评论 -
定位
手动控制元素在包含块中的精确位置涉及css属性:positionposition属性:默认值:static 静态定位(不定位)relative:相对定位absolute:绝对定位fixed:固定定位一个元素只要position不是static,就被认为是定位元素定位元素会脱离文档流(相对定位除外)一个脱离了文档流的元素:1.文档流中的元素摆放时,会忽略脱离了文档流的元素2.文档流中的元素计算自动高度时,会忽略脱离了文档流的元素相对定位不会导致元素脱离文档流,只是让元素在原来位置上偏原创 2020-06-14 01:19:23 · 164 阅读 · 0 评论 -
浮动
应用场景:1.文字环绕2.横向排列基本特点修改float属性为left:左浮动,元素靠上靠左right:右浮动,元素靠上靠右默认值为none1.当一个元素浮动后(不为none),元素必定为块盒(更改display属性为block)2.浮动元素的包含块,和常规流一样,都为父元素的内容盒3.盒子尺寸1.宽度为auto时,适应内容宽度(根据内容增加而变宽)2.高度为auto时,与常规流一致,适应内容的高度3.margin为auto时为04.边框,内边距,百分比设置和常规流一样4.盒子原创 2020-06-12 01:22:56 · 151 阅读 · 0 评论 -
常规流
盒模型:规定单个盒子的规则视觉格式化模型(布局规则):页面中的多个盒子排列规则大致分为三种常规流又分为常规流,文档流,普通文档流,常规文档流、所有元素,默认属于常规流布局总体规则:块盒独占一行,行盒水平依次排列包含块(containing block):每个盒子都有他的包含块,包含块决定盒子排列区域浮动定位...原创 2020-06-10 21:19:51 · 297 阅读 · 0 评论 -
行盒的盒模型
行盒定义:display属性为inline的元素常见的行盒:包含具体内容的元素span,strong,em,i,img,video,audio特点1.盒子沿着内容延伸2.行盒不能设置宽高应使用字体大小,行高,字体类型来间接调整3.内边距(填充区)水平方向有效,垂直方向仅仅会影响背景,不会占据空间,会覆盖别的盒子,而不是挤走4.边框水平方向有效,垂直方向仅仅会影响背景,不会占据空间,会覆盖别的盒子,而不是挤走5.外边距水平方向有效,垂直方向仅仅会影响背景,不会占据空间,会覆盖别的盒子原创 2020-06-10 14:29:38 · 175 阅读 · 0 评论 -
盒模型的应用
box-sizing属性默认为content-box,所以height和weight默认修改的是内容盒,其实我们可以修改成别的盒子改变背景覆盖范围默认情况下,背景覆盖边框盒可以通过backgroun-clip修改溢出处理overflow属性,控制overflow属性默认为visible改成hidden可以隐藏溢出部分改成scroll生成滚动条当然那是简写,也可以写成overflow-y:scroll使得只有纵向滚动条,x也行,还可以把后面修改为auto,在需要滚动条的时候加入滚原创 2020-06-10 00:53:28 · 152 阅读 · 0 评论 -
盒模型
box:盒子,每个元素在页面中都会生成一个矩形区域盒子类型1.行盒,display等于incline的元素行盒在页面中不换行display默认值为incline2.块盒,display等于block的元素块盒独占一行浏览器默认样式表设置的块盒:容器元素,h1~h6,p常见的行盒:span,a,img,video,audio盒子的组成部分从内到外分别是1.内容 contentwidth,height,设置的是盒子内容的宽高内容部分通常叫做整个盒子的 内容盒 content-box可原创 2020-06-09 21:22:45 · 88 阅读 · 0 评论