首页 > 文章 > 前端

HTML5基础标签使用教程详解

时间：2025-12-11 21:41:47 153浏览收藏

一分耕耘，一分收获！既然都打开这篇《HTML5基础语法与标签使用教程》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

HTML5是构建网页的标准语言，优化了语义化结构并增强多媒体支持。1. 基本结构包括声明、根元素、元信息区（含字符编码、视口设置和标题）及主体内容区。2. 语义化标签如
、
、
、
、
、
和
提升结构清晰度，利于SEO与可维护性。3. 常用内容标签涵盖标题
-
、段落
、链接、图片、列表
/
/
及容器
/。4. 表单新增类型如email、date、number、search及placeholder、required等属性，增强输入验证与用户体验。结合示例代码展示完整页面结构与表单应用，强调闭合标签、属性引号和alt文本等细节以提升代码健壮性。最终需配合CSS与JavaScript实现丰富效果。

HTML5 是构建网页的标准语言，它在原有 HTML 基础上进行了优化和扩展，支持更清晰的语义化结构和多媒体功能。要开始使用 HTML5，首先需要掌握其基本语法结构和常用标签的使用方法。

1. HTML5 文档的基本结构

每个 HTML5 页面都应包含一个标准的文档结构，确保浏览器能正确解析和显示内容。

页面标题

欢迎使用 HTML5

这是一个段落。

说明：

：声明文档类型为 HTML5，必须放在第一行。
：根元素，lang 属性指定语言（如 zh 表示中文）。
：包含页面元信息，如编码、视口设置、标题等。
：声明字符编码，避免乱码。
：用于响应式设计，适配移动设备。
</strong>：定义浏览器标签页上显示的标题。</li> <li><strong><body></strong>：页面主体，所有可见内容放在这里。</li> </ul><h3>2. 常用语义化标签</h3> <p>HTML5 引入了多个语义化标签，使结构更清晰，利于 SEO 和可维护性。</p> <ul><li><strong><header></strong>：页面或区块的头部，常用于放置导航和标题。</li> <li><strong><nav></strong>：导航栏，包含主要链接。</li> <li><strong><main></strong>：页面主要内容，每个页面建议只有一个。</li> <li><strong><article></strong>：独立的文章内容，如博客文章。</li> <li><strong><section></strong>：文档中的一个区域或章节。</li> <li><strong><aside></strong>：侧边栏，与主内容相关但可独立存在。</li> <li><strong><footer></strong>：页脚，通常包含版权信息或联系方式。</li> </ul><p>示例：</p> <font face="Courier New"> <header><br> <h1>我的网站</h1><br> <nav><br> <a href="#home">首页</a><br> <a href="#about">关于</a><br> </nav><br> </header><br><br> <main><br> <article><br> <h2>文章标题</h2><br> <p>这是文章内容……</p><br> </article><br> </main><br><br> <aside><br> <p>推荐内容</p><br> </aside><br><br> <footer><br> <p>© 2025 我的网站. 版权所有.</p><br> </footer> </font> <h3>3. 常用内容标签</h3> <p>除了结构标签，HTML5 还提供了丰富的文本和媒体标签。</p> <ul><li><strong><h1> 到 <h6></strong>：标题层级，h1 最重要。</li> <li><strong><p></strong>：段落文本。</li> <li><strong><a href="url"></strong>：超链接，href 指定跳转地址。</li> <li><strong><img src="图片路径" alt="描述"></strong>：插入图片，alt 提供替代文本。</li> <li><strong><ul>, <ol>, <li></strong>：无序列表、有序列表和列表项。</li> <li><strong><div></strong>：通用容器，用于布局或样式分组。</li> <li><strong><span></strong>：行内容器，用于局部文本样式控制。</li> </ul><h3>4. 表单与输入控件（HTML5 新增）</h3> <p>HTML5 扩展了表单功能，新增多种输入类型和属性。</p> <ul><li><strong><input type="email"></strong>：邮箱输入，自动验证格式。</li> <li><strong><input type="date"></strong>：日期选择器。</li> <li><strong><input type="number"></strong>：数字输入框。</li> <li><strong><input type="search"></strong>：搜索框，部分浏览器显示清除按钮。</li> <li><strong><input placeholder="提示文字"></strong>：输入框提示信息。</li> <li><strong><input required></strong>：必填字段，提交前校验。</li> </ul><p>示例：</p> <font face="Courier New"> <form action="/submit" method="post"><br> <label>邮箱：<br> <input type="email" name="email" placeholder="请输入邮箱" required><br> </label><br> <br><br> <label>生日：<br> <input type="date" name="birthday"><br> </label><br> <br><br> <button type="submit">提交</button><br> </form> </font> <p>基本上就这些。掌握以上结构和标签，就能写出规范、现代的 HTML5 页面。实际开发中结合 CSS 和 JavaScript 可实现更丰富的效果。不复杂但容易忽略细节，比如闭合标签、属性加引号、alt 文本等，注意这些能让代码更健壮。</p><p>本篇关于《HTML5基础标签使用教程详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！</p> </div> <div class="labsList"> <a href="javascript:;" class="aLightGray" title="HTML5">HTML5</a> </div> </div>  <div class="contBoxNor"> <div class="contTit"> <div class="tit">相关阅读</div> <a href="/articlelist.html" class="more">更多></a> </div> <ul class="latestReadList"> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1年前 | <a href="javascript:;" class="aLightGray" title="提升">提升</a> <a href="javascript:;" class="aLightGray" title="箭头函数">箭头函数</a> <a href="javascript:;" class="aLightGray" title="函数表达式">函数表达式</a> <a href="javascript:;" class="aLightGray" title="函数声明">函数声明</a> <a href="javascript:;" class="aLightGray" title="Function构造函数">Function构造函数</a> </div> <div class="tit lineOverflow"><a href="/article/207000.html" title="JavaScript函数定义及示例详解" class="aBlack">JavaScript函数定义及示例详解</a></div> <div class="opt"> <span><i class="view"></i>502</span> <span class="collectBtn user_collection" data-id="207000" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1个月前 | <a href="javascript:;" class="aLightGray" title="智能体">智能体</a> </div> <div class="tit lineOverflow"><a href="/article/621422.html" title="智能体安全引领产业升级——国内AI安全产品市场深度分析" class="aBlack">智能体安全引领产业升级——国内AI安全产品市场深度分析</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="621422" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 4个月前 | </div> <div class="tit lineOverflow"><a href="/article/619053.html" title="CSS变量简化按钮悬停效果技巧" class="aBlack">CSS变量简化按钮悬停效果技巧</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="619053" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 4个月前 | </div> <div class="tit lineOverflow"><a href="/article/618916.html" title="JavaScript符号类型详解与应用" class="aBlack">JavaScript符号类型详解与应用</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="618916" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 4个月前 | </div> <div class="tit lineOverflow"><a href="/article/612539.html" title="HTML剪贴板复制粘贴怎么用" class="aBlack">HTML剪贴板复制粘贴怎么用</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="612539" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> </ul> </div>  <div class="contBoxNor"> <div class="contTit"> <div class="tit">最新阅读</div> <a href="/articlelist.html" class="more">更多></a> </div> <ul class="latestReadList"> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2天前 | </div> <div class="tit lineOverflow"><a href="/article/630850.html" title="Vue 组合式函数管理可取消请求的生命周期" class="aBlack">Vue 组合式函数管理可取消请求的生命周期</a></div> <div class="opt"> <span><i class="view"></i>335</span> <span class="collectBtn user_collection" data-id="630850" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2天前 | </div> <div class="tit lineOverflow"><a href="/article/630826.html" title="React useDeferredValue 降低搜索结果渲染阻塞" class="aBlack">React useDeferredValue 降低搜索结果渲染阻塞</a></div> <div class="opt"> <span><i class="view"></i>320</span> <span class="collectBtn user_collection" data-id="630826" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2天前 | <a href="/articletag/1809_new_0_1.html" class="aLightGray" title="环境变量">环境变量</a> · </div> <div class="tit lineOverflow"><a href="/article/630801.html" title="Vite 构建模式隔离多环境变量文件" class="aBlack">Vite 构建模式隔离多环境变量文件</a></div> <div class="opt"> <span><i class="view"></i>329</span> <span class="collectBtn user_collection" data-id="630801" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2天前 | </div> <div class="tit lineOverflow"><a href="/article/630778.html" title="TypeScript NoInfer 保持调用方的显式类型选择" class="aBlack">TypeScript NoInfer 保持调用方的显式类型选择</a></div> <div class="opt"> <span><i class="view"></i>443</span> <span class="collectBtn user_collection" data-id="630778" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2天前 | </div> <div class="tit lineOverflow"><a href="/article/630753.html" title="Import Maps 统一浏览器端依赖别名" class="aBlack">Import Maps 统一浏览器端依赖别名</a></div> <div class="opt"> <span><i class="view"></i>486</span> <span class="collectBtn user_collection" data-id="630753" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2天前 | </div> <div class="tit lineOverflow"><a href="/article/630731.html" title="Background Sync 延迟提交离线表单数据" class="aBlack">Background Sync 延迟提交离线表单数据</a></div> <div class="opt"> <span><i class="view"></i>463</span> <span class="collectBtn user_collection" data-id="630731" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2天前 | <a href="javascript:;" class="aLightGray" title="ReadableStream">ReadableStream</a> <a href="javascript:;" class="aLightGray" title="背压">背压</a> <a href="javascript:;" class="aLightGray" title="Fetch Streams">Fetch Streams</a> </div> <div class="tit lineOverflow"><a href="/article/630705.html" title="Fetch Streams 分段读取大响应体的背压控制" class="aBlack">Fetch Streams 分段读取大响应体的背压控制</a></div> <div class="opt"> <span><i class="view"></i>386</span> <span class="collectBtn user_collection" data-id="630705" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2天前 | </div> <div class="tit lineOverflow"><a href="/article/630682.html" title="CSS scroll-driven animations 绑定滚动进度" class="aBlack">CSS scroll-driven animations 绑定滚动进度</a></div> <div class="opt"> <span><i class="view"></i>207</span> <span class="collectBtn user_collection" data-id="630682" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2天前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="javascript:;" class="aLightGray" title="Fetch">Fetch</a> <a href="javascript:;" class="aLightGray" title="AbortController">AbortController</a> <a href="javascript:;" class="aLightGray" title="AbortSignal">AbortSignal</a> <a href="javascript:;" class="aLightGray" title="请求取消">请求取消</a> <a href="javascript:;" class="aLightGray" title="前端异步">前端异步</a> </div> <div class="tit lineOverflow"><a href="/article/630659.html" title="AbortController 复用后请求立即取消的生命周期" class="aBlack">AbortController 复用后请求立即取消的生命周期</a></div> <div class="opt"> <span><i class="view"></i>418</span> <span class="collectBtn user_collection" data-id="630659" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2天前 | </div> <div class="tit lineOverflow"><a href="/article/630636.html" title="Web Locks API 的 ifAvailable 模式避免长时间等待" class="aBlack">Web Locks API 的 ifAvailable 模式避免长时间等待</a></div> <div class="opt"> <span><i class="view"></i>261</span> <span class="collectBtn user_collection" data-id="630636" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2天前 | <a href="/articletag/729_new_0_1.html" class="aLightGray" title="性能优化">性能优化</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="javascript:;" class="aLightGray" title="SharedArrayBuffer">SharedArrayBuffer</a> <a href="javascript:;" class="aLightGray" title="前端性能">前端性能</a> <a href="javascript:;" class="aLightGray" title="Atomics">Atomics</a> <a href="javascript:;" class="aLightGray" title="跨源隔离">跨源隔离</a> <a href="javascript:;" class="aLightGray" title="Web Worker">Web Worker</a> </div> <div class="tit lineOverflow"><a href="/article/630612.html" title="Web Worker 配合 SharedArrayBuffer 共享高频数据" class="aBlack">Web Worker 配合 SharedArrayBuffer 共享高频数据</a></div> <div class="opt"> <span><i class="view"></i>301</span> <span class="collectBtn user_collection" data-id="630612" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2天前 | </div> <div class="tit lineOverflow"><a href="/article/630587.html" title="View Transitions API 处理跨页面导航动画" class="aBlack">View Transitions API 处理跨页面导航动画</a></div> <div class="opt"> <span><i class="view"></i>310</span> <span class="collectBtn user_collection" data-id="630587" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> </ul> </div>  <div class="contBoxNor"> <div class="contTit"> <div class="tit">课程推荐</div> <a href="/courselist.html" class="more">更多></a> </div> <ul class="classRecomList"> <li> <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="img_box"> <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式"> </a> <dl> <dt class="lineOverflow"> 前端进阶之JavaScript设计模式 </dt> <dd class="cont1 lineOverflow">设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。</dd> <dd class="cont2"> <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="toStudy">立即学习</a> <span>543次学习</span> </dd> </dl> </li> <li> <a href="/course/2.html" title="GO语言核心编程课程" class="img_box"> <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程"> </a> <dl> <dt class="lineOverflow"> GO语言核心编程课程 </dt> <dd class="cont1 lineOverflow">本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。</dd> <dd class="cont2"> <a href="/course/2.html" title="GO语言核心编程课程" class="toStudy">立即学习</a> <span>516次学习</span> </dd> </dl> </li> <li> <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="img_box"> <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信"> </a> <dl> <dt class="lineOverflow"> 简单聊聊mysql8与网络通信 </dt> <dd class="cont1 lineOverflow">如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让</dd> <dd class="cont2"> <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="toStudy">立即学习</a> <span>500次学习</span> </dd> </dl> </li> <li> <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="img_box"> <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战"> </a> <dl> <dt class="lineOverflow"> JavaScript正则表达式基础与实战 </dt> <dd class="cont1 lineOverflow">在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。</dd> <dd class="cont2"> <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="toStudy">立即学习</a> <span>487次学习</span> </dd> </dl> </li> <li> <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="img_box"> <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局"> </a> <dl> <dt class="lineOverflow"> 从零制作响应式网站—Grid布局 </dt> <dd class="cont1 lineOverflow">本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。</dd> <dd class="cont2"> <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="toStudy">立即学习</a> <span>485次学习</span> </dd> </dl> </li> </ul> </div> </div>  <div class="footer"> <ul> <li ><a href="/" class="aLightGray"><em class="navIcon navIconHome"></em><span>首页</span></a></li> <li class="curr"><a href="/articlelist.html" class="aLightGray"><em class="navIcon navIconRead"></em><span>阅读</span></a></li> <li ><a href="/courselist.html" class="aLightGray"><em class="navIcon navIconCourse"></em><span>课程</span></a></li> <li ><a href="/ai.html" class="aLightGray"><em class="navIcon navIconAi"></em><span>AI助手</span></a></li> <li ><a href="/user.html" class="aLightGray"><em class="navIcon navIconUser"></em><span>我的</span></a></li> </ul> </div> <script src="/assets/js/frontend/common.js" defer></script> <script src="/assets/js/juejin-theme.js?v=20260613b" defer></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?e34c3e8ab31ba35d7e1c48ea8d77315f"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>