01-初识-网页组成和本质
1.基础认知
认识网页组成和五大浏览器，明确Web标准的构成，使用HTML骨架搭建出一个网页。
1.1认识网页（了解）
网页由哪些部分组成？
文字、图片、音频、视频、超链接
我们看到的网页背后本质是什么？
前端程序员写的代码
前端的代码是通过什么软件转换成用户眼中的页面的？
通过浏览器转化（解析和渲染）成用户看到的网页
1.2 小结
网页由哪些部分组成？
文字、图片、音频、视频、超链接
咱们程序员写的代码是通过什么软件转换成网页的？
浏览器
02-了解-初识-浏览器
2.1五大浏览器
浏览器：是网页显示、运行的平台，是前端开发必备利器
常见的五大浏览器：
IE浏览器、火狐、浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）
浏览器的市场份额
2.2渲染引擎（了解）
渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分。
浏览器出品的公司不同，内在的渲染引擎也不同
注意点：渲染引擎不同，导致解析相同代码时的速度、性能、效果也不同的。谷歌浏览器的渲染引擎速度快、性能高、效果好，所以更吸引用户的喜爱（推荐）
2.3小结
五大浏览器有哪些？
IE浏览器、火狐浏览器（firefox）、谷歌浏览器（Chrome）、safari浏览器、欧朋路蓝鳍（Opera）
相同的网页在不同浏览器中显示效果会完全一样吗？
因为不同浏览器渲染引擎不同，解析的效果会存在差异
前端工程师日常推荐使用哪一个浏览器？
谷歌浏览器（Chrome）
03-初识-web标准
3.1 为什么需要web标准（了解）
不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异。
如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差。
Web标准：让不同的浏览器按照相同的标准显示结果，让展示的效果统一。
3.2 web标准的构成
| 构成 |
语言 |
说明 |
| 结构 |
HTML |
页面元素和内容 |
| 表现 |
CSS |
网页元素的外观和位置等页面样式（如：颜色、大小等） |
| 行为 |
JavaScript |
网页模型的定义与界面交互 |
3.3 web标准的记忆方法
Web标准要求页面实现：结构、表现、行为三层分离
结构：HTML（决定了身体）、表现：CSS（决定了样式没关）、行为：JavaScript决定了交互的动态效果。
3.4 小结
Web标准的构成有哪些？分别通过什么语言表示？
结构：HTML→页面元素
表现：CSS→页面样式
行为：JavaScript→页面交互的动态效果
04-HTML感知
4.1 HTML的概念
HTML（Hyper Text M arkup Language）中文译为：超文本标记语言
专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述
案例：文字变粗案例
构建一个网页，需要在网页中显示一个加粗的文字
4.2网页体验-构建基本网页的步骤
1.在代码文件夹中点击鼠标右击 → 新建文本文档 → 命名为：文字变粗案例.txt
2. 双击这个文件，输入代码等内容 → 记得保存！
3. 在文件上点击鼠标右键 → 重命名 → 修改文件后缀为为.html
4. 双击文字变粗案例.html ，浏览器会自动打开文件并显示之前输入的内容
4.3 小结
HTML的中文译名叫做？超文本标记语言
HTML中是通过什么对网页中的文本、图片、音频、视频等内容进行描述的？HTML标签
05-HTML骨架
5.1 HMLT页面固定结构
网页类似于一篇文章
每一页文章内容是有固定的结构的，如开头、正文、落款等
页面中也是存在固定的结构的，如整体、头部、标题、主体、
网页中的固定结构是要通过特点的HTML标签进行描述的
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主体内容
</body>
</html>
5.2小结
HTML骨架结构由哪些标签组成？
HTML标签：网页的整体
Head标签：网页的头部
Body标签：网页的身体
Title：网页的标题
06-vscode的简介和使用
6.1 为什么要使用VS Code？
刚刚通过文本编辑器，如记事本，完全可以便携网页源代码，但是效果不忍直视
实际开发中，注重开发的效率和便捷性，因此我们会使用一些开发工具。
开发工具由很多：Visual Studio Code 、 Webstorm 、 Sublime 、Dreamweaver、 Hbuilder
前端开发神器：VS code：速度快、体积小、插件多
6.2 VS Code使用前要求
1.VSCode 软件安装完毕
2. Chinese (Simplified) Language Pack for Visual Studio Code 简体中文插件安装完毕
3. open in browser 直接打开浏览器插件安装完毕
6.3 VS Code创建网页的步骤
1.双击打开VS Code软件
2.将代码文件夹用鼠标左键按住不放，拖拽到VS Code窗口中，文件夹会显示在左侧目录上
3.新建文件htm骨架.html，输入！，按住TAB或者回车键，会显示html骨架
4.右键选择open in default browser，运行HTML文件
6.4 VS Code的基本快捷键
1.快速生成标签：英文 + tab
2. 保存文件：ctrl + s
注意1：写完文件之后务必需要保存文件，否则网页无变化
注意2：可以设置自动保存省去每次保存的麻烦
3. 快速查看网页效果：右击 → Open in Default Browser
快捷键：Alt + B
注意：必须安装了Open In Browser 插件
4. 快速生成结构标签：! + Tab
注意1：!必须是英文的，中文!无效
注意2：必须保证当前文件后缀名是.html，否则无效
VS Code自动生成的骨架多了其他标签。
6.5 VS Code的其他快捷键
1. 快速复制一整行：ctrl + c
2. 快速粘贴一整行：ctrl + v
3. 快速删除（剪切）一整行：ctrl + x
07-注释
7.1 什么是注释
程序员在写代码时也会添加注释，方便下次看到此处时，方便想起功能和含义。
问题：程序员在代码中添加注释，是为了给谁看的？
下次的阅读代码这（自己或者其他程序员）
7.2 注释的作用和写法
注释的作用：
为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员的理解代码
浏览器执行代码时会忽略所有的注释
注释的快捷键：
在VS Code中：Ctrl +/
7.3 小结
注释的快捷键是？ Ctrl+/
浏览器会执行注释吗？ 不会，浏览器执行代码时会忽略所有的注释
08-标签组成和关系
8.1 HTML标签的结构
标签的结构图
<strong>文字要变粗</strong>
结构说明;
1.标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
2. 常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
3. 少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
8.2 小结
常见标签由几部分组成？称之为？
•两部分，双标签
少数标签由几部分组成？称之为？
一部分，单标签
以下标签按照结构划分，分别属于哪一类标签？
<p>我是标签</p>
<h1>我是标签</h1>
<hr>
<br>
8.3 小结
双标签的属性需要写在开始标签还是结束标签中？
开始标签
标签上可以同时存在几个属性？多个
标签名与属性之间，属性与属性之间以什么隔开？空格
HTML标签与标签之间的关系可分为父子关系（嵌套关系）
<head>
<title></title>
</head>
兄弟关系（并列关系）
<head></head>
<body></body>
9.标题和段落
最低0.47元/天 解锁文章
1623
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
