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

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

news 2025/10/14 7:06:35

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. 总结与练习题
  - - 总结
    - 练习题

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

1. 什么是 HTML？

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

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

HTML 的核心作用

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

2. HTML 基本结构

一个完整的 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>

怎么生成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 是构建网页的基础，了解其语法和结构是进入前端开发的重要第一步。

练习题

使用 HTML 创建一个包含标题、段落、链接和图片的网页。
使用有序列表和无序列表，展示你最喜欢的书籍和电影。

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

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 图…...

编程日记 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. 栈上分配（逃逸分析和标量替换）4. 方法区分配5. 直接内存（非堆内存） 1. 说明 1.JVM的对象并不总是分配在堆上。2.堆是JVM用于存储对象实例的主要内存区域，存在一些特殊情况，对象…...

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

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

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

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

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

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

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

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

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

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

YOLO即插即用模块---AgentAttention

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

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

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

🚀 探索开源语音识别的未来：高效利用自动语音识别技术 🌟 引言在数字化时代，语音识别技术正在引领人机交互的新潮流，为各行业带来了颠覆性的改变。开源的自动语音识别（ASR）系统，如…...

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

学习路之TP6--workman安装

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

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

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

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

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

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

Agents: Role 角色Goal 目标Backstory 背景故事 Tasks： 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模板文件项目地址：https://github.com/github/gitignore 二、.gitignore文件不生效 .gitignore文件只是ignore没有被追踪的文件，已被追踪的文件，要先删除缓存文件。 # 单个文件 git rm --cached file/path/to…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、基础语法

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

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

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

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

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

【Python各个击破】numpy

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

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

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。相对于RMAN恢复需要很长时间， 数据库闪回只需要几分钟。 2.技术实现数据库设置 2个db_recovery参数创建guarantee闪回点，不需要开启数据库闪回。…...

编程新知 2025/7/30 7:20:17

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话： “利润不是赚出来的，是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业，很多企业看着销售不错，账上却没钱、利润也不见了，一翻库存才发现： 一堆卖不动的旧货…...

编程新知 2025/10/11 8:23:03

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。一、源型模式的定义原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点：避免重复初…...

编程新知 2025/10/12 8:07:21

【2025年】解决Burpsuite抓不到https包的问题

环境：windows11 burpsuite:2025.5 在抓取https网站时，burpsuite抓取不到https数据包，只显示： 解决该问题只需如下三个步骤： 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2025/10/10 5:08:37

Java 加密常用的各种算法及其选择

在数字化时代，数据安全至关重要，Java 作为广泛应用的编程语言，提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景，有助于开发者在不同的业务需求中做出正确的选择。一、对称加密算法…...

编程新知 2025/9/26 22:56:59

蓝桥杯3498 01串的熵

问题描述对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798， 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2025/9/23 15:59:04

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到跨域请求接口的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。什么是代理（proxy）？代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/9/13 13:10:12

Web 架构之 CDN 加速原理与落地实践

文章目录一、思维导图二、正文内容（一）CDN 基础概念1. 定义2. 组成部分 （二）CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 （三）CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

编程新知 2025/9/13 16:17:01

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/10/5 21:23:07

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件本期内容是为了更好的为大家解释木马（服务器方面的）的原理，连接，以及各种木马及连接工具的分享文件木马：https://w…...

编程新知 2025/9/28 3:34:31

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. 总结与练习题

总结

练习题

相关文章：

2.2 `<html>` 标签

2.3 `<head>` 标签

2.4 `<body>` 标签