前端学习day1（Html5）

目录

Html5

标签语法：

​编辑

html基本框架：

标签的关系：

 快捷键：

标题标签h1-h6：

落标签p：

文本格式化标签：

strong

em

ins

del​编辑

图像标签img：

相对or绝对路径：

相对路径：

绝对路径（本地）：

绝对路径（非本地）：

 超链接a：

音频标签audio：

视频标签video：

---

Html5

标签语法：

 break换行； 

horizontal line水平线；

标签的敲法只需写上标签名＋回车键，vscode即可自动生成尖括号；

注意结束标签有斜杠；

注意每次运行时都要先保存或者直接刷新网页。

html基本框架：

在VScode上敲！+回车键即可以出现。

标签的关系：

快捷键：

！+回车键：出现html基本框架

Ctrl+/:表示添加或删除注释都可以，注释会被符号包裹，但是敲的时候不需要这样敲，只需要 写好 添加内容，在此行任一处ctrl+/即可。 

Alt+Z: 可以给文字段落自动换行。

Alt+B是运行。

Tab缩进，选中+Tab是整体缩进；shift+Tab是取消缩进。

F12：开启调试工具的快捷键。

Alt+Tab：切换电脑屏幕。

浏览器 ctrl+0恢复到100％。

Alt+Shift：同时选中，配合鼠标左键点一下可进行批量处理。

Ctrl + Shift + V，在vscode中即可预览md笔记

ctrl+r 是刷新浏览器页面

vscode快捷键 Alt+up/down：将整行上移或下移动

vscode中ctrl+h ：是查找和替换的意思

标题标签h1-h6：

h1标题标签一个网页中只使用一次，用来放新闻标题或网页logo；

其他标题标签的使用无次数限制。

落标签p：

小技巧：vscode中选择行号可以选择整行。

div与p的区别：div主要用于框架布局 p是内容布局；div上下间距为0，p有上下间距。

文本格式化标签：

strong

em

ins

del

 

图像标签img：

直接敲img+回车键即可弹出图像标签的全部内容

 

 其中，src处添加图像的路径索引。路径索引后面有。

属性之间用空格隔开。

各属性使用后的展示如下：

给其他标签添属性，规则可能不同，但写法是一样的。

相对or绝对路径：

 

相对路径：

 

只要掌握两点！

.表示当前文件夹 ；

..表示上一级文件夹，以此类推...表示上两级文件夹；

/表示进入某个文件夹（/前面必须有. 因为要表明要进入哪个文件夹）。

绝对路径（本地）：

 

 斜线的写法也是ok的。统一写成/

绝对路径（非本地）：

这种绝对路径用来解决图片/其他不在自己电脑上的，在别人的网页里面。则直接鼠标指在图片/其他上右键复制其在线网址。再粘贴填入路径中。

若找本地的文件一般不用绝对路径，因为有时会太绝对了。若文件放在了D盘则不好找，因此找本地文件多用相对路径；绝对路径一般放在了友情链接处（或者超链接）。

超链接a：

a+回车键生成超链接hyperlink。例如：

空链接先用#号表示，后面再补充也可。

属性target及其相对应的属性值_blank可以实现网页在新窗口打开，不会覆盖掉原来的窗口。

 

 

音频标签audio：

audio+回车键

 

所以会发现打上controls时会没有属性值，是因为二者一致。

视频标签video：

video+回车键

在文字中插入某个标签，可以先空一格，将光标置前敲入标签名，则整行标签会自动生成。