基础认识
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属性: