html常用标签

**开发工具(vscode):**
**VS Code使用前要求:**

0.  VScode 软件安装完毕
0.  Chinese (Simplified) Language Pack for Visual Studio Code 简体中文插件安装完毕
0.  open in browser 直接打开浏览器插件安装完毕

**VS Code基本的快捷键:**

0.  快速生成标签：英文 + tab
0.  保存文件：ctrl + s • 注意1：写完文件之后务必需要保存文件，否则网页无变化 • 注意2：可以设置自动保存省去每次保存的麻烦
0.  快速查看网页效果：右击 → Open in Default Browser • 快捷键：alt + b • 注意：必须安装了open in browser 插件
0.  快速生成结构标签：! + tab • 注意1：!必须是英文的，中文!无效 • 注意2：必须保证当前文件后缀名是.html，否则无效 • VS Code自动生成的骨架多了其他标签，之后会介绍

##### **注:标签分为  单标签   和  双标签**

**主体标签:**
-   html标签：网页的整体(页面最大的标签,根标签)
-   head标签：网页的头部
-   body标签：网页的身体
-   title标签：网页的标题

**标题标签(只有六个):**
- • h1标签：一级标题
- • h2标签：二级标题
- • h3标签：三级标题
- • h4标签：四级标题
- • h5标签：五级标题
- • h6标签：六级标题
示例代码:
<!-- 标题标签  -->
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
    
**段落标签: 
p标签 示例代码:**

特点:
-  双边标签,独占一行,段落之间存在缝隙
-   会根据浏览器窗口大小自动换行显示.

```
<!-- 段落标签 -->
<p>这是一个寂寞的天吓着伤心的雨</p>
<p>这是一个寂寞的天吓着伤心的雨</p>  
```

**换行标签:**
`<br>`

特点:单边标签 文字强制换行显示；

**水平分割线:**
`<hr>`

分割不同主题内容的水平线

**扩展:**

重点掌握：`strong` 加粗、`em` 倾斜、`ins`下划线、`del` 删除线

```    <!-- 加粗 -->
    <strong>加粗</strong>
    <b>加粗</b>
    <!-- 倾斜 -->
    <em>倾斜</em>
    <i>倾斜</i>
    <!-- 删除线 -->
    <del>删除线</del>
    <s>删除线</s>
    <!-- 下划线 -->
    <ins>下划线</ins>
    <u>下划线</u>
```

**图片标签:**
-   `img`标签.单边标签

-   必须属性是src.

-   src:指定需要展示图片的路径和文件名.

-   alt :替换文本,当图片路径不正确时,才显示的文字.

-   title:提示文本,鼠标悬停的时候显示的文字.

    -   title属性不仅仅可以用于图片标签，还可以用于其他标签

-   width:设置图片宽度.(如果宽高就设置了一个,另外一个会等比例缩放,好处就是图片不变形)

-   height:设置图片高度.

```
<!-- 图像标签 -->
<img src="图片的路径" alt="替换文本" title="提示文本" width="" height="">
```
### 绝对路径

**应用场景:** 页面加载图片或文件时,需要找到对应的图片及文件.

问题1:路径分几种?分别是什么?

问题2:什么是绝对路径?

问题1:

-   2种
-   绝对路径(了解)
-   相对路径(掌握)

问题2:

-   绝对路径：指目录下的绝对位置，可直接到达目标位置(能够直接定位)，通常从计算机盘符开始的路径.
-   盘符开头：D:\day01\images\3.jpg.
-   网络地址:<http://www.itheima.com/images/logo.png>（了解）

###  路径-相对路径

问题1:什么是相对路径?

问题2:什么同级目录?

***

问题1:

-   从当前文件开始出发找目标文件的过程,简单的来说相对HTML页面的位置.

问题2:

-   当前文件和目标文件在同一目录中

-   书写方式:

    -   方式一:目标文件名字！ 例如:`<img src="目标图片.gif">`
    -   方式二:./目标文件名字！ 例如`<img src="./目标图片.gif">` 推荐使用

***

问题1:什么是下级目录?

-   目标文件在下级目录中(当前文件与目标文件的文件夹在同一个目录下面)

-   书写方式:

    -   方式一: 目标文件的文件夹/目标文件 例如:`<img src="img/目标图片.gif">`
    -   方式二: ./目标文件的文件夹/目标文件 例如:`<img src="./img/目标图片.gif">` 推荐使用

***

问题1: 什么是上级目录

-   目标文件在当前文件的上一级目录或者上N级目录

    -   上一级:`../` 上两级:`../../`

###  小结

-   相对路径有哪三种情况：

    -   同级目录：直接写：目标文件名字！
    -   下级目录：直接写：文件夹名/目标文件名字！
    -   上级目录：直接下：../目标文件名字！

-   VSCode中路径的快捷操作？

    -   同级和下级目录：./ 之后选择即可
    -   上级目录：../ 之后选择即可

### 音频标签

**应用场景:** 在页面中插入音频

```
 <audio src="./music.mp3" controls autoplay loop></audio>
```

问题1:网页中插入音频使用什么标签？

问题2:音频标签支持几种格式?

问题3:音频标签有哪些常见属性？

###  小结

问题1:

-   audio标签

问题2:

-   三种, 分别是:`MP3`、`Wav`、`Ogg`; 推荐使用`MP3`格式.

问题3:

-   src：音频路径
-   controls：音频控件
-   autoplay：自动播放
-   loop：循环播放

### 视频标签

**应用场景:** 在页面中插入视频

```
 <video src="./video.mp4" controls autoplay muted loop></video>
```

问题1:网页中插入视频使用什么标签？

问题2:视频标签支持几种格式?

问题3:视频标签有哪些常见属性？

### 小结

问题1:

-   video标签

问题2:

-   三种,分别是`MP4` 、`WebM` 、`Ogg`; 推荐使用`MP4`

问题3:

-   src：视频路径
-   controls：视频控件
-   autoplay：自动播放 → 谷歌浏览器中可以配合muted属性实现自动静音播放
-   loop：循环播放

###  超级链接标签

**应用场景:** 鼠标点击后,一个页面跳转到另一个页面

```
 <!-- 语法 -->
<a href="跳转目标" target="窗口打开方式">文本或图像</a>
<a href="https://www.mi.com/" >外部链接</a>
<a href="./01.html">内部链接</a>
<a href="#">空链接</a>
```

问题1:实现点击之后,从一个页面跳转到另外一个页面,需要用什么标签

问题2:超级链接标签最重要的属性是哪个?

问题3:通过什么属性可以设置a标签的跳转方式？取值有哪些？

### 小结

问题1:

-   超级链接标签,a标签

问题2:

-   href属性

问题3:

-   target属性

    -   _self：默认值,在当前窗口中跳转(覆盖原始窗口)
    -   _blank：在新窗口中跳转(保留原始窗口)