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

HTML知识点详解教程

news 2026/4/2 12:23:24

文章目录

  • 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

AI编程助手Cursor Pro功能扩展指南：开源解决方案实现开发效率提升

AI编程助手Cursor Pro功能扩展指南&#xff1a;开源解决方案实现开发效率提升 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reach…...

编程新知 2026/4/2 11:04:25

CODESYS组件开发进阶：如何通过修改.m4文件调用SysFile等系统函数（附实例代码）

CODESYS组件开发进阶&#xff1a;深入解析.m4文件配置与系统函数调用实战 在工业自动化领域&#xff0c;CODESYS作为主流的PLC开发平台&#xff0c;其组件化开发能力为工程师提供了极大的灵活性。但当你需要突破基础功能限制&#xff0c;实现文件操作、系统管理等高级功能时&am…...

编程新知 2026/4/2 10:30:06

5分钟掌握YetAnotherKeyDisplayer：专业按键可视化工具终极指南

5分钟掌握YetAnotherKeyDisplayer&#xff1a;专业按键可视化工具终极指南 【免费下载链接】YetAnotherKeyDisplayer The application for displaying pressed keys of the keyboard 项目地址: https://gitcode.com/gh_mirrors/ye/YetAnotherKeyDisplayer YetAnotherKey…...

编程新知 2026/4/2 10:15:57

OpenClaw Docker Compose 部署完整指南

&#x1f4cb; 目录 前置要求快速部署&#xff08;推荐&#xff09;手动部署步骤配置通讯渠道健康检查高级配置常用管理命令故障排查安全加固持久化说明 一、前置要求 必需软件 Docker Desktop&#xff08;Windows/macOS&#xff09;或 Docker Engine Docker Compose v2&am…...

编程新知 2026/4/2 8:22:03

Zotero GPT插件全攻略：打造智能化文献管理工作流

Zotero GPT插件全攻略&#xff1a;打造智能化文献管理工作流 【免费下载链接】zotero-gpt GPT Meet Zotero. 项目地址: https://gitcode.com/gh_mirrors/zo/zotero-gpt 学术研究中&#xff0c;文献管理往往耗费研究者大量时间与精力。Zotero GPT插件将人工智能技术与文献…...

编程新知 2026/4/2 8:07:51

CLAP模型量化压缩实战：8位整数量化指南

CLAP模型量化压缩实战&#xff1a;8位整数量化指南 1. 引言 如果你正在为嵌入式设备部署音频AI模型而苦恼&#xff0c;那么CLAP模型的量化压缩可能就是你要找的解决方案。CLAP&#xff08;对比语言-音频预训练&#xff09;模型虽然功能强大&#xff0c;但其庞大的参数量让在资…...

编程新知 2026/4/2 6:56:49

Pixel Epic · Wisdom Terminal 处理403 Forbidden等HTTP错误：智能诊断与修复建议

Pixel Epic Wisdom Terminal 处理403 Forbidden等HTTP错误&#xff1a;智能诊断与修复建议 1. 引言&#xff1a;HTTP错误的困扰与解决方案 每个Web开发者和运维人员都遇到过这样的场景&#xff1a;用户反馈页面打不开&#xff0c;你打开开发者工具一看&#xff0c;赫然显示4…...

编程新知 2026/4/2 6:08:23

Leather Dress Collection实战案例：用Leather TankTop Pants生成运动风皮革穿搭图集

Leather Dress Collection实战案例&#xff1a;用Leather TankTop Pants生成运动风皮革穿搭图集 1. 引言&#xff1a;当皮革遇上运动风 想象一下&#xff0c;你正在为一个运动潮牌设计新一季的视觉素材。客户想要一种既酷炫又充满活力的感觉——皮革的质感&#xff0c;运动的…...

编程新知 2026/4/2 4:45:33

SSM+Vue医院食堂订餐系统源码+论文

代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339; 分享万套开题报告任务书答辩PPT模板 作者完整代码目录供你选择&#xff1a; 《SpringBoot网站项目》1800套 《SSM网站项目》1500套 《小程序项目》1600套 《APP项目》1500套 《Python网站项目》…...

编程新知 2026/4/2 4:15:14

倒反天罡了！Cursor自研模型反超Opus 4.6！价格脚踝斩，氛围编程沸腾了

因公众号更改推送规则&#xff0c;请点“在看”并加“星标”第一时间获取精彩技术分享点击关注#互联网架构师公众号&#xff0c;领取架构师全套资料 都在这里0、2T架构师学习资料干货分上一篇&#xff1a;2T架构师学习资料干货分享大家好&#xff0c;我是互联网架构师&#xff…...

编程新知 2026/4/2 3:59:06