在网页开发中，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"><img title="在线运行html(图2)" src="image.jpg" alt="描述图像内容"></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> <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></div> <div class="article-extra"> <div class="row-item">当前栏目：<a href="/gongsidongtai/" title="公司动态">公司动态</a></div> <div class="row-item">当前标签： <span id="current-tags" class="tag-cloud" data-tags="" data-search-url="https://www.baimiwang.com/search.html?keywords="></span> </div> <div class="row-item">本文链接：<a href="https://www.baimiwang.com/xinwendongtai/2833.html" title="在线运行html">https://www.baimiwang.com/xinwendongtai/2833.html</a></div> </div> <div class="fy"> <ul> <li> <a href="/xinwendongtai/2832.html" title="如何设计高效网站结构？">上一篇: 如何设计高效网站结构？</a> </li> <li> <a href="/xinwendongtai/2836.html" title="Meta 澄清：未使用用户未发布的照片训练 AI 模型">下一篇: Meta 澄清：未使用用户未发布的照片训练 AI 模型</a> </li> </ul> </div> </div> </div> <aside class="article-side"> <div class="side-card"> <h3>热点文章</h3> <ul class="side-list"> <li><a href="/xinwendongtai/2511.html" title="nvarchar和varchar的区别">nvarchar和varchar的区别</a></li> <li><a href="/xinwendongtai/4589.html" title="网站页面缓存策略配置白皮书">网站页面缓存策略配置白皮书</a></li> <li><a href="/xinwendongtai/225.html" title="百度今日上线 “闪电算法”，优化网站打开速度？">百度今日上线 “闪电算法”，优化网站打开速度？</a></li> <li><a href="/xinwendongtai/1572.html" title="外贸网站加载速度测试">外贸网站加载速度测试</a></li> <li><a href="/xinwendongtai/1315.html" title="springboot引入第三方jar">springboot引入第三方jar</a></li> <li><a href="/xinwendongtai/2709.html" title="网站建设基础知识科普：适合所有企业主">网站建设基础知识科普：适合所有企业主</a></li> <li><a href="/xinwendongtai/965.html" title="网站建设要注册ICP许可证吗？">网站建设要注册ICP许可证吗？</a></li> <li><a href="/xinwendongtai/4397.html" title="高效网站建设全流程智能转化">高效网站建设全流程智能转化</a></li> </ul> </div> <div class="side-card"> <h3>标签推荐</h3> <div id="recommend-tags" class="tag-cloud" data-tags="网站优化排名 专业seo网站建设 网站推广 网站优化" data-search-url="https://www.baimiwang.com/search.html?keywords=">网站优化排名 专业seo网站建设 网站推广 网站优化</div> </div> <div class="side-card"> <h3>推荐栏目</h3> <ul class="side-list"> <li><a href="/gongsidongtai/" title="公司动态">公司动态</a></li> <li><a href="/xingyezixun/" title="行业资讯">行业资讯</a></li> </ul> </div> </aside> </div> </div> <style> .rkftr-wrap{ margin-top:42px; background:#111428; color:#eef3ff; clear:both; position:relative; z-index:1; } .hire-section + .rkftr-wrap{ margin-top:0 !important; } .rkftr-wrap a{ color:#dbe6ff; transition:all .2s ease; } .rkftr-wrap a:hover{ color:#5e87eb; } .rkftr-container{ width:min(1280px,calc(100% - 32px)); margin:0 auto; } .rkftr-friends{ background:#1b2654; border-bottom:1px solid rgba(162,184,247,.2); padding:12px 0; } .rkftr-friends-row{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px 12px; line-height:1.8; } .rkftr-friends-title{ color:#fff; font-size:16px; font-weight:700; } .rkftr-friends-row a{ font-size:14px; } .rkftr-main{ padding:40px 0 24px; } .rkftr-grid{ display:grid; grid-template-columns:1.45fr 1.2fr 1fr .9fr; gap:26px; } .rkftr-title{ margin:0 0 18px; font-size:32px; font-weight:700; color:#fff; line-height:1.2; } .rkftr-title span{ color:#5e87eb; } .rkftr-col-title{ margin:4px 0 18px; font-size:20px; font-weight:700; color:#fff; line-height:1.2; } .rkftr-brand-logo{ width:100%; max-width:225px; height:58px; margin-bottom:12px; display:flex; align-items:center; } .rkftr-brand-logo img{ width:100%; height:100%; object-fit:contain; object-position:left center; } .rkftr-desc{ margin:0; color:#e7edff; font-size:16px; line-height:1.85; } .rkftr-desc + .rkftr-desc{ margin-top:10px; } .rkftr-list{ margin:0; padding:0; list-style:none; } .rkftr-list li{ margin:0 0 12px; color:#eef3ff; font-size:16px; line-height:1.7; } .rkftr-list li:last-child{ margin-bottom:0; } .rkftr-list strong{ color:#5e87eb; font-weight:700; margin-right:6px; } .rkftr-nav{ margin:0; padding:0; list-style:none; } .rkftr-nav li{ margin:0 0 10px; } .rkftr-nav a{ font-size:16px; color:#eef3ff; } .rkftr-logo-panel{ width:100%; max-width:240px; min-height:92px; border-radius:12px; border:1px solid rgba(255,255,255,.2); background:#fff; padding:14px 16px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; } .rkftr-logo-panel img{ width:100%; max-width:100%; height:64px; object-fit:contain; object-position:center; } .rkftr-btn{ display:inline-block; min-width:160px; height:44px; line-height:44px; text-align:center; border-radius:4px; background:#5e87eb; color:#fff !important; font-size:18px; font-weight:600; } .rkftr-btn:hover{ background:#4f76d3; color:#fff !important; } .rkftr-bottom{ border-top:1px solid rgba(255,255,255,.15); padding:18px 0 22px; } .rkftr-bottom-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; } .rkftr-copy{ font-size:16px; color:#eef3ff; line-height:1.7; } .rkftr-meta{ font-size:16px; color:#e3ebff; line-height:1.7; } .rkftr-meta .sep{ margin:0 8px; opacity:.55; } .fixed-right-nav a{ border-radius:10px 0 0 10px; box-shadow:0 6px 18px rgba(17,20,40,.22); position:relative; text-decoration:none !important; } .fixed-right-nav a i{ display:block; width:18px; height:18px; margin:8px auto 0; background:none !important; position:relative; } .fixed-right-nav a i::before{ display:block; width:100%; height:100%; text-align:center; line-height:18px; font-size:16px; font-weight:700; color:#fff; } .fixed-right-nav .backtop i{ margin-top:16px; } .fixed-right-nav .backtop i::before{ content:"^"; font-size:24px; line-height:14px; } .fixed-right-nav .msg i::before{ content:"?"; } .fixed-right-nav .decora i::before{ content:"!"; } @media (max-width:1200px){ .rkftr-grid{ grid-template-columns:1fr 1fr; gap:20px; } } @media (max-width:768px){ .rkftr-grid{ grid-template-columns:1fr; } .rkftr-title{ font-size:24px; } .rkftr-col-title{ font-size:22px; } .rkftr-desc, .rkftr-nav a, .rkftr-list li{ font-size:16px; line-height:1.8; } .rkftr-logo-panel{ max-width:280px; } .rkftr-copy, .rkftr-meta{ font-size:14px; } } </style> <div class="rkftr-wrap"> <div class="rkftr-friends"> <div class="rkftr-container rkftr-friends-row"> <div class="rkftr-friends-title">友情链接：</div> <a href="https://www.hameedrazi.com/" target="_blank" >哈米德网络信息</a> </div> </div> <div class="rkftr-main"> <div class="rkftr-container"> <div class="rkftr-grid"> <div> <h3 class="rkftr-title">白名<span>科技</span></h3> <p class="rkftr-desc">我们围绕企业数字化需求，提供网站建设、系统开发与长期运维支持，帮助业务持续稳定增长。</p> <p class="rkftr-desc">从方案咨询到实施交付，我们坚持可执行、可扩展、可落地，协助企业提升效率与品牌竞争力。</p> </div> <div> <h5 class="rkftr-col-title">联系信息</h5> <ul class="rkftr-list"> <li><strong>地址</strong> 上海市浦东新区张江高科技园区科苑路 88 号 3 幢</li> <li><strong>电话</strong> 021-6100 2866</li> <li><strong>手机</strong> 138 1652 3786</li> <li><strong>邮箱</strong> servicekj@baimiwang.com</li> </ul> </div> <div> <h5 class="rkftr-col-title">服务栏目</h5> <ul class="rkftr-nav"> <li><a href="https://www.baimiwang.com/">网站首页</a></li> <li><a href="/chanpinzhongxin/">产品中心</a></li> <li><a href="/xinwendongtai/">新闻动态</a></li> <li><a href="/chenggonganli/">成功案例</a></li> <li><a href="/rongyuzizhi/">荣誉资质</a></li> <li><a href="/guanyugongsi/">关于公司</a></li> </ul> </div> <div> <h5 class="rkftr-col-title">网站标识</h5> <div class="rkftr-logo-panel"> <img src="/uploads/allimg/20251214/1-251214202614Y6.png" alt="网站Logo" onerror="this.onerror=null;this.src='/favicon.ico';"> </div> <a class="rkftr-btn" href="https://www.baimiwang.com/guanyuwomen/" target="_blank">在线咨询</a> </div> </div> </div> </div> <div class="rkftr-bottom"> <div class="rkftr-container rkftr-bottom-row"> <div class="rkftr-copy">Copyright © 2002-2026 白名网络科技公司 版权所有</div> <div class="rkftr-meta"> <a href="https://www.baimiwang.com/sitemap.xml" target="_blank" rel="nofollow noopener">网站地图</a> <span class="sep">|</span> <span><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">沪ICP备2025136253号-37</a></span> </div> </div> </div> </div> <div class="fixed-right-nav"> <a href="javascript:window.scroll(0,0)" class="backtop"><i></i></a> <a href="https://www.baimiwang.com/guanyuwomen/" target="_blank" class="msg"><i></i>免费咨询</a> <a href="https://www.baimiwang.com/chanpinzhongxin/" target="_blank" class="decora"><i></i>投诉建议</a> </div> <script> var _hmt = _hmt || []; (function() { function loadHm() { if (window.__rkHmLoaded) return; window.__rkHmLoaded = true; var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?ad4bcb04352f6c2187454fd0a4c9635e"; hm.async = true; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); } if (window.requestIdleCallback) { window.requestIdleCallback(loadHm, { timeout: 3000 }); } else { setTimeout(loadHm, 1200); } })(); </script> <script> (function () { var logo = "/uploads/allimg/20251214/1-251214202614Y6.png"; if (!logo) return; function isNoPic(src) { return !src || /(?:^|\/)not_adv\.jpg(?:$|\?)/i.test(src); } function normalizeCoverImages() { var imgs = document.querySelectorAll('.blog-single-item .blog-image img, .project-item img'); for (var i = 0; i < imgs.length; i++) { var img = imgs[i]; var src = (img.getAttribute('src') || '').trim(); if (isNoPic(src)) { img.setAttribute('src', logo); if (img.classList) img.classList.add('logo-fallback'); } img.onerror = function () { this.onerror = null; this.src = logo; if (this.classList) this.classList.add('logo-fallback'); }; } } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', normalizeCoverImages); } else { normalizeCoverImages(); } })(); </script> <script> (function () { function optimizeImageLoading() { var firstBannerImg = document.querySelector(".banner-box .banner li:first-child img"); var imgs = document.querySelectorAll("img"); for (var i = 0; i < imgs.length; i++) { var img = imgs[i]; if (!img.getAttribute("decoding")) { img.setAttribute("decoding", "async"); } if (img === firstBannerImg) { if (!img.getAttribute("fetchpriority")) img.setAttribute("fetchpriority", "high"); if (!img.getAttribute("loading")) img.setAttribute("loading", "eager"); continue; } var inBanner = !!img.closest(".banner-box"); if (!inBanner && !img.getAttribute("loading")) { img.setAttribute("loading", "lazy"); } } } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", optimizeImageLoading); } else { optimizeImageLoading(); } })(); </script> <script> (function () { var slideSrc = "/template/pc/skin/js/jquery.superslide.2.1.1.js"; function reInitNavSlide() { if (!window.jQuery) return false; if (window.__rkNavSlideBoundFor === window.jQuery) return true; if (!jQuery.fn || typeof jQuery.fn.slide !== 'function') return false; try { if (jQuery("#nav").length) { jQuery("#nav").slide({ type: "menu", titCell: ".nLi", targetCell: ".sub", effect: "slideDown", delayTime: 300, triggerTime: 0, returnDefault: true }); } window.__rkNavSlideBoundFor = window.jQuery; return true; } catch (e) { return false; } } function ensureSlidePluginThenInitNav() { if (!window.jQuery) return; if (reInitNavSlide()) return; if (window.__rkSlidePluginLoading) return; window.__rkSlidePluginLoading = true; var script = document.createElement("script"); script.src = slideSrc; script.async = true; script.onload = function () { window.__rkSlidePluginLoading = false; reInitNavSlide(); }; script.onerror = function () { window.__rkSlidePluginLoading = false; }; document.head.appendChild(script); } function bootstrapNavSlideFix() { ensureSlidePluginThenInitNav(); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", bootstrapNavSlideFix); } else { bootstrapNavSlideFix(); } if (window.addEventListener) { window.addEventListener("load", bootstrapNavSlideFix); } else if (window.attachEvent) { window.attachEvent("onload", bootstrapNavSlideFix); } setTimeout(ensureSlidePluginThenInitNav, 600); })(); </script> <script type="text/javascript"> (function () { function parseTags(raw) { if (!raw) return []; return raw.split(/[\uFF0C,\u3001|\s]+/).map(function (s) { return s.replace(/^\s+|\s+$/g, ''); }).filter(Boolean); } function renderTagCloud(el) { if (!el) return; var tags = parseTags(el.getAttribute('data-tags') || el.textContent || ''); var base = el.getAttribute('data-search-url') || '/search.html?keywords='; if (!tags.length) { el.innerHTML = '<span>暂无标签</span>'; return; } var html = ''; for (var i = 0; i < tags.length; i++) { var tag = tags[i]; html += '<a href="' + base + encodeURIComponent(tag) + '" title="' + tag + '">' + tag + '</a>'; } el.innerHTML = html; } renderTagCloud(document.getElementById('current-tags')); renderTagCloud(document.getElementById('recommend-tags')); })(); </script> </body> </html>