前端学习笔记（认知HTML部分）

前端学习笔记（课程：黑马程序员）

VS code 使用
百度下载Visual Studio Code
在拓展功能（Ctrl+Shift+X）中搜索并下载中文插件，以及浏览器插件
文件夹可直接从桌面拖入打开
创建文件不要忘了加后缀
输入！后按回车或TAB，生成骨架代码
alt + B 浏览器中打开
ctrl + / 注释
alt + z 自动换行，也可在查看中找到
ctrl + D 选中多个相同数字

HTML
创建标题h1，共有六级标题，文字都加粗，独占一行
p段落
br换行
hr蓝条分割线
./ 当前文件夹（点斜杠）
…/ 返回上一级文件夹（点点斜杠）

文本格式化标签

场景：需要让文字加粗，下划线，倾斜，删除线等效果

不太重要的用：

标签	说明
b	加粗
u	下划线
i	倾斜
s	删除线

比较重要的用：

标签	说明
strong	加粗
ins	下划线
em	倾斜
del	删除线

在网页中显示图片
img src="" alt=""

src="" 是标签属性

src 是属性名
“” 中是属性值，图片的路径

alt 属性
“” 中是属性值，替换文本，当图片不显示时显示的文字

title属性
""中是属性值，提示文本，当鼠标悬停时，才显示的文本
注：title属性不仅仅可以用于图片标签，还可以用于其他标签

width和height属性
""中是属性值，宽度和高度（数字）
注：如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（图片不会变形）同时设置两个，可能会变形

属性注意点：
1.标签的属性写在开始标签内部
2.标签上可以同时存在多个属性
3.属性之间以空格隔开
4.标签名与属性之间必须以空格隔开
5.属性之间没有顺序之分

路径介绍
路径分为绝对路径（了解）和相对路径（常用）

绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
例：img src=“C:\Users\16420\Desktop\code\html\Capture001.png” alt=""

相对路径：从当前文件开始出发找目标文件的过程
相对路径分类：

同级目录：当前文件和目标文件在同一目录中
方法1：img src="./目标图片.gif"
方法2：img src=“目标图片.gif”

下级目录：目标文件在下级目录中,先找到文件夹名字，加/，表示是一个文件夹，再找到目标图片名
例：img src=“images/Capture002.png” alt=“替换文本”

上级目录：目标文件在上级目录中
类似于：乾坤大挪移，我在卧室，你还在大厅，我现在要找到你！
1.先要走出卧室，来到大厅-----出去
2.此时又独居一室------直接喊名字
代码步骤：
1.先出当前文件夹，到上一级目录——>…/ （点点斜杠）
2.此时看到目标文件直接喊他——>直接写目标文件
例：img src="…/Capture000.png" alt=“替换文本”

音频标签
场景：在页面中插入音频
双标签：audio src=""
/audio
常见属性

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

视频标签
场景：在页面中插入视频
video src=""
/video
常见属性

属性名	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器中需配合muted实现静音播放）
loop	循环播放

链接标签
场景：点击之后，从一个页面跳转到另一个页面
称呼：A标签，超链接，锚链接
a href=""
/a
”“中填写要跳转到的网址
当开发网站初期，我们还不知道跳转地址的时候，href的值书写#
# 代表空链接

target属性
属性值：目标网页的打开形式

取值	效果
_self	默认值，在当前窗口中跳转（覆盖原网页）
_blank	在新窗口中跳转（保留原网页）