一、基础认知
目标：认识 网页组成 和五大浏览器，明确Web标准的构成，使用HTML骨架搭建出一个网页。
1. 基础概念铺垫（了解）
1.1 认识网页
1.1.1 网页由哪些部分组成？
1.1.2 我们看到的网页背后本质是什么？
1.1.3 前端的代码是通过什么软件转换成用户眼中的页面的？
1.2 五大浏览器和渲染引擎
1.2.1 五大浏览器
- 浏览器：是网页显示、运行的平台，是前端开发必备利器
- 常见的五大浏览器：
IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）
- 浏览器市场份额：
谷歌扛把子，独占60%以上。
1.2.2 渲染引擎（了解）
- 渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分。
- 浏览器出品的公司不同，内在的渲染引擎也是不同的：
| 浏览器 |
内核 |
备注 |
| IE |
Trident |
IE、猎豹安全、360极速浏览器、百度浏览器 |
| Firefox |
Gecko |
火狐浏览器内核 |
| Safari |
webkit |
苹果浏览器内核 |
| Chorme/Opera |
Blink |
Blink其实是Webkit的分支 |
- 注意点：
渲染引擎不同，导致解析相同代码的速度、性能、效果也是不同的。
1.3 Web标准
1.3.1 为什么需要Web标准？（了解）
- 不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异。
- 如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差！
1.3.2 Web标准中分成三个构成：
| 构成 |
语言 |
说明 |
| 结构 |
HTML |
页面元素和内容 |
| 表现 |
CSS |
网页元素的外观和位置等页面样式（如：颜色、大小等） |
| 行为 |
Javascript |
网页模型的定义与页面交互 |
1.3.3 Web标准的记忆方法
- Web标准要求页面实现：结构、表现、行为三层分离
- 结构：HTML（决定了身体）
- 表现：CSS（决定了样式美观）
- 行为：JavaScript（决定了交互的动态效果）
2. HTML初体验
2.1 HTML的感知
2.1.1HTML的概念
- HTML（Hyper Text Markup Language）中文译为：超文本语言
–专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述。
- 案例：文字变粗案例 --体验构建一个网页，需要在网页中显示一个加粗的文字。
2.1.2网页体验–构建基本网页的步骤
- 在代码文件夹中点击鼠标右键
- 新建新文档
- 命名为：文字变粗案例.html
- 通过记事本打开写入:
<strong>你猜，这句话是加粗的吗？</strong>
- 双击html文件运行观察文字是否加粗
2.2 HTML骨架结构
2.2.1 HTML页面固定结构
- 网页类似于一篇文章：
-每一章内容是有固定结构的，如：开头、正文、落款等…
-网页中也是存在固定的结构的，如：整体、头部、标题、主体
- 网页中的固定结构是要通过特定的HTML标签进行描述的
| 特定标签 |
网页结构 |
| html标签 |
网页的整体 |
| head标签 |
网页的头部 |
| body标签 |
网页的主体 |
| title标签 |
网页的标题 |
例如：
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主体内容
</body>
</html>
2.3 开发工具的使用
2.3.1 为什么要使用VS Code?
- 刚刚通过文本编辑器，如：记事本，完全可以边写网页源代码，为什么还要用其他代码编辑器？
-虽然可以编写代码，但是效率不忍直视。
- 实际开发中，注重开发的效率性和便捷性，因此我们会使用一些开发工具</
最低0.47元/天 解锁文章
1543
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
