这是我参与「第四届青训营 」笔记创作活动的第3天
HTML 超文本标记语言
基本骨架
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主体内容
</body>
</html>
拖拽文件夹
创建新文件的时候 要带.html
VS code快捷键
1⃣️英文+tab：快速生成标签（带前后）
2⃣️ctrl+S 保存文件。写完后一定要保存，否则页面无变化，设置自动保存
3⃣️alt+b：快速查看网页效果
4⃣️ !+tab：快速生成结构标签
5⃣️ ctrl+/ ： 注释
6⃣️光标点到某行+快捷键=直接对行处理
7⃣️ control+d 选择下一字符
标题标签
h系列 1-6级标题
<h1></h1>
段落标签
<p></p>
换行标签
<br></br>
单标签，换行处
水平线标签
<hr></hr>
分割不同内容的水平线
单标签，划线处
文本格式化标签
加粗：b，strong
下划线：u，ins
倾斜：i，em
删除线、划掉线：s，del
图片标签 img
<img src="" alt="" title="" width=“”>
单标签
需要借助标签的属性
1⃣️src：目标图片的路径
同一个文件夹，则直接写文件名+后缀
2⃣️alt：替换文本
当前图片加载失败时才显示文本，成功则不会。
3⃣️title：提示文本
悬停在上面才会有
不仅可以用于图片标签
4⃣️：width和height
如果只设置一个，另一个会等比缩放
如果设置两个，可能变形
音频标签audio
src 路径
controls 显示播放的控件
autoplay 自动播放（ 部分浏览器不支持）
loop 循环播放
视频标签 video
同上
但是该标签只支持mp4，webm，ogg三种格式
链接标签
- 超链接，a标签，猫链接
<a href='./目标网页.html' target="_blank"> 点击之后前往... </a>
-
target属性
新标签的打开形式 _self 原窗口 _blank新窗口
列表
无序
ul：无序列表的整体，用于包含li
li：无序列表的每一项，用于包含每一行的内容
有序
默认显示序号
ol：无序列表的整体，用于包含li
li：无序列表的每一项，用于包含每一行的内容
自定义列表
默认显示序号
dl：列表的整体，用于包含dt/dd
dt: 自定义列表的主题
dd：每一项内容（前默认显示缩进效果）
语义化标签
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应遵循语义来编写HTML
常用无语义的布局标签
div：独占一行 <div></div>
span：一行显示多个
好处：
- 提升代码可读性
- 提升可维护性
- 搜索引擎优化
- 提升无障碍性
