Web前端开发入门学习笔记之html 1-15 --新手超级友好版

  Foreword：

  大家好，我是一名刚开始学习HTML的新手。这篇文章是我在学习html过程中的一些笔记和心得，希望能和同样在学习HTML的朋友们分享。由于我的知识有限，文章中可能存在错误或不准确的地方，欢迎大家在评论区提出建议和指正。我非常期待大家的反馈，以便我能不断学习和进步。同时，我也会在文章中注明参考的资料，以示对原作者的尊重。

PS：本帖以记录学习心得和课堂笔记为主，没有其他大博主那么专业，但是简单易懂^-^

  课程学习资源：根据b站‘前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选黑马程序员’ 视频学习记录而成。原视频网址：前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选黑马程序员_哔哩哔哩_bilibili

第一课：

HTML 超文本标记语言 HyperText Markup Language

带尖括号的文本就是标签

标签语法：

想加粗文字：加标签就行。

标签成对出现，中间包裹内容

<strong>hhhhh</strong>

对于VScode的操作：

1. Ctrl+b就可以折叠侧边栏，获得更大的写代码空间。

2. Ctrl +s保存代码文件。

使用标签后的效果对比：

一般都是双标签（成对出现），也有的是单标签。

单标签只有开始标签，没有结束标签

如：<br> 换行   <hr> 水平线

对于更新后的代码，保存后直接刷新原来在该代码界面打开的网页，就会出现修改后的代码效果！不需要重新打开网页！！

区分：包裹内容的一定是双标签。

第二课：

HTML基本骨架 

html：整个网页

head：网页头部，给浏览器看的代码css

body：网页主体，给用户看的图片文字

VScode快速生成骨架：英语！+enter键

第三课：明确代码的书写位置

标签的关系：两种

1. 父子关系嵌套关系 --包着写，包在外面的是父

2. 兄弟关系并列关系 --一行一行写 并列

vscode中：

1. 直接打出标签名字+回车就可以搞出一套标签，不需要先打尖括号在写名字！

2. 破坏了代码中默认的缩进关系，用tab键搞回来（往后挪）///往前挪shift+tab键

第四课：注释（是对代码的解释说明）

对关键代码进行注释。

<!--.......-->注释标签，vscode中快捷键生成注释/删除注释：Ctrl+/

 该操作默认注释光标所在行的代码(即使该行有别的标签也可以）

第五课：标题标签-产品名称，文章标题，网页区域名称

标签：h1~h6双标签，越来越小（一级二级三级。。标题）

标题标签独占一行

限制：h1标签一个网页只能用一次（主标题）logo或者新闻大标题

其他标题标签没有次数限制！

第六课：段落标签

p（双标签）

特点：不同段直接有间隙。独占一行

第七课：换行与水平线标签

都是单标签

换行<br>  在两行直接加这个标签，才会在网页中显示换行效果，回车键不可以，网页识别不了

画水平线<hr>

第八课：文本格式化标签（为文本添加特殊格式）

加粗，倾斜，下划线，删除线等

strong加粗   b加粗

em倾斜  i倾斜

ins下划线  u下划线

del删除线  s删除线

记忆左边的标签（自带强调语义，显示的效果比右边更好）更好！语义记忆。

两个文本格式化标签会在一行显示！！

第十课：图像标签

作用：在网页中插入图片

格式：<img src="图片的URL">

src指定图像位置和名称，是必须属性

且文件的html和图片最好放在一块（一个文件夹中）！！这样不考虑路径方便

如何快速在vs中找到图片src？在src中输入./就会有提示！！

且插入两张图片是不会换行显示的

图像标签的属性：

alt替换文本---图片无法显示的时候显示的文字

title提示文本---鼠标悬停在图片上的时候显示的文字

alt的作用：以前网速慢，可能导致图片没加载出来，用alt可以表示网页图片内容。

width图片的宽度，值为数字无单位

height图片高度，值为数字无单位

 只写一个width或者height的数值相当于等比缩放。（default)

总结：src，alt，title，width，height都是属性名。且互相都用空格隔开不区分先后。

第十一课：路径-相对和绝对

路径：从起点到终点经历的路线。

相对路径：从当前文件位置出发找目标文件

绝对路径：从盘符出发windows

重点在相对路径的学习。

相对路径：

/表示进入某文件夹----文件夹名字/

.表示当前文件所在文件夹

./

..表示上一级文件夹

../表示进入上一级文件夹

../../表示进入上两级文件夹

绝对路径：

从盘符出发寻找文件

/

直接复制文件夹那个框里面的路径到src上即可+\+图片.jpg

对于windows来说，/ \都可以

如何直接使用网页中的图片？右键复制图片地址，这也是绝对路径

src也可以填在线网址！！

绝对路径应用场景：友情链接

使用在线网址制作友情链接

找自己电脑的文件一般用相对路径，更快

第十二课：超链接标签

作用：点击后跳转其他页面。

<a href="...">hhhh</a>

href后填的是跳转的地址，填浏览器内显示的地址

也可以跳转到本地文件（以相对路径的方式查找即可）

如何实现弹出一个新页面来展示打开的新网页，而旧网页不受影响？

加上target="_blank" 就可以实现原来网页不被覆盖的效果。

（新窗口跳转页面）

开发初期，不知道超链接的跳转地址时，href写#，表示空连接，不会跳转！

第十三课：音频标签

<audio src="音频URL">...</audio>

音频属性：

src

controls希纳是音频控制面板

loop循环播放

autoplay自动播放 -浏览器一般禁用

注意：浏览器不会自动播放声音！所以要利用属性controls

输入controls就会自动生成音频控制面板。

注意：在html里面，如果属性名和属性值完全一样，就可以简写为一个单词。

视频标签：

<video src=''视频URL''>hhhh</video>

常用属性：

src

controls

muted 静音播放

loop

autoplay（该属性如果要展现需要结合muted属性）

第十四课：综合案例1-个人简介

网页制作思路：从上到下，先整体再局部。逐步分析制作

稳妥的做法：写一点保存一点看效果！

操作：Ctrl+x就是剪切！！

在文本中加入超链接等效果：空格，让鼠标光标后面有一个空格，在输入a就会有提示了。

最后，感谢每一位阅读这篇文章的朋友，你们的反馈对我来说非常宝贵。如果有任何问题或建议，请随时告诉我。让我们一起学习和进步吧！