从零开始HTML搭建自我介绍网页-html教程-PHP中文网

必须用纯文本编辑器（如vs code、notepad++或macos的textedit纯文本模式），保存为utf-8编码（无bom）、.html后缀文件；最小结构缺一不可：、、（含和）、；图片等资源用相对路径，中文显示正常且页面可双击打开。

从零开始html搭建自我介绍网页

直接上手写一个能打开、能看、能改的自我介绍网页，不需要框架、不装依赖，用记事本就能完成。

用什么编辑器写 HTML 最不踩坑

别用 Word 或 WPS 写 HTML —— 它们会偷偷加格式字符，保存后打开是乱码或空白页。必须用纯文本编辑器：VS Code（免费）、Notepad++（Windows）、TextEdit（macOS 切到“纯文本”模式）。

保存时选编码为 UTF-8（不是 UTF-8 with BOM）
文件名必须带 .html 后缀，比如 index.html 或 about.html
写完双击打开，浏览器地址栏看到的是 file:/// 开头，说明没走服务器，完全 OK

最简 HTML 结构里哪些标签不能少

浏览器只认标准结构，缺了、、会导致样式错乱或中文显示为方块。

下面这段就是最小可用模板，复制粘贴进去就能运行：



  <meta charset="UTF-8"><title>我的自我介绍</title><h1>张三</h1>
  <p>前端开发者，喜欢写干净的代码。</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill2900" title="Markdown to HTML"><img
														src="https://img.php.cn/upload/skill/000/000/081/178938727468962.jpg" alt="Markdown to HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill2900" title="Markdown to HTML" class="overflowclass">Markdown to HTML</a>
													<p class="overflowclass">{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill2900" title="Markdown to HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>

<meta charset="UTF-8"> 必须有，否则中文会变问号
lang="zh-CN" 告诉屏幕阅读器这是中文，也影响字体回退行为
<title></title> 内容会显示在浏览器标签页上，不是页面正文

加照片和联系方式时容易出错的路径写法

本地测试阶段，所有图片、CSS 都得用相对路径。假设你的 index.html 和照片 avatar.jpg 在同一个文件夹，就直接写：

@@##@@

如果照片放在 images/ 子目录下，路径就得写成：

@@##@@

路径区分大小写：Images/ ≠ images/
不要写 C:\xxx\avatar.jpg 或 http://localhost/xxx —— 这些在双击打开时全失效
邮箱链接要写成 @#@#@#@#@#@#@#@#@#@0，不是 mailto:// 也不是 email:

加点样式让页面不那么“默认”

不用外部 CSS 文件，直接在里加 <style></style> 就够用。比如居中标题、调大字号、加点留白：

<style>
  body {
    font-family: -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB";
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
  }
  h1 {
    color: #333;
    text-align: center;
  }
  img {
    display: block;
    margin: 1rem auto;
    max-width: 100%;
    height: auto;
  }
</style>