首页 > 文章 > 前端

HTML5基础标签使用教程详解

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

推广推荐

支持 PC / 移动端，安全直达

一分耕耘，一分收获！既然都打开这篇《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> | 7个月前 | <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> | 2年前 | <a href="javascript:;" class="aLightGray" title="CSS">CSS</a> <a href="javascript:;" class="aLightGray" title="优化">优化</a> <a href="javascript:;" class="aLightGray" title="体验">体验</a> </div> <div class="tit lineOverflow"><a href="/article/72840.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="72840" 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="图片轮播">图片轮播</a> <a href="javascript:;" class="aLightGray" title="微信小程序">微信小程序</a> <a href="javascript:;" class="aLightGray" title="特效">特效</a> </div> <div class="tit lineOverflow"><a href="/article/76259.html" title="使用微信小程序实现图片轮播特效" class="aBlack">使用微信小程序实现图片轮播特效</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="76259" 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="sessionStorage">sessionStorage</a> <a href="javascript:;" class="aLightGray" title="存储能力">存储能力</a> <a href="javascript:;" class="aLightGray" title="限制解析">限制解析</a> </div> <div class="tit lineOverflow"><a href="/article/83771.html" title="解析sessionStorage的存储能力与限制" class="aBlack">解析sessionStorage的存储能力与限制</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="83771" 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> <a href="javascript:;" class="aLightGray" title="冒泡事件">冒泡事件</a> <a href="javascript:;" class="aLightGray" title="促进作用">促进作用</a> </div> <div class="tit lineOverflow"><a href="/article/85057.html" title="探索冒泡活动对于团队合作的推动力" class="aBlack">探索冒泡活动对于团队合作的推动力</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="85057" 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> | 5分钟前 | <a href="javascript:;" class="aLightGray" title="html">html</a> <a href="javascript:;" class="aLightGray" title="JS">JS</a> </div> <div class="tit lineOverflow"><a href="/article/419243.html" title="JS动态加载外部HTML方法解析" class="aBlack">JS动态加载外部HTML方法解析</a></div> <div class="opt"> <span><i class="view"></i>199</span> <span class="collectBtn user_collection" data-id="419243" 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> | 10分钟前 | </div> <div class="tit lineOverflow"><a href="/article/419237.html" title="CSS重置怎么用？Normalize与Reset对比解析" class="aBlack">CSS重置怎么用？Normalize与Reset对比解析</a></div> <div class="opt"> <span><i class="view"></i>364</span> <span class="collectBtn user_collection" data-id="419237" 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> | 14分钟前 | </div> <div class="tit lineOverflow"><a href="/article/419233.html" title="HTML标签大全详解，10个常用标签使用指南" class="aBlack">HTML标签大全详解，10个常用标签使用指南</a></div> <div class="opt"> <span><i class="view"></i>141</span> <span class="collectBtn user_collection" data-id="419233" 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> | 17分钟前 | </div> <div class="tit lineOverflow"><a href="/article/419228.html" title="浮动元素自适应宽度技巧详解" class="aBlack">浮动元素自适应宽度技巧详解</a></div> <div class="opt"> <span><i class="view"></i>147</span> <span class="collectBtn user_collection" data-id="419228" 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> | 22分钟前 | </div> <div class="tit lineOverflow"><a href="/article/419222.html" title="PHP中HTML图片不显示解决方法" class="aBlack">PHP中HTML图片不显示解决方法</a></div> <div class="opt"> <span><i class="view"></i>219</span> <span class="collectBtn user_collection" data-id="419222" 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> | 27分钟前 | <a href="javascript:;" class="aLightGray" title="java">java</a> <a href="javascript:;" class="aLightGray" title="编程">编程</a> </div> <div class="tit lineOverflow"><a href="/article/419215.html" title="CSS代码规范优化：Lint工具使用教程" class="aBlack">CSS代码规范优化：Lint工具使用教程</a></div> <div class="opt"> <span><i class="view"></i>413</span> <span class="collectBtn user_collection" data-id="419215" 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> | 28分钟前 | </div> <div class="tit lineOverflow"><a href="/article/419213.html" title="FullCalendar按钮样式设置：背景边距内边距调整" class="aBlack">FullCalendar按钮样式设置：背景边距内边距调整</a></div> <div class="opt"> <span><i class="view"></i>355</span> <span class="collectBtn user_collection" data-id="419213" 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> | 29分钟前 | <a href="javascript:;" class="aLightGray" title="CSS">CSS</a> <a href="javascript:;" class="aLightGray" title="flex">flex</a> </div> <div class="tit lineOverflow"><a href="/article/419212.html" title="CSSFlex中absolute子元素使用技巧" class="aBlack">CSSFlex中absolute子元素使用技巧</a></div> <div class="opt"> <span><i class="view"></i>371</span> <span class="collectBtn user_collection" data-id="419212" 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> | 31分钟前 | </div> <div class="tit lineOverflow"><a href="/article/419210.html" title="HTML中aria-current用法详解" class="aBlack">HTML中aria-current用法详解</a></div> <div class="opt"> <span><i class="view"></i>476</span> <span class="collectBtn user_collection" data-id="419210" 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> | 34分钟前 | <a href="javascript:;" class="aLightGray" title="CSS教程">CSS教程</a> </div> <div class="tit lineOverflow"><a href="/article/419205.html" title="Notepad++CSS格式化失败怎么解决" class="aBlack">Notepad++CSS格式化失败怎么解决</a></div> <div class="opt"> <span><i class="view"></i>223</span> <span class="collectBtn user_collection" data-id="419205" 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> | 37分钟前 | </div> <div class="tit lineOverflow"><a href="/article/419202.html" title="HTML自动翻页实现与分页设计教程" class="aBlack">HTML自动翻页实现与分页设计教程</a></div> <div class="opt"> <span><i class="view"></i>414</span> <span class="collectBtn user_collection" data-id="419202" 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> | 40分钟前 | </div> <div class="tit lineOverflow"><a href="/article/419198.html" title="阻止脚本修改元素高度的CSS技巧" class="aBlack">阻止脚本修改元素高度的CSS技巧</a></div> <div class="opt"> <span><i class="view"></i>403</span> <span class="collectBtn user_collection" data-id="419198" 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>  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="footer"> <ul> <li ><a href="/" class="aLightGray"><em class="material-icons">home</em><span>首页</span></a></li> <li class="curr"><a href="/articlelist.html" class="aLightGray"><em class="material-icons">menu_book</em><span>阅读</span></a></li> <li ><a href="/courselist.html" class="aLightGray"><em class="material-icons">school</em><span>课程</span></a></li> <li ><a href="/ai.html" class="aLightGray"><em class="material-icons">smart_toy</em><span>AI助手</span></a></li> <li ><a href="/user.html" class="aLightGray"><em class="material-icons">person</em><span>我的</span></a></li> </ul> </div> <script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v=1671101972"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?3dc5666f6478c7bf39cd5c91e597423d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>