小白在学习 | HTML前端学习笔记
##各位行业的前辈们，大家好！ 我是一名纯技术小白，目前在学习“前端+云计算”方向。因为刚入门，很多理解可能还不够准确，如果各位前辈在日常浏览时，发现我在表达或实践上有什么偏差、不足，恳请不吝赐教，哪怕一两句指点，对我都会是很大的帮助。 感谢大家的耐心，也希望能在这个领域不断进步。
现在在跟着哔哩哔哩中的“黑马程序员”的入门级教程学习，由于我对信息技术的了解十分的浅显，对这方面专业软件就跟着教学视频进行下载使用（VS Code＋谷歌浏览器），当然等基础操作没问题时，也十分愿意尝试大家推荐的其他软件。
一、问题1：复制本地文件路径到img，没有跳出图片选择提示
我的操作：跟着视频复制电脑本地文件放图片的路径，VS Code 没有自动弹出图片选择的列表。
解决方法：看到弹幕说的操作，直接点击想要的图片，复制图片路径粘贴进去。实际操作确实解决了图片显示问题。
我的疑惑：为什么按照教程的说的直接复制文件路径不行？是我缺少了什么插件或设置吗？
二、问题2：复制网页logo链接到img，有的能显示，有的不能
具体操作：
- 在火狐浏览器主页复制火狐logo的图片链接，粘贴到
src=""，谷歌浏览器无法加载 - 同样试了B站主页logo，也无法加载
- 但试了蝉妈妈主页的logo，可以正常显示
我的猜测：是不是某些网站的图片不允许被其他网页直接引用？
请教前辈：这个问题是普遍现象吗？有没有通用的解决办法？
上课笔记
第一节课HTML基本骨架
1.HTML与CSS的区别: HTML又叫超文本标记语言，主要负责网页的标题、段落、图片、链接、列表、表单等网页骨架。 CSS又名层叠样式表，主要负责颜色、字体、大小、间距、布局、背景、响应式等网页呈形外观。 （我的理解为HTML呈现出来的是素描画，而CSS负责上色和完善内容。） 2.HTML基本骨架是网页模板
- 呈现形式：
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页主体
</body>
</html>
-
html:整个网页
-
head:网页头部，用于给浏览器看的代码，如CSS。
-
body:网页主体，用于给用户看的代码，如图片和文字。
-
title:网页标题
3.操作：
第一步：新建文件（后缀：.html＋enter）
第二步：快速生成骨架：＇!(英)＋enter/tab＇
第二节课标签关系
1.关系
<html>
<head></head>
<body>
</body>
</html>
如上所示：（1）html与（head和body）属于嵌套关系，head和body在html之内。（2）head与body属于并列关系，负责的部分有差异，head负责标题，默认不需要换行;body负责主体部分，内容多，默认需要换行。
-2.代码缩进
--后缩进：tab
--前缩进：shit＋tab
第三节课注释
-1.注释： 对代码进行解释说明，提高程序代码的可读性。如方其他便程序员了解我们的代码，还可以方便我们自己修改代码。 （学习、工作中，关键代码都要加）
- 呈现形式：<!——…——> --特点：可以在源文档中任何地方地方插入注释，不会显示在浏览器中。 --快捷键：＇Ctrl＋/＇
2.操作
-
第一步选择你想要注释的内容。
-
第二步在内容的任意地方Ctrl＋/生成注释代码
-
第三步在注释带那种填写你的解释说明。（<!——填写解释说明——>）
第四节课标签
1.标题标签（h1~h6）→双标签
-
特点：文字加粗、字号逐级渐小、独占一行（换行）
-
快速换行：＇Ctrl＋enter＇
-
注：h1一个网页只能用一次，用于新闻标题或者网页logo。h2~h6没有限制。
2.段落标签（<p></p >）→双标签
-
用于新闻段落、文章、产品描述信息等。
-
特点：独占一行、段落之间存在间隙。
3.换行与水平线标签→单标签
- 换行：
- 水平线：
-操作：
<body>
第一行文字
<br>
第二行文字
</body>
- 注：一个
<br>只用于换行，如果想要隔多几行就可以再往里面加多几个<br>，水平线放在你想要画的那文字下面，如果我要第二行有水平线，且第一二行隔开一行，如下。
<body>
第一行
<br>
<br>
第二行
<hr>
</body>
4.文字格式化标签→双标签
用于突出重点，常见有加粗、倾斜、下划线、删除线等。
-
加粗：strong/b
-
倾斜：em/i
-
下划线：ins/u
-
删除线：del/s
-
注：两者在视觉上没有差异，但是strong,ins,em,del都带有强调含义，且效果都在同一行显示。比较常用左侧指令。
操作：在双标签之间填写内容
<strong>填写内容</strong>（不换行）
第五节课图像标签
- 1.< img src＝"图片的URL">
单标签 src=" "，用来指定图的位置和名称，填写“./”，VS Code有提示功能。
- 2.属性 < img src="./图.jpg" alt="替换的文本" title="鼠标停在图上的提示文本">
-- alt：图片无法显示时，显示的文字。
-- title:鼠标停留在图上时，显示的文字。
-- width代表图宽度，height代表图高度，两者只有数值没有单位。
src,alt,title,width,height都是属性名，图、替换文本、提示文本都是属性值。
- 属性名＋属性值＝属性 注：属性写在尖括号中，标签名后面，标签名和属性之间、属性与属性之间用空格隔开，属性不分前后顺序。 -操作：
<body>
< img src＝"./cat.jpg" alt＝"这是一只猫" title＝"猫">
</body>
第六节课路径
相对路径主要用于变动概率大的本地存储文件，绝对路径主要用于发生变动概率小的网页图像链接
符号表示
.：当前文件夹
..：上一个文件夹
/:进入文件夹
../：进入上一个文件夹
快捷键
在学习的过程中，我发现快捷键十分好用，但是太多了容易记不住😭，我很少用电脑，除了课程作业，我几乎不会另外使用电脑，所以不是很熟练。 VS Code中
保存（很重要的一步）：Ctrl＋S
查看效果（我老是按成Ctrl）：alt＋b
快速生成html骨架（这个看起来很牛!🥰）:
!(英)＋enter/tab
后缩进：tab
前缩进：shit＋tab
添加/删除注释：Ctrl＋/
快速换行：Ctrl＋enter
图像提示功能：./
这是我第一周的学习记录，肯定有很多理解不对的地方。如果前辈们愿意指出我的错误，哪怕一句话，我都会认真记下来。感谢！
呼~,文章终于没有乱码了，在掘金又学到了新技术。
