最后编辑于 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-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); } </style> <style> :root { --minimalistflex-featured: "精选"; --minimalistflex-author: "文章作者"; --minimalistflex-author-admin: "管理员"; } </style><link rel='stylesheet' id='style-css' href='http://www.gzgengdong.com/wp-content/themes/minimalistflex/style.css?ver=6.8.2' media='all' /> <link rel='stylesheet' id='dashicons-css' href='http://www.gzgengdong.com/wp-includes/css/dashicons.min.css?ver=6.8.2' media='all' /> <script src="http://www.gzgengdong.com/wp-includes/js/comment-reply.min.js?ver=6.8.2" id="comment-reply-js" async data-wp-strategy="async"></script> <script src="http://www.gzgengdong.com/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script> <script src="http://www.gzgengdong.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script> <script src="http://www.gzgengdong.com/wp-content/themes/minimalistflex/js/menu.js" id="minimalistflex-script-js"></script> </body> </html>