手把手教你掌握HTML基础结构、表单与标签应用

2026-09-16 字体：大中小

在网页开发中，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/f6575db7f691dae0.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/dfafcffba2b6cf5e.jpg" alt="" loading="lazy" style="width:72%;max-width:640px;height:auto;display:block;margin:0 auto;" /></p> </div> <div class="show_more_btn" id="read-more"> <div class="shadow"> </div> <span class="show_more_text"> 阅读全文 <img src="/template/pc/skin/images/ndarrow.png" alt=""> </span> </div> <div class="articlePager"> <div class="articlePagerItem"> <a href="/guanjianciyanjiu/5941.html" title="专业网站建设如何高效落地？实战案例解析">上一篇：专业网站建设如何高效落地？实战案例解析</a> </div> <div class="articlePagerItem"> <a href="/guanjianciyanjiu/5947.html" title="企业网站设计全攻略：高效商业利器打造秘籍">下一篇：企业网站设计全攻略：高效商业利器打造秘籍</a> </div> </div> </div> </div> <div class="right"> <div class="recommend"> <div class="recommendTitle"> 所有TAG标签 <span>ALL</span> </div> <div class="seeLists allTagLists"> <a href="/tags/24.html" title="创新网站制作模式"> <div class="seeList">创新网站制作模式</div> </a> <a href="/tags/23.html" title="网站建设初期服务器选型避坑指南"> <div class="seeList">网站建设初期服务器选型避坑指南</div> </a> <a href="/tags/22.html" title="网站页面PWA技术应用案例拆解"> <div class="seeList">网站页面PWA技术应用案例拆解</div> </a> <a href="/tags/21.html" title="网站域名历史黑名单"> <div class="seeList">网站域名历史黑名单</div> </a> <a href="/tags/20.html" title="高效网站制作技术"> <div class="seeList">高效网站制作技术</div> </a> </div> </div> <div class="recommend"> <div class="recommendTitle"> 热门推荐 </div> <div class="recommendLists"> <a href="/guanjianciyanjiu/4536.html" title="企业网站建设案例全解析实现精准客户覆盖"> <div class="recommendList"> <div class="recommendListImg"> <img src="/uploads/auto/202609/0cfa4ab2d3869a01.jpg" alt="企业网站建设案例全解析实现精准客户覆盖"> </div> <p>企业网站建设案例全解析实现精准客户覆盖</p> </div> </a> <a href="/guanjianciyanjiu/4548.html" title="网站域名历史黑名单检测与清洗"> <div class="recommendList"> <div class="recommendListImg"> <img src="/uploads/auto/202609/2fdb7c665eaebcc5.jpg" alt="网站域名历史黑名单检测与清洗"> </div> <p>网站域名历史黑名单检测与清洗</p> </div> </a> <a href="/guanjianciyanjiu/4538.html" title="网站页面Brotli压缩部署指南"> <div class="recommendList"> <div class="recommendListImg"> <img src="/uploads/auto/202609/43ab36a8d1163050.jpg" alt="网站页面Brotli压缩部署指南"> </div> <p>网站页面Brotli压缩部署指南</p> </div> </a> <a href="/guanjianciyanjiu/4540.html" title="网站建设初期服务器选型避坑指南"> <div class="recommendList"> <div class="recommendListImg"> <img src="/uploads/auto/202609/233d2b3910cca281.jpg" alt="网站建设初期服务器选型避坑指南"> </div> <p>网站建设初期服务器选型避坑指南</p> </div> </a> <a href="/guanjianciyanjiu/4535.html" title="网站设计全流程解析助力营销转型"> <div class="recommendList"> <div class="recommendListImg"> <img src="/uploads/auto/202609/0bde12b2b72ed9ea.jpg" alt="网站设计全流程解析助力营销转型"> </div> <p>网站设计全流程解析助力营销转型</p> </div> </a> <a href="/guanjianciyanjiu/4544.html" title="python set add"> <div class="recommendList"> <div class="recommendListImg"> <img src="/uploads/auto/202609/8467b5b2dbbe542f.jpg" alt="python set add"> </div> <p>python set add</p> </div> </a> <a href="/guanjianciyanjiu/4543.html" title="Cookie弹窗合规设置法律解读"> <div class="recommendList"> <div class="recommendListImg"> <img src="/uploads/auto/202609/ff4e2dc233f2b646.jpg" alt="Cookie弹窗合规设置法律解读"> </div> <p>Cookie弹窗合规设置法律解读</p> </div> </a> <a href="/guanjianciyanjiu/4551.html" title="kotlin async"> <div class="recommendList"> <div class="recommendListImg"> <img src="/uploads/auto/202609/8213a1cff85f5ad5.jpg" alt="kotlin async"> </div> <p>kotlin async</p> </div> </a> </div> </div> <div class="recommend"> <div class="recommendTitle"> 最近发布 </div> <div class="articleSideLinks"> <a class="articleSideItem" href="/guanjianciyanjiu/6193.html" title="网站ICP备案为何总被驳回？常见原因全解析"> <span class="articleSideDot"></span> <span class="articleSideTitle">网站ICP备案为何总被驳回？常见原因全解析</span> <span class="articleSideDate">09-24</span> </a> <a class="articleSideItem" href="/guanjianciyanjiu/6189.html" title="robots.txt高级配置技巧：SEO优化必备指南"> <span class="articleSideDot"></span> <span class="articleSideTitle">robots.txt高级配置技巧：SEO优化必备指南</span> <span class="articleSideDate">09-24</span> </a> <a class="articleSideItem" href="/guanjianciyanjiu/6187.html" title="网站设计服务全程监控如何保障运行安全？"> <span class="articleSideDot"></span> <span class="articleSideTitle">网站设计服务全程监控如何保障运行安全？</span> <span class="articleSideDate">09-24</span> </a> <a class="articleSideItem" href="/guanjianciyanjiu/6185.html" title="创新网站设计如何引领行业新变革？"> <span class="articleSideDot"></span> <span class="articleSideTitle">创新网站设计如何引领行业新变革？</span> <span class="articleSideDate">09-24</span> </a> <a class="articleSideItem" href="/guanjianciyanjiu/6183.html" title="建设网站零风险的关键步骤解析"> <span class="articleSideDot"></span> <span class="articleSideTitle">建设网站零风险的关键步骤解析</span> <span class="articleSideDate">09-24</span> </a> <a class="articleSideItem" href="/guanjianciyanjiu/6182.html" title="外贸网站如何实现PayPal和Stripe支付无缝集成？"> <span class="articleSideDot"></span> <span class="articleSideTitle">外贸网站如何实现PayPal和Stripe支付无缝集成？</span> <span class="articleSideDate">09-24</span> </a> <a class="articleSideItem" href="/guanjianciyanjiu/6178.html" title="一键询盘按钮优化：提升转化率的实战策略"> <span class="articleSideDot"></span> <span class="articleSideTitle">一键询盘按钮优化：提升转化率的实战策略</span> <span class="articleSideDate">09-24</span> </a> <a class="articleSideItem" href="/guanjianciyanjiu/6172.html" title="域名选择如何影响网站成败？科学方法解析"> <span class="articleSideDot"></span> <span class="articleSideTitle">域名选择如何影响网站成败？科学方法解析</span> <span class="articleSideDate">09-23</span> </a> </div> </div> <div class="recommend"> <div class="recommendTitle"> 最新发布 </div> <div class="articleSideLinks"> <a class="articleSideItem" href="/guanjianciyanjiu/6193.html" title="网站ICP备案为何总被驳回？常见原因全解析"> <span class="articleSideDot"></span> <span class="articleSideTitle">网站ICP备案为何总被驳回？常见原因全解析</span> <span class="articleSideDate">09-24</span> </a> <a class="articleSideItem" href="/guanjianciyanjiu/6189.html" title="robots.txt高级配置技巧：SEO优化必备指南"> <span class="articleSideDot"></span> <span class="articleSideTitle">robots.txt高级配置技巧：SEO优化必备指南</span> <span class="articleSideDate">09-24</span> </a> <a class="articleSideItem" href="/guanjianciyanjiu/6187.html" title="网站设计服务全程监控如何保障运行安全？"> <span class="articleSideDot"></span> <span class="articleSideTitle">网站设计服务全程监控如何保障运行安全？</span> <span class="articleSideDate">09-24</span> </a> <a class="articleSideItem" href="/guanjianciyanjiu/6185.html" title="创新网站设计如何引领行业新变革？"> <span class="articleSideDot"></span> <span class="articleSideTitle">创新网站设计如何引领行业新变革？</span> <span class="articleSideDate">09-24</span> </a> <a class="articleSideItem" href="/guanjianciyanjiu/6183.html" title="建设网站零风险的关键步骤解析"> <span class="articleSideDot"></span> <span class="articleSideTitle">建设网站零风险的关键步骤解析</span> <span class="articleSideDate">09-24</span> </a> <a class="articleSideItem" href="/guanjianciyanjiu/6182.html" title="外贸网站如何实现PayPal和Stripe支付无缝集成？"> <span class="articleSideDot"></span> <span class="articleSideTitle">外贸网站如何实现PayPal和Stripe支付无缝集成？</span> <span class="articleSideDate">09-24</span> </a> <a class="articleSideItem" href="/guanjianciyanjiu/6178.html" title="一键询盘按钮优化：提升转化率的实战策略"> <span class="articleSideDot"></span> <span class="articleSideTitle">一键询盘按钮优化：提升转化率的实战策略</span> <span class="articleSideDate">09-24</span> </a> <a class="articleSideItem" href="/guanjianciyanjiu/6172.html" title="域名选择如何影响网站成败？科学方法解析"> <span class="articleSideDot"></span> <span class="articleSideTitle">域名选择如何影响网站成败？科学方法解析</span> <span class="articleSideDate">09-23</span> </a> </div> </div> <div class="recommend"> <div class="recommendTitle"> 大家都在看 </div> <div class="watchLists"> <a href="/guanjianciyanjiu/5970.html" title="网站设计全流程解析：如何打造优质品牌？"> <div class="watchList"> <div class="watchListTitle"> <div class="watchListTitleDot"></div> <h3>网站设计全流程解析：如何打造优质品牌？</h3> </div> <div class="watchListImg"><img class="lazyload" src="/template/pc/skin/images/default.jpg" data-original="/uploads/auto/202609/6548faeed89093dc.jpg" alt="" onerror="nofind(this)"></div> </div> </a> <a href="/guanjianciyanjiu/4836.html" title="ppt文字方向"> <div class="watchList"> <div class="watchListTitle"> <div class="watchListTitleDot"></div> <h3>ppt文字方向</h3> </div> <div class="watchListImg"><img class="lazyload" src="/template/pc/skin/images/default.jpg" data-original="/uploads/auto/202609/a7813e39c01a0491.jpg" alt="" onerror="nofind(this)"></div> </div> </a> <a href="/guanjianciyanjiu/4859.html" title="律师事务所如何做品牌型网站建设？"> <div class="watchList"> <div class="watchListTitle"> <div class="watchListTitleDot"></div> <h3>律师事务所如何做品牌型网站建设？</h3> </div> <div class="watchListImg"><img class="lazyload" src="/template/pc/skin/images/default.jpg" data-original="/uploads/auto/202609/8dbe621a594bd802.jpg" alt="" onerror="nofind(this)"></div> </div> </a> <a href="/guanjianciyanjiu/5840.html" title="网站制作与整合营销如何协同提升品牌价值？"> <div class="watchList"> <div class="watchListTitle"> <div class="watchListTitleDot"></div> <h3>网站制作与整合营销如何协同提升品牌价值？</h3> </div> <div class="watchListImg"><img class="lazyload" src="/template/pc/skin/images/default.jpg" data-original="/uploads/auto/202609/b01192698b814b19.jpg" alt="" onerror="nofind(this)"></div> </div> </a> <a href="/guanjianciyanjiu/4996.html" title="磁盘0磁盘分区1是什么意思"> <div class="watchList"> <div class="watchListTitle"> <div class="watchListTitleDot"></div> <h3>磁盘0磁盘分区1是什么意思</h3> </div> <div class="watchListImg"><img class="lazyload" src="/template/pc/skin/images/default.jpg" data-original="/uploads/auto/202609/7520651d70424679.jpg" alt="" onerror="nofind(this)"></div> </div> </a> <a href="/guanjianciyanjiu/4618.html" title="网站设计理念革新打造品牌标杆"> <div class="watchList"> <div class="watchListTitle"> <div class="watchListTitleDot"></div> <h3>网站设计理念革新打造品牌标杆</h3> </div> <div class="watchListImg"><img class="lazyload" src="/template/pc/skin/images/default.jpg" data-original="/uploads/auto/202609/670e1a2d46bbe896.jpg" alt="" onerror="nofind(this)"></div> </div> </a> <a href="/guanjianciyanjiu/6079.html" title="网站设计能带来流量吗？优化设计的五大核心技巧"> <div class="watchList"> <div class="watchListTitle"> <div class="watchListTitleDot"></div> <h3>网站设计能带来流量吗？优化设计的五大核心技巧</h3> </div> <div class="watchListImg"><img class="lazyload" src="/template/pc/skin/images/default.jpg" data-original="/uploads/auto/202609/6eb85a5ff893c2df.jpg" alt="" onerror="nofind(this)"></div> </div> </a> <a href="/guanjianciyanjiu/4981.html" title="网站设计趋势解析"> <div class="watchList"> <div class="watchListTitle"> <div class="watchListTitleDot"></div> <h3>网站设计趋势解析</h3> </div> <div class="watchListImg"><img class="lazyload" src="/template/pc/skin/images/default.jpg" data-original="/uploads/auto/202609/3ae58833ff1d729a.jpg" alt="" onerror="nofind(this)"></div> </div> </a> </div> </div> </div> </div> </div> <div class="rightBar"> <img src="/template/pc/skin/images/rightbar.png" alt=""> </div> <div class="footer"> <script language="javascript" type="text/javascript" src="/template/pc/skin/js/jquery.js"></script> <script language="javascript" type="text/javascript" src="/template/pc/skin/js/lazy.js"></script> <p class="footerTig">Copyright © 2026 安枢金杰优化版权所有 <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">鲁ICP备2026027640号-25</a></p>  <div style="color:#ffffff;">免责声明：本站部分内容来源于网络整理，仅用于信息展示。如有侵权或信息有误，请通过电话或邮箱联系处理。</div>  <a class="footerPhone" href="https://www.jjsfjy.com/sitemap.xml">网站地图</a> <div style="clear: both"></div> <div style="display: none"> </div> </div>   <div class="codex-friendlinks" style="text-align:center;line-height:1.8;margin:8px auto 0;white-space:normal;">友情链接：<a href="http://www.weibo.com" target="_blank" style="display:inline-block;margin-left:12px;white-space:nowrap;color:inherit;">微博</a></div> <script> $("img.lazyload").lazyload(); $("img.lazyload").lazyload({ container: $(".right"), skip_invisible: false }); $("img.lazyload").lazyload({ effect: "fadeIn" }); </script> <script language="javascript" type="text/javascript" src="/template/pc/skin/js/info.js"></script> </body> </html>