![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端学习
记录对于前端的HTML,CSS,JS的简单学习
努力编程的阿曼
这个作者很懒,什么都没留下…
展开
-
前端学习——JavaScript(3)
但JS中并没有强制要求我们使用var定义变量,例如在ES6中我们要使用let来定义变量。但无论如何,局部变量(var,let...)都是安全的,全局变量是不安全的。这说明这个变量i作为全局变量存在。如果我们允许这样的变量存在那么当我们引用别人的JS代码时,别人也有一个这样的i,这样势必会引发错误,所以我们应该避免这样的全局变量存在。当我们用这种方式,并未明确定义变量i时,应该是错误的,但是JS并不会报错,并且在浏览器中我们还能查看到i这个变量。2)其次‘use strict’要放在JS代码的开头。原创 2023-09-27 16:18:01 · 33 阅读 · 0 评论 -
前端学习——JavaScript(2)
2)浮点数会存在精度损失,例如1/3和1-2/3是不相等的,尽量避免使用浮点数来进行运算。=========================================================================b、字符串。在JS中,数据类型的范围非常广,数值、文本、视频、图片等等等等,都可以看作一种数据类型。== :等于(类型不一样,但值一样也会判断为true,如数值1和字符“1”)在JS中不区分小数和整数,全都用number类型来进行表示。在JS中用以下方法定义。原创 2023-09-25 22:31:52 · 31 阅读 · 0 评论 -
前端学习——JavaScript(1)
这就是一个最简单的JavaScript脚本。当然,为了规范性,和CSS一样,我们会创建一个js文件夹,在其中存放js的脚本文件。但是之后再html中我们并不用link来引出js,我们仍然使用script标签引出js脚本,例如。我们可以单独建立一个JavaScript文件,在其中编写JavaScript的代码。当然,也可以在html中用script标签写JavaScript的代码,例如以下代码。调试:我们无法在IDE中对代码进行调试,调试过程应该在浏览器中进行,在控制台中我们可以在控制台对代码进行测试。原创 2023-09-19 16:35:15 · 28 阅读 · 0 评论 -
前端学习之CSS——(7)
font-family——改变字体样式(风格)(同时,这里可以同时输入多种字体样式,对应不同语言,如英语和汉语)例如以下内容,我们需要突出“前端”,就可以用span标签套住,当然,这是约定俗成的。但是我们可以直接在font中写字体样式,风格,大小,粗细。font-weight——改变字体粗细。当然还得对“前端”用css进行美化。font-size——改变字体大小。1、CSS的作用和字体样式。接下来我们希望美化一下字体。2、美化网页,吸引用户。color——字体颜色。1、有效传递页面信息。原创 2023-09-13 20:40:18 · 36 阅读 · 0 评论 -
前端学习之CSS——(6)
除此之外我们还可以选择以xxx开头,以xxx结尾的内容,例如我们要选择href中以http开头的元素可以使用以下内容。但是假如现在,我们需要选择所有的,拥有id属性的a标签选出操作就可以使用属性选择器,a[属性]{}是一种属性选择器。但是如果我们需要具体到某一个id呢这时我们的a[属性]就可以变为a[属性=某一个具体的属性名称],例如。例如添加以上代码后可以发现所有的带有id属性的标签都被选中变为了黄色。当然,有时我们也可以选择一些属性中包含某些名称的内容例如。使用以下的方法我们可以改变所有的a元素。原创 2023-09-11 21:14:26 · 27 阅读 · 0 评论 -
前端学习之CSS——(5)
伪类:就是进行一定的条件判断达到类选择的效果,以下是一些伪类选择器的示例,重在理解,不必特别记忆。原创 2023-09-06 20:47:26 · 22 阅读 · 0 评论 -
前端学习之CSS——(4)
例如在以上的嵌套结构中,我们只希望外面的p标签被选择,而ul和li里面嵌套的p标签不被选择,这时候就要用到层次选择器。如以上的选择器表示,在body后面的所有p标签都会被选择,效果如下。子选择器,和后代选择器类似但只有后面一代会被选择,并不选择嵌套结构。层次选择器有三种:后代选择器,子选择器,相邻选择器,通用选择器。通用选择器:他也会对应一个类,如何将它后面的同代全部选择。相邻(兄弟)选择器:也就是和它一样的同一代将会被选择。它只会选择对应类的下一个标签(不对上)后代选择器:在某个元素的后面选择。原创 2023-09-04 19:57:49 · 50 阅读 · 1 评论 -
前端学习之CSS——(1)
以上的CSS是在HTML中编写的,在大部分的网页中HTML和CSS是分开编写的以便于管理修改,所以接下来会将以上的代码进行分离。style中的h1表示我们选择了body中的h1,并对h1进行操作,原本黑色的字体将会变成蓝色。然后直接将之前的选择器放进style.css文件中,删去原本html中的style中的内容。作为入门,我们将直接咋HTML中编写CSS,CSS会用style标签标出,例如以下代码。所以对CSS的学习主要在于对于各类声明的学习和应用。那CSS的优势在哪儿呢?1、CSS的基本入门。原创 2023-08-30 17:04:34 · 30 阅读 · 0 评论 -
前端学习之CSS——(2)
现在link在css中使用较多,导入式较少,原因在于导入式会先加载框架再进行渲染,在大网页中使用不便,而连接式是同时完成。首先在上一篇文章中,在html中使用style的导入css的方式叫做内部样式标,而单独写一个css并在html中用link链接的叫做外部样式标。接下来介绍一直简单的——行内样式标,在编写例如h1的标签时,可以添加style属性,在这个属性中就可以编写css。而外部样式又有两种导入方式,分别为连接式和导入式,前者就是所用的link,后者使用以下方式导入。1、CSS的几种导入方式。原创 2023-09-01 22:14:24 · 44 阅读 · 1 评论 -
前端学习之HTML——(6)
下拉框的标签为:select,其中选项的标签为:option,其中在option中添加selected会将该选项作为默认选项。滑块与验证以及搜索都可以用input完成(type不同)文件域仍为input,其中type为file。文本域的标签为:textarea。1、列表框文本域和文件域。2、搜索框滑块和简单验证。原创 2023-08-27 16:41:42 · 32 阅读 · 0 评论 -
前端学习之HTML——(5)
表单对应的标签为form,其中method和action为标签必填的内容,前者表示如何发生表单(post?),后者为向何处发送表单。例如一个网站中登录页面,需要输入用户名和密码,这就是一个表单。而我们常用post和get来提交表单。可以看到,使用get方式时,内容会在url中呈现但使用post时ulr中便不会呈现提交内容。前面的input中的属性有以下几种。原创 2023-08-27 14:15:25 · 31 阅读 · 0 评论 -
前端学习之HTML——(4)
内联框架:<iframe src="path" name="mainFrame"></iframe>媒体元素即视频元素和音频元素,二者对应的标签为video和audio。内联框架即在网页里面嵌套了一个网页,例如在B站的视频分享中有嵌入代码。section:Web页面中的一块独立区域。aside:相关内容和应用,通常为侧边栏。footer:标记脚部区域的内容。header:标题头部区的内容。article:独立的文章内容。mainFrane:框架标识名。path:引用页面地址。但这里由于安全问题无法显示。原创 2023-08-21 23:09:49 · 40 阅读 · 1 评论 -
前端学习之HTML——(2)
回到顶部使用#加name跳转到name,而且href中可以嵌套例如先跳转一个网页,然后更#加name跳到对应网页的位置。其表示形式主要为链接文本或图像页面间链接:点击跳转原创 2023-08-07 19:36:01 · 34 阅读 · 1 评论 -
前端学习之HTML——(3)
补充:border为边界属性,colspan为跨列,rowspan为跨行操作。列表就是信息资源的一种展现形式,列表分为有序列表,无序列表,自定义列表。块元素:无论内容有多少,该元素独占一行(p,h1,h2,h3...)行内元素:内容撑开宽度,左右都是行内元素的可以排在一行。table为表格标签,tr:行,td:列。rowspan的效果。1、块元素和行内元素。colspan的效果。原创 2023-08-19 23:52:40 · 24 阅读 · 0 评论 -
前端学习之HTML——(1)
d.meta标签,这是一个描述性的标签,它会描述一些网页的基本信息,如所使用的编码啦,关键词啦等等通常使用name和context的组合。c.换行标签<br/>这是一个自闭合标签遇到这个标签会自动换行,并且换行标签和段落标签有所不同(后续代码中会有展示)b.DOCTYPE,这是告诉浏览器所使用规范,一般可以不加这个,因为现在的浏览器默认所使用的规范为html。a.标题标签<h1></h1> <h2></h2> <h3></h3>分别代表一级、二级、三级标签。d.body标签,其中存放的是网页的主体部分。原创 2023-08-01 18:58:04 · 26 阅读 · 1 评论