01-初识HTML

01-初识HTML

学习目标：

1. 理解HTML的基本语法
2. 掌握排版标签实现标题等效果
3. 相对路径和绝对路径
4. 媒体标签（图片、音频、视频）
5. 超链接

一、基础认知

了解网页组成和五大浏览器
明确Web标准的构成

1.1 认识网页

1. 以下网页有哪些部分组成
   

文字、图片、音频、视频、超链接…

2. 那么这个网页背后本质是什么？

3. 前端的代码是通过什么软件转换成用户眼中的页面的？

1.2 五大浏览器和渲染引擎

1.2.1 浏览器

1. 浏览器：是网页显示、运行的平台，是前端开发必备利器
2. 常见的五大浏览器：

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

1.2.2 渲染引擎

1. 渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分
2. 浏览器出品的公司不同，内在的渲染引擎也是不同的：

3. 注意点：

• 渲染引擎不同，导致解析相同代码时的 速度、性能、效果也不同的
• 谷歌浏览器的渲染引擎速度快、性能高、效果好，所以更吸引用户的喜爱（推荐）

1.3 Web标准

1.3.1 为什么需要Web标准？

1. 不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异

如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差！

2. Web标准：让不同的浏览器按照相同的标准显示结果，让展示的效果统一！

1.3.2 Web标准的构成

1. Web标准中分成三个构成：

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页元素的外观和位置等页面样式（如：颜色、大小等）
行为	JavaScript	网页模型的定义与页面交互

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

结构：HTML（决定了身体）

表现：CSS（决定了样式美观）

行为：JavaScript（决定了交互的动态效果）

1.4 开发工具

Visual Studio Code（推荐） 、 Webstorm 、 Sublime 、Dreamweaver、 Hbuilder

1. 推荐插件

   1. 中文插件：Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
   2. 浏览器运行：open in browser
   3. 文件夹样式：vscode-icons
   4. 自动重新加载网页：Live Server

2. 导入别人发给你的插件压缩包（extensions.zip）

   将压缩包（extensions.zip）解压在 .vscode的 extensions文件中

   位置：C:\Users\Administrator（自己电脑用户名）\.vscode\extensions

3. 常用快捷键

   1. 快速生产网页结构：！(英文感叹号)+tab | enter
   2. 保存：ctrl+s
   3. 运行：alt+b（右击 → Open in Default Browser）
   4. 快速复制一整行：ctrl + c
   5. 快速粘贴一整行：ctrl + v
   6. 快速删除（剪切）一整行：ctrl + x

二、HTML初体验

2.1 HTML初感知

2.1.1 HTML的概念

1. HTML（Hyper Text Markup Language）中文译为：超文本标记语言

专门用于网页开发的语言，主要通过HTML标签实现网页中的文本、图片、音频、视频等内容

2. 案例：文字变粗案例

体验构建一个网页，需要在网页中显示一个加粗的文字

文字要变粗
<strong>文字要变粗</strong>
<h1>文字要又大又粗</h1>

2.1.2 构建基本网页的步骤

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

2.2HTML骨架结构

2.2.1 HTML页面固定结构

1. 网页类似于一篇文章：

每一页文章内容是有固定的结构的，如：开头、正文、落款等……
网页中也是存在固定的结构的，如：整体、头部、标题、主体

2. 网页中的固定结构是要通过特点的 HTML标签 进行描述的

2.3 注释

1. 概念：

• 为代码添加的具有解释性、描述性的信息.比如：产品说明书、电影介绍这种。
• 浏览器执行代码时会忽略所有的注释

2. 格式：<!-- 注释的内容 -->
3. 快捷键：ctrl + /