当前位置： 首页 > news >正文

前端零基础入门到上班:【Day3】从零开始构建网页骨架HTML

news 2026/2/8 21:50:25

HTML 基础入门：从零开始构建网页骨架

        • 目录
      • 1. 什么是 HTML？
        • HTML 的核心作用
      • 2. HTML 基本结构
        • 2.1 DOCTYPE 声明
        • 2.2 `<html>` 标签
        • 2.3 `<head>` 标签
        • 2.4 `<body>` 标签
      • 3. HTML 常用标签详解
        • 3.1 标题标签
        • 3.2 段落和文本标签
        • 3.3 链接标签
        • 3.4 图像标签
        • 3.5 列表标签
        • 3.6 表格标签
        • 3.7 HTML5 语义化标签
      • 4. HTML 属性
      • 5. HTML 常见错误与规范
      • 6. HTML 实战练习
      • 7. 总结与练习题
        • 总结
        • 练习题

目录
  1. 什么是 HTML？
  2. HTML 基本结构
    • 2.1 DOCTYPE 声明
    • 2.2 html 标签
    • 2.3 head 标签
    • 2.4 body 标签
  3. HTML 常用标签详解
    • 3.1 标题标签
    • 3.2 段落和文本标签
    • 3.3 链接标签
    • 3.4 图像标签
    • 3.5 列表标签
    • 3.6 表格标签
    • 3.7 HTML5 语义化标签
  4. HTML 属性
  5. HTML 常见错误与规范
  6. HTML 实战练习
  7. 总结与练习题

1. 什么是 HTML？

HTML（HyperText Markup Language） 是用于创建网页的标准标记语言。它通过不同的标签来组织和显示文本、图片、链接等内容，是网页结构的基础。与 HTML 搭配使用的还有 CSS 和 JavaScript，分别负责页面的样式和交互功能。

后续内容 代码偏多 你跟着练习免不了 报错同学 我建议你关注我公众号 可以随时发私信给我 看到就会回复

HTML 的核心作用
  1. 构建网页结构：定义标题、段落、图片、列表等内容的布局。
  2. 链接网页内容：通过超链接将不同页面连接在一起。
  3. 增强语义：HTML5 引入了语义化标签，帮助搜索引擎理解内容。

2. HTML 基本结构

  1. 一个完整的 HTML 文件由一系列标签组成，标签用来指明页面的结构、内容和其他信息。以下是一个简单的 HTML 页面结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一个 HTML 页面</title>
</head>
<body><h1>欢迎来到我的网页！</h1><p>这是我的第一个 HTML 页面。</p>
</body>
</html>
  1. 怎么生成HTML基本机构
    新建一个目录
    在这里插入图片描述
    用VSCode 打开这个目录，你可以用鼠标拖拽目录到VSCode 上
    在这里插入图片描述
    点击新建文件，新建一个初识html.html, 记得后缀是HTML哦~
    在这里插入图片描述
    接下来输入英文的！ ，一定要是英文！！！
    在这里插入图片描述
    回车哦亲
    在这里插入图片描述在这里插入图片描述
    恭喜你同学，你的第一个html页面完成了， 接下来我们怎么看效果呢？需要安装一个小插件如下图
    在这里插入图片描述
    安装成功之后重启一下，此时你可以 alt + b 就可以看你的html页面啦~~~~
    如果在安装过程中遇到问题可以关注公众号直接发消息给我，祝你学习愉快
2.1 DOCTYPE 声明
<!DOCTYPE html>
  • DOCTYPE 声明位于文档的最顶端，表示当前文档是 HTML5 标准版本。
  • 它帮助浏览器以标准模式渲染页面，确保网页样式和功能的统一。
2.2 <html> 标签
<html lang="zh-CN">
  • <html> 标签定义整个 HTML 文档的根节点，是所有其他内容的容器。
  • lang="zh-CN" 属性表示文档语言为简体中文，帮助搜索引擎和浏览器理解页面语言。
2.3 <head> 标签
  • <head> 标签用于存放一些网页的基本信息，比如页面标题、字符编码、外部资源（CSS、JS）等，不会直接显示在网页上。

示例：

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一个 HTML 页面</title>
</head>
  • <meta charset="UTF-8">：定义网页的字符编码为 UTF-8，确保页面中所有文本正确显示。
  • <title>：页面标题，将显示在浏览器标签上。
2.4 <body> 标签
  • <body> 标签包含所有在网页上显示的内容，包括文本、图片、链接等。

示例：

<body><h1>欢迎来到我的网页！</h1><p>这是我的第一个 HTML 页面。</p>
</body>
  • 上述内容会显示在网页中，<h1> 标签表示标题，<p> 表示段落。

3. HTML 常用标签详解

接下来，详细介绍常用的 HTML 标签，帮助你构建更丰富的网页内容。

3.1 标题标签

HTML 提供了六个级别的标题标签：<h1> 至 <h6>。

示例：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
  • 标题标签不仅控制文字大小和粗细，还向搜索引擎传达信息的层次结构，<h1> 通常用于页面主标题。
3.2 段落和文本标签

段落标签 <p>

  • <p> 用于定义段落。

文本格式化标签

  • <strong>：将文本加粗。
  • <em>：将文本斜体。

示例：

<p>这是一个普通段落。</p>
<p><strong>加粗文字</strong> 和 <em>斜体文字</em>。</p>
3.3 链接标签
  • <a> 标签用于创建超链接，通过 href 属性指定链接的目标地址。

示例：

<a href="https://www.example.com" target="_blank">访问我的网站</a>
  • target="_blank" 属性用于在新标签页中打开链接。
3.4 图像标签
  • <img> 标签用于在网页中插入图片。src 属性指定图片 URL，alt 属性描述图片内容。

示例：

<img src="image.jpg" alt="示例图片" width="200" height="150">
3.5 列表标签

HTML 支持有序列表和无序列表。

  • 有序列表 <ol>：使用 <li> 标签定义列表项。
  • 无序列表 <ul>：使用 <li> 标签定义无序项。

示例：

<ol><li>第一项</li><li>第二项</li>
</ol>
<ul><li>无序项一</li><li>无序项二</li>
</ul>
3.6 表格标签

表格由 <table> 标签定义，行由 <tr> 标签定义，表头和数据由 <th> 和 <td> 标签定义。

示例：

<table border="1"><tr><th>姓名</th><th>年龄</th></tr><tr><td>小明</td><td>20</td></tr>
</table>
3.7 HTML5 语义化标签

HTML5 新增了一些语义化标签，帮助开发者组织页面结构。

  • <header>：表示页面头部内容。
  • <footer>：表示页面底部内容。
  • <section>：页面的一个章节。
  • <article>：独立的内容块。

示例：

<header><h1>网站标题</h1>
</header>
<section><article><h2>文章标题</h2><p>这是文章的内容。</p></article>
</section>
<footer><p>版权所有</p>
</footer>

4. HTML 属性

标签可以包含多个属性，常用属性包括 id、class、style 等，用于控制元素的样式和功能。

示例：

<p id="intro" class="highlight">带属性的段落。</p>
  • id 是唯一标识，用于 CSS 或 JavaScript。
  • class 表示样式类，便于 CSS 样式应用。

5. HTML 常见错误与规范

  • 标签未闭合：确保每个标签都有结束标签，如 <p>...</p>。
  • 层级混乱：标签应按正确的结构嵌套，如 <ul><li></li></ul>。

6. HTML 实战练习

任务：创建一个简单的个人简历页面，包含姓名、简介、教育经历和联系方式。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人简历</title>
</head>
<body><h1>姓名：张三</h1><p>简介：一名热爱编程的前端开发者。</p><h2>教育经历</h2><ul><li>大学：计算机科学与技术专业</li></ul><h2>联系方式</h2><p>邮箱：example@example.com</p>
</body>
</html>

7. 总结与练习题

总结
  • HTML 是构建网页的基础，了解其语法和结构是进入前端开发的重要第一步。
练习题
  1. 使用 HTML 创建一个包含标题、段落、链接和图片的网页。
  2. 使用有序列表和无序列表，展示你最喜欢的书籍和电影。

相关文章：

前端零基础入门到上班:【Day3】从零开始构建网页骨架HTML

HTML 基础入门&#xff1a;从零开始构建网页骨架 目录 1. 什么是 HTML&#xff1f;HTML 的核心作用 2. HTML 基本结构2.1 DOCTYPE 声明2.2 <html> 标签2.3 <head> 标签2.4 <body> 标签 3. HTML 常用标签详解3.1 标题标签3.2 段落和文本标签3.3 链接标签3.4 图…...

编程日记 2024/10/31 6:31:06

字符脱敏工具类

1、字符脱敏工具类 import lombok.extern.slf4j.Slf4j; import org.apache.commons.lang3.StringUtils;/*** 数据脱敏工具类** date 2024/10/30 13:44*/Slf4j public class DataDesensitizationUtils {public static final String STAR_1 "*";public static final …...

编程日记 2024/10/31 6:29:04

【jvm】jvm对象都分配在堆上吗

目录 1. 说明2. 堆上分配3. 栈上分配&#xff08;逃逸分析和标量替换&#xff09;4. 方法区分配5. 直接内存&#xff08;非堆内存&#xff09; 1. 说明 1.JVM的对象并不总是分配在堆上。2.堆是JVM用于存储对象实例的主要内存区域&#xff0c;存在一些特殊情况&#xff0c;对象…...

编程日记 2024/10/31 6:28:02

@AutoWired和 @Resource原理深度分析！

嗨&#xff0c;你好呀&#xff0c;我是猿java Autowired和Resource是 Java程序员经常用来实现依赖注入的两个注解&#xff0c;这篇文章&#xff0c;我们将详细分析这两个注解的工作原理、使用示例和它们之间的对比。 依赖注入概述 依赖注入是一种常见的设计模式&#xff0c;…...

编程日记 2024/10/31 6:24:59

C++设计模式创建型模式———原型模式

文章目录 一、引言二、原型模式三、总结 一、引言 与工厂模式相同&#xff0c;原型模式&#xff08;Prototype&#xff09;也是创建型模式。原型模式通过一个对象&#xff08;原型对象&#xff09;克隆出多个一模一样的对象。实际上&#xff0c;该模式与其说是一种设计模式&am…...

编程日记 2024/10/31 6:23:57

重学SpringBoot3-Spring WebFlux之SSE服务器发送事件

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞&#x1f44d;收藏⭐评论✍ Spring WebFlux之SSE服务器发送事件 1. 什么是 SSE&#xff1f;2. Spring Boot 3 响应式编程与 SSE为什么选择响应式编程实现 SSE&#xff1f; 3. 实现 SSE 的基本步骤3.…...

编程日记 2024/10/31 6:21:55

YOLO即插即用模块---AgentAttention

Agent Attention: On the Integration of Softmax and Linear Attention 论文地址&#xff1a;https://arxiv.org/pdf/2312.08874 问题&#xff1a; 普遍使用的 Softmax 注意力机制在视觉 Transformer 模型中计算复杂度过高&#xff0c;限制了其在各种场景中的应用。 方法&a…...

编程日记 2024/10/31 6:20:54

探索开源语音识别的未来：高效利用先进的自动语音识别技术20241030

&#x1f680; 探索开源语音识别的未来&#xff1a;高效利用自动语音识别技术 &#x1f31f; 引言 在数字化时代&#xff0c;语音识别技术正在引领人机交互的新潮流&#xff0c;为各行业带来了颠覆性的改变。开源的自动语音识别&#xff08;ASR&#xff09;系统&#xff0c;如…...

编程日记 2024/10/31 6:18:51

学习路之TP6--workman安装

一、安装 首先通过 composer 安装 composer require topthink/think-worker 报错&#xff1a; 分析&#xff1a;最新版本需要TP8&#xff0c;或装低版本的 composer require topthink/think-worker:^3.*安装后&#xff0c; 增加目录 vendor\workerman vendor\topthink\think-w…...

编程日记 2024/10/31 6:17:47

.NET内网实战：通过白名单文件反序列化漏洞绕过UAC

01阅读须知 此文所节选自小报童《.NET 内网实战攻防》专栏&#xff0c;主要内容有.NET在各个内网渗透阶段与Windows系统交互的方式和技巧&#xff0c;对内网和后渗透感兴趣的朋友们可以订阅该电子报刊&#xff0c;解锁更多的报刊内容。 02基本介绍 03原理分析 在渗透测试和红…...

编程日记 2024/10/31 6:15:44

AI Agents - 自动化项目：计划、评估和分配

Agents: Role 角色Goal 目标Backstory 背景故事 Tasks&#xff1a; Description 描述Expected Output 期望输出Agent 代理 Automated Project: Planning, Estimation, and Allocation Initial Imports 1.本地文件helper.py # Add your utilities or helper functions to…...

编程日记 2024/10/31 6:14:43

Git的.gitignore文件

一、各语言对应的.gitignore模板文件 项目地址&#xff1a;https://github.com/github/gitignore 二、.gitignore文件不生效 .gitignore文件只是ignore没有被追踪的文件&#xff0c;已被追踪的文件&#xff0c;要先删除缓存文件。 # 单个文件 git rm --cached file/path/to…...

编程日记 2024/10/31 6:13:42

网站安全，WAF网站保护暴力破解

雷池的核心功能 通过过滤和监控 Web 应用与互联网之间的 HTTP 流量&#xff0c;功能包括&#xff1a; SQL 注入保护&#xff1a;防止恶意 SQL 代码的注入&#xff0c;保护网站数据安全。跨站脚本攻击 (XSS)&#xff1a;阻止攻击者在用户浏览器中执行恶意脚本。暴力破解防护&a…...

编程日记 2024/10/31 6:12:40

深度学习：梯度下降算法简介

梯度下降算法简介 梯度下降算法 我们思考这样一个问题&#xff0c;现在需要用一条直线来回归拟合这三个点&#xff0c;直线的方程是 y w ^ x b y \hat{w}x b yw^xb&#xff0c;我们假设斜率 w ^ \hat{w} w^是已知的&#xff0c;现在想要找到一个最好的截距 b b b。 一条…...

编程日记 2024/10/31 6:11:38

SparkSQL整合Hive后，如何启动hiveserver2服务

当spark sql与hive整合后&#xff0c;我们就无法启动hiveserver2的服务了&#xff0c;每次都要先启动hive的元数据服务&#xff08;nohup hive --service metastore&#xff09;才能启动hive,之前的beeline命令也用不了&#xff0c;hiveserver2的无法启动&#xff0c;这也导致我…...

编程日记 2024/10/31 6:09:36

前端路由如何从0开始配置？vue-router 的使用

在 Web 开发中&#xff0c;路由是指根据 URL 的不同部分将请求分发到不同的处理函数或页面的过程。路由是单页应用&#xff08;SPA, Single Page Application&#xff09;和服务器端渲染&#xff08;SSR, Server-Side Rendering&#xff09;应用中的一个重要概念。 在开发中如何…...

编程日记 2024/10/31 6:08:34

Java中的运算符【与C语言的区别】

目录 1. 算术运算符 1.0 赋值运算符&#xff1a; 1.1 四则运算符&#xff1a; - * / % 【取余与C有点不同】 1.2 增量运算符&#xff1a; - * / % * 【右侧运算结果会自动转换类型】 1.3 自增、自减&#xff1a;、-- 2. 关系运算符 3. 逻辑运算符 3.1 短路求值 3.2 【…...

编程日记 2024/10/31 6:06:32

二、基础语法

入门了解 注释 **作用&#xff1a;**在代码中加一些注释和说明&#xff0c;方便自己或者其他程序员阅读代码 两种格式&#xff1a; 单行注释&#xff1a;// 描述信息 通常放在一行代码的上方&#xff0c;或者一条语句的末尾&#xff0c;对该行代码进行说明 多行注释&#x…...

编程日记 2024/10/31 6:03:29

DB-GPT系列（一）：DB-GPT能帮你做什么？

DB-GPT是一个开源的AI原生数据应用开发框架(AI Native Data App Development framework with AWEL and Agents)&#xff0c;围绕大模型提供灵活、可拓展的AI原生数据应用管理与开发能力&#xff0c;可以帮助企业快速构建、部署智能AI数据应用&#xff0c;通过智能数据分析、洞察…...

编程日记 2024/10/31 6:00:26

【Python各个击破】numpy

简介 NumPy是一个开源的Python库&#xff0c;它提供了一个强大的N维数组对象和许多用于操作这些数组的函数。它是大多数Python科学计算的基础&#xff0c;包括Pandas、SciPy和scikit-learn等库都建立在NumPy之上。 安装 !pip install numpy导入 import numpy as np用法 # …...

编程日记 2024/10/31 5:59:24

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

编程新知 2025/11/30 15:33:36

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

编程新知 2026/2/8 4:37:19

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

编程新知 2026/2/8 20:43:05

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2026/2/8 1:14:13

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/11/2 5:30:15

Android第十三次面试总结（四大 组件基础）

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程新知 2025/10/15 15:07:34

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

编程新知 2026/1/29 3:55:23

怎么让Comfyui导出的图像不包含工作流信息，

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

编程新知 2025/8/13 15:12:54

C++实现分布式网络通信框架RPC(2)——rpc发布端

有了上篇文章的项目的基本知识的了解&#xff0c;现在我们就开始构建项目。 目录 一、构建工程目录 二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现 三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...

编程新知 2026/2/5 18:18:58

恶补电源：1.电桥

一、元器件的选择 搜索并选择电桥&#xff0c;再multisim中选择FWB&#xff0c;就有各种型号的电桥: 电桥是用来干嘛的呢&#xff1f; 它是一个由四个二极管搭成的“桥梁”形状的电路&#xff0c;用来把交流电&#xff08;AC&#xff09;变成直流电&#xff08;DC&#xff09;。…...

编程新知 2026/1/29 8:28:23