HTML 标签

HTML：超文本标记语言

HTML骨架结构：

html标签：网页的整体

head标签：网页的头部

body标签：网页的身体

HTML的注释

VS code中：ctrl+/

浏览器不会执行注释

HTML标签的构成：

双标签：<开始标签> 内容

单标签：自成一体  如
、

---

标签与标签的关系：

父子关系（嵌套关系）

  

兄弟关系（并列关系）

标题标签

1级标题

2级标题

3级标题

4级标题

5级标题

6级标题

1~6级标题，重要程度逐级递减

特点：文字都加粗；文字都变大，从h1~h6文字逐渐减小；独占一行

段落标签

一段文字

特点：段落间存在间隙；独占一行

换行标签

特点：单标签，让文字强制换行

水平线标签

---

特点：单标签，在页面中显示一条水平线

文本格式化标签

标签	说明	标签	说明
b	加粗	strong	加粗
u	下划线	ins	下划线
i	倾斜	em	倾斜
s	删除线	del	删除线

右边一列用在突出重要性的强调语境。

媒体标签

图片标签

” ”  alt=” ”>

特点：img标签需要展示对应的效果，需要借助标签的属性进行设置

属性注意点：

1. 标签的属性写在开始标签内部
2. 标签上可以同时存在多个属性
3. 属性之间以空格隔开
4. 标签名与属性之间必须以空格隔开
5. 属性之间没有顺序之分

图片标签的alt属性

属性名：alt

属性值：替换文本

当图片加载失败时，才显示alt的文本

当图片加载成功时，不显示alt的文本

图片标签的Title属性

属性名：title

属性值：提示文本

当鼠标悬停时才显示的文本

注意点：title属性不仅可以用于图片标签，还可以用于其他标签

图片标签的width、hight属性

属性名：width、height

属性值：宽度和高度

注意点：如果只设置width或height中一个，另一个没设置的会自动等比例缩放（此时图片不会变形）   如果同时设置width和height两个，若设置不当，此图片可能会变形

绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径

          如：盘符开头     完整的网络地址

相对路径（常用）：从当前文件开始出发找目标文件的过程

1. 同级文件：” ./目标图片.gif”>      ” 目标图片.gif”>
2. 下级目录：目标文件在下级目录中     ”文件夹名/目标图片.gif”>
3. 上级目录：目标文件在上级目录中      ../

音频标签

常见属性：

属性名	功能
src	音频的路径
control	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

注意点：音频标签目前支持三种格式：MP3，Wav,Ogg

视频标签

属性名	功能
src	音频的路径
control	显示播放的控件
autoplay	自动播放（谷歌浏览器需要配合muted实现静音播放）
loop	循环播放

注意点：视频标签目前支持三种格式：MP4、WebM、Ogg

链接标签

”./目标网页”>    实现页面跳转

特点：双标签，内部可以包裹内容     如果a标签点击之后去指定页面，需要设置a标签的href属性

链接标签target属性

属性名：target

属性值：目标网页的打开方式

取值	效果
-self	默认值，在当前窗口中跳转（覆盖源网页）
-blank	在新窗口中跳转（保留原网页）