一、基础认知

1、网页由哪些部分组成？

答：文字、图片、音频、视频、超链接

2、网页背后本质是什么？

答：前端程序员写的代码

3、前端的代码是通过什么软件转换成用户眼中的页面的？

答：浏览器

4、常见的五大浏览器：

答：IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、 Safari浏览器、欧朋浏览器（Opera）

5、什么是浏览器？

答：是网页显示、运行的平台，是前端开发必备利器

6、相同的网页在不同浏览器中显示效果会完全一致吗？

答：因为不同浏览器渲染引擎不同，解析的效果会存在差异

7、前端工程师日常推荐使用哪一个浏览器？

答：谷歌浏览器（Chrome）

8、什么是Wed标准？

答：让不同的浏览器按照相同的标准显示结果，让展示的效果统一！

9、Web标准的构成有哪些？分别通过什么语言表示？

结构： HTML → 页面元素
表现： CSS → 页面样式
行为： JvaaScript → 页面交互的动态效果

10、HTML的中文译名叫做？

答：超文本标记语言

11、HTML中是通过什么来对网页中的文本、图片、音频、视频等内容进行描述的？

答：HTML标签

12、HTML骨架结构由哪些标签组成

html标签：网页的整体
head标签：网页的头部
body标签：网页的身体
title标签：网页的标题

13、注释的快捷键是？

答：Ctrl+/

14、浏览器会执行注释吗？

答：不会，浏览器执行代码时会忽略所有的注释

15、常见标签由几部分组成？称之为？

答：两部分，双标签

16、少数标签由几部分组成？称之为？

答：一部分，单标签

17、双标签的属性需要写在开始标签还是结束标签中？

答：开始标签

18、标签上可以同时存在几个属性？

答：多个

19、标签名与属性之间，属性与属性之间以什么隔开？

答：空格

20、标签之间的关系可分为哪几种？

答：父子关系（嵌套关系）

• 兄弟关系（并列关系）

二、HTML标签

1、HTML模板

<!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>

2、标题标签

2.1、标题标签一共有几个？分别表示什么含义？

h1标签：一级标题
h2标签：二级标题
h3标签：三级标题
h4标签：四级标题
h5标签：五级标题
h6标签：六级标题

2.2、标题标签有哪些特点？

文字都有加粗
文字都有变大，但是从h1→ h6文字逐渐减小
独占一行

2.3、代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lambda-小张</title>
</head>
<body>
    <h1>一级标题文字</h1>
    <h2>二级标题文字</h2>
    <h3>三级标题文字</h3>
    <h4>四级标题文字</h4>
    <h5>五级标题文字</h5>
    <h6>六级标题文字</h6>
</body>
</html>

2.4、运行结果：

3、段落标签

3.1、段落标签的标签名是？

答：p标签

3.2、段落标签有哪些特点？

段落之间存在间隙
独占一行

3.3、代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 align="center">这是文章标题</h1>
    <!-- 标题 -->
    <hr>
    <!-- 水平线 -->
    <p>阿卡贝拉（意大利：Acappella )即无伴奏合唱。<br>其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》</p>
    <!-- 段落 -->
    <p>“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带来不一样的风格。视频示例： 有一种悲伤（翻唱）-《A Kind of Sorrow》</p>
</body>
</html>

3.4运行结果：

4、换行标签

4.1、换行标签的标签名是？

答：br标签

4.2、换行标签的特点？

单标签
让文字强制换行

4.3、代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 align="center">这是文章标题</h1>
    <!-- 标题 -->
    <hr>
    <!-- 水平线 -->
    <p>阿卡贝拉（意大利：Acappella )即无伴奏合唱。<br>其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》</p>
    <!-- 段落 -->
    <p>“翻唱”是指将已经发表并由他人演<br>
        <!-- 换行 -->
        唱的歌曲根据自己的风格重新演唱，包括重<br>
        新填词，编曲。现在已有不少明星，都在翻唱他人的歌，<br> 不断在翻唱中突破自己，给大家带来不一样的风格。视频示例： 有一种悲伤（翻唱）-《A Kind of Sorrow》</p>
</body>
</html>

4.4、运行结果：

5、水平线标签

5.1、水平标签的标签名是？

答：hr标签

5.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>Document</title>
</head>
<body>
    <h1 align="center">这是文章标题</h1>
    <!-- 标题 -->
    <hr>
    <!-- 水平线 -->
    <p>阿卡贝拉（意大利：Acappella )即无伴奏合唱。
    
</body>
</html>