第01天 HTML基础（标题、段落、图像、链接、音频、视频、换行、文本格式化标签等）HTML(HyperText Ma

HTML(HyperText Markup Language)，也叫做超文本标记语言。

超文本，指链接，通过链接可以将多个网页链接到一起。
标记，也叫标签，是html语言中的带尖括号的文本，比如: <h1>、<div>、<p>等

1. 标签语法

标签一般成对出现，中间包裹内容，但也有单独出现的单标签，比如<br>、<hr>
<>里面放标签名，大小写不敏感，一般小写
双标签中结束标签中多一个/

2. html标签的构成

html文件中最大的标签是<html></html>标签，在<html>标签中包含<head></head>和<body></body>，在<head>标签中包含<title></title>标签。大致结构如下：

<html>
    <head>
        <title>
            标题
        </title>
    <head>
    <body>
        正文
    <body>
</html>

html：表示整个网页
head: 表示网页头部，用来存放给浏览器看的信息，比如CSS、
- title:网页标题
body: 网页主体，用来存放给用户看的信息，比如，图片，文字等

3. 标签间关系和注释

html中标签间的关系分为嵌套关系和并列关系，在html中注释使用，合理的注释能够让代码更加清晰，易于维护。比如:

<!DOCTYPE html>
<html lang="en">
<!--注释，头部部分-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<!--注释，主体部分-->
<body>
    <h1>正文部分的标题</h1>
    <p>正文部分的内容</p>
</body>
</html>

4. 标题、段落、换行、水平标签、文本格式化标签

正文中的标题标签: <h1>、<h2>、<h3>、<h4>、<h5>、<h6>，都是双标签
段落标签: <p>
换行标签：<br />
水平线标签：<hr />
文本格式化标签,主要是指加粗、倾斜、下划线、删除线等

标签名效果
strong/b 加粗
em/i 倾斜
ins/u 下划线
del/s 删除线

标签名	效果
strong/b	加粗
em/i	倾斜
ins/u	下划线
del/s	删除线

demo如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题、段落、文本格式化标签</title>
</head>
<body>
    标题标签
    <h1>一级标题</h1>
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>
    <h6>六级标签</h6>
    <!-- 段落标签 -->
    <p>段落标签，段落1。。。。</p>
    <p>段落标签，段落2。。。。</p>
    1111111111111行
    <!-- 换行标签 -->
    <br />
    2222222222222行
    <!-- 水平线标签 -->
    <hr /> 
    《<strong>黑神话</strong>：<b>悟空</b>》是由<i>游戏科学制作</i>的以<em>中国神话</em>为背景的动作<ins>角色扮演</ins>游戏。
    该作故事取材于中国古典小说“<u>四大名著</u>”之一的《西游记》，主要讲述小说《西游记》之后的故事，玩家在游戏中将扮演一位“<del>天命人</del>”，为了探寻昔日传说的<s>真相</s>，踏上一条充满危险与惊奇的西游之路    
</body>
</html>

5. 图像标签

图像标签可以在网页中插入图片，格式：<img src="图片的url">,src用于指定图像的位置和名称，是img标签的必须属性。此外，图片标签还有一些其他可选属性:

属性	作用	说明
alt	替换文本	图片无法显示的时候显示的文字
title	提示文本	鼠标悬停在图片上面的时候显示的文字
width	图片的宽度	值为数字，单位是像素
height	图片的高度	值为数字，单位是像素
图片的url如果是在本地，可以写成相对路径，即相对于html文件所在的路径，也可以写绝对路径，也就是根路径到目标图片的完整路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片标签</title>
</head>
<body>
    <!--图像标签-->
    <img src="./cat.jpg" alt="喵喵图" title="Tom" width="300px" height="400px">
    <img src="./dog.jpg" alt="汪汪图" title="旺财" width="500px">
</body>
</html>

6. 链接标签

跳转链接点击时可以跳转到其他页面，href表示要跳转到的地址。默认情况下是在当前页面打开跳转页面，可以使用target="_blank"（默认值是_self）实现新窗口打开页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接标签</title>
</head>
<body>
    <a href="https://www.baidu.com">百度一下</a>
    <br>
    <a href="https://www.jingdong.com" target="_blank">京东</a>
    <br>
    <!-- 空连接 -->
    <a href="#">新闻</a>
</body>
</html>

7. 音频标签

音频标签可以在网页中嵌入音频，音频标签是audio，它常见的属性有：

属性	作用	特殊说明
src(必须属性)	音频的url	支持MP3、ogg、wav
controls	显示音频面板
loop	循环播放
autoplay	自动播放	为提升用户体验,一般浏览器会禁用自动播放功能
除了`src`属性外，另外三个属性的值和属性名是一致的。在最新的html5中规定，属性名和属性值相同时，可以简写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音频标签</title>
</head>
<body>
    <audio src="./media/music.mp3" autoplay="autoplay" controls="controls" loop="loop"></audio>
    <!-- autoplay controls loop属性名和属性值一致，可以简写 -->
    <audio src="./media/music.mp3" autoplay controls loop></audio>
</body>
</html>

8. 视频标签

视频标签可以在网页中插入视频，视频标签是video，它常见的属性有:

属性	作用	特殊说明
src(必须属性)	视频的url	支持MP4、webM、ogg
controls	显示视频面板
loop	循环播放
muted	静音播放
autoplay	自动播放	为提升用户体验,一般浏览器支持在静音状态下自动播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频标签</title>
</head>
<body>
    <video src="./media/黑神话.mp4" autoplay="autoplay" controls="controls" loop="loop" muted="muted"></video>
    <!-- autoplay controls loop属性名和属性值一致，可以简写 -->
    <video src="./media/黑神话.mp4" autoplay controls loop muted></video>
</body>
</html>