HTML基础教程：从结构到表单完整指南
在网页开发中，HTML（超文本标记语言）是最基础且重要的语言之一。它用于构建网页的结构，定义了网页的内容和布局。HTML通过标签（tags）来标记文本、图像、链接等元素，使浏览器能够正确显示网页内容。本文将详细介绍HTML的基本结构、常用标签、表单元素、以及一些高级特性，帮助你全面理解并掌握HTML的使用。
1. HTML的基本结构
一个标准的HTML文档通常由以下几个部分组成：
Document
：声明文档类型，告诉浏览器这是一个HTML5文档。：根元素，所有其他元素都包含在这个标签内。：包含元数据（metadata），如字符集、视口设置、标题等。</code>：定义网页的标题，显示在浏览器的标题栏或标签页上。</li> <li><code><body></code>：包含网页的可见内容，如文本、图像、链接等。</li> </ul> <h3>2. 常用HTML标签</h3> <h4>2.1 标题标签</h4> <p>HTML提供了六个级别的标题标签，从<code><h1></code>到<code><h6></code>，<code><h1></code>是*别的标题，<code><h6></code>是*别的标题。</p> <pre><code class="language-html"><h1>这是一个一级标题</h1> <h2>这是一个二级标题</h2> <h3>这是一个三级标题</h3> <h4>这是一个四级标题</h4> <h5>这是一个五级标题</h5> <h6>这是一个六级标题</h6></code></pre> <h4>2.2 段落标签</h4> <p><code><p></code>标签用于定义段落，浏览器会自动在段落前后添加空白。</p> <pre><code class="language-html"><p>这是一个段落。</p> <p>这是另一个段落。</p></code></pre> <h4>2.3 链接标签</h4> <p><code><a></code>标签用于创建超链接，通过<code>href</code>属性指定链接的目标地址。</p> <pre><code class="language-html"><a href="https://www.example.com">访问Example网站</a></code></pre> <h4>2.4 图像标签</h4> <p><code><img></code>标签用于在网页中插入图像，<code>src</code>属性指定图像的路径，<code>alt</code>属性提供图像的替代文本。</p> <pre><code class="language-html"></code></pre> <h4>2.5 列表标签</h4> <p>HTML支持有序列表和无序列表，分别使用<code><ol></code>和<code><ul></code>标签，列表项使用<code><li></code>标签。</p> <pre><code class="language-html"><ul> <li>无序列表项1</li><p class="auto-body-image" style="text-align:center;margin:16px 0;"><img src="/uploads/auto/202609/cacf8ef9c376575f.jpg" alt="" loading="lazy" style="width:72%;max-width:640px;height:auto;display:block;margin:0 auto;" /></p> <li>无序列表项2</li> </ul> <ol> <li>有序列表项1</li> <li>有序列表项2</li> </ol></code></pre> <h4>2.6 表格标签</h4> <p><code><table></code>标签用于创建表格，<code><tr></code>定义表格行，<code><td></code>定义表格单元格，<code><th></code>定义表头单元格。</p> <pre><code class="language-html"><table> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>25</td> </tr> <tr> <td>李四</td> <td>30</td> </tr> </table></code></pre> <h3>3. 表单元素</h3> <p>表单是网页中用于收集用户输入的重要元素，常见的表单元素包括输入框、按钮、下拉列表等。</p> <h4>3.1 输入框</h4> <p><code><input></code>标签用于创建输入框，<code>type</code>属性指定输入框的类型，如<code>text</code>、<code>password</code>、<code>email</code>等。</p> <pre><code class="language-html"><label for="username">用户名:</label> <input type="text" id="username" name="username"> <label for="password">密码:</label> <input type="password" id="password" name="password"></code></pre> <h4>3.2 按钮</h4> <p><code><button></code>标签用于创建按钮，<code>type</code>属性指定按钮的类型，如<code>submit</code>、<code>reset</code>、<code>button</code>等。</p> <pre><code class="language-html"><button type="submit">提交</button> <button type="reset">重置</button> <button type="button">普通按钮</button></code></pre> <h4>3.3 下拉列表</h4> <p><code><select></code>标签用于创建下拉列表，<code><option></code>标签定义列表项。</p> <pre><code class="language-html"><label for="cars">选择汽车:</label> <select id="cars" name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select></code></pre> <h4>3.4 复选框和单选按钮</h4> <p><code><input></code>标签的<code>type</code>属性为<code>checkbox</code>或<code>radio</code>时，分别用于创建复选框和单选按钮。</p> <pre><code class="language-html"><label for="vehicle1">我有自行车</label> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="male">男</label> <input type="radio" id="male" name="gender" value="male"> <label for="female">女</label> <input type="radio" id="female" name="gender" value="female"></code></pre> <h3>4. HTML5新特性</h3> <p>HTML5引入了许多新特性，增强了网页的功能和表现力。</p> <h4>4.1 语义化标签</h4> <p>HTML5新增了语义化标签，如<code><header></code>、<code><footer></code>、<code><article></code>、<code><section></code>等，使网页结构更加清晰。</p> <pre><code class="language-html"><header> <h1>网站标题</h1> <nav> <a href="#">首页</a> <a href="#">关于我们</a> <a href="#">联系我们</a> </nav> </header> <section> <h2>内容标题</h2> <p>这里是内容部分。</p> </section> <footer> <p>版权信息</p> </footer></code></pre> <h4>4.2 多媒体支持</h4> <p>HTML5支持直接在网页中嵌入音频和视频，使用<code><audio></code>和<code><video></code>标签。</p> <pre><code class="language-html"><audio controls> <source src="audio.mp3" type="audio/mpeg"> 您的浏览器不支持音频元素。 </audio> <video controls width="320" height="240"> <source src="video.mp4" type="video/mp4"> 您的浏览器不支持视频元素。 </video></code></pre> <h4>4.3 表单增强</h4> <p>HTML5为表单引入了新的输入类型和属性，如<code>date</code>、<code>color</code>、<code>range</code>、<code>placeholder</code>、<code>required</code>等。</p> <pre><code class="language-html"><label for="birthday">生日:</label> <input type="date" id="birthday" name="birthday"> <label for="favcolor">选择颜色:</label> <input type="color" id="favcolor" name="favcolor"> <label for="volume">音量:</label> <input type="range" id="volume" name="volume" min="0" max="100"> <label for="username">用户名:</label> <input type="text" id="username" name="username" placeholder="请输入用户名" required></code></pre> <h3>5. 总结</h3> <p>HTML是构建网页的基础，掌握其基本结构和常用标签是网页开发的*步。通过本文的介绍，你应该对HTML有了全面的了解，包括如何创建标题、段落、链接、图像、列表、表格等元素，以及如何使用表单收集用户输入。此外，HTML5的新特性如语义化标签、多媒体支持和表单增强，进一步提升了网页的功能和用户体验。</p> <p>在实际开发中，HTML通常与CSS（层叠样式表）和JavaScript结合使用，分别负责网页的样式和交互。掌握HTML是学习网页开发的基础，希望你通过本文的学习，能够熟练运用HTML创建结构清晰、内容丰富的网页。</p><p class="auto-body-image" style="text-align:center;margin:16px 0;"><img src="/uploads/auto/202609/4e1b3bc0ff73829f.jpg" alt="" loading="lazy" style="width:72%;max-width:640px;height:auto;display:block;margin:0 auto;" /></p><!-- /auto-image-filler:146be6d333937860 --> </div> <div class="article_footer clearfix"> </div> <!--<div class="article_footer clearfix">--> <!-- <div class="fr tag"> 标签：</div>--> <!--</div>--> <div class="post-navigation clearfix"> <div class="post-previous fl"> <span>下一篇：</span><a href='/wangzhanyouhua/1925.html' title='外贸网站如何配置WhatsApp询盘系统？提升沟通效率'> 外贸网站如何配置WhatsApp询盘系统？提升沟通效率 </a> </div> <div class="post-next fr"> <span>上一篇：</span><a href='/wangzhanyouhua/1921.html' title='网站动画效果制作全攻略：设计到优化的实用技巧'> 网站动画效果制作全攻略：设计到优化的实用技巧 </a> </div> </div> </div> <div class="related_article"> <div class="box_title clearfix"> <span><i class="icon fa fa-file-text"></i>相关文章</span> </div> <div class="related_list clearfix"> <article class="fl"> <div class="related_img"> <a href="/wangzhanyouhua/4505.html" title="青岛轮渡写字楼出租的核心是什么？三个层次讲清楚"> <img src="/uploads/auto/202609/9e99c3789ab05da7.jpg" alt="青岛轮渡写字楼出租的核心是什么？三个层次讲清楚" title="青岛轮渡写字楼出租的核心是什么？三个层次讲清楚" loading="lazy"> </a> </div> <div class="related_detail"> <h3><a href="/wangzhanyouhua/4505.html" title="青岛轮渡写字楼出租的核心是什么？三个层次讲清楚">青岛轮渡写字楼出租的核心是什么？三个层次讲清楚</a></h3> <div class="meta"> <span><i class="fa fa-eye"></i>946</span> <span><i class="fa fa-clock-o"></i>2026-09-29</span> </div> </div> </article> <article class="fl"> <div class="related_img"> <a href="/wangzhanyouhua/4501.html" title="影响网站抓取频率的因素有那些?"> <img src="/uploads/auto/202609/cf2f29c71dc35732.jpg" alt="影响网站抓取频率的因素有那些?" title="影响网站抓取频率的因素有那些?" loading="lazy"> </a> </div> <div class="related_detail"> <h3><a href="/wangzhanyouhua/4501.html" title="影响网站抓取频率的因素有那些?">影响网站抓取频率的因素有那些?</a></h3> <div class="meta"> <span><i class="fa fa-eye"></i>780</span> <span><i class="fa fa-clock-o"></i>2026-09-29</span> </div> </div> </article> <article class="fl"> <div class="related_img"> <a href="/wangzhanyouhua/4498.html" title="解析新手SEO优化进阶之内容更新！"> <img src="/uploads/auto/202609/120af57efc1f33f6.jpg" alt="解析新手SEO优化进阶之内容更新！" title="解析新手SEO优化进阶之内容更新！" loading="lazy"> </a> </div> <div class="related_detail"> <h3><a href="/wangzhanyouhua/4498.html" title="解析新手SEO优化进阶之内容更新！">解析新手SEO优化进阶之内容更新！</a></h3> <div class="meta"> <span><i class="fa fa-eye"></i>819</span> <span><i class="fa fa-clock-o"></i>2026-09-29</span> </div> </div> </article> </div> </div> </div> <aside class="aside fr hidden-sm-md-lg"> <div id="aside_hot" class="widget widget_aside_hot"> <div class="box_title side_title clearfix"> <span><i class="icon side_icon fa fa-file-text"></i>阅读排行</span> </div> <ul class="widget-content aside_hot"> <li class="clearfix"><i class="fl side_hot_num side_hot_num-1">1</i><a href="/wangzhanyouhua/1342.html" title="企业站SEO优化年费套餐性价比对比">企业站SEO优化年费套餐性价比对比</a></li> <li class="clearfix"><i class="fl side_hot_num side_hot_num-1">2</i><a href="/wangzhanyouhua/3249.html" title="政策推动传统企业如何加速网站建设转型？">政策推动传统企业如何加速网站建设转型？</a></li> <li class="clearfix"><i class="fl side_hot_num side_hot_num-1">3</i><a href="/wangzhanyouhua/2647.html" title="网站建设合同关键条款风险审查指南">网站建设合同关键条款风险审查指南</a></li> <li class="clearfix"><i class="fl side_hot_num side_hot_num-1">4</i><a href="/wangzhanyouhua/3989.html" title="如何让SEO文章快速被收录？秒收录技巧大">如何让SEO文章快速被收录？秒收录技巧大</a></li> <li class="clearfix"><i class="fl side_hot_num side_hot_num-1">5</i><a href="/wangzhanyouhua/1824.html" title="如何创建一个自己的网站,7步搞定">如何创建一个自己的网站,7步搞定</a></li> <li class="clearfix"><i class="fl side_hot_num side_hot_num-1">6</i><a href="/wangzhanyouhua/1197.html" title="定制化网站设计如何助力品牌升级？优化用户">定制化网站设计如何助力品牌升级？优化用户</a></li> <li class="clearfix"><i class="fl side_hot_num side_hot_num-1">7</i><a href="/wangzhanyouhua/3180.html" title="自学网站建设零基础指南：新手如何入门？">自学网站建设零基础指南：新手如何入门？</a></li> <li class="clearfix"><i class="fl side_hot_num side_hot_num-1">8</i><a href="/wangzhanyouhua/4482.html" title="单页面SEO优化有哪些高效方法？全攻略揭">单页面SEO优化有哪些高效方法？全攻略揭</a></li> <li class="clearfix"><i class="fl side_hot_num side_hot_num-1">9</i><a href="/wangzhanyouhua/3323.html" title="文件无法删除怎么办？管理员权限全攻略">文件无法删除怎么办？管理员权限全攻略</a></li> <li class="clearfix"><i class="fl side_hot_num side_hot_num-1">10</i><a href="/wangzhanyouhua/2105.html" title="企业网站设计全流程系统化运营法">企业网站设计全流程系统化运营法</a></li> </ul> </div> <div id="divTags" class="widget widget_tags"> <div class="box_title side_title clearfix"> <span><i class="icon side_icon fa fa-file-text"></i>标签列表</span> </div> <ul class="widget-content divTags"> <li> <a href='/tags/287.html' title="建设网站">建设网站</a> <a href='/tags/286.html' title="网站建设">网站建设</a> <a href='/tags/283.html' title="优化全攻略">优化全攻略</a> <a href='/tags/269.html' title="页面速度优化">页面速度优化</a> <a href='/tags/274.html' title="关键词排名">关键词排名</a> <a href='/tags/285.html' title="网站导航">网站导航</a> <a href='/tags/288.html' title="信息布局">信息布局</a> <a href='/tags/282.html' title="网站数据分析">网站数据分析</a> <a href='/tags/270.html' title="用户体验优化">用户体验优化</a> <a href='/tags/271.html' title="转化率优化">转化率优化</a> <a href='/tags/273.html' title="移动端优化">移动端优化</a> <a href='/tags/277.html' title="搜索引擎算法">搜索引擎算法</a> <a href='/tags/267.html' title="域名注册">域名注册</a> <a href='/tags/268.html' title="服务器部署">服务器部署</a> <a href='/tags/275.html' title="外链建设">外链建设</a> <a href='/tags/276.html' title="站内 SEO">站内 SEO</a> <a href='/tags/280.html' title="网站架构优化">网站架构优化</a> <a href='/tags/281.html' title="图片 SEO 优化">图片 SEO 优化</a> <a href='/tags/272.html' title="网站性能优化">网站性能优化</a> <a href='/tags/284.html' title="插值拟合">插值拟合</a> </li> </ul> </div> </aside> </div> </div> <style> /* 新增全局媒体查询，统一移动端规则（把样式抽出来，避免内联臃肿） */ @media screen and (max-width: 768px) { .footer-links .container > div { flex-direction: column !important; text-align: center; gap: 20px !important; } .footer-links > div > div > div:nth-child(2) { flex-wrap: wrap !important; justify-content: center; } .footer-bottom .container > div { flex-direction: column !important; text-align: center; } #backtop { right: 10px !important; bottom: 20px !important; } } </style> <div class="footer" style="background:#1a1a1a;color:#999;font-size:14px;"> <div class="footer-links" style="padding:25px 0;border-bottom:1px solid #2a2a2a;"> <div class="container" style="max-width:1200px;margin:0 auto;padding:0 15px;"> <div style="display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;"> <a href="https://www.shanxishuilian.com" title="安枢水莲seo" style="display:block;"> <img src="/uploads/allimg/20260525/1-26052516014bD.png" alt="安枢水莲seo" style="height:40px;max-width:100%;"> </a> <div style="display:flex;gap:35px;flex-wrap:wrap;justify-content:center;"> <a href="/wangzhanjianshe/" title="网站建设" style="color:#999;text-decoration:none;font-size:14px;transition:color 0.3s;">网站建设</a> <a href="/wangzhanyouhua/" title="网站优化" style="color:#999;text-decoration:none;font-size:14px;transition:color 0.3s;">网站优化</a> <a href="/seojishu/" title="seo技术" style="color:#999;text-decoration:none;font-size:14px;transition:color 0.3s;">seo技术</a> <a href="/geoxuexi/" title="geo学习" style="color:#999;text-decoration:none;font-size:14px;transition:color 0.3s;">geo学习</a> <a href="/banquanshengming/" title="版权声明" style="color:#999;text-decoration:none;font-size:14px;transition:color 0.3s;">版权声明</a> </div> <div style="display:flex;gap:20px;flex-wrap:wrap;justify-content:center;"> <a href="/tags/283.html" title="优化全攻略" style="color:#666;font-size:13px;text-decoration:none;transition:color 0.3s;">优化全攻略</a> <a href="/tags/285.html" title="网站导航" style="color:#666;font-size:13px;text-decoration:none;transition:color 0.3s;">网站导航</a> <a href="/tags/288.html" title="信息布局" style="color:#666;font-size:13px;text-decoration:none;transition:color 0.3s;">信息布局</a> <a href="/tags/284.html" title="插值拟合" style="color:#666;font-size:13px;text-decoration:none;transition:color 0.3s;">插值拟合</a> <a href="/tags/286.html" title="网站建设" style="color:#666;font-size:13px;text-decoration:none;transition:color 0.3s;">网站建设</a> </div> </div> </div> </div> <div class="footer-bottom" style="background:#111;padding:15px 0;"> <div class="container" style="max-width:1200px;margin:0 auto;padding:0 15px;"> <div style="display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:15px;"> <p style="color:#666;font-size:12px;margin:0;">Copyright © 2026 安枢水莲seo 版权所有 <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="color:#666;">鲁ICP备2026027640号-30</a></p> <p style="color: #ffffff; margin: 0 0 8px 0; font-size: 14px; line-height: 1.5;">联系邮箱：yakao2025@163.com 联系号码：17761231017</p> <div style="display:flex;align-items:center;gap:25px;"> <div style="display:flex;gap:20px;"> <a href="https://www.shanxishuilian.com/sitemap.xml" title="网站地图" style="color:#666;font-size:12px;text-decoration:none;">网站地图</a> </div> </div> </div> </div> </div> </div> <div id="mask"></div> <!-- 返回顶部适配移动端位置 --> <div id="backtop" style="position:fixed;right:30px;bottom:40px;z-index:999;"> <span id="gotop1" style="display:block;width:44px;height:44px;background:#222;border-radius:50%;display:flex;align-items:center;justify-content:center;"> <img src="/template/pc/skin/images/huojian.svg" alt="返回顶部" title="返回顶部" style="width:24px;height:24px;"> </span> </div> <script src="/template/pc/skin/js/custom.js"></script> <!-- Swiper移动端兼容：增加touch:true支持手机滑动 --> <script> var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', paginationClickable: true, loop: true, autoplay:2000, nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', spaceBetween: 30, effect: 'fade', touchAngle: 45, // 手机触控滑动 grabCursor: true }); </script> <script> function searchToggle(obj, evt){ var container = $(obj).closest('.search-wrapper'); if(!container.hasClass('active')){ container.addClass('active'); evt.preventDefault(); } else if(container.hasClass('active') && $(obj).closest('.input-holder').length == 0){ container.removeClass('active'); container.find('.search-input').val(''); container.find('.result-container').fadeOut(100, function(){$(this).empty();}); } } </script> <script> $(function() { $("#gotop1,#gotop2").click(function(e) { TweenMax.to(window, 1.5, {scrollTo:0, ease: Expo.easeInOut}); var huojian = new TimelineLite(); huojian.to("#gotop1", 1, {rotationY:720, scale:0.6, y:"+=40", ease: Power4.easeOut}) .to("#gotop1", 1, {y:-1000, opacity:0, ease: Power4.easeOut}, 0.6) .to("#gotop1", 1, {y:0, rotationY:0, opacity:1, scale:1, ease: Expo.easeOut, clearProps: "all"}, "1.4"); }); // 移动端触摸兼容（手机点击返回顶部） $("#gotop1").on('touchstart', function(){ $(this).trigger('click'); }); }); </script> </body> </html>