1.基础认知
1.1 认识网页
问题1：网页由哪些部分组成？
- 文字、图片、音频、视频、超链接等元素组成
问题2：我们看到的网页背后本质是什么？
- 前端开发工程师用开发工具编写的代码.
问题3：前端的代码是通过什么软件转换成用户眼中的页面的？
-
通过
浏览器
渲染再展示给用户.
1.2 五大浏览器和渲染引擎
问题1:常见的浏览器有几个?分别是?
- IE浏览器
- 火狐浏览器（Firefox）
- 谷歌浏览器（Chrome）
- Safari浏览器
- 欧朋浏览器（Opera）
问题2:前端工程师推荐使用哪一个浏览器?
- 谷歌浏览器
问题3:相同的网页在不同浏览器中显示效果会一致吗?
- 不一致.因为不同浏览器内核(渲染引擎)不同，解析的效果会存在差异.
- Safari浏览器渲染引擎：Webkit
- 谷歌浏览器渲染引擎：Blink （面试会问）
1.3 web标准（重要）
问题1:为什么需要web标准?
- 让不同的浏览器按照相同的标准显示结果，展示统一效果。
问题2:web标准构成有哪些?
-
结构
(HTML)—->网页元素 -
表现
(CSS)—->网页样式，包括：版式、颜色、大小等 -
行为
(JavaScript)—->网页交互的动态效果
2.HTML初体验
2.1HTML的感知
问题1:什么是HTML?
-
超文本标记语言（
H
yper
T
ext
M
arkup
L
anguage）
问题2:HTML中是通过什么来对网页中的文本、图片、音频、视频等内容进行描述的？
- HTML标签
[小练习]
-
在代码文件夹中点击鼠标右击 → 新建文本文档 → 命名为：网页体验.html
-
双击这个文件，输入以下代码等内容 → 记得保存！
<p>这是HTML文件中P标签包裹的内容</p> -
双击网页体验.html ，浏览器会自动打开文件并显示之前输入的内容
2.2 HTML骨架结构
问题 :HTML骨架结构由哪些标签组成?
-
html
标签：网页的整体(页面最大的标签,根标签) -
head
标签：网页的头部 -
body
标签：网页的身体 -
title
标签：网页的标题
[小练习]
- 新建HTML文件→ 命名为:Html骨架结构标签.html
- 输入以下代码
<html>
<head>
<title>网页标题</title>
</head>
<body>
这是网页中的内容。
</body>
</html>
3 双击文件使用浏览器看效果
2.3 开发工具基本操作(VScode)
前端开发神器：VS Code → 速度快、体积小
VS Code使用前要求:
- VScode 软件安装完毕
- Chinese (Simplified) Language Pack for Visual Studio Code 简体中文插件安装完毕
- open in browser 直接打开浏览器插件安装完毕
VS Code基本的快捷键:
- 快速生成标签：英文 + tab
-
保存文件：ctrl + s
• 注意1：写完文件之后务必需要保存文件，否则网页无变化
• 注意2：可以设置自动保存省去每次保存的麻烦 -
快速查看网页效果：右击 → Open in Default Browser
• 快捷键：alt + b
• 注意：必须安装了open in browser 插件 -
快速生成结构标签：! + tab
• 注意1：!必须是英文的，中文!无效
• 注意2：必须保证当前文件后缀名是.html，否则无效
• VS Code自动生成的骨架多了其他标签，之后会介绍
[小练习]-vscode创建页面
-
新建并保存文件，文件的扩展名是
.html
-
!
+回车 /
!
+
TAB
或者html:5<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>VSCode 创建的页面</title> </head> <body> 这是VScode创建的网页页面。 </body> </html>
3. HTML语法规范
3.1 HTML注释-要养成写注释的好习惯
问题1: 注释的作用是什么?浏览器会执行注释吗？
- 帮助公司开发人员理解代码.
- 不会执行,浏览器执行代码时会忽略所有的注释.
问题2: VScode中注释的快捷键是什么?
-
Ctrl
+/
3.2 HTML标签的构成
问题1:标签分为几类,分别是什么?
- 两类, 双边标签, 单边标签.
问题2:双边标签和单边标签有什么特点
-
双边标签有两部分组成,前部分叫开始标签，后部分叫结束标签，结束标签在标签名前有一个
/
（斜线）;两部分之间包裹内容. 例如:
<p>
内容
</p>
. -
单边标签标签由一部分组成,不需要结束标签，例如：
<br>
3.3 HTML标签的关系
问题1:标签关系可以分为哪几种?
- 父子关系(嵌套关系)
- 兄弟关系(并列关系)
<!-- 嵌套关系 -->
<body><div></div></body>
<!-- 兄弟关系 -->
<head></head>
<body></body>
4 .HTML标签学习
4.1 标题标签
应用场景
:网页的新闻标题,网页的logo部分.
问题1: 标题标签一共有几个?分别表示什么含义?
-
6个.
• h1标签：一级标题 • h2标签：二级标题 • h3标签：三级标题 • h4标签：四级标题 • h5标签：五级标题 • h6标签：六级标题
问题2:标题标签有哪些特点?
-
双边标签,文字加粗,独占一行,文字变大,但是从
h1 → h6
文字逐渐减小.
示例代码：
<!-- 标题标签 -->
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
4.2 段落标签
应用场景
:新闻和文章页面中,用于分段显示.
问题1:段落标签的标签名是?
- p标签
问题2:段落标签有哪些特点?
- 双边标签,独占一行,段落之间存在缝隙
- 会根据浏览器窗口大小自动换行显示.
示例代码:
<!-- 段落标签 -->
<p>这是p标签</p>
<p>这是P标签</p>
4.3 换行标签
应用场景
:让文字强制换行显示.
问题1:换行标签的标签名是？
-
<
br
>
问题2:换行标签的特点是什么?
- 单边标签 文字强制换行显示
4.4 水平线标签
应用场景
:分割不同主题内容的水平线
问题1:水平线标签的标签名是？
-
<
hr
>
问题2:水平线标签特点是什么? -
单边标签,页面显示一条水平线.
4.5 文本格式化标签
应用场景
:需要让文字加粗、下划线、倾斜、删除线等效果
问题1:文本格式化标签的作用?
- 突出重要性,比普通文字更加重要.
问题2:文本格式化标签有几类?推荐使用单词较长的还是较短的?
- 4类. 推荐使用单词较长的.
问题3:为什么推荐使用单词较长的标签?
- 语义更清晰 更强烈.
-
重点掌握：
strong
加粗、
em
倾斜、
ins
下划线、
del
删除线
示例代码
<!-- 加粗 -->
<strong>加粗</strong>
<b>加粗</b>
<!-- 倾斜 -->
<em>倾斜</em>
<i>倾斜</i>
<!-- 删除线 -->
<del>删除线</del>
<s>删除线</s>
<!-- 下划线 -->
<ins>下划线</ins>
<u>下划线</u>
4.6 HTML标签的属性
问题1:双标签的属性需要写在开始标签还是结束标签中？
- 开始标签
问题2:标签上可以同时存在几个属性？
-
可以同时存在
多个
属性
问题3:标签名与属性之间，属性与属性之间以什么隔开？
- 空格
属性注意点：
- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分
4.7 图片标签
应用场景
：在网页中显示图片
问题1: 在网页中展示一张图片需要,需要用到什么标签? 单边标签还是双边标签?
-
img
标签.单边标签
问题2: 图片标签的必须属性是哪个?
- 必须属性是src.
问题3:图片标签常见的属性有哪些?
- src:指定需要展示图片的路径和文件名.
- alt :替换文本,当图片路径不正确时,才显示的文字.
-
title:提示文本,鼠标悬停的时候显示的文字.
- title属性不仅仅可以用于图片标签，还可以用于其他标签
- width:设置图片宽度.(如果宽高就设置了一个,另外一个会等比例缩放,好处就是图片不变形)
- height:设置图片高度.
<!-- 图像标签 -->
<img src="图片的路径" alt="替换文本" title="提示文本" width="" height="">
4.8.1 路径–绝对路径
应用场景
：页面加载图片或文件时,需要找到对应的图片及文件.
问题1:路径分几种?分别是什么?
- 绝对路径(了解)
- 相对路径(掌握)
问题2:什么是绝对路径?
- 绝对路径：指目录下的绝对位置，可直接到达目标位置(能够直接定位)，通常从计算机盘符开始的路径.
- 盘符开头：D:\ddd\images\1.jpg.
- 网络地址:http://wwwbaidu.com（了解）
4.8.2 路径-相对路径
问题1:什么是相对路径?
- 从当前文件开始出发找目标文件的过程,简单的来说相对HTML页面的位置.
问题2:什么同级目录?
- 当前文件和目标文件在同一目录中
-
书写方式:
-
方式一:目标文件名字！ 例如:
<img src="目标图片.gif">
-
方式二:./目标文件名字！ 例如
<img src="./目标图片.gif">
推荐使用
-
方式一:目标文件名字！ 例如:
问题3:什么是下级目录?
- 目标文件在下级目录中(当前文件与目标文件的文件夹在同一个目录下面)
-
书写方式:
-
方式一: 目标文件的文件夹/目标文件 例如:
<img src="img/目标图片.gif">
-
方式二: ./目标文件的文件夹/目标文件 例如:
<img src="./img/目标图片.gif">
推荐使用
-
方式一: 目标文件的文件夹/目标文件 例如:
问题4: 什么是上级目录
-
目标文件在当前文件的上一级目录或者上N级目录
-
上一级:
../
上两级:
../../
-
上一级:
总结
-
相对路径的三种情况：
- 同级目录：直接写：目标文件名字！
- 下级目录：直接写：文件夹名/目标文件名字！
- 上级目录：直接下：…/目标文件名字！
-
VSCode中路径的快捷操作
- 同级和下级目录：./ 之后选择即可
- 上级目录：…/ 之后选择即可
4.9 音频标签
应用场景
：在页面中插入音频
<audio src="./music.mp3" controls autoplay loop></audio>
问题1:网页中插入音频使用什么标签？
- audio标签
问题2:音频标签支持几种格式?
-
三种, 分别是:
MP3
、
Wav
、
Ogg
; 推荐使用
MP3
格式.
问题3:音频标签有哪些常见属性？
- src：音频路径
- controls：音频控件
- autoplay：自动播放
- loop：循环播放
4.10 视频标签
应用场景
：在页面中插入视频
<video src="./video.mp4" controls autoplay muted loop></video>
问题1:网页中插入视频使用什么标签？
- video标签
问题2:视频标签支持几种格式?
-
三种,分别是
MP4
、
WebM
、
Ogg
; 推荐使用
MP4
问题3:视频标签有哪些常见属性？
- src：视频路径
- controls：视频控件
- autoplay：自动播放 → 谷歌浏览器中可以配合muted属性实现自动静音播放
- loop：循环播放
4.11 超级链接标签
应用场景
：鼠标点击后,一个页面跳转到另一个页面
<!-- 语法 -->
<a href="跳转目标" target="窗口打开方式">文本或图像</a>
<a href="https://www.mi.com/" >外部链接</a>
<a href="./01.html">内部链接</a>
<a href="#">空链接</a>
问题1:实现点击之后,从一个页面跳转到另外一个页面,需要用什么标签
- 超级链接标签,a标签
问题2:超级链接标签最重要的属性是哪个?
- href属性
问题3:通过什么属性可以设置a标签的跳转方式？取值有哪些？
-
target属性
- _self：默认值,在当前窗口中跳转(覆盖原始窗口)
- _blank：在新窗口中跳转(保留原始窗口)
4.12 列表标签 展示数据
4.12.1 列表应用场景
问题1:列表的应用场景?
- 在网页中展示关联性的内容, 例如:新闻列表. 排行榜 网站首页底部导航.
问题2:列表的特点是什么?学习几种列表?
- 整齐 有序的展示数据.
- 三种,无序列表,有序列表,自定义列表.
4.12.2 无序列表
应用场景
：在网页中展示一组无顺序之分的列表,如:新闻列表
问题1:无序列表由几个标签组成？分别表示什么？
- 2个标签
-
ul
标签:表示无序列表 -
li
标签:表示列表的每一项
问题2:无序列表标签的嵌套规范是什么？
-
ul
标签中只允许嵌套
li
标签 -
li
标签中可以嵌套任意元素及内容
<ul></ul> ul表示无序列表 用于包含li标签
<li></li> li表示列表的每一项
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<!-- 注意事项 -->
ul标签中只允许包含li标签
li标签可以包含任意内容
4.12.3 有序列表
应用场景
：在网页中表示一组有顺序之分的列表，如：排行榜。
问题1:有序列表由几个标签组成？分别表示什么？
- 2个标签
-
ol
标签:表示无序列表 -
li
标签:表示列表的每一项
问题2:有序列表标签的嵌套规范是什么？
-
ol
标签中只允许嵌套
li
标签 -
li
标签中可以嵌套任意元素及内容
<ol></ol> 表示无序列表 用于包含li标签
<li></li> 表示列表的每一项
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
<!-- 注意事项 -->
ol标签中只允许包含li标签
li标签可以包含任意内容
4.12.4 自定义列表
应用场景
：在网页的底部导航中通常会使用自定义列表实现
问题1:自定义列表由几个标签组成？分别表示什么？
- 3个标签组成
-
dl
标签:表示自定义列表 -
dt
标签:表示列表主题 -
dd
标签:表示列表的每一项内容
问题2：自定义列表标签的嵌套规范是什么？
-
dl
标签中只允许包含
dt/dd
标签 -
dt/dd
标签可以包含任意内容
自定义列表有三组标签:
<dl></dl> dl表示自定义列表 用于包含dt/dd标签
<dt></dt> dt表示列表主题
<dd></dd> dd表示列表的每一项内容
语法：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dd>名词1解释3</dd>
</dl>
4.13 表格标签 展示数据
4.13.1 表格的基本标签
应用场景
：以行+列的方式整齐的展示数据, 例如:股票价格 学生成绩表
问题1:简单表格由几个标签组成?分别表示什么?
- 3个标签组成
-
table
标签:表示表格整体 -
tr
标签:表示每行 -
td
标签:表示每列(单元格)
问题2:表格标签的嵌套规范是什么?
-
table
标签包含
tr
,
tr
标签包含
td
; -
etabl
>
tr
>
td``etabl
>
tr
>
td
表格标签：<table></table> 定义表格标签 用于包裹多个tr
表格一行：<tr></tr> 用于定义表格中的行，用于包裹td,必须嵌套在 <table> </table>标签中。
表格一列：<td></td> 用于定义表格中的列（单元格），必须嵌套在<tr></tr>标签中。
<table>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
...
</tr>
...
</table>
4.13.2 表格相关属性
应用场景
：设置表格基本展示效果
问题1:表格设置边框用什么属性?
-
caption
标签 -
书写在
table
标签内部
问题2:表格设置宽高用什么属性?
-
th
标签,位于表格的第一行第一列小标题,默认居中加粗效果. -
书写在tr标签内部（用于替换
td
标签).
| 属性名 | 属性值 | 描述 |
|---|---|---|
| border | 数值 | 设置表格边框 |
| align |
, , |
设置对齐方式 |
| width | 数值 | 设置宽度 |
| height | 数值 | 设置高度 |
|
数值 | 单元格与单元格的距离,默认2像素 |
|
数值 | 单元格内容到单元格边框的距离,默认1像素 |
4.13.3 表格标题和表头单元格标签
应用场景
：在表格中表示整体大标题和一列小标题
问题1:表格的标题使用什么标签？书写在什么位置？
- caption 写在table与tr之间
问题2:表头单元格使用什么标签? 书写在什么位置?
- th 替换td写在tr里
示例代码
<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="0">
<caption><h3>学生信息表</h3></caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>女</td>
</tr>
<tr>
<td>李四</td>
<td>17</td>
<td>男</td>
</tr>
<tr>
<td>王五</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>郎才女貌</td>
</tr>
</table>
4.13.4 表格的结构标签
应用场景
：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰
问题1:表格的结构标签分别有哪些？表示什么含义？
-
thead
：表格头部 -
tbody
：表格主体 -
tfoot
：表格底部
问题2:表格结构标签书写在什么位置？
- 表格结构标签写在table标签内部
- 表格结构标签内部用于包裹tr标签
- 表格的结构标签可以省略
4.13.5 合并单元格
应用场景
：将水平或垂直多个单元格合并成一个单元格
问题1:合并单元格有那两种方式?
-
rowspan
：跨行合并→垂直方向合并 -
colspan
：跨列合并→水平方向合并
问题2:合并单元格的步骤是什么？
- 明确合并方式(跨行/跨列)
-
通过左上原则，确定保留谁删除谁
• 上下合并→只保留最上的，删除其他单元格
• 左右合并→只保留最左的，删除其他单元格 -
给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
•
rowspan
：跨行合并→垂直方向合并
•
colspan
：跨列合并→水平方向合并
问题3:可以跨结构标签合并单元格吗？
- 不能跨结构合并.
4.14 表单标签form 搜集数据
4.14.1
input
系列标签
input
应用场景
：在网页中显示收集用户信息的表单效果，如：登录页、注册页
问题1：
input
标签是单标签还是双标签？
- 单标签
问题2：
input
标签的type属性的取值有几个？
- 8个。
input
标签的基本语法：
<input type="属性值" />
input标签可以通过
type属性值的不同
，展示不同效果
问题3：提示用户输入内容的文本用哪个属性？
-
placeholder
属性
问题4：哪一个属性可以控制当前表单控件的含义？
-
name
属性
问题5：单选框如何实现单选一的效果？
- 设置相同的name属性值
问题6：设置默认选中某个单选或复选框，如何实现？
-
checked
=
checked
或者
checked
问题7：文件上传用哪个属性,多文件选择用哪个属性？
-
file属性
multiple
属性
4.14.2
input
标签的其它属性介绍
input
| 属性 | 说明 |
|---|---|
| placeholder | 占位符，提示用户输入内容的文本 |
| name | 名称，当前input控件的含义 |
| value | 用户输入的内容，提交之后会发送给后端服务器 |
| checked | 默认选中某个单选或复选框 |
| multiple | 多文件上传 |
注意事项
：同一组单选框或复选框，
name
属性的值保持一致。
<form action="">
<!-- 1、文本框：text（type属性的默认值） -->
昵称：<input type="text" placeholder="请输入您的昵称"><br>
<!-- 2、密码框：password -->
密码：<input type="password" placeholder="请输入您的密码"><br>
<!-- 3、单选框：radio 必须设置相同的name属性才可以实现单选效果-->
性别：<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女<br><br>
<!-- 4、多选框：checkbox -->
爱好：<input type="checkbox" checked>敲代码
<input type="checkbox" checked>熬夜
<input type="checkbox">掉头发<br><br>
<!-- 5、文件选择：file -->
<input type="file" multiple><br><br>
<!-- 按钮 -->
<!-- 1、submit：提交按钮 -->
<input type="submit">
<!-- 2、reset：重置按钮 -->
<input type="reset">
<!-- 3、button：普通按钮 -->
<input type="button" value="普通按钮">
</form>
4.15
button
按钮标签
button
应用场景
：在网页中显示用户点击的按钮
问题1：button按钮是单边标签还是双边标签
- 双边标签
问题2：button按钮的type属性有几个？分别是什么？
- 3个
-
submit
:提交按钮 -
reset
：重置按 -
button
：普通按钮，后期搭配JavaScript进行使用。
问题3：谷歌浏览器中button默认是哪个按钮？
- 提交按钮
昵称：<input type="text" placeholder="请输入您的昵称"><br><br>
<!-- 提交按钮 -->
<button type="submit">button提交按钮</button>
<!-- 重置按钮 -->
<button type="reset">button重置按钮</button>
<!-- 普通按钮 -->
<button type="button">button普通按钮</button>
4.16
select
下拉菜单标签
select
应用场景
：在网页中提供多个选择项的下拉菜单表单控件
问题1：下拉菜单的标签有几个？分别代表什么含义？
- 2个
- select标签
- option标签
问题2：默认选中某一个选项，使用哪一个属性？
-
selected
=
selected
或
selected
籍 贯：<select name="home">
<option>武汉</option>
<option>上海</option>
<option>深圳</option>
<option selected>火星</option>
</select>
4.17
textarea
文本域标签
textarea
应用场景
：在网页中可以输入多行文本的表单控件 例如：留言板 评论。
问题1：哪个标签设置文本域?单边标签还是双边标签？。
-
textarea
;双边标签
问题2：实际开发文本域样式推荐使用谁进行设置？
-
推荐使用
CSS
进行设置
<textarea cols="60" rows="6">这是textarea文本域</textarea>
4.18
label
标签
label
应用场景
：常用于绑定内容与表单标签的关系，增加点击范围。
问题1：
label
标签有什么作用？单边标签还是双边标签？
- 增加点击范围，提高用户体验。双边标签
问题2：
label
标签使用方法有几种？，使用步骤分别是什么？
-
2种
-
方式一：
- 使用label标签把内容（如：文本）包裹起来
- 在表单控件标签上添加id属性
- 在label标签的for属性中设置对应的id属性值，for属性和id属性保持一致。
-
方式二：
- 直接使用label标签把内容（如：文本）和表单标签一起包裹起来
- 需要把label标签的for属性删除即可
-
方式一：
<form action="">
<label> 用户名: <input type="text"></label> <br>
<!-- label标签作用:扩大input框点击范围,让input和内容进行关联 -->
<!-- label标签使用方法1 -->
<label for="nan">男 :</label>
<input type="radio" name="sex" id="nan">
<!-- label标签使用方法2 推荐-->
<label> 女 : <input type="radio" name="sex"></label>
</form>
4.19 语义化标签
4.19.1 无语义化标签
应用场景
：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签。
问：常用于布局无语义化标签有哪两个？各自的特点有哪些？
- 2个
- div标签：一行只显示一个（独占一行）
- span标签：一行可以显示多个
4.19.2 有语义化标签
应用场景
：在
HTML5
新版本中，推出了一些有语义的布局标签供开发者使用.移动端使用较多。
HTML5
的新特性都有兼容性问题，基本是
IE9
+ 以上版本的浏览器
才支持
常见有语义的布局标签：
<header>网页的头部</header>
<nav>网页的导航</nav>
<footer>网页的底部</footer>
<aside>网页的侧边栏</aside>
<section>网页的区块</section>
<article>网页的文章</article>
4.20 字符实体
应用场景
：在网页中展示特殊符号效果时，需要使用字符实体替代.
常用：
-
空格的字符实体是：
-
大于号的字符实体是:
>
-
小于号的字符实体是:
<
HTML基础知识结束~