HTML学习笔记1

前端学习

标签语法，基本骨架，注释，标题，文本，图像，路径，超链接，音视频。

1. 标签语法

HTML 超文本标记语言——HyperText Markup Language

• 超文本是什么？链接
• 标记是什么？标记也叫标签，带尖括号的文本

双标签基本格式：<开始标签>内容<结束标签>

基本语法：

• 标签成对出现，中间包裹内容
• < > 里面放英文字母（标签名）
• 结束标签比开始标签多 /
• 分为双标签和单标签

2. HTML基本骨架

• html：整个网页
• head：网页头部
  • title：网页标题
• body：网页主体

VS Code 快速生成骨架：在 HTML 文件(.html)中，!（英文） 配合 Enter/Tab 键即可自动生成。

3. 标签的关系

• 父子关系（嵌套关系）
• 兄弟关系（并列关系）
• 父子关系子级标签换行且缩进

4. 注释

HTML注释：<!--注释内容-->

在 VS Code 中，添加和删除注释的快捷键：Ctrl + /

5. 标题和段落

标题：h1~h6（双标签），h1 最大，h6 最小，且标签会独占一行。h1 标签在一个网页中建议只使用一次。

段落标签：p（双标签），独占一行，段落之间存在间隙。

6. 换行和水平线标签

• 换行：<br>（单标签）
• 水平线：<hr>（单标签）

7. 文本格式化标签

• 加粗：strong（双标签）
• 倾斜：em（双标签）
• 下划线：ins（双标签）
• 删除线：del（双标签）

8. 图像标签

<img src="图片的URL" alt="替换文本" title="提示文本" width="宽度" height="高度">

• src 是 <img> 必须属性，其余可写可不写。
• alt 是图片无法显示的时候显示的文字
• title 是鼠标悬停在图片上面的时候显示的文字

9. 路径

路径分类：

• 相对路径：从当前文件位置出发查找目标文件
• 绝对路径：从盘符出发查找目标文件

一般常用相对路径：

• / 表示进入某个文件夹里面
• . 表示当前文件所在文件夹
• .. 表示当前文件的上一级文件夹

10. 超链接标签

<a href="链接">文本</a>

• href 属性值是跳转地址，是超链接的必须属性。
• 超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现新窗口打开页面。
• href 属性值写为 #，表示空链接，页面不会跳转，在当前页面刷新一次。

11. 音频标签

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

书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词。

12. 视频标签

<video src="视频的URL"></video>