一：HTML简介

1.什么是HTML？

1. HTML：超文本标记语言（Hyper Text Markup Language）；

2. 不是编程语言，而是标记语言（markup language）—— 不同的标记表示不同的含义。

2：常用浏览器有几个？分别是？

五大浏览器。

1. 谷歌浏览器 Chrome

2. 火狐浏览器 Firefox

3. Safari （苹果电脑） / iPhone / iPAD

4. IE / Edge （微软）

5. 欧朋浏览器 Opera

二：Web 标准的构成有哪些？

1.标签的书写规范是什么？

所有标签都包含在 <> 中间，例如： <html> ；

2.双标签和单标签的特点是什么？

① <tag> 开始标签；

②</tag> 结束标签，结束标签在标签名前有一个 / （斜线）；

3. 标签的关系有哪些？

单标签不需要结束标签，例如： <br> 。

4.双标签和单标签的特点是什么？

① 双标签是成对出现的，有开始标签和结束标签；

②单标签不需要结束标签。

5：标签的关系有哪些？

①包含关系：父子；

②并列关系：兄弟。

6：4 个基本标签是什么？作用是什么？

课堂上写的自己的第一个HTML：

<html>

<head>

<title>

第一个页面

</title>

</head>

<body>

键盘敲烂，工资过万。

</body>

</html>

VSCode 创建 HTML 骨架结构的方式是什么？

1. 新建并保存文件，文件的扩展名是 html ；

2. ! + 回车 / ! + TAB 。

三：标签

标题标签

1：HTML 提供了几个等级的标题？

标题共有 6 个等级，从 <h1> 到 <h6>

重要性依次递减

字号依次递减

2：哪个级别的标题最重要？哪个级别的标题字号最大？标题文字会独占一行显示吗？ h1 h1 会

段落标签

1：段落标签和换行标签的作用是什么？

段落标签负责显示一段文字；

换行标签会把文字强制换行。

2：段落标签的是什么？有什么特点？

标题一共六级选，

文字加粗一行显。

由大到小依次减，

从重到轻随之变。

语法规范书写后，

具体效果刷新见。

段落标签是 p 标签；特点：

是双标签，段落内容包含在开始标签和结束标签之间；

文本在一个段落中会根据浏览器窗口的大小自动换行；

段落和段落之间有一定的空隙。

3. 问题 3：换行标签是什么？有什么特点？

换行标签是 br 标签；特点：是个单标签；

换行后只是另起一行，不像 p 标签会有明显的间距。

4：在 VSCode 中看到的文本排列方式和浏览器中的一样吗？

浏览器在显示页面时，会把 HTML 文件中多个空格或换行合并成一个空格显示。

「文本格式化标签」

1.文本格式化标签的作用是什么？

突出显示，比普通文字重要。

2.有那几类文本格式化标签？

3：为什么推荐使用单词较长的标签？

使用 strong 、 em 、 del 、 ins 语义更清晰、更强烈。

（ strong 加粗、 em 倾斜、 i 后续会用在字体图标。)

div 和 span 标签

1： div 和 span 标签的语义是什么？

div 和 span 没有语义；

是在布局时用来装东西的盒子，非常常用！

2： div 和 span 的区别是什么？

图像标签

1：在 HTML 中，用哪一个标签来定义图像？

图像标签： img ，是英文单词 image 的缩写

2：图像标签的必须属性是什么？为什么？

src 属性是图像标签的必须属性；

因为只有指定了图像文件的路径和文件名，图像标签才能正确地显示图片。

3：图像属性有那几个，作用是什么？

4：属性的书写位置在哪里？

属性写在开始标签中，在标签的名字后面，语法格式如下：

属性名有智能提示，不需要硬记；

属性值需要用双引号引起来；

属性与属性之间使用空格分开。

5：图像的宽度和高度需要同时指定吗？为什么？

宽度属性 width / 高度属性 height ；

现阶段不需要同时指定宽高，浏览器会根据已经指定的宽或高，等比例缩放图像。

6：哪一个属性没有智能提示？

边框属性 border 没有智能提示，后续会利用 CSS 设置图像边框。

图像标签注意点

1：图像标签哪些属性是必须要写的？

src 属性是图像标签的必须属性；

因为只有指定了图像文件的路径和文件名，图像标签才能正确地显示图片。

2： alt 和 title 有什么区别？

alt 属性，指定图像不显示时显示的文本；

title 属性，指定鼠标悬停在图片上方时显示的文本。

1：什么是目录文件夹? 什么是网站根目录？

目录文件夹：就是普通文件夹，可以保存多个文件和其他文件夹；

网站根目录：一个网站项目的第一层文件夹，保存所有网站需要的网页和素材。

2：用 VSCode 能直接打开一个文件夹吗？有几种打开文件夹的方式？可以；

VSCode 打开文件夹的三种方式：

1. 在 VSCode 中通过菜单命令打开；

2. 在资源管理中，选中文件夹点击右键，选择「通过 Code 打开」；

3. 直接将文件夹拖拽到文本编辑区域。

相对路径

1.什么是相对路径？

以文件所在位置为参考基础建立的目录路径。

2：文件夹之间用什么符号分隔？(下一级路径写法)

文件夹之间使用 / 分隔

3： ../ 是什么意思？

../ 表示上一级文件夹。

4：一个文件会有多个上级文件夹吗？

一个文件最多只能有一个上级文件夹，不会有多个上级文件夹。

提示：后续开发网站时，不要把文件放在网站根目录的外面。

绝对路径

1：什么是绝对路径？

文件或文件夹的绝对位置，能够直接定位。

2：绝对路径能够定位唯一的文件或者文件夹吗？

绝对路径能够定位唯一的文件或文件夹。

链接标签

1：链接标签的作用是什么？

从一个页面链接跳转到另一个页面或者页面的其他位置。

2：链接标签是单标签还是双标签？为什么？

链接标签是双标签；

可以在链接标签内部包含其他元素（点击谁）， href 属性用来指定跳到哪。

3：链接标签的语法是什么？哪一个属性最重要？

href ：目标位置

target ：窗口打开方式

_self （默认）在当前窗口打开

_blank 在新窗口中打开

链接标签的 href 属性最重要，指定链接跳转的目标位置。

小记

_self 通常使用在当前网站的跳转

_blank 通常用在外部链接的跳转

4：内部链接会跳转到哪里？可以使用相对路径吗？

外部链接，跳转到其他网站，跳出当前网站；

内部链接，网站内部页面之间的相互链接，可以使用相对路径。

5：问题 2：在开发时时候空链接？空链接有什么特点？

开发过程中，还不能确定链接目标时可以暂时使用空链接。

锚点链接

1：锚点链接的作用是什么？

锚点链接可以实现页面内跳转。

2. 问题 2：目标标签需要增加什么属性，才能实现锚点链接的跳转？

目标标签需要增加 id 属性，才能实现锚点链接的跳转 —— 跳转到 id 所在位置

3. 问题 3：锚点链接的语法是什么？

锚点链接的语法是： href="#id"

注释标签和特殊字符

1：VSCode 中注释的快捷键是什么？

ctrl + / 。

2：HTML 中的注释有什么用处？我们开发的时候要写注释吗？

注释是给程序员看的，可以帮助程序员阅读和理解代码，注释不会显示在页面中；

在开发页面时，页面内容通常是从上向下顺序排列的，合理使用注释能够辅助拆分页面

结构。

3：前端工程师一般记住几个特殊符号就可以了？

空格： no break space

大于号 > ： greater than

小于号 < ： less than

HTML 第 01 天 —— HTML 基础