第一天：-CSDN博客

本文链接：https://blog.csdn.net/qq_61071742/article/details/129602592

1.1 基础认知：

1、网页组成

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

2、基础认知

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

常见的五大浏览器：IE浏览器、火狐浏览器、谷歌浏览器、Safari浏览器（苹果浏览器）、Opera浏览器（欧朋浏览器）

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

3、渲染引擎（浏览器内核）

定义：浏览器中专门对代码进行解析渲染的部分

浏览器内核备注

IE Trident IE、猎豹安全、360极速浏览器、百度浏览器

FireFox Gecko 火狐浏览器内核

Safari Webkit 苹果浏览器内核

Chrome/Opera Blink Blink其实是Webkit的分支

注意：渲染引擎不同，导致解析相同代码时的速度、性能、效果也不同的

4、Web标准三个构成：

HTML：负责结构（内容），页面元素和内容

CSS：负责表现，网页元素的外观和位置等页面样式（如颜色、大小等）

JavaScript:负责行为，网页模型的定义与页面交互

2.1 HTML

HTML（Hyper Text Markup Language)中文翻译为：超文本标记语言

1、HTML页面固定结构

<html>
    <head>
        <title>网页的标题</title>
    </head>
    <body>
        网页的主体内容
    </body>
</html>

2、开发工具

使用VS code快捷方式：

创建HTML5创建骨架结构：先输入“！”，后敲击Tab即可快速创建HTML骨架结构。

3、HTML语法规范

注释：

格式：

在VS Code中: 将光标定位到注释部分，使用Ctrl+/，同理，取消注释也是使用Ctrl+/。

标签：

格式：

<strong>	文字要变粗	</strong>
开始标签	包裹的内容	结束标签

结构说明：

1、标签由<、>、/、英文单词或字母组成，并且把标签中<>包括起来的英文单词或字母称为标签名。

2、常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容。

3、少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。

标签之间的关系有：

父子关系：

eg:

兄弟关系：

eg:

4、标签

标题标签：

格式：<h1>标题名</h1>

vs code特性：

输入"h1"后，键入Tab。

使用“ctrl+D"快捷键可以快速选择附近相同单词。

段落标签：

格式：<p>段落内容</p>

vs code特性：

段落之间存在间隙，且独占一行。

可以使用查看菜单里面的自动换行来查看代码。