一、HTML的注释
语法:
- VScode快捷键 Ctrl + /
二、THML的标签
HTML的标签由 < > / 关键字组成
- 双标签 : 由开始标签和结束标签组成< 关键字> </ 关键字>
- 单标签 : 只有 开始标签组成< 关键字>
三、HTML的属性
属性是html标签里面的东西,属性有属性所对应的属性值
属性的注意事项:
- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分
属性的书写格式 :
属性名="属性值"
四、标签的关系
1.父子关系(包含关系)
例如:html 和 head 和 title
2.兄弟关系(并列关系)
例如:head 和 body
五、标题标签
语义:1~6级标题,重要程度依次递减
特点:
- 默认加粗
- 文字变大
- 独占一行
<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<h3>三级标题标签</h3>
<h4>四级标题标签</h4>
<h5>五级标题标签</h5>
<h6>六级标题标签</h6>
六、段落标签
语义:段落文字
特点:
- 段落与段落之间存在间隙
- 独占一行
<p>这是段落标签</p>
<p>段落之间存在间隙</p>
七、换行标签
语义:换行
特点:
- 单标签
- 强行换行
<br>
八、水平分割线标签
语义:主题的分割
特点:
- 单标签
- 在页面中显示一条线
<hr>
九、文本装饰标签
语义:突出强调
特点:
- 双标签
<b>加粗标签</b> <strong>加粗标签</strong>
<u>下划线标签</u> <ins>下划线标签</ins>
<i>斜体标签</i> <em>斜体标签</em>
<s>删除线标签</s> <del>删除线标签</del>
温馨提示:该类标签基本不用,因为CSS将其取代
十、路径的介绍
路径就是设置的一条路,可以通这条路可以寻找到所需要的东西
1.绝对路径(了解)死路径
指目录下的绝对位置,也就是固定位置,可直接达到目标位置,通常是从盘符开始的路径
例如:D:day01\images\1.jpg
2.相对路径(常用)活路径
指从该文件(当前文件)开始出发找目标文件的过程,也就是说,相对于当前文件所在的位置
3.相对路径的分类
同级目录:当前文件和目标文件在一块
- 写法1:文件名.后缀
- 写法2: ./文件名.后缀
下级目录:目标文件在当前文件下一个文件夹内
- 写法:文件夹名/文件名.后缀
上级目录:目标文件在当前文件上一个文件夹内 或者 在当前文件上一个文件夹内的下一个文件夹
- 写法1: …/文件名.后缀
- 写法2:…/文件夹名/文件名.后缀
十一、图片标签
语义:插入图片
特点:
- 单标签
- img标签需要展示对应的效果,需要借助标签的属性进行设置!
<img src="1.jpg" alt="显示不了图片时,显示我" title="悬停时显示我" width="100" height="100">
src表示图片路径的属性
alt表示当图片替换文本的属性(也就是图片显示不了,替换成该属性的属性值)
title表示图片提示文本的属性(也就是当鼠标悬停到图片上所显示的文本)
width表示图片宽度的属性
height表示图片高度的属性
温馨提示:当两个出现一个时,的另一个会等比例缩放
十二、音频标签
语义:插入音频
特点:
- 双标签
<audio src="2.mp3" controls autoplay loop></audio>
src表示音频路径的属性
controls表示显示音频播放的控件属性(不写默认不显示)
autoplay表示自动播放音频的属性(不写默认不自动播放,且部分浏览器不支持)
loop表示循环播放音频的属性 (不写默认不循环)
十四、超链接标签
语义:插入超链接
特点:
- 双标签
<a href="#">点击跳转超链接</a>
href表示填入跳转地址
# 表示要跳转的链接的地址(网页地址)
s表示显示音频播放的控件属性(不写默认不显示)
autoplay表示自动播放音频的属性(不写默认不自动播放,且部分浏览器不支持)
loop表示循环播放音频的属性 (不写默认不循环)
# 十四、超链接标签
语义:插入超链接
特点:
- 双标签
```html
<a href="#">点击跳转超链接</a>
href表示填入跳转地址
# 表示要跳转的链接的地址(网页地址)