【入坑前端第三天】 —— 零散日记

$1.图片$

• 图片的常见格式：jpg、png、gif
• <img src = "图片路径" alt = "替换文本" tittle = "提示文本">
• src属性来引入图片的路径：

绝对路径 -> 能完整的描述文件位置的路径
相对路径 -> 指由当前这个文件所在的路径引起的与其它文件（或文件夹）的路径关系。

./ 代表当前文件夹 …/ 代表返回上一级文件夹
如果想返回上两级的文件夹：…/…/

• alt 属性：当图片加载失败时，替换图片的文本
• tittle 属性：当光标移动到对应的图片上时，可显示出来的文本信息（也适用于其它标签）

$2.超链接$

• <a href = "" target = ""> </a>
• href 属性：引用html的文件路径（绝对/相对）
• target 属性：设置打开html文件的方式（覆盖当前页面/在新标签页中打开）
• _blank 在新的标签页打开

点击图片跳转到网页的方式：将文本内容替换为图片即可

<a href = "网址" target = "">
    <img src = "图片路径" alt = "替换文本">
</a>

$3.VSCode快捷键$

• 格式化代码，快速整理文档：shift + alt + f
• 标签替换：ctrl + h
• 移动代码：按住alt+上/下方向键，会移动光标所在行
• 删除代码：按住ctrl + shift + k
• 注释代码：
  按住Ctrl+/，会对光标所在行加注释 【行注释】
光标选中区域，alt+shift+a，会对选中的整个区域加注释 【块注释】
• 快速生成标签：

标签 * N —— 会生成N个标签
标签 > 标签 * N > 标签 —— > 代表包含关系
h $ * N —— 会快速生成h1~hN的标题标签
标签{内容}*N + 回车/空格 —— 会快速生成标签以及所包含的内容

• 多位置插入：

alt + 光标选中；如果刚好为一竖行，按住alt+shift，光标点击最上边的位置和最下面的位置即可。

$4.美化小技巧$

<style type = "text/css">
body {
			background-color : color;
			front-family  = 字体;
			margin-left = n%px;
			margin-right = n%px;
			border : 2px dotted black;
			padding: 10px 10px 10px 10px;
		}

通过style标签为body元素添加样式：

background-color 背景颜色
front-family 字体
margin-left/right 设置左右外边距
pading 设置元素的四个内边距
border 设置边框样式

padding 的四个属性值对应上、右、下、左四个内边距
border 的三个属性值分别对应边框的宽度、样式、颜色