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

HTML知识点详解教程

news 2026/1/1 19:08:25

文章目录

  • HTML知识点详解教程
    • 1. HTML基本语法
    • 2. HTML标签详解
      • 2.1 分区标签 `<div>`
      • 2.2 标题标签 `<h1>` ~ `<h6>`
      • 2.3 段落标签 `<p>`
      • 2.4 图片标签 `<img>`
      • 2.5 列表标签 `<ul>` 和 `<ol>`
        • 无序列表 `<ul>`
        • 有序列表 `<ol>`
      • 2.6 超链接标签 `<a>`
      • 2.7 表单标签 `<form>`
      • 2.8 表格标签 `<table>`
      • 2.9 框架标签 `<iframe>`
    • 案例实践：个人简介网页

HTML知识点详解教程

1. HTML基本语法

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>欢迎学习 HTML</h1><p>这是一个简单的 HTML 文档示例。</p>
</body>
</html>

解析：

  1. <!DOCTYPE html>：声明 HTML5 文档类型。
  2. <html>：HTML 文档的根标签。
  3. <head>：包含元信息（如标题、字符集）。
  4. <body>：网页的主要内容部分。

2. HTML标签详解

以下列举图片中涉及的所有 HTML 标签，并附详细代码示例。

2.1 分区标签 <div>

<div> 是常用的分区标签，用于分隔内容块。

html复制代码
<div style="background-color: lightblue; padding: 20px;"><h2>这是一个分区</h2><p>分区中的段落文字。</p>
</div>

2.2 标题标签 <h1> ~ <h6>

HTML 提供了 6 级标题标签，表示从大到小的标题层级。

html复制代码
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2.3 段落标签 <p>

段落标签用于表示正文内容。

html复制代码
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

2.4 图片标签 <img>

用于在网页中插入图片。

html复制代码
<img src="https://via.placeholder.com/150" alt="示例图片" width="150" height="150">

属性解析：

  • src：图片的路径。
  • alt：图片的替代文本（用于无障碍访问）。
  • width 和 height：定义图片的宽高。

2.5 列表标签 <ul> 和 <ol>

无序列表 <ul>
html复制代码
<ul><li>HTML</li><li>CSS</li><li>JavaScript</li>
</ul>
有序列表 <ol>
html复制代码
<ol><li>第一步</li><li>第二步</li><li>第三步</li>
</ol>

2.6 超链接标签 <a>

用于创建链接。

html复制代码
<a href="https://www.csdn.net" target="_blank">访问CSDN</a>

属性解析：

  • href：目标链接。
  • target="_blank"：在新窗口中打开链接。

2.7 表单标签 <form>

表单用于用户输入数据并提交给服务器。

html复制代码
<form action="/submit" method="post"><label for="name">姓名：</label><input type="text" id="name" name="name"><br><label for="email">邮箱：</label><input type="email" id="email" name="email"><br><input type="submit" value="提交">
</form>

2.8 表格标签 <table>

用于展示结构化数据。

html复制代码
<table border="1"><tr><th>姓名</th><th>年龄</th><th>职业</th></tr><tr><td>张三</td><td>25</td><td>程序员</td></tr><tr><td>李四</td><td>30</td><td>设计师</td></tr>
</table>

属性解析：

  • border：表格边框宽度。

2.9 框架标签 <iframe>

用于嵌套其他网页。

html复制代码
<iframe src="https://www.example.com" width="600" height="400"></iframe>

属性解析：

  • src：嵌套网页的地址。
  • width 和 height：定义框架的宽高。

案例实践：个人简介网页

综合上述知识点，构建一个简单的个人简介页面：

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><header><h1>个人简介</h1></header><main><div style="background-color: #f0f0f0; padding: 20px;"><h2>关于我</h2><p>大家好，我是张三，一名热爱编程的前端开发工程师。</p></div><section><h2>兴趣爱好</h2><ul><li>编程</li><li>阅读</li><li>旅行</li></ul></section><section><h2>联系我</h2><p>邮箱：<a href="mailto:zhangsan@example.com">zhangsan@example.com</a></p></section></main><footer><p>版权所有 © 2024 张三</p></footer>
</body>
</html>

希望这份教程对您有所帮助！如果喜欢，欢迎点赞、收藏并分享！

相关文章：

HTML知识点详解教程

文章目录 HTML知识点详解教程1. HTML基本语法2. HTML标签详解2.1 分区标签 <div>2.2 标题标签 <h1> ~ <h6>2.3 段落标签 <p>2.4 图片标签 <img>2.5 列表标签 <ul> 和 <ol>无序列表 <ul>有序列表 <ol> 2.6 超链接标签 &l…...

编程日记 2024/12/17 8:49:33

[数据结构#1] 并查集 | FindRoot | Union | 优化 | 应用

目录 1. 并查集原理 问题背景 名称与编号映射 数据结构设计 2. 并查集基本操作 (1) 初始化 (2) 查询根节点 (FindRoot) (3) 合并集合 (Union) (4) 集合操作总结 并查集优化 (1) 路径压缩 (2) 按秩合并 3. 并查集的应用 (1) 统计省份数量 (2) 判断等式方程是否成…...

编程日记 2024/12/17 8:47:29

科研绘图系列：R语言绘制网络图和密度分布图（network density plot）

禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录 介绍加载R包数据下载图1图2图3图4图5图6图7图8系统信息参考介绍 R语言绘制网络图和密度分布图（network & density plot） 加载R包 library(magrittr) library(dplyr) library(…...

编程日记 2024/12/17 8:44:26

Linux中输入和输出基本过程

1.文件内核级缓冲区 前面在如何理解Linux一切皆文件的特点中提到为了保证在Linux中所有进程访问文件时的方式趋近相 同&#xff0c;在f ile 结构体中存在一个 files_operations 结构体指针&#xff0c;对应的结构体保存所有文件操作的函 数指针&#xff08;这个结构体也被称为…...

编程日记 2024/12/17 8:41:23

使用 acme.sh 签发和自动续期 ssl https 证书

acme.sh 是一个热度非常高的签发和自动续期 https 证书的工具&#xff0c;虽然官网上提供了充分的操作说明&#xff0c;但是不够简洁&#xff0c;本文以在 nginx 中签发和配置http 为例&#xff0c;列出必要的几个简单步骤。 安装 因为网络原因&#xff0c;github 大部分人是…...

编程日记 2024/12/17 8:35:15

spring重点面试题总结

bean的生命周期 在 Spring 中&#xff0c;BeanDefinition、Bean 实例化、依赖注入、Aware 接口的处理、以及 BeanPostProcessor 的前置和后置处理等&#xff0c;都是 Spring 容器管理 Bean 生命周期的关键部分。下面我将详细解释这些过程。 1. 通过 BeanDefinition 获取 Bean…...

编程日记 2024/12/17 8:34:11

新的一章：codegeex

三层结构的优点&#xff1a;可扩展性&#xff0c;可复用性...

编程日记 2024/12/17 8:32:09

游戏引擎学习第50天

仓库: https://gitee.com/mrxiao_com/2d_game Minkowski 这个算法有点懵逼 回顾 基本上&#xff0c;现在我们所处的阶段是&#xff0c;回顾最初的代码&#xff0c;我们正在讨论我们希望在引擎中实现的所有功能。我们正在做的版本是初步的、粗略的版本&#xff0c;涵盖我们认…...

编程日记 2024/12/17 8:29:05

快速理解类的加载过程

当程序主动使用某个类时&#xff0c;如果该类还未加载到内存中&#xff0c;则系统会通过如下三个步骤来对该类进行初始化&#xff1a; 1.加载&#xff1a;将class文件字节码内容加载到内存中&#xff0c;并将这些静态数据转换成方法区的运行时数据结构&#xff0c;然后生成一个…...

编程日记 2024/12/17 8:25:02

医院跌倒检测识别 使用YOLO,COCO ,VOC格式对4806张原始图片进行标注，可识别病人跌倒，病人的危险行为，病床等场景，预测准确率可达96.7％

医院跌倒检测识别 使用YOLO,COCO ,VOC格式对4806张原始图片进行标注&#xff0c;可识别病人跌倒&#xff0c;病人的危险行为&#xff0c;病床等场景&#xff0c;预测准确率可达96.7&#xff05; 数据集分割 4806总图像数 训练组70&#xff05; 3364图片 有效集20&#…...

编程日记 2024/12/17 8:24:00

[Unity Shader] 【游戏开发】【图形渲染】Unity Shader的种类2-顶点/片元着色器与固定函数着色器的选择与应用

Unity 提供了不同种类的 Shader，每种 Shader 有其独特的优势和适用场景。在所有类型的 Shader 中，顶点/片元着色器（Vertex/Fragment Shader）与固定函数着色器（Fixed Function Shader）是两种重要的着色器类型。尽管它们具有不同的编写方式和用途，理解其差异与应用场景，对…...

编程日记 2024/12/17 8:23:00

浏览器端的 js 包括哪几个部分

一、核心语言部分 1. 变量与数据类型 变量用于存储数据&#xff0c;在 JavaScript 中有多种数据类型&#xff0c;如基本数据类型&#xff08;字符串、数字、布尔值、undefined、null&#xff09;和引用数据类型&#xff08;对象、数组、函数&#xff09;。 let name "…...

编程日记 2024/12/17 8:21:59

GoogLeNet网络：深度学习领域的创新之作

目录 ​编辑 引言 GoogLeNet的核心创新&#xff1a;Inception模块 Inception模块的工作原理 1x1卷积&#xff1a;降维与减少计算量 1x1卷积的优势 深度分离卷积&#xff1a;计算效率的提升 深度分离卷积的实现 全局平均池化&#xff1a;简化网络结构 全局平均池化的作…...

编程日记 2024/12/17 8:17:56

深入C语言文件操作：从库函数到系统调用

引言 文件操作是编程中不可或缺的一部分&#xff0c;尤其在C语言中&#xff0c;文件操作不仅是处理数据的基本手段&#xff0c;也是连接程序与外部世界的重要桥梁。C语言提供了丰富的库函数来处理文件&#xff0c;如 fopen、fclose、fread、fwrite 等。然而&#xff0c;这些库…...

编程日记 2024/12/17 8:12:50

Java序列化

Java序列化 简单来说&#xff1a; 序列化是将对象的状态信息转换为可以存储或传输的形式&#xff08;如字节序列&#xff09;的过程。在 Java 中&#xff0c;通过序列化可以把一个对象保存到文件、通过网络传输到其他地方或者存储到数据库等。最直接的原因就是某些场景下需要…...

编程日记 2024/12/17 8:11:49

基坑表面位移沉降倾斜自动化监测 非接触式一体化解决机器视觉

基于变焦视觉位移监测仪的基坑自动化监测新方案是一种集成了光学、机械、电子、边缘计算、AI识别以及云平台软件等技术的自动化系统。该方案利用变焦机器视觉原理&#xff0c;结合特殊波段成像识别技术和无源靶标&#xff0c;实现了非接触式大空间、多断面、多测点的高精度水平…...

编程日记 2024/12/17 8:05:42

提升效率：精通Windows命令行的艺术

文章目录 引言1. 基本目录操作命令dir&#xff1a;列出目录内容cd&#xff1a;更改目录mkdir 和 rmdir&#xff1a;创建和删除目录 2. 文件操作命令copy&#xff1a;复制文件或目录move&#xff1a;移动或重命名文件/目录del&#xff1a;删除文件 3. 文件查看命令type&#xff…...

编程日记 2024/12/17 8:03:41

ESP32-S3-devKitC-1 点亮板上的WS2812 RGB LED

ESP32-S3-devKitC-1 板上自带了一个RGB LED&#xff0c;型号为 WS2812。 RGB LED 在板上的位置如下图所示。 为了点亮这个WS2812&#xff0c;需要确定这颗RGB LED连接到哪个GPIO上了。 下面是确定GPIO管脚的过程&#xff1a; 1、根据原理图 2、根据PCB布局图&#xff1a; 程…...

编程日记 2024/12/17 7:58:36

python调用matlab函数（内置 + 自定义） —— 安装matlab.engine

文章目录 一、简介二、安装matlab.engine2.1、基于 CMD 安装2.2、基于 MATLAB 安装&#xff08;不建议&#xff09; 三、python调用matlab函数&#xff08;内置 自定义&#xff09; 一、简介 matlab.engine&#xff08;MATLAB Engine API for Python&#xff09;&#xff1a;…...

编程日记 2024/12/17 7:56:34

CAD c# 生成略缩图预览

代码如下&#xff1a; using (Transaction tr currentdb.TransactionManager.StartTransaction()){//当前数据库开启事务using (Database tempdb new Database(false, true)) //创建临时数据库(两个参数&#xff1a;是否创建符号表&#xff0c;不与当前文档关联){try{Bitmap …...

编程日记 2024/12/17 7:54:32

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

编程新知 2025/9/14 19:44:52

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

编程新知 2025/12/31 8:38:23

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2025/12/30 22:13:49

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/8/27 0:58:09

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

编程新知 2025/11/17 21:48:26

云原生玩法三问：构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

编程新知 2025/12/31 12:58:13

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2025/10/31 23:08:41

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

编程新知 2025/12/31 6:13:53

LLMs 系列实操科普（1）

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

编程新知 2025/12/31 21:11:28

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

编程新知 2025/12/31 22:39:58