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

HTML知识点详解教程

news 2026/5/21 1:45:03

文章目录

  • 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

实战避坑：在CentOS 8上部署RuoYi-Radius时，FreeRADIUS REST模块配置与端口冲突的那些事儿

实战避坑&#xff1a;CentOS 8集成RuoYi-Radius与FreeRADIUS的REST模块深度配置指南 当企业级无线认证系统需要与现有用户管理系统无缝对接时&#xff0c;RuoYi-Radius与FreeRADIUS的REST模块组合成为许多技术团队的选择。这种架构既能利用FreeRADIUS的标准协议支持&#xff0c…...

编程新知 2026/5/20 23:59:58

小白程序员必看：四步轻松构建你的第一个AI编码Agent，收藏学习！

本文详细介绍了如何通过四个步骤构建一个基础的AI编码Agent&#xff0c;包括接入大型语言模型&#xff08;LLM&#xff09;、添加实用工具&#xff08;如读取、写入和执行文件&#xff09;、构建Agent循环以及实现对话循环。文章以Python语言为例&#xff0c;逐步引导读者完成整…...

编程新知 2026/5/20 23:32:00

别再傻傻分不清了！用大白话+真实案例讲透OAuth 2.0和OIDC到底差在哪

别再傻傻分不清了&#xff01;用大白话真实案例讲透OAuth 2.0和OIDC到底差在哪 想象一下这样的场景&#xff1a;你正在开发一个美食分享App&#xff0c;想让用户能直接用微信登录。接入微信开放平台时&#xff0c;技术文档里突然冒出OAuth 2.0和OIDC两个术语&#xff0c;产品经…...

编程新知 2026/5/20 23:01:20

书评质量断崖式提升的关键一步，Perplexity辅助写作的3层认知跃迁与2个致命误用陷阱

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;书评质量断崖式提升的关键一步&#xff0c;Perplexity辅助写作的3层认知跃迁与2个致命误用陷阱 Perplexity 不是搜索引擎的替代品&#xff0c;而是面向深度思考的“认知协作者”。当用于技术书评写作时&#x…...

编程新知 2026/5/20 22:59:18

米尔RK3562开发板深度评测：工业边缘AI网关的性价比之选

1. 项目概述&#xff1a;为什么关注米尔RK3562开发板&#xff1f;最近在给一个工业边缘计算项目选型&#xff0c;核心需求是在一个环境相对严苛的车间里&#xff0c;部署一个集成了视觉识别、多路传感器数据采集和本地轻量级推理的网关设备。性能不能太弱&#xff0c;否则处理不…...

编程新知 2026/5/20 22:17:00

CTF命令执行绕过：从空格过滤到cat被禁，我的实战踩坑与绕过思路全记录

CTF命令执行绕过&#xff1a;从空格过滤到cat被禁&#xff0c;我的实战踩坑与绕过思路全记录 第一次参加CTF比赛时&#xff0c;面对命令执行题目总是手足无措。直到那次遇到著名的"Ping Ping Ping"挑战&#xff0c;才真正体会到什么叫"绝处逢生"。本文将还…...

编程新知 2026/5/20 20:52:29

Intel 14代酷睿接口更迭：技术推演与用户决策指南

1. 项目概述&#xff1a;一次关于“接口更迭”的深度技术推演最近&#xff0c;关于下一代酷睿处理器的传闻又开始在圈内流传&#xff0c;一个核心的焦点再次被推上风口浪尖&#xff1a;Intel 14代酷睿&#xff08;Raptor Lake Refresh&#xff09;可能又要更换CPU插槽接口了。这…...

编程新知 2026/5/20 19:02:52

【广东工业大学主办，阿布扎比大学支持举办 | JPCS 出版｜EI，Scopus稳定双检索 | 连续多年EI稳定见刊检索】 第十届能源、环境与材料科学国际学术会议(EEMS 2026）

第十届能源、环境与材料科学国际学术会议(EEMS 2026&#xff09; 2026 10th International Conference on Energy, Environment and Materials Science 大会时间&#xff1a;2026年7月10-12日 大会地点&#xff1a;广东广州 会议官网&#xff1a;​​​​​​www.ic-eems…...

编程新知 2026/5/20 18:56:28

从游戏画面Bug到图形学原理：一次深度测试失败的排查与透视矫正插值的深度理解

从游戏画面Bug到图形学原理&#xff1a;深度测试失败的排查与透视矫正插值解析 深夜调试游戏引擎时&#xff0c;屏幕上的三角形边缘突然出现诡异的闪烁——这种被称为"深度冲突"的现象&#xff0c;往往让开发者陷入漫长的调试循环。本文将以一个实际开发中的深度测试…...

编程新知 2026/5/20 15:40:35

深入解析Keil MDK编译流程：从C代码到单片机运行的完整过程

1. 项目概述&#xff1a;从源码到芯片运行的旅程作为一名在嵌入式领域摸爬滚打了十多年的老工程师&#xff0c;我经常被问到这样一个问题&#xff1a;“我写的C代码&#xff0c;点一下MDK的‘Build’按钮&#xff0c;怎么就变成能在单片机里跑的程序了&#xff1f;” 这背后&am…...

编程新知 2026/5/20 15:18:15