一、基础认知
目标:认识 网页组成 和 五大浏览器,明确 Web标准的构成,使用 HTML骨架 搭建出一个网页。
学习路径:
- 基础概念铺垫(了解)
- 认识网页
- 五大浏览器和渲染引擎
- Web标准
- HTML初体验
- 语法规范
认识网页
问题1:网页由哪些部分组成?
文字、图片、音频、视频、超链接
问题2:我们看到的网页背后本质是什么?
前端程序员写的代码
问题3:前端的代码是通过什么软件转换成用户眼中的页面的?
通过浏览器转化(解析和渲染)成用户看到的网页
网页由哪些部分组成?
• 文字、图片、音频、视频、超链接
咱们程序员写的代码是通过什么软件转换成网页的?
• 浏览器
五大浏览器
• IE浏览器
• 火狐浏览器(Firefox)
• 谷歌浏览器(Chrome)
• Safari浏览器
• 欧朋浏览器(Opera)
为什么需要Web标准?
不同浏览器的渲染引擎不同,对于相同代码解析的效果会存在差异
• 如果用户想看一个网页,结果用不同浏览器打开效果不同,用户体验极差!
Web标准:让不同的浏览器按照相同的标准显示结果,让展示的效果统一!
Web标准的构成
Web标准要求页面实现:结构、表现、行为三层分离
HTML的概念
HTML(Hyper Text Markup Language)中文译为:超文本标记语言
专门用于网页开发的语言,主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述
网页体验-构建基本网页的步骤
- 在代码文件夹中点击鼠标右击 → 新建文本文档 → 命名为:文字变粗案例.txt
- 双击这个文件,输入代码等内容 → 记得保存!
- 在文件上点击鼠标右键 → 重命名 → 修改文件后缀为为.html
- 双击文字变粗案例.html ,浏览器会自动打开文件并显示之前输入的内容
HTML页面固定结构
为什么要使用 VS Code?
刚刚通过文本编辑器,如:记事本,完全可以编写网页源代码
➢ 但是效率……不忍直视
➢ 实际开发中,注重开发的 效率和便捷性 ,因此我们会使用一些开发工具
➢ 开发工具有很多: Visual Studio Code 、 Webstorm 、 Sublime 、Dreamweaver、 Hbuilder
➢ 前端开发神器:VS Code → 速度快、体积小、插件多
二、HTML标签学习
目标:学习HTML 排版、媒体、链接 等基础标签,完成 基础网页 的开发
学习路径:
-
排版标签
-
标题标签
-
段落标签
-
换行标签
-
水平线标签
-
文本格式化标签
-
媒体标签
-
链接标签
-
排版标签:
• 标题h系列、段落p、换行br、水平线hr -
文本格式化标签:
• 加粗strong、下划线ins、倾斜em、删除线del -
图片标签:
• img标签 + src属性 + alt属性 + title属性 + width属性 + height属性 -
路径:
• 相对路径:同级目录 + 下级目录 + 上级目录 -
音频标签、视频标签:
• audio标签、 video标签 + src属性 + controls属性 -
链接标签:
• a标签 + href属性 + target属性