前端入门：HTML课堂笔记-基础与文本、图片标签解析

HTML

需积分: 6 94 浏览量更新于2024-08-05 收藏 6KB MD 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

"Day02 HTML课堂笔记记录了HTML的基本语法、标签使用、文本标签、图片处理以及路径知识，适合前端零基础入门学习者。" 在前端开发中，HTML（超文本标记语言）是构建网页的基础。这篇课堂笔记详细介绍了HTML的一些核心概念，帮助初学者快速入门。 1. HTML基本语法： - 文档声明：`<!doctype html>` 是HTML5的文档类型声明，告诉浏览器以标准模式渲染页面。 - 注释：`` 用于在代码中添加解释性文字，对用户不可见。 2. HTML标签： - 主体结构标签：`html` 是根元素，`head` 包含页面元数据，`body` 内容主体。 - `HEAD` 中的标签：`meta` 设置页面元信息，如字符集；`title` 定义页面标题。 - 排版标签：`h1~h6` 用于标题，`p` 表示段落，`hr` 创建水平线，`br` 强制换行，`pre` 保留原文格式，`div` 作为内容容器，无特定语义。 3. 文本标签： - `em` 标签用于表示强调，通常斜体显示。 - `strong` 也表示强调，通常粗体显示。 - `ins` 标记插入内容，常有下划线。 - `del` 标记删除内容，显示删除线。 - `sub` 用于创建下标字，如化学公式。 - `sup` 用于创建上标字，如指数。 4. 图片处理： - `img` 标签插入图片，关键属性包括`src`（图片路径）、`alt`（替换文本）、`width`和`height`（尺寸）。其中，路径可以是相对路径或绝对路径，相对路径相对于当前文件的位置，而绝对路径是从根目录开始的完整路径。 - 图片格式常见有`.jpg/.jpeg`（压缩格式，适用于照片）、`.png`（支持透明度，适用于图形）和`.gif`（支持动画）。 5. 路径知识： - 绝对路径：指从根目录开始的完整文件路径。 - 相对路径：相对于当前文件的路径。例如，如果图片在当前HTML文件的同一目录下，只需写图片文件名；如果在子目录，需包含子目录名。通过这些基础知识的学习，初学者能够建立起HTML的基本框架，并逐步学会创建简单的网页。在实际应用中，还需要结合CSS和JavaScript来实现更丰富的样式和交互效果。

资源推荐