访问我的GitHub

Fork me on Gitee

复习html

2022.4.9

在学习js 的过程中,我发现我之前上课时学习的html因为时间流逝,很多都忘记了。所以再看一下尚硅谷新出的19年的html的视频,而且老师用的也是vscode,不像之前学习js的时候老师用的Hbuilder。

刚发现使用Emmet语法生成18个a标签时,不会自动换行

解决办法:(36条消息) 解决emmet语法中自动换行问题_小菜团子的博客-CSDN博客_emmet自动换行

 

 

vscode代码编辑器折叠所有区域的代码快捷键

查看了使用说明,快捷键如下:

折叠所有区域代码的快捷键:ctrl+k, ctrl+0;

先按下ctrl和K,再按下ctrl和0; (注意这个是零,不是欧)

展开所有折叠区域代码的快捷键:ctrl +k, ctrl+J;

先按下ctrl和K,再按下ctrl和J

自动格式化代码的快捷键:ctrl+k, ctrl+f;

先按下ctrl和K,再按下ctrl和f;

 

 

 

 引入reset文件重置浏览器默认样式的时候,

link标签中的href属性地址使用Ctrl+鼠标左键 单击会发现找不到该文件。明明就在另一个文件夹下面。

1.  使用live server插件加载这个html文件  link使用的相对路径的话,浏览器会报以下错误

          Refused to apply style from 'http://127.0.0.1:5500/studydemo00/Html/studydemo00/css/reset.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

     将link的rel属性删除就不会报错

2.  link使用绝对路径的话,会报以下错误

         Not allowed to load local resource:

查阅资料显示   浏览器为了安全不允许访问  ,所以需要改为相对路径即可  ————>视频老师使用的就是这个方法。

同时,文章告诉我   注意不要在左侧文件上右击复制相对路径,这个路径计算机仍然是找不到的   ———>我就是直接复制的....

搜索如下:

VScode 是按照 工作区根目录 下的 .vscode 文件夹的路径作为绝对路径进行索引,如果工作区中里有许多文件夹,且文件夹内的文件需要引用当前目录下的文件,按照平常的方法写入相对路径是找不到文件的,这时候需要在 .vscode 文件夹里的 launch.json 文件中,在使用的调试环境中加入 "cwd": "${fileDirname}" 来指定调试从哪里去找文件,${fileDirname} 代表当前打开的文件所在的绝对路径,不包括文件名,这样设置后文件中就可以使用正常的相对路径来引入文件。

    --————>现在2022年的vscode似乎已经将launch.json整合到了setting.json中去了。在configurations只加入一个 "cwd": "${fileDirname}" 是不行的,还有三个属性是必须的———>name  request   type 三个属性值

但是我加了之后还是不行。解决不了这个问题,达不到和老师一样的效果。

3.但是如果不用live server插件,直接在使用浏览器打开的话,绝对路径是可以的  相对路径不行 ,会报错  ——>net::ERR_FILE_NOT_FOUND

原因已经在上面了————>  原文链接https://blog.csdn.net/weixin_44560698/article/details/118520872

 

 

 

2022.4.13

跟着老师做小米的官网首页。———>发现一个意想不到的事情

因为老师的视频是之前的,小米的logo也是方方正正的,现在小米的logo改成了圆角,我为了和官网一致,使用了border-radius这个属性,我一开始设定的是百分比,但是怎么样都达不到一样的效果,查看官网的代码发现是使用的19px。学到了,原来还可以使用像素作为单位。已经不记得这个属性的大概用法了,果然复习还是有好处的。  然后悲剧的是,我突然想起来我这张图片是官网上直接下载下来的圆角的图片,而且是抠过图的。我只要把盒子的颜色设置为跟背景颜色一样的自然会是圆角的效果,根本不需要border-radius这个属性。

 

温故而知新————>

transition属性的值是必须是一个确定的值,ex:transition:left 0.3s  如果left是auto的话就不会生效。因为浏览器不知道auto的值是多少。需要加上left的具体值。

 

text-indent: -9999px;  --首行缩进
可以用来隐藏logo中的文字,很常用的一种方式,不会再界面中显示出来,但是SEO能搜索到。
 
 
2022.4.16
仍然跟着老师做小米官网
我发现老师用css大多都是用的class属性来选定选择器。但是这样会因为权重的问题导致选择器选择到不希望的样式,我就很好奇为什么不用id选择器
百度之后

为何推荐使用 class 而不用 id 来定义样式
1、相对于class选择器,id选择器的权重实在太重了(100),这在一些项目中会造成灾难性的样式污染,以及权重陷阱。

2、id在文档内必须是唯一的,而样式很多具有复用性。

3、至于为什么大多数js使用id作为钩子,主要因为js通过id查询dom的速度是最快的。

4、其实class的诞生就是为了样式服务。id 更倾向于方便为脚本服务。

5、大公司的分工比较细,一般id是写js代码的人进行前端事件绑定使用的,如果写css的人将id改掉的时候,那么可能直接影响到了前端的交互效果。

 

 

2022.4.19

首行缩进 text-indent

br换行后将不会进行首行缩进效果

posted @ 2022-04-09 17:26  学前端的杨小杨  阅读(51)  评论(0编辑  收藏  举报