最后编辑于 2025年8月16日

基础编写HTML静态页面代码

在互联网技术的世界中，HTML（Hypertext Markup Language）作为网页的基本结构语言，承载着构建万维网页面的重要使命。对于初学者来说，掌握基础HTML静态页面代码的编写是踏入前端开发领域的第一步。本文将简要介绍如何从一个简单的“Hello World”示例起步，逐步深入学习。

什么是HTML？

HTML是一种超文本标记语言，它定义了网页的结构和内容。通过一系列标签实现对文字、图片、链接等元素进行排版与组织，使得我们在浏览器中看到的丰富多彩的页面得以呈现。

编写第一个HTML文件

新建文件：首先我们创建一个名为“index.html”的文件（注意文件扩展名必须是.html）。
编写代码：
```
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
            <title>我的第一个网页</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>
```
这段代码包含了HTML文档的基本结构：
- DOCTYPE声明：告知浏览器所使用的HTML版本，这里使用的是XHTML1.0，即。
- 标签：定义整个页面的根元素。
- 标签：包含页面的元数据，如字符编码、作者、关键词等。
  - 标签</strong>：定义网页的标题，通常在浏览器标签处显示。</li> </ul> </li> <li><strong>标签</strong>：包含网页的可见内容。 <ul> <li><strong> <p>标签</strong>：段落标签，用来定义文本的基本结构和样式。</li> </ul> </li> </ul> </li> <li> <p><strong>保存并预览</strong>：</p> <ul> <li>保存该文件。</li> <li>使用浏览器打开此文件，如Chrome、Firefox或Safari，你将看到“Hello World!”的文字显示在中心位置。</li> </ul> </li> </ol> <h3>HTML基础知识</h3> <ol> <li> <p><strong>元素标签</strong>：HTML由一系列结构化的元素标签组成。这些标签有开始和结束标签（例如</p> <div>…</div> <p>），用于定义网页的结构。</p> </li> <li> <p><strong>属性</strong>：许多标签可以有属性，它们提供了更多的信息来描述元素的行为或外观。</p> </li> <li> <p><strong>注释</strong>：在代码中使用注释可以提高代码的可读性，使其他阅读者和自己以后再次查找都更加方便。使用“”进行注释。</p> </li> <li> <p><strong>文本内容与样式</strong>：HTML的基本文本格式包括加粗（<b>）、斜体（<i>）和超链接（<a>）。通过添加CSS样式，可以进一步增强网页的视觉效果。</p> </li> </ol> <h3>常用标签一览</h3> <p>以下是部分常用的HTML标签及其功能：</p> <ul> <li> <p><strong></p> <h1>–</p> <h6></strong>：标题标签，分别对应从一级到六级的标题。</p> </li> <li> <p><strong></p> <p></strong>：段落标签。</p> </li> <li> <p><strong></p> <div></strong>：容器标签，可以将其他标签元素包在其中进行管理。</p> </li> <li> <p><strong><span></strong>：行内元标签，常用于对文本进行样式处理。</p> </li> <li> <p><strong><a></strong>：超链接标签，定义了链接到的页面地址、打开方式等。</p> </li> <li> <p><strong><img></strong>：嵌入图片的标签，通常用于展示图片。</p> </li> <li> <p><strong></p> <table>、</p> <tr>、</p> <td></strong>：表格元素，用于布局和显示行列结构的文本或数据。</p> </li> </ul> <p>通过对上述基础知识的学习和实践，相信你已经掌握了HTML基础代码编写的技巧。在今后的前端开发道路上，继续深入学习CSS与JavaScript等技能将助力你完成更加丰富多样的网页制作。</p> </div> </div> <div class="singular-card"> <div class="singular-author"> <div class="author-card"> <div class="author-avatar"> </div> <div class="author-description"> <a class="author-link" href="http://www.gzgengdong.com/author/author">author</a> <p class="author-tagline"></p> </div> </div> </div> <div class="singular-meta"> <div class="singular-categories"> <div class="categories-indicator"> 分类： </div> <div class="singular-category"> <a href="http://www.gzgengdong.com/category/news"> 最新动态 </a> </div> </div> </div> </div> <div class="singular-adjacent-posts"> <div class="singular-adjacent-post singular-previous-post panel"> <h3>Previous Post</h3> <a class="singular-adjacent-post-link" href="http://www.gzgengdong.com/683.html"> </a> </div> <div class="singular-adjacent-post singular-next-post panel"> <h3>Next Post</h3> <a class="singular-adjacent-post-link" href="http://www.gzgengdong.com/700.html"> </a> </div> </div> </div> <p class="no-comments">评论已关闭。</p> </div> </article> <aside class="minimalistflex-sidebar"> <ul class="sidebar"> <li id="block-2" class="panel widget widget_block widget_search"><form role="search" method="get" action="http://www.gzgengdong.com/" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search" ><label class="wp-block-search__label" for="wp-block-search__input-1" >搜索</label><div class="wp-block-search__inside-wrapper" ><input class="wp-block-search__input" id="wp-block-search__input-1" placeholder="" value="" type="search" name="s" required /><button aria-label="搜索" class="wp-block-search__button wp-element-button" type="submit" >搜索</button></div></form></li><li id="block-3" class="panel widget widget_block"><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">近期文章</h2><ul class="wp-block-latest-posts__list wp-block-latest-posts"><li><a class="wp-block-latest-posts__post-title" href="http://www.gzgengdong.com/5015.html">（无标题）</a></li> <li><a class="wp-block-latest-posts__post-title" href="http://www.gzgengdong.com/5007.html">（无标题）</a></li> <li><a class="wp-block-latest-posts__post-title" href="http://www.gzgengdong.com/4992.html">（无标题）</a></li> <li><a class="wp-block-latest-posts__post-title" href="http://www.gzgengdong.com/5013.html">（无标题）</a></li> <li><a class="wp-block-latest-posts__post-title" href="http://www.gzgengdong.com/5012.html">（无标题）</a></li> </ul></div></li><li id="block-4" class="panel widget widget_block"><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">近期评论</h2><div class="no-comments wp-block-latest-comments">您尚未收到任何评论。</div></div></li><li id="block-5" class="panel widget widget_block"><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">归档</h2><ul class="wp-block-archives-list wp-block-archives"> <li><a href='http://www.gzgengdong.com/date/2025/10'>2025 年 10 月</a></li> <li><a href='http://www.gzgengdong.com/date/2025/09'>2025 年 9 月</a></li> <li><a href='http://www.gzgengdong.com/date/2025/08'>2025 年 8 月</a></li> <li><a href='http://www.gzgengdong.com/date/2025/07'>2025 年 7 月</a></li> </ul></div></li><li id="block-6" class="panel widget widget_block"><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">分类</h2><ul class="wp-block-categories-list wp-block-categories"> <li class="cat-item cat-item-3"><a href="http://www.gzgengdong.com/category/news">最新动态</a> </li> </ul></div></li> </ul> </aside> </main> <ul class="minimalistflex-controls"> <li><a href="#" aria-label="返回页首"><i class="dashicons dashicons-arrow-up-alt"></i></a></li> </ul> <footer class="minimalistflex-footer"> <div class="minimalistflex-footer-widgets-container"> </div> <div class="minimalistflex-footer-credits"> <div class="footer-blog-description"> <div class="footer-blog-title"> <a href="http://www.gzgengdong.com" class="blog-title-link">广州更懂信息科技有限公司</a> </div> </div> <div class="footer-credits"> <a href="https://onmyodev.com/">MinimalistFlex</a> 主题。 </div> </div> </footer> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/sites/23/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/minimalistflex/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <style id="minimalistflex-color-css"> :root { --minimalistflex-header: #000000; --minimalistflex-default: #000000; --minimalistflex-level3-dark: #666666; --minimalistflex-link: #004774; --minimalistflex-link-hover: #003663; --minimalistflex-header-bg: #ffffff; --minimalistflex-header-text: #000000; --minimalistflex-header-menu: #f7f7f7; --minimalistflex-header-sidebar: #f0f0f0; --minimalistflex-secondary-menu-bg: #fcfcfc; --minimalistflex-secondary-menu-text: #000000; --minimalistflex-level1: #ffffff; --minimalistflex-level2: #f7f7f7; --minimalistflex-tint: #ffd900; --minimalistflex-tint-dark: #c1a400; --minimalistflex-tint-alt: #0060c1; --minimalistflex-tint-contrast: #00281d; --minimalistflex-contrast: #000000; --minimalistflex-contrast-dark: #ffffff; --minimalistflex-footer-text: #000000; --minimalistflex-footer-bg: #ffffff; --minimalistflex-max-height: auto; --minimalistflex-shadow: rgba(0, 0, 0, 0.19); --minimalistflex-shadow-light: rgba(0, 0, 0, 0.05); --minimalistflex-content-blend: 50%; --minimalistflex-sidebar-blend: 75%; } </style> <style> :root { --minimalistflex-featured: "精选"; --minimalistflex-author: "文章作者"; --minimalistflex-author-admin: "管理员"; } </style><script id="daisy-links-script-js-extra"> var daisyLinks = {"disableRightClick":""}; //# sourceURL=daisy-links-script-js-extra </script> <script src="http://www.gzgengdong.com/wp-content/plugins/daisy-links/assets/js/daisy-links.js" id="daisy-links-script-js"></script> <script src="http://www.gzgengdong.com/wp-includes/js/comment-reply.min.js?ver=6.9.4" id="comment-reply-js" async data-wp-strategy="async" fetchpriority="low"></script> <script src="http://www.gzgengdong.com/wp-content/themes/minimalistflex/js/menu.js" id="minimalistflex-script-js"></script> <script id="wp-emoji-settings" type="application/json"> {"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"http://www.gzgengdong.com/wp-includes/js/wp-emoji-release.min.js?ver=6.9.4"}} </script> <script type="module"> /*! This file is auto-generated */ const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))}); //# sourceURL=http://www.gzgengdong.com/wp-includes/js/wp-emoji-loader.min.js </script> </body> </html>