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

HTML知识点详解教程

news 2025/7/9 9:27:34

文章目录

  • 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

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

编程新知 2025/7/8 13:01:28

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/7/8 21:38:11

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2025/7/6 1:19:36

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

编程新知 2025/7/5 1:17:25

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

编程新知 2025/7/8 7:17:15

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

编程新知 2025/6/26 3:44:44

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

编程新知 2025/7/9 6:12:31

企业如何增强终端安全？

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2025/7/7 21:10:42

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

编程新知 2025/7/9 0:19:29

（一）单例模式

一、前言 单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

编程新知 2025/7/8 22:46:00