基础认识
1.五大浏览器有哪些？
IE浏览器
火狐浏览器（Firefox）
谷歌浏览器（Chrome）
Safari浏览器
欧朋浏览器（Opera）
2.相同的网页在不同浏览器中显示效果会完全一致吗？
因为不同浏览器渲染引擎不同，解析的效果会存在差异
3.Web标准的构成
4.HTML的骨架结构由哪些标签组成？
html标签：网页的整体
head标签：网页的头部
body标签：网页的身体
title标签：网页的标题
5.VSCode软件作为前端的主流开发工具，其基本的快捷键
快速生成标签：shift+tab
保存文件：ctrl+s（写完就要保存一下）
快速查看网页效果：F5
快速生成结构标签：！+回车
快速复制一整行：ctrl+c
6.注释
注释的快捷键：ctrl+/
7.HTML标签与标签之间的关系可分为：
父子关系（嵌套关系）
<head>
<title></title>
</head>
兄弟关系（并列关系）
<head></head>
<title></title>
HTML标签
1.标签标签
场景：在新闻和文章的页面中，都离不开标签，用来突出显示文章主题
<!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>标题标签</title>
</head>
<body>
<!-- ctrl + D 选中前后两个标签,ALT+B快速在浏览器中展示,ctrl+s保存 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>二级标签</h3>
<h4>二级标签</h4>
<h5>二级标签</h5>
<h6>二级标签</h6>
</body>
</html>
h1标签对网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分
2.段落标签
场景：在新闻和文章的页面中，用于分段显示
<!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>段落标签</title>
</head>
<body>
<h1>这是段落标签</h1>
<hr>
<!-- 这是分割线标签 -->
<p>阿卡贝拉</p>
<p>“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带来不一样的风格。视频示例： 有一种悲伤（翻唱）-《A Kind of Sorrow》</p>
</body>
</html>
段落之间存在间隙，独占一行
3.换行标签
场景：让文字强制换行显示
<!--自闭合标签只有一个-->
<br>
4.水平线标签
场景：分割不同主题内容的水平线
<!--单标签 在页面中显示一条水平线-->
<hr>
5.文本格式化标签
场景：需要让文字加粗、下划线、倾斜、删除线等效果
<!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>文本格式化标签</title>
</head>
<body>
<b>加粗</b>
<strong>加粗</strong>
<ins>下划线</ins>
<i>倾斜</i>
<em>倾斜</em>
<s>删除线</s>
<del>删除线</del>
</body>
</html>
6.图片标签
场景：在网页中显示图片
<!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>图片标签</title>
</head>
<body>
<!-- alt :替换文本,当图片不显示的时候显示的文字 -->
<!-- width和height属性只需要给出一个值,另一个等比例缩放 --好处就是图片不变形 -->
<img src="cat.gif" alt="这是一个小猫" title="这是title文字,鼠标悬停的时候显示" width="200" >
</body>
</html>
图片常见的属性？
src：指定需要展示图片的路径
alt：替换文本，当图片加载失败时，才显示的文字
title：提示文本，当鼠标悬停时，才显示的文字
width：图片的宽度
height：图片的高度
7.音频标签
场景：在页面中插入音频
<!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>音频标签</title>
</head>
<body>
<!-- 音频控制,自动播放,循环 -->
<!-- src:音频的路径 controls：显示播放的控件 autoplay：自动播放（部分浏览器不支持） loop：循环播放 -->
<audio src="music.mp3" controls autoplay loop></audio>
</body>
</html>
注意：音频标签目前支持三种格式：MP3 ，Wav ，Ogg
8.视频标签
场景：在页面中插入视频
<!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>视频标签</title>
</head>
<body>
<!-- 谷歌浏览器可以让视频自动播放,但是必须是静音状态muted -->
<!--controls：显示播放的控件 autoplay：自动播放（谷歌浏览器中需配合muted实现静音播放 loop：循环播放）-->
<!--视频标签目前支持三种格式：MP4,WebM，Ogg-->
<video src="video.mp4" controls autoplay muted loop></video>
</body>
</html>
9.链接标签
场景：点击之后，从一个页面跳转到另一个页面
<!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>链接标签</title>
</head>
<body>
<!-- href:跳转地址 _blank是打开新的网页 -->
<a href="https://www.baidu.com" target="_blank">跳转到百度</a>
<br>
<a href="./01-标题标签.html">点我,就是01-标题标签</a>
<!-- 当开发网站初期,我们还不知道跳转地址的时候,href的值书写#(空链接) -->
<br>
<a href="#">空链接,不知道跳转到哪里的时候就写#</a>
</body>
</html>
链接标签的target属性：
