前端基础组成部分: 了解前端的网页组成(认识网页) 1.1认识网页 问题1：网页由哪些部分组成？
答:文字、图片、音频、视频、超链接等元素组成
问题2：我们看到的网页背后本质是什么？
答:前端开发工程师用开发工具编写的代码.
问题3：前端的代码是通过什么软件转换成用户眼中的页面的？
答:通过浏览器(内核)渲染在展示给用户.
1.2五大浏览器和渲染引擎 前端工程的代码需要经过浏览器的渲染内核成为目标样式:而常见的浏览器的内核是不同的常见的有五种,分别为:(1)IE浏览器 (2)火狐浏览器（Firefox）(3)谷歌浏览器（Chrome）(4)Safari浏览器 (5)欧朋浏览器（Opera） 常用的是谷歌浏览器,渲染内核为Chrome
注意:相同的网页在不同的浏览器上渲染的效果是不一样的(因为浏览器的渲染引擎不同,所渲染的效果不同)
1.3Web标准 不同的浏览器渲染的效果不同,想要使一段代码在不同的浏览器上渲染出相同的效果所以制定了Web标准结构样式
问题1:为什么需要web标准?
答:让不同的浏览器按照相同的标准显示结果，展示统一效果。
问题2:web标准构成有哪些(三层架构)?
答:
结构(HTML)---->网页元素
表现(CSS)---->网页样式，包括：版式、颜色、大小等
行为(JavaScript)---->网页交互的动态效果
1.4HTML骨架结构 HTML是网页文件代名词:是网页的基本框架
问题1:HTML骨架结构由哪些标签组成?
答:
html标签：网页的整体(页面最大的标签,根标签)
head标签：网页的头部
body标签：网页的身体
title标签：网页的标题
网页标题 键盘敲烂,月薪过万. 1.5HTML标签的构成 问题1:标签分为几类,分别是什么?答:两类, 双边标签, 单边标签.
问题2:双边标签和单边标签有什么特点?
答:
双边标签有两部分组成,前部分叫开始标签，后部分叫结束标签，结束标签在标签名前有一个 /（斜线）;两部分之间包裹内容. 例如:
内容
.单边标签标签由一部分组成,不需要结束标签，例如：
1.6HTML标签的关系 问题1:标签关系可以分为哪几种?
父子关系(嵌套关系)
兄弟关系(并列关系)
1.7.HTML标签学习 1.7.1标题标签 应用场景:网页的新闻标题,网页的logo部分.问题1: 标题标签一共有几个?分别表示什么含义?
答:一共有6个:
• h1标签：一级标题 • h2标签：二级标题 • h3标签：三级标题 • h4标签：四级标题 • h5标签：五级标题 • h6标签：六级标题 问题2:标题标签有哪些特点?
答:双边标签,文字加粗,独占一行,文字变大,但是从h1 → h6文字逐渐减小
1.7.2段落标签 应用场景:新闻和文章页面中,用于分段显示.
问题1:段落标签的标签名是?
答:p标签
问题2:段落标签有哪些特点?
答:
双边标签,独占一行,段落之间存在缝隙
会根据浏览器窗口大小自动换行显示.
1.7.3换行标签 应用场景:让文字强制换行显示.
问题1:换行标签的标签名是？
答:
问题2:换行标签的特点是什么?
答:单边标签 文字强制换行显示
1.7.4水平线标签 应用场景:分割不同主题内容的水平线
问题1:水平线标签的标签名是？
答:
问题2:水平线标签特点是什么?
答:单边标签,页面显示一条水平线.
1.7.5文本格式化标签 应用场景:需要让文字加粗、下划线、倾斜、删除线等效果
<strong>加粗</strong>
<b>加粗</b>
<!-- 倾斜 -->
<em>倾斜</em>
<i>倾斜</i>
<!-- 删除线 -->
<del>删除线</del>
<s>删除线</s>
<!-- 下划线 -->
<ins>下划线</ins>
<u>下划线</u>
问题1:文本格式化标签的作用?
答 :突出重要性,比普通文字更加重要.
问题2:文本格式化标签有几类?推荐使用单词较长的还是较短的?
答:4类. 推荐使用单词较长的.
问题3:为什么推荐使用单词较长的标签?
答:
语义更清晰 更强烈.
重点掌握：strong 加粗、em 倾斜、ins下划线、del 删除线
1.7.6图片标签与音频视频标签 应用场景:需要在页面上显示图片\音频或视频等元素使用的标签(需要路径引入)
图片标签:img (单标签) 属性分别为:
src:指定需要展示图片的路径和文件名.
alt :替换文本,当图片路径不正确时,才显示的文字.
title:提示文本,鼠标悬停的时候显示的文字.
title属性不仅仅可以用于图片标签，还可以用于其他标签
width:设置图片宽度.(如果宽高就设置了一个,另外一个会等比例缩放,好处就是图片不变形)
height:设置图片高度.
音频标签:audio(双标签) 属性分别为:
src：音频路径
controls：音频控件
autoplay：自动播放
loop：循环播放
视频标签:video(双标签) 属性分别为:
src：视频路径
controls：视频控件
autoplay：自动播放 → 谷歌浏览器中可以配合muted属性实现自动静音播放
loop：循环播放
1.7.6.1路径:
应用场景:页面加载图片或文件时,需要找到对应的图片及文件.
问题1:路径分几种?分别是什么?
答:2种,分别为:绝对路径和相对路径
问题2:什么是绝对路径?
答:绝对路径：指目录下的绝对位置，可直接到达目标位置(能够直接定位)，通常从计算机盘符开始的路径.
盘符开头：D:\day01\images\3.jpg.
1.7.7超链接标签 应用场景:鼠标点击后,一个页面跳转到另一个页面
文本或图像 外部链接 内部链接 空链接 问题1:实现点击之后,从一个页面跳转到另外一个页面,需要用什么标签?
答:超级链接标签,a标签
问题2:超级链接标签最重要的属性是哪个?
答:href属性
问题3:通过什么属性可以设置a标签的跳转方式？取值有哪些？
答:
target属性
_self：默认值,在当前窗口中跳转(覆盖原始窗口)
_blank：在新窗口中跳转(保留原始窗口)
