30分钟学会HTML
HTML 基本语法
HTML（HyperText Markup Language）是构成网页内容的基础。它使用一系列的标签来描述网页的结构，包括文本、图片、链接等元素。浏览器会解析这些标签并渲染成我们看到的网页。
在线体验一下 CodePen (在线 HTML 编辑器)。
千万不要被「超文本」、「标记语言」吓到，HTML 的语法非常直观，常用的标签结构并不复杂，用于构建基础网页已经足够，稍微了解一下就能上手。
就是这些基本的标签结构，却能让人优雅地组织你的网页内容，专注于信息的呈现而不是纠结于如何显示，达到“心中有页，落笔成型”的境界。
HTML 文档结构
每个 HTML 文档都需要一个基本的结构，声明文档类型，并包含 <html>、<head> 和 <body> 等核心标签。
| HTML 语法 | 作用 | 示例 |
|---|---|---|
<!DOCTYPE html> | 声明文档类型为 HTML5 | |
<html></html> | HTML 文档的根元素 | |
<head></head> | 包含文档的元数据，如标题、字符编码等 | |
<title></title> | 定义文档的标题，显示在浏览器标签上 | <title>我的网页标题</title> |
<meta charset="UTF-8"> | 定义字符编码为 UTF-8，支持多种字符集 | |
<body></body> | 包含网页可见内容的主体部分 | |
<h1></h1> 到 <h6></h6> | 定义不同级别的标题 | <h1>主标题</h1>, <h2>副标题</h2> |
<p></p> | 定义段落 | <p>这是一个段落。</p> |
可选语法 (实际上是不同的 HTML 版本和doctype)
虽然 <!DOCTYPE html> 是 HTML5 的标准声明，但以前的 HTML 版本有不同的doctype声明方式。现在推荐使用 HTML5 的简洁声明。
最佳实践
一个标准的 HTML 文档应该以 <!DOCTYPE html> 开头，并包含 <html>、<head> 和 <body> 标签，确保语义清晰和结构完整。
| ✅ Do this | ❌ Don't do this |
|---|---|
使用 <!DOCTYPE html> 声明 HTML5 | 忘记添加 <!DOCTYPE html> 声明 |
包含 <head> 和 <body> 标签 | 缺少 <head> 或 <body> 标签 |
HTML 标题
HTML 提供了六级标题标签 <h1> 到 <h6>，用于表示不同级别的标题内容。
| HTML 语法 | 作用 | 预览效果 (描述性) |
|---|---|---|
<h1>一级标题</h1> | 定义一级标题 | 页面中最主要的标题 |
<h2>二级标题</h2> | 定义二级标题 | 次要的标题 |
<h3>三级标题</h3> | 定义三级标题 | 更细分的标题 |
<h4>四级标题</h4> | 定义四级标题 | |
<h5>五级标题</h5> | 定义五级标题 | |
<h6>六级标题</h6> | 定义六级标题 |
可选语法 (无直接对应，但强调语义化)
虽然可以使用 CSS 来改变标题的显示样式，但应该根据内容的逻辑结构来选择合适的标题标签，而不是仅仅为了改变字体大小而随意使用。
最佳实践
按照内容的逻辑重要性使用标题标签，<h1> 用于最重要的标题，依次递减。
| ✅ Do this | ❌ Don't do this |
|---|---|
使用 <h1> 作为页面主标题 | 为了加大字体而使用 <h1>，忽略语义化 |
按照标题层级嵌套使用 (h2 在 h1 下) | 跳跃使用标题标签 (例如 h1 后直接使用 h4) |
HTML 段落
<p> 标签用于定义段落，将文本内容组织成独立的段落块。
| HTML 语法 | 作用 | 预览效果 (描述性) |
|---|---|---|
<p>这是一个段落。</p> | 定义一个段落 | 文本会分段显示 |
<p>这是第一个句子。<br>这是第二个句子。</p> | 使用 <br> 换行 | 在段落内换行显示 |
段落（Paragraph）用法的最佳实践
使用 <p> 标签包裹文本内容，以清晰地划分段落。使用 <br> 标签在段落内进行换行。
| ✅ Do this | ❌ Don't do this |
|---|---|
使用 <p> 标签组织文本内容 | 依赖换行符或空格来分隔段落 |
在需要换行的地方使用 <br> | 为了视觉效果而滥用 <br> 标签 |
HTML 文本格式化
HTML 提供多种标签用于格式化文本，例如加粗、斜体等。
| HTML 语法 | 作用 | 预览效果 (描述性) |
|---|---|---|
<b>加粗文本</b> | 定义粗体文本 | 文本显示为粗体 |
<strong>重要文本</strong> | 定义重要文本 | 文本显示为粗体 (强调语义) |
<i>斜体文本</i> | 定义斜体文本 | 文本显示为斜体 |
<em>强调文本</em> | 定义强调文本 | 文本显示为斜体 (强调语义) |
<small>小号文本</small> | 定义小号文本 | 文本显示为较小字号 |
<mark>标记文本</mark> | 定义标记文本 | 文本背景高亮显示 |
<del>删除文本</del> | 定义删除文本 | 文本带有删除线 |
<ins>插入文本</ins> | 定义插入文本 | 文本带有下划线 |
<sub>下标文本</sub> | 定义下标文本 | 文本显示为下标 |
<sup>上标文本</sup> | 定义上标文本 | 文本显示为上标 |
文本格式化（Text Formatting）用法的最佳实践
根据语义选择合适的文本格式化标签。<strong> 和 <em> 更侧重于语义强调，而 <b> 和 <i> 则更多是视觉呈现。
| ✅ Do this | ❌ Don't do this |
|---|---|
使用 <strong> 标记重要的关键词或句子 | 仅为了加粗而使用 <b>，忽略语义化 |
使用 <em> 强调需要突出显示的文本 | 使用 <i> 代替 <em> 进行强调 |
HTML 列表
HTML 提供了有序列表、无序列表和描述列表三种类型的列表。
| HTML 语法 | 作用 | 预览效果 (描述性) |
|---|---|---|
<ul><li>项目 1</li><li>项目 2</li></ul> | 定义无序列表 | 生成带有项目符号的列表 |
<ol><li>项目 A</li><li>项目 B</li></ol> | 定义有序列表 | 生成带有数字编号的列表 |
<dl><dt>术语</dt><dd>描述</dd></dl> | 定义描述列表 | 生成带有术语和描述的列表 |
<li></li> | 定义列表项 | 包含在 <ul> 或 <ol> 中 |
<dt></dt> | 定义描述列表中的术语 | 包含在 <dl> 中 |
<dd></dd> | 定义描述列表中术语的描述 | 包含在 <dl> 中 |
列表（List）用法的最佳实践
根据信息的组织方式选择合适的列表类型。使用嵌套列表可以清晰地表示层级关系。
| ✅ Do this | ❌ Don't do this |
|---|---|
使用 <ul> 创建无需特定顺序的项目列表 | 使用段落和 <br> 标签模拟列表 |
使用 <ol> 创建需要排序的项目列表 | 混淆无序列表和有序列表的使用场景 |
使用 <dl> 创建术语及其解释的列表 | 在无序或有序列表中尝试模拟描述列表的效果 |
HTML 链接
<a> 标签用于创建超链接，将用户导向其他网页、文件或同一页面的不同位置。
| HTML 语法 | 作用 | 预览效果 (描述性) |
|---|---|---|
<a href="URL">链接文本</a> | 创建指向 URL 的链接 | "链接文本"显示为可点击的链接，跳转到 URL |
<a href="URL" target="_blank">链接文本</a> | 在新标签页打开链接 | 点击链接将在新的浏览器标签页中打开 |
<a href="mailto:邮箱地址">发送邮件</a> | 创建邮件链接 | 点击链接将打开用户的邮件客户端并填写收件人 |
<a href="#section">跳转到Section</a> | 创建内部链接 | 点击链接将滚动到页面中 ID 为 "section" 的元素 |
链接（Link）用法的最佳实践
为链接添加清晰的链接文本，并根据需要使用 target 属性来控制链接的打开方式。
| ✅ Do this | ❌ Don't do this |
|---|---|
| 使用描述性的链接文本 (例如 "了解更多") | 使用 "点击这里" 等模糊的链接文本 |
外部链接使用 target="_blank" 在新标签页打开 | 所有链接都强制在新标签页打开，影响用户体验 |
HTML 图片
<img> 标签用于在网页中嵌入图片。
| HTML 语法 | 作用 | 预览效果 (描述性) |
|---|---|---|
<img src="图片URL" alt="图片描述"> | 插入图片 | 在指定位置显示图片 |
<img src="图片URL" alt="图片描述" width="宽度" height="高度"> | 指定图片尺寸 | 按照指定的宽度和高度显示图片 |
图片（Image）用法的最佳实践
为 <img> 标签提供 src 属性指定图片路径，并使用 alt 属性提供图片描述，这对于可访问性和 SEO 非常重要。
| ✅ Do this | ❌ Don't do this |
|---|---|
为所有 <img> 标签添加 alt 属性 | 忽略 alt 属性，影响可访问性 |
使用有意义的 alt 文本描述图片内容 | 使用 "图片" 或空 alt 属性 |
| 尽量优化图片大小，提高网页加载速度 | 插入过大的图片，导致网页加载缓慢 |
HTML 代码
HTML 提供了 <code> 和 <pre> 标签用于在网页中显示代码。
| HTML 语法 | 作用 | 预览效果 (描述性) |
|---|---|---|
<code>行内代码</code> | 表示行内代码 | 代码以等宽字体显示在文本中 |
<pre>多行代码</pre> | 表示预格式化的文本 | 代码块以原始格式显示，保留空格和换行符 |
<pre><code>带语法的代码</code></pre> | 显示带语法的代码 | 通常与 JavaScript 库一起使用以进行语法高亮 |
代码（Code）用法的最佳实践
使用 <code> 标签包裹行内代码，使用 <pre> 标签包裹多行代码块。结合 JavaScript 库可以实现代码语法高亮。
| ✅ Do this | ❌ Don't do this |
|---|---|
使用 <code> 标签标记行内代码 | 直接在文本中输入代码，导致格式不易区分 |
使用 <pre> 标签显示多行代码 | 手动使用空格和换行符来模拟代码显示 |
| 考虑使用代码高亮库提升代码的可读性 | 在技术文档中直接粘贴未格式化的代码 |
HTML 语义化标签
HTML5 引入了一些语义化标签，用于更清晰地描述文档的结构和内容，提高可访问性和 SEO。
| HTML 语法 | 作用 | 示例 |
|---|---|---|
<article></article> | 表示文档、页面或应用程序中独立的、完整的、可以独立分发或复用的内容 | 一篇博客文章、一篇新闻报道 |
<aside></aside> | 表示与周围内容相关但不属于主要内容的辅助信息 | 侧边栏、广告、相关链接 |
<details></details> | 表示用户可以展开或收起的内容摘要 | 常见问题解答、产品详情 |
<figcaption></figcaption> | 表示 <figure> 元素的标题 | 图片的描述或标题 |
<figure></figure> | 表示独立的流内容（图像、图表等），通常带有标题 | 一张图片及其标题 |
<footer></footer> | 表示文档或节的页脚 | 版权信息、联系方式 |
<header></header> | 表示文档或节的头部 | 网站 Logo、导航菜单 |
<main></main> | 表示文档的主要内容 | 网页的主要信息区域 |
<nav></nav> | 表示页面的导航链接 | 网站的导航栏 |
<section></section> | 表示文档中的一个 тематический 分组内容 | 章节、主题分组 |
<summary></summary> | 为 <details> 元素定义一个可见的标题 | 常见问题解答的标题 |
<time></time> | 表示日期或时间 | 发布日期、活动时间 |
语义化标签（Semantic Tags）用法的最佳实践
使用语义化标签来组织 HTML 结构，提高代码的可读性和可维护性，并提升网页的可访问性。
| ✅ Do this | ❌ Don't do this |
|---|---|
使用 <article> 包裹独立的文章内容 | 使用 <div> 替代所有语义化标签 |
使用 <nav> 包裹导航链接 | 使用无序列表 <ul> 模拟导航，缺少语义信息 |
使用 <footer> 标记页脚信息 | 将所有内容都放在 <body> 中，缺乏结构 |
HTML 元素和属性
HTML 文档由一系列嵌套的元素组成。元素由开始标签、内容和结束标签构成。标签可以拥有属性，提供关于元素的额外信息。
| HTML 语法 | 作用 | 示例 |
|---|---|---|
<标签名>内容</标签名> | 定义一个 HTML 元素 | <p>这是一个段落。</p> |
<标签名 属性名="属性值">内容</标签名> | 带有属性的 HTML 元素 | <a href="https://example.com">链接</a> |
class="类名" | 定义元素的类名 (用于 CSS 样式) | <div class="container"></div> |
id="唯一ID" | 定义元素的唯一 ID (用于 CSS 和 JavaScript) | <div id="header"></div> |
style="CSS 样式" | 定义元素的内联样式 | <p style="color: red;">红色文本</p> |
元素和属性（Elements and Attributes）用法的最佳实践
合理使用 HTML 元素和属性来描述网页内容。避免过度使用内联样式，推荐使用外部 CSS 文件来管理样式。
| ✅ Do this | ❌ Don't do this |
|---|---|
| 使用合适的 HTML 元素来表达内容语义 | 为了样式效果而滥用 <div> 和 <span> |
使用 class 属性为元素添加类名，方便 CSS 管理 | 大量使用 id 选择器，提高 CSS 优先级，不易维护 |
| 尽量避免使用内联样式，保持 HTML 结构的清晰 | 将所有样式都写在 style 属性中，导致 HTML 臃肿 |
就是这些基本的标签结构，却能让人优雅地组织你的网页内容，专注于信息的呈现而不是纠结于如何显示，达到“心中有页，落笔成型”的境界。
好的，这次的内容就到这里啦
感谢你的阅读，欢迎点赞、关注、转发
我们，下次再见！
相关文章：
30分钟学会HTML
HTML 基本语法 HTML（HyperText Markup Language）是构成网页内容的基础。它使用一系列的标签来描述网页的结构，包括文本、图片、链接等元素。浏览器会解析这些标签并渲染成我们看到的网页。 在线体验一下 CodePen (在线 HTML 编辑器)。 千万不…...
服务器信息整理：用途、操作系统安装日期、设备序列化、IP、MAC地址、BIOS时间、系统
文章目录 引言I BIOS时间Windows查看BIOS版本安装日期linux查看BIOS时间II 操作系统安装日期LinuxWindowsIII MAC 地址IV 设备序列号Linux 查看主板信息知识扩展Linux常用命令引言 信息内容：重点信息：用途、操作系统安装日期、设备序列化、IP、MAC地址、BIOS时间、系统 Linux…...
Golang设计模式目录
go语言实现设计模式 1 文章目录： 1.1 创建型模式 1.Golang设计模式之工厂模式2.Golang设计模式之抽象工厂模式3.Golang设计模式之单例模式4.Golang设计模式之建造者模式5.Golang设计模式之原型模式 1.2 结构型模式 6.Golang设计模式之适配器模式7.Golang设计模式之桥…...
选择IT驻场外包公司，要找有哪些资质的公司
在当今数字化快速发展的时代，IT驻场外包服务成为众多企业优化运营、提升竞争力的关键选择。无论是初创企业寻求技术起步支持，还是大型企业为降低成本、专注核心业务而将部分 IT 职能外包，IT 外包公司都扮演着至关重要的角色。然而，…...
Java List 集合详解：基础用法、常见实现类与高频面试题解析
正文 在 Java 集合框架中，List 是一个非常重要的接口，广泛用于存储有序的元素集合。本文将带你深入了解 List 接口的基本用法、常见实现类及其扩展，同时通过实际代码示例帮助你快速掌握这些知识。 👉点击获取2024Java学习资料 1…...
Arduino UNO 驱动1.8 TFT屏幕显示中文
背景 最近入手了一块1.8寸的tft屏幕，通过学习文档，已经掌握了接线，显示英文、数字、矩形区域、划线、画点等操作， 但是想显示中文的时候操作比较复杂。 问题 1、arduino uno 驱动这款屏幕目前使的是自带的<TFT.h> 库操作…...
Flink operator实现自动扩缩容
官网文档位置： 1.Autoscaler | Apache Flink Kubernetes Operator 2.Configuration | Apache Flink Kubernetes Operator 1.部署K8S集群 可参照我之前的文章k8s集群搭建 2.Helm安装Flink-Operator helm repo add flink-operator-repo https://downloads.apach…...
分布式系统架构6：链路追踪
这是小卷对分布式系统架构学习的第6篇文章，关于链路追踪，之前写过traceId的相关内容：https://juejin.cn/post/7135611432808218661，不过之前写的太浅了，且不成系统，只是简单的理解，今天来捋一下…...
vite-plugin-imagemin安装问题
vite-plugin-imagemin 是一款图片资源压缩插件，能够在打包的时候显著的降低图片资源占用。不过，在安装过程中我们遇到了如下的问题。 对于上面的问题，有以下几种常见的解决方案： 1，使用 yarn 在 package.json 内配置(推荐) 打开 package.json 配置文件，然后添加如下脚本…...
Git revert回滚
回退中间的某次提交（此操作在预生产分支上比较常见），建议此方式使用命令进行操作（做好注释，方便后续上线可以找到这个操作） Git操作： 命令：revert -n 版本号 1：git re…...
永磁同步电机预测模型控制（MPC)
永磁同步电机预测模型控制（MPC) 文章目录 前言1、模型预测控制1.1 连续控制集模型预测控制（CCS-MPC）1.2 有限控制集模型预测控制（FCS-MPC）1.3 模型预测控制的优缺点 2、永磁同步电机模型预测控制2.1 预测模型2.2 价值…...
【JAVA】switch ... case ... 的用法
语法结构： switch(表达式){ case 值1： 表达式和值1匹配时执行的语句 break; case 值2： 表达式和值2匹配时执行的语句 break; …...
基于STM32的热带鱼缸控制系统的设计
文章目录 一、热带鱼缸控制系统1.题目要求2.思路3.电路仿真3.1 未仿真3.2 开始仿真，显示屏显示水温、浑浊度、光照强度等值3.3 当水温低于阈值，开启加热并声光报警3.4 当浑浊度高于阈值，开启自动换水并声光报警3.5 当光照低于阈值，…...
Vue项目整合与优化
前几篇文章，我们讲述了 Vue 项目构建的整体流程，从无到有的实现了单页和多页应用的功能配置，但在实现的过程中不乏一些可以整合的功能点及可行性的优化方案，就像大楼造完需要进行最后的项目验收改进一样，有待我们进一步…...
WinForm开发-自定义组件-1. 工具栏: UcompToolStrip
这里写自定义目录标题 1. 工具栏: UcompToolStrip1.1 展示效果1.2 代码UcompToolStrip.csUcompToolStrip.Designer.cs 1. 工具栏: UcompToolStrip 自定义一些Winform组件 1.1 展示效果 1）使用效果 2）控件事件 1.2 代码 设计 编码 UcompToolStrip.…...
法律专业legal case的留学论文写作技巧分析（1）
对于法律专业的留学生而言，案例的分析是写作的重要方面。无论留学的国家是英、美、澳洲还是加拿大，它们都属于case law 的法律体系。一个非常显著的特点便是通过对案例进行分析和提炼，从中总结提炼出principle和rules。case analysis的留学论…...
2025编程技术前沿：探索最新的开发工具与趋势
随着技术的飞速发展，编程领域每天都在演化，新的技术、框架和工具层出不穷。本文将聚焦2025年最具潜力和吸引力的编程技术与工具，从前沿语言到最受欢迎的开发框架，带您一起探索软件开发领域的最新趋势。 一、编程语言的新生代之星…...
sqlserver sql转HTMM邮件发送
通过sql的形式，把表内数据通过邮件的形式发送出去 declare title varchar(100) DECLARE stat_date CHAR(10),create_time datetime SET stat_dateCONVERT(char(10),GETDATE(),120) SET create_timeDATEADD(MINUTE,-20,GETDATE()) DECLARE xml NVARCHAR (max) DECLAR…...
GeoTrust True BusinessID Wildcard
GeoTrust由DigiCert 提供支持，是最受信任和尊重的品牌之一，以提供高保证的网站安全而闻名。 GeoTrust True BusinessID通配符证书 – 以低成本保护多个主机名。即使将其用于您的公司主页或电子邮件服务器主机名，保护所有敏感信息也是您的目标…...
R语言的数据结构
R语言的数据结构 R语言是专门为统计计算和数据分析而设计的一种编程语言，因其强大的数据处理能力而受到广泛欢迎。在R中，数据结构是理解和有效使用R语言的基础。本文将详细介绍R语言中的主要数据结构，包括向量、矩阵、数据框、列表、因子等&…...
安装和配置MySQL教程
以下是在不同操作系统下安装和配置MySQL的详细教程： Windows系统 下载MySQL安装包 访问MySQL官方网站（https://dev.mysql.com/downloads/mysql/），根据你的操作系统版本（32位或64位）下载相应的MySQL Commu…...
黑马Java面试教程_P10_设计模式
系列博客目录 文章目录 系列博客目录前言1. 工厂方法模式1.1 概述1.2 简单工厂模式1.2.1 结构1.2.2 实现1.2.3 优缺点 1.3 工厂方法模式1.3.1 概念1.3.2 结构1.3.3 实现1.3.4 优缺点 1.4 抽象工厂模式1.4.1 概念1.4.2 结构1.4.3 实现1.4.4 优缺点1.4.5 使用场景 总结࿰…...
043_小驰私房菜_MTK Camera,Hal层将camera型号写到property属性中
【问题背景】 app层需要知道当前设备的摄像头型号，然后做一些差异化处理。底下如何上报这个摄像头型号？ 【分析】 在kernel和hal层，都是有地方能获取到当前摄像头的型号，就看在哪里添加方便。获取到摄像头硬件型号后，将其写入到property属性， 然后app就可以通过读取该…...
基础图形化界面的一个图片爬虫期末
下面是爬取界面： 点击即可自动化爬取 以下是完整代码： import tkinter as tk import requests import os #用于文件和目录操作。# 图片爬虫函数 def image_spider(textbox):headers = {User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, …...
Outlook2024版如何回到经典Outlook
Outlook2024版如何回到经典Outlook 如果新加入一家公司，拿到的电脑，大概率是最新版的Windows, 一切都是新的。 如果不coding, 使用国产的foxmail大概就可以解决一切问题了。可惜老程序员很多Coding都是基于传统Outlook的，科技公司所有人都是I…...
仿生的群体智能算法总结之二（十种）
群体智能算法是一类通过模拟自然界中的群体行为来解决复杂优化问题的方法。以下是10种常见的群体智能算法，接上文https://blog.csdn.net/lzm12278828/article/details/144933367仿生的群体智能算法总结之一（十种）-CSDN博客https://blog.csdn.net/lzm12278828/article/detail…...
SpringBoot入门之创建一个Hello World项目
文章目录 一、使用传统的方式1、创建一个SpringBoot项目2、配置pom.xml文件3、下载Maven依赖4、创建一个Controller类：com.devops.controller.HelloController5、创建一个引导类：com.devops.HelloApplication6、启动项目8、访问80809、完整项目结构 二、…...
MySQL与标准SQL的区别
我们试图使MySQL Server遵循ANSI SQL标准和ODBC SQL标准，但MySQL Server在某些情况下执行不同的操作： MySQL和标准SQL特权系统之间有一些区别。例如，在MySQL中，删除表时不会自动撤销表的特权。您必须显式发出REVOKE来撤销表的特权…...
docker中使用Dockerfile设置Volume挂载点
关于在docker中如何使用Volume，可以参考文章： docker中使用Volume完成数据共享-CSDN博客 如果想在生成docker镜像的时候设置好挂载点，而不是在运行镜像生成容器时生成。 下面以自建一个tomcat镜像为例，演示如何在生成镜像时设置…...
Samsung手机首次主要采用竞对Micron LPDDR5内存
根据韩国媒体《韩国先驱报》（The Korea Herald）的报道，即将在1月底发布的三星 Galaxy S25 系列智能手机将首次主要使用美光科技（Micron Technology）提供的移动DRAM，而非三星自家的产品。这一消息对于三星的…...