一、基础认知
1.1.1 认识网页
- 问题1：网页由哪些部分组成？
文字、图片、音频、视频、超链接
- 问题2：我们看到的网页背后的本质是什么？
前端程序员写的代码
- 问题3：前端的代码是通过什么软件转换成用户眼中的页面的？
通过浏览器转化（解析和渲染）成用户看到的网页
1.1.2 小结
- 网页由哪些部分组成？
文字、图片、音频、视频、超链接
- 程序员写的代码是通过什么软件转换成网页的？
浏览器
目标：
认识网页组成和五大浏览器，明确web标准的组成，使用html骨架搭建一个网页
学习路径：
1.基础概念铺垫（了解）
- 认识网页
- 五大浏览器和渲染引擎
- web标准
2.html初体验
3.语法规范
1.2.1 五大浏览器
- 浏览器：是网页显示、运行的平台，是前端开发必备浏览器
- 常见的五大浏览器：
IE浏览器、火狐浏览器(Firefox) 、谷歌浏览器(Chrome)、Safari浏览器、欧朋浏览器(Opera)
1.2.2 渲染引擎（了解）
- 渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分
- 浏览器出品的公司不同，内在的渲染引擎也是不同的：
- 注意点：
- 渲染引擎不同导致解析相同代码时的 速度、性能、效果也不同的
- 谷歌浏览器的渲染引擎速度快、性能高、效果好，所以更吸引用户的喜爱（推荐）
1.2.3 小结
- 五大浏览器有哪些？
IE浏览器
火狐浏览器（Firefox）
谷歌浏览器(Chrome)
Safari浏览器
欧朋浏览器（Opera）
- 相同的网页在不同浏览器中显示效果会完全一致吗？
因为不同浏览器渲染引擎不同，解析的效果会存在差异
- 前端工程师日常推荐使用哪一个浏览器？
谷歌浏览器（Chrome）
1.3.1 为什么需要Web标准? (了解)
- 不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异 如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差！
- Web标准：让不同的浏览器按照相同的标准显示结果，让展示的效果统一！
1.3.2 web标准的构成
- web标准中分三个构成
1.3.3 web标准的记忆方法
- web标准要求页面实现：结构、表现、行为三层分离
1.3.4 小结
- web标准的构成有哪些？分别通过什么语言表示
- 结构：HTML→ 页面元素
- 表现：CSS→ 页面样式
- 行为: JavaScript→页面交互的动态效果
2.1.1 HTML的概念
- HTML (Hyper Text Markup Language)中文译为:超文本标记语言
专门用于网页开发的语言，主要通过HTML标签对网页的文、图片、音频、视频等内容进行描述
- 案例：文字变粗案例
构建一个网页，需要在网页中显示一个加粗的文字
<strong>这个字是加粗的吗？</strong>h
2.2.1 HTML页面固定结构
- 网页类似一篇文章：
- 每一页文章内容是有固定的结构的，如：开头、正文、落款等….…
- 网页中也是存在固定的结构的，如：整体、头部、标题、主体
2.网页中的固定结构是要通过特点的HTML标签进行描述的
2.2.2 小结
- HTML骨架结构由哪些标签组成？
- html标签：网页的整体
- head标签：网页的头部
- body标签：网页的身体
- title标签：网页的标题
3.1.1 什么是注释？
- 在之前上课学习时，同学们会在书本段落间记录内容的注解，方便下次看到此处理解
- 问题：同学们在书本段落间记录下的注解是为了给谁看的？
- 下次的阅读课本者(自己)
- 程序员在写代码时也会添加注释，方便下次看到此处时方便想起功能和含义
- 问题:程序员在代码中添加的注释,是为了给谁看的?
- 下次的阅读代码者(自己或者其他程序员)
3.1.2 注释的作用和写法
- 注释的作用：
- 为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码
- 浏览器执行代码时会忽略所有的注释
- 注释的快捷键：
- 在VS Code中: ctrl +/
3.1.3 小结
- 注释的快捷键是
Ctrl+
- 浏览器会执行注释吗？
- 不会，浏览器执行代码时会忽略所有的注释
3.2.1 HTML标签的结构
- 标签的结构图：
- 结构说明：
- 标签由<、>、人、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
- 常见标签由两部分组成,我们称之为:双标签。前部分叫开始标签,后部分叫结束标签,两部分之间包裹内容
- 少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
3.4.1 HTML标签与标签之间的关系可分为：
- 父子关系（嵌套关系）
<head> <title></title> </head>- 兄弟关系（并列关系）
<head></head> <body></body>
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
