基本概念与标签

# 基本概念与标签

## 概述与定义
HTML超文本标记语言--HyperText Markup Language
超文本--链接
标记--标签，带尖括号的文本

tips:使用VS CODE开发常用的插件:chinese,open in browser,html css support,eslint

## 标签
标签一般成对出现，中间包裹内容，`<html></html>`
分类:
- 双标签：<html><body>
- 单标签：<br>换行，<hr>水平线

## HTML基本标签
```html
# VS CODE 输入!+回车自动生成基本标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
# html--整个网页
# head--网页头部
# title--网页标题
# body--网页主体
```

## 标签间的关系

明确标签间关系，有利于组织代码，增强美观性，减少错误。
- 父子关系，包含关系，子标签换行且缩进
- 兄弟关系，并列关系，换行

## 注释
对代码的解释和说明，提高可读性,注释后浏览器不会显示。

单行注释
``,VSCODE快捷键Ctrl +/

## 标签分类

### 标题标签
用于新闻标题，文章标题，网页区域名称，产品名称等等。
标题标签独占一行。
一般h1使用一个网页一次。
h1-h6(双标签)
```html
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
```

### 段落标签
p标签(双标签)
`<p></p>`

特点：
独占一行，两个p标签间有空行。

### 换行和水平线标签
不需要包裹内容的是单标签。

换行:<br>
水平线：<hr>

### 文本格式化标签

|标签|作用|
|---|---|
|strong|加粗|
|em|倾斜|
|ins|下划线|
|del|删除线|
|b|加粗|
|i|倾斜|
|u|下划线|
|s|删除线|

strong\em\ins\del标签自带强调含义，较为常用。

### 图像标签
img标签用于放置图像，src属性指定路径。
<img src='图像URL'>
```html
<img src="./bizhi02.jpg" alt="">
<img src="./lovejoanicon.jpg"  alt="网站logo" width="400" height="400" title="网站logo">
```

属性:
|属性|作用|说明|
|---|---|---|
|alt|替换文本|图像无法显示时显示的文字|
|title|提示文本|鼠标悬停在图片上显示的文字|
|width|图片的宽度||
|height|图片的高度||

```html
属性名="属性值"
属性写在尖括号里面，标签名后面，标签名和属性之间空格隔开，不区分先后顺序。
```

### 路径

查找文件时候经过的路线。
- 绝对路径，从盘符开始查找文件
- 相对路径，从当前文件位置查找文件

```html
# ./表示当前文件夹
# ..表示上一级
```

### 超链接

点击跳转到其他页面或者位置。

```html
<a href="https://www.baidu.com">百度</a>
# href，链接网络地址或者本地文件
<a href="./bizhi01.jpg">图片链接</a>
# 如果在开发时不确定链接地址可以在href中写#空链接
<a href="#">空链接</a>
```

属性

| 属性   | 作用              |
| ------ | ----------------- |
| target | _blank打开新页面, |

### 音视频标签

音频标签audio

```html
<audio src="音频的URL"></audio>
<audio src="./李玖哲 - 夏天.mp3" controls autoplay loop></audio>
```

属性：

tips:HTML5中如果属性名和值一致，可以简写为一个属性名单词

| 属性     | 作用             | 说明                                              |
| -------- | ---------------- | ------------------------------------------------- |
| src      | 音频URL          | 支持MP3,Ogg,Wav                                   |
| controls | 显示音频控制面板 |                                                   |
| loop     | 循环播放         |                                                   |
| autoplay | 自动播放         | 浏览器一般自动禁用,需要自行设置浏览器设置开启权限 |

视频标签vedio

tipes:MP4格式如果浏览器无法显示可能和视频编码格式有关，使用格式工厂转为h264

```html
<video src="./江语晨-浪漫爱(标清).mp4" controls></video>
<video src="./love.mp4" controls autoplay muted></video>
```

| 属性          | 作用             | 说明                         |
| ------------- | ---------------- | ---------------------------- |
| src(必须选项) | 视频URL          | 支持MP4,Ogg,WebM             |
| controls      | 显示视频控制面板 |                              |
| loop          | 循环播放         |                              |
| autoplay      | 自动播放         | 浏览器支持静音状态下自动播放 |
| muted         | 静音播放         |                              |