HTML初识第一天

一、基础认知

目标：认识 网页组成 和 五大浏览器，明确 Web标准的构成，使用 HTML骨架 搭建出一个网页。

学习路径：

1. 基础概念铺垫（了解）
2. 认识网页
3. 五大浏览器和渲染引擎
4. Web标准
5. HTML初体验
6. 语法规范

认识网页

问题1：网页由哪些部分组成？
文字、图片、音频、视频、超链接
问题2：我们看到的网页背后本质是什么？
前端程序员写的代码
问题3：前端的代码是通过什么软件转换成用户眼中的页面的？
通过浏览器转化（解析和渲染）成用户看到的网页

网页由哪些部分组成？
• 文字、图片、音频、视频、超链接
咱们程序员写的代码是通过什么软件转换成网页的？
• 浏览器

五大浏览器

• IE浏览器
• 火狐浏览器（Firefox）
• 谷歌浏览器（Chrome）
• Safari浏览器
• 欧朋浏览器（Opera）

为什么需要Web标准？

不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异
• 如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差！
Web标准：让不同的浏览器按照相同的标准显示结果，让展示的效果统一！

Web标准的构成

Web标准要求页面实现：结构、表现、行为三层分离

HTML的概念

HTML（Hyper Text Markup Language）中文译为：超文本标记语言
专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述

网页体验-构建基本网页的步骤

1. 在代码文件夹中点击鼠标右击 → 新建文本文档 → 命名为：文字变粗案例.txt
2. 双击这个文件，输入代码等内容 → 记得保存！
3. 在文件上点击鼠标右键 → 重命名 → 修改文件后缀为为.html
4. 双击文字变粗案例.html ，浏览器会自动打开文件并显示之前输入的内容

HTML页面固定结构

为什么要使用 VS Code？

刚刚通过文本编辑器，如：记事本，完全可以编写网页源代码
➢ 但是效率……不忍直视
➢ 实际开发中，注重开发的 效率和便捷性 ，因此我们会使用一些开发工具
➢ 开发工具有很多： Visual Studio Code 、 Webstorm 、 Sublime 、Dreamweaver、 Hbuilder
➢ 前端开发神器：VS Code → 速度快、体积小、插件多

二、HTML标签学习

目标：学习HTML 排版、媒体、链接 等基础标签，完成 基础网页 的开发
学习路径：

1. 排版标签

2. 标题标签

3. 段落标签

4. 换行标签

5. 水平线标签

6. 文本格式化标签

7. 媒体标签

8. 链接标签

9. 排版标签：
   • 标题h系列、段落p、换行br、水平线hr

10. 文本格式化标签：
    • 加粗strong、下划线ins、倾斜em、删除线del

11. 图片标签：
    • img标签 + src属性 + alt属性 + title属性 + width属性 + height属性

12. 路径：
    • 相对路径：同级目录 + 下级目录 + 上级目录

13. 音频标签、视频标签：
    • audio标签、 video标签 + src属性 + controls属性

14. 链接标签：
    • a标签 + href属性 + target属性